static/tm0.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   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 }