data/empathy-log-window.html

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