static/public/tm.js

   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   //end
  32   //init TreeMap
  33   var tm = new $jit.TM.Squarified({
  34     //where to inject the visualization
  35     injectInto: 'infovis',
  36     //show only one tree level
  37     levelsToShow: 1,
  38     //parent box title heights
  39     titleHeight: 0,
  40     //enable animations
  41     animate: animate,
  42     //box offsets
  43     offset: 1,
  44     //use canvas text
  45     Label: {
  46       type: labelType,
  47       size: 9,
  48       family: 'Tahoma, Verdana, Arial'
  49     },
  50     //enable specific canvas styles
  51     //when rendering nodes
  52     Node: {
  53       CanvasStyles: {
  54         shadowBlur: 0,
  55         shadowColor: '#000'
  56       }
  57     },
  58     //Attach left and right click events
  59     Events: {
  60       enable: true,
  61       onClick: function(node) {
  62         if(node) tm.enter(node);
  63       },
  64       onRightClick: function() {
  65         tm.out();
  66       },
  67       //change node styles and canvas styles
  68       //when hovering a node
  69       onMouseEnter: function(node, eventInfo) {
  70         if(node) {
  71           //add node selected styles and replot node
  72           node.setCanvasStyle('shadowBlur', 7);
  73           node.setData('color', '#888');
  74           tm.fx.plotNode(node, tm.canvas);
  75           tm.labels.plotLabel(tm.canvas, node);
  76         }
  77       },
  78       onMouseLeave: function(node) {
  79         if(node) {
  80           node.removeData('color');
  81           node.removeCanvasStyle('shadowBlur');
  82           tm.plot();
  83         }
  84       }
  85     },
  86     //duration of the animations
  87     duration: 1000,
  88     //Enable tips
  89     Tips: {
  90       enable: true,
  91       type: 'Native',
  92       //add positioning offsets
  93       offsetX: 20,
  94       offsetY: 20,
  95       //implement the onShow method to
  96       //add content to the tooltip when a node
  97       //is hovered
  98       onShow: function(tip, node, isLeaf, domElement) {
  99         var html = "<div class=\"tip-title\">" + node.name
 100           + "</div><div class=\"tip-text\">";
 101         var data = node.data;
 102         if(data.artist) {
 103           html += "Artist: " + data.artist + "<br />";
 104         }
 105         if(data.playcount) {
 106           html += "Play count: " + data.playcount;
 107         }
 108         if(data.image) {
 109           html += "<img src=\""+ data.image +"\" class=\"album\" />";
 110         }
 111         tip.innerHTML =  html;
 112       }
 113     },
 114     //Implement this method for retrieving a requested
 115     //subtree that has as root a node with id = nodeId,
 116     //and level as depth. This method could also make a server-side
 117     //call for the requested subtree. When completed, the onComplete
 118     //callback method should be called.
 119     request: function(nodeId, level, onComplete){
 120         if (true) {
 121             jQuery.getJSON('jit_tree/'+nodeId+'/3', function(data) {
 122                 onComplete.onComplete(nodeId, data);
 123             });
 124         }
 125         else {
 126             var tree = memnodes[0];
 127             var subtree = $jit.json.getSubtree(tree, nodeId);
 128             $jit.json.prune(subtree, 2);
 129             onComplete.onComplete(nodeId, subtree);
 130         }
 131     },
 132     //Add the name of the node in the corresponding label
 133     //This method is called once, on label creation and only for DOM labels.
 134     onCreateLabel: function(domElement, node){
 135         domElement.innerHTML = node.name;
 136     }
 137   });
 138
 139 if(true) {
 140     jQuery.getJSON('jit_tree/1/2', function(data) {
 141   console.log(data);
 142         tm.loadJSON(data);
 143         tm.refresh();
 144     });
 145 }
 146 else {
 147   //var pjson = eval('(' + json + ')');
 148   var pjson = memnodes[0];
 149   $jit.json.prune(pjson, 2);
 150   console.log(pjson);
 151   tm.loadJSON(pjson);
 152   tm.refresh();
 153 }
 154
 155   var sq = $jit.id('r-sq'),
 156       st = $jit.id('r-st'),
 157       sd = $jit.id('r-sd');
 158   var util = $jit.util;
 159   util.addEvent(sq, 'change', function() {
 160     if(!sq.checked) return;
 161     util.extend(tm, new $jit.Layouts.TM.Squarified);
 162     tm.refresh();
 163   });
 164   util.addEvent(st, 'change', function() {
 165     if(!st.checked) return;
 166     util.extend(tm, new $jit.Layouts.TM.Strip);
 167     tm.layout.orientation = "v";
 168     tm.refresh();
 169   });
 170   util.addEvent(sd, 'change', function() {
 171     if(!sd.checked) return;
 172     util.extend(tm, new $jit.Layouts.TM.SliceAndDice);
 173     tm.layout.orientation = "v";
 174     tm.refresh();
 175   });
 176   //add event to the back button
 177   var back = $jit.id('back');
 178   $jit.util.addEvent(back, 'click', function() {
 179     tm.out();
 180   });
 181 }