data/empathy-log-window.html

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