Merge branch 'log-window-webview'
[empathy.git] / 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>