Commit | Line | Data |
94fab3d1 |
1 | var labelType, useGradients, nativeTextSupport, animate; |
2 | |
3 | (function() { |
4 | var ua = navigator.userAgent, |
5 | iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i), |
6 | typeOfCanvas = typeof HTMLCanvasElement, |
7 | nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'), |
8 | textSupport = nativeCanvasSupport |
9 | && (typeof document.createElement('canvas').getContext('2d').fillText == 'function'); |
10 | //I'm setting this based on the fact that ExCanvas provides text support for IE |
11 | //and that as of today iPhone/iPad current text support is lame |
12 | labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML'; |
13 | nativeTextSupport = labelType == 'Native'; |
14 | useGradients = nativeCanvasSupport; |
15 | animate = !(iStuff || !nativeCanvasSupport); |
16 | })(); |
17 | |
18 | var Log = { |
19 | elem: false, |
20 | write: function(text){ |
21 | if (!this.elem) |
22 | this.elem = document.getElementById('log'); |
23 | this.elem.innerHTML = text; |
24 | this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px'; |
25 | } |
26 | }; |
27 | |
28 | |
29 | function init(){ |
30 | //init data |
31 | var json = memnodes[0]; |
32 | //end |
33 | //init TreeMap |
34 | var tm = new $jit.TM.Squarified({ |
35 | //where to inject the visualization |
36 | injectInto: 'infovis', |
37 | //parent box title heights |
38 | titleHeight: 15, |
39 | //enable animations |
40 | animate: animate, |
41 | //box offsets |
42 | offset: 1, |
43 | constrained: true, |
44 | levelsToShow: 2, |
45 | |
46 | //Attach left and right click events |
47 | Events: { |
48 | enable: true, |
49 | onClick: function(node) { |
50 | if(node) tm.enter(node); |
51 | }, |
52 | onRightClick: function() { |
53 | tm.out(); |
54 | } |
55 | }, |
56 | duration: 100, |
57 | //Enable tips |
58 | Tips: { |
59 | enable: true, |
60 | //add positioning offsets |
61 | offsetX: 20, |
62 | offsetY: 20, |
63 | //implement the onShow method to |
64 | //add content to the tooltip when a node |
65 | //is hovered |
66 | onShow: function(tip, node, isLeaf, domElement) { |
67 | var html = "<div class=\"tip-title\">" + node.name |
68 | + "</div><div class=\"tip-text\">"; |
69 | var data = node.data; |
70 | if(data.playcount) { |
71 | html += "play count: " + data.playcount; |
72 | } |
73 | tip.innerHTML = html; |
74 | } |
75 | }, |
76 | //Add the name of the node in the correponding label |
77 | //This method is called once, on label creation. |
78 | onCreateLabel: function(domElement, node){ |
79 | domElement.innerHTML = node.name; |
80 | var style = domElement.style; |
81 | style.display = ''; |
82 | style.border = '1px solid transparent'; |
83 | domElement.onmouseover = function() { |
84 | style.border = '1px solid #9FD4FF'; |
85 | }; |
86 | domElement.onmouseout = function() { |
87 | style.border = '1px solid transparent'; |
88 | }; |
89 | } |
90 | }); |
91 | tm.loadJSON(json); |
92 | tm.refresh(); |
93 | //end |
94 | //add events to radio buttons |
95 | var sq = $jit.id('r-sq'), |
96 | st = $jit.id('r-st'), |
97 | sd = $jit.id('r-sd'); |
98 | var util = $jit.util; |
99 | util.addEvent(sq, 'change', function() { |
100 | if(!sq.checked) return; |
101 | util.extend(tm, new $jit.Layouts.TM.Squarified); |
102 | tm.refresh(); |
103 | }); |
104 | util.addEvent(st, 'change', function() { |
105 | if(!st.checked) return; |
106 | util.extend(tm, new $jit.Layouts.TM.Strip); |
107 | tm.layout.orientation = "v"; |
108 | tm.refresh(); |
109 | }); |
110 | util.addEvent(sd, 'change', function() { |
111 | if(!sd.checked) return; |
112 | util.extend(tm, new $jit.Layouts.TM.SliceAndDice); |
113 | tm.layout.orientation = "v"; |
114 | tm.refresh(); |
115 | }); |
116 | //add event to the back button |
117 | var back = $jit.id('back'); |
118 | $jit.util.addEvent(back, 'click', function() { |
119 | tm.out(); |
120 | }); |
121 | } |