data/empathy-log-window.html

   1 <html>
   2   <head>
   3     <style type="text/css">
   4 html, body, div, p {
   5   /* FIXME: how do we set the application font? */
   6   padding: 0;
   7   margin: 0;
   8 }
   9
  10 div.row {
  11   margin-left: 1em;
  12 }
  13
  14 div.row p {
  15   display: inline;
  16   white-space: pre-wrap;
  17 }
  18
  19 span.open:after {
  20   content: "\25BE";
  21   margin-right: 2px;
  22 }
  23
  24 span.closed:after {
  25   content: "\25B8";
  26   margin-right: 2px;
  27 }
  28     </style>
  29     <script type="text/javascript">
  30 function filterNodes (node, tagName)
  31 {
  32   var out = new Array();
  33
  34   for (var i = 0; i < node.childNodes.length; i++)
  35     {
  36       var elem = node.childNodes[i];
  37
  38       if (elem.tagName == tagName)
  39         out.push(elem);
  40     }
  41
  42   return out;
  43 }
  44
  45 function getNodes(node)
  46 {
  47   return filterNodes(node, 'DIV');
  48 }
  49
  50 function getContent(node)
  51 {
  52   return filterNodes(node, 'P')[0];
  53 }
  54
  55 function getToggle(node)
  56 {
  57   return filterNodes(node, 'SPAN')[0];
  58 }
  59
  60 function toggleExpander(node, open)
  61 {
  62   var toggle = getToggle(node);
  63   var display;
  64   var nodes;
  65
  66   if (open)
  67     {
  68       toggle.setAttribute('class', 'open');
  69       display = 'block';
  70     }
  71   else
  72     {
  73       toggle.setAttribute('class', 'closed');
  74       display = 'none';
  75     }
  76
  77   nodes = getNodes(node);
  78
  79   for (var i = 0; i < nodes.length; i++)
  80     nodes[i].style.display = display;
  81 }
  82
  83 function insertRow (path, text)
  84 {
  85   var treeview = document.getElementById('treeview');
  86   var parentnode = treeview;
  87   var i;
  88
  89   // walk the tree
  90   for (i = 0; i < path.length - 1; i++)
  91     parentnode = getNodes(parentnode)[path[i]];
  92
  93   // create a new node
  94   var newnode = document.createElement('div');
  95   newnode.setAttribute('class', 'row');
  96
  97   // insert the new node into the tree
  98   var nodes = getNodes(parentnode);
  99
 100   // console.log("path = " + path);
 101   // console.log("i = " + i + ", path[i] = " + path[i] + ", nodes.length = " +
 102   //    nodes.length);
 103
 104   if (path[i] >= nodes.length)
 105     parentnode.appendChild(newnode);
 106   else
 107     parentnode.insertBefore(newnode, nodes[path[i]]);
 108
 109   // add an expander
 110   var toggle = document.createElement('span');
 111   newnode.appendChild(toggle);
 112   toggle.setAttribute('class', 'closed');
 113   toggle.style.display = 'none';
 114
 115   toggle.onclick = function (e)
 116     {
 117       if (toggle.getAttribute('class') == 'closed')
 118         toggleExpander(newnode, true);
 119       else
 120         toggleExpander(newnode, false);
 121     };
 122
 123   var contents = document.createElement('p');
 124   newnode.appendChild(contents);
 125   contents.innerHTML = text;
 126
 127   // if the node is not a top-level node, hide it
 128   if (parentnode != treeview)
 129     newnode.style.display = 'none';
 130 }
 131
 132 function changeRow (path, text)
 133 {
 134   var treeview = document.getElementById('treeview');
 135   var node = treeview;
 136
 137   // console.log("path = " + path + ", text = '" + text + "'");
 138
 139   // walk the tree
 140   for (var i = 0; i < path.length; i++)
 141     node = getNodes(node)[path[i]];
 142
 143   // set the contents
 144   var contents = getContent(node);
 145   contents.innerHTML = text;
 146 }
 147
 148 function deleteRow (path)
 149 {
 150   var treeview = document.getElementById('treeview');
 151   var node = treeview;
 152
 153   // walk the tree
 154   for (var i = 0; i < path.length; i++)
 155     node = getNodes(node)[path[i]];
 156
 157   node.parentNode.removeChild(node);
 158 }
 159
 160 function reorderRows (path, new_order)
 161 {
 162   var treeview = document.getElementById('treeview');
 163   var node = treeview;
 164
 165   // walk the tree
 166   for (var i = 0; i < path.length; i++)
 167     node = getNodes(node)[path[i]];
 168
 169   var nodes = getNodes(node);
 170
 171   // remove all the nodes from the DOM
 172   for (var i = 0; i < nodes.length; i++)
 173     node.removeChild(nodes[i]);
 174
 175   // put them back in the new order
 176   // For reference: new_order[new_pos] = old_pos
 177   for (var i = 0; i < nodes.length; i++)
 178     node.appendChild(nodes[new_order[i]]);
 179 }
 180
 181 function hasChildRows (path, has_children)
 182 {
 183   var treeview = document.getElementById('treeview');
 184   var node = treeview;
 185
 186   // walk the tree
 187   for (var i = 0; i < path.length; i++)
 188     node = getNodes(node)[path[i]];
 189
 190   var toggle = getToggle(node);
 191
 192   if (has_children)
 193     toggle.style.display = 'inline';
 194   else
 195     toggle.style.display = 'none';
 196 }
 197     </script>
 198   </head>
 199
 200   <body>
 201     <div id="treeview">
 202     </div>
 203   </body>
 204 </html>