webcit_before_automake is now the trunk
[citadel.git] / webcit / static / wclib.js
1 //
2 // $Id: wclib.js,v 625.2 2005/09/18 04:04:32 ajc Exp $
3 //
4 // JavaScript function library for WebCit.
5 //
6 //
7
8
9 var browserType;
10 var room_is_trash = 0;
11
12 if (document.layers) {browserType = "nn4"}
13 if (document.all) {browserType = "ie"}
14 if (window.navigator.userAgent.toLowerCase().match("gecko")) {
15         browserType= "gecko"
16 }
17
18 var ns6=document.getElementById&&!document.all;
19
20
21
22 // We love string tokenizers.
23 function extract_token(source_string, token_num, delimiter) {
24         var i = 0;
25         var extracted_string = source_string;
26
27         if (token_num > 0) {
28                 for (i=0; i<token_num; ++i) {
29                         var j = extracted_string.indexOf(delimiter);
30                         if (j >= 0) {
31                                 extracted_string = extracted_string.substring(j+1);
32                         }
33                 }
34         }
35
36         j = extracted_string.indexOf(delimiter);
37         if (j >= 0) {
38                 extracted_string = extracted_string.substring(0, j);
39         }
40
41         return extracted_string;
42 }
43
44
45
46 // This code handles the popups for important-messages.
47 function hide_imsg_popup() {
48         if (browserType == "gecko" )
49                 document.poppedLayer = eval('document.getElementById(\'important_message\')');
50         else if (browserType == "ie")
51                 document.poppedLayer = eval('document.all[\'important_message\']');
52         else
53                 document.poppedLayer = eval('document.layers[\'`important_message\']');
54
55         document.poppedLayer.style.visibility = "hidden";
56 }
57
58
59 // This function activates the ajax-powered recipient autocompleters on the message entry screen.
60 function activate_entmsg_autocompleters() {
61         new Ajax.Autocompleter('cc_id', 'cc_name_choices', 'cc_autocomplete', {} );
62         new Ajax.Autocompleter('bcc_id', 'bcc_name_choices', 'bcc_autocomplete', {} );
63         new Ajax.Autocompleter('recp_id', 'recp_name_choices', 'recp_autocomplete', {} );
64 }
65
66
67
68 // Toggle the icon bar between menu/roomlist...
69 var which_div_expanded = null;
70 var num_drop_targets = 0;
71 var drop_targets_elements = new Array();
72 var drop_targets_roomnames = new Array();
73
74 function switch_to_room_list() {
75         $('iconbar').innerHTML = $('iconbar').innerHTML.substr(0, $('iconbar').innerHTML.indexOf('switch'));
76         new Ajax.Updater('iconbar', 'iconbar_ajax_rooms', { method: 'get' } );
77 }
78
79 function expand_floor(floor_div) {
80         if (which_div_expanded != null) {
81                 if ($(which_div_expanded) != null) {
82                         $(which_div_expanded).style.display = 'none' ;
83                 }
84         }
85
86         // clicking on the already-expanded floor causes the whole list to collapse
87         if (which_div_expanded == floor_div) {
88                 which_div_expanded = null;
89
90                 // notify the server that no floors are expanded
91                 new Ajax.Request(
92                         'set_floordiv_expanded/-1', {
93                                 method: 'post'
94                         }
95                 );
96                 return true;
97         }
98
99         // expand the requested floor
100         $(floor_div).style.display = 'block';
101         which_div_expanded = floor_div;
102
103         // notify the server of which floor is expanded
104         new Ajax.Request(
105                 'set_floordiv_expanded/'+floor_div, {
106                         method: 'post'
107                 }
108         );
109 }
110
111 function switch_to_menu_buttons() {
112         which_div_expanded = null;
113         num_drop_targets = 0;
114         new Ajax.Updater('iconbar', 'iconbar_ajax_menu', { method: 'get' } );
115 }
116
117
118 // Static variables for mailbox view...
119 //
120 var CtdlNumMsgsSelected = 0;
121 var CtdlMsgsSelected = new Array();
122
123 // This gets called when you single click on a message in the mailbox view.
124 // We know that the element id of the table row will be the letter 'm' plus the message number.
125 //
126 function CtdlSingleClickMsg(evt, msgnum) {
127
128         // Clear the preview pane until we load the new message
129         $('preview_pane').innerHTML = '';
130
131         // De-select any messages that were already selected, *unless* the Ctrl key
132         // is being pressed, in which case the user wants multi select.
133         if (!evt.ctrlKey) {
134                 if (CtdlNumMsgsSelected > 0) {
135                         for (i=0; i<CtdlNumMsgsSelected; ++i) {
136                                 $('m'+CtdlMsgsSelected[i]).style.backgroundColor = '#fff';
137                                 $('m'+CtdlMsgsSelected[i]).style.color = '#000';
138                         }
139                         CtdlNumMsgsSelected = 0;
140                 }
141         }
142
143         // For multi select ... is the message being clicked already selected?
144         already_selected = 0;
145         if ( (evt.ctrlKey) && (CtdlNumMsgsSelected > 0) ) {
146                 for (i=0; i<CtdlNumMsgsSelected; ++i) {
147                         if (CtdlMsgsSelected[i] == msgnum) {
148                                 already_selected = 1;
149                         }
150                 }
151         }
152
153         // Now select (or de-select) the message
154         if ( (evt.ctrlKey) && (already_selected == 1) ) {
155                 $('m'+msgnum).style.backgroundColor = '#fff';
156                 $('m'+msgnum).style.color = '#000';
157         }
158         else {
159                 $('m'+msgnum).style.backgroundColor='#69aaff';
160                 $('m'+msgnum).style.color='#fff';
161                 CtdlNumMsgsSelected = CtdlNumMsgsSelected + 1;
162                 CtdlMsgsSelected[CtdlNumMsgsSelected-1] = msgnum;
163         }
164
165         // Update the preview pane
166         new Ajax.Updater('preview_pane', 'msg/'+msgnum, { method: 'get' } );
167
168         // Mark the message as read
169         new Ajax.Request(
170                 'ajax_servcmd', {
171                         method: 'post',
172                         parameters: 'g_cmd=SEEN '+msgnum+'|1',
173                         onComplete: CtdlRemoveTheUnseenBold(msgnum)
174                 }
175         );
176
177         return false;           // try to defeat the default click behavior
178 }
179
180 // Delete selected messages.
181 function CtdlDeleteSelectedMessages(evt) {
182         
183         if (CtdlNumMsgsSelected < 1) {
184                 // Nothing to delete, so exit silently.
185                 return false;
186         }
187         for (i=0; i<CtdlNumMsgsSelected; ++i) {
188                 if (parseInt(room_is_trash) > 0) {
189                         new Ajax.Request(
190                                 'ajax_servcmd', {
191                                         method: 'post',
192                                         parameters: 'g_cmd=DELE ' + CtdlMsgsSelected[i],
193                                         onComplete: CtdlClearDeletedMsg(CtdlMsgsSelected[i])
194                                 }
195                         );
196                 }
197                 else {
198                         new Ajax.Request(
199                                 'ajax_servcmd', {
200                                         method: 'post',
201                                         parameters: 'g_cmd=MOVE ' + CtdlMsgsSelected[i] + '|_TRASH_|0',
202                                         onComplete: CtdlClearDeletedMsg(CtdlMsgsSelected[i])
203                                 }
204                         );
205                 }
206         }
207         CtdlNumMsgsSelected = 0;
208
209         // Clear the preview pane too.
210         $('preview_pane').innerHTML = '';
211 }
212
213
214 // Move selected messages.
215 function CtdlMoveSelectedMessages(evt, target_roomname) {
216         
217         if (CtdlNumMsgsSelected < 1) {
218                 // Nothing to delete, so exit silently.
219                 return false;
220         }
221         for (i=0; i<CtdlNumMsgsSelected; ++i) {
222                 new Ajax.Request(
223                         'ajax_servcmd', {
224                                 method:'post',
225                                 parameters:'g_cmd=MOVE ' + CtdlMsgsSelected[i] + '|' + target_roomname + '|0',
226                                 onComplete:CtdlClearDeletedMsg(CtdlMsgsSelected[i])
227                         }
228                 );
229         }
230         CtdlNumMsgsSelected = 0;
231
232         // Clear the preview pane too.
233         $('preview_pane').innerHTML = '';
234 }
235
236
237
238 // This gets called when the user touches the keyboard after selecting messages...
239 function CtdlMsgListKeyPress(evt) {
240         if(document.all) {                              // aIEeee
241                 var whichKey = window.event.keyCode;
242         }
243         else {                                          // non-sux0r browsers
244                 var whichKey = evt.which;
245         }
246         if (whichKey == 46) {                           // DELETE key
247                 CtdlDeleteSelectedMessages(evt);
248         }
249         return true;
250 }
251
252 // Take the boldface away from a message to indicate that it has been seen.
253 function CtdlRemoveTheUnseenBold(msgnum) {
254         $('m'+msgnum).style.fontWeight='normal';
255 }
256
257 // A message has been deleted, so yank it from the list.
258 // (IE barfs on m9999.innerHTML='' so we use a script.aculo.us effect instead.)
259 function CtdlClearDeletedMsg(msgnum) {
260         new Effect.Squish('m'+msgnum);
261 }
262
263
264 // These functions called when the user down-clicks on the message list resizer bar
265
266 var saved_x = 0;
267 var saved_y = 0;
268
269 function CtdlResizeMsgListMouseUp(evt) {
270         document.onmouseup = null;
271         document.onmousemove = null;
272         if (document.layers) {
273                 document.releaseEvents(Event.MOUSEUP | Event.MOUSEMOVE);
274         }
275         return true;
276 }
277
278 function CtdlResizeMsgListMouseMove(evt) {
279         y = (ns6 ? evt.clientY : event.clientY);
280         increment = y - saved_y;
281
282         // First move the bottom of the message list...
283         d = $('message_list');
284         if (d.offsetHeight){
285                 divHeight = d.offsetHeight;
286         }
287         else if (d.style.pixelHeight) {
288                 divHeight = d.style.pixelHeight;
289         }
290         d.style.height = (divHeight + increment) + 'px';
291
292         // Then move the top of the preview pane...
293         d = $('preview_pane');
294         if (d.offsetTop){
295                 divTop = d.offsetTop;
296         }
297         else if (d.style.pixelTop) {
298                 divTop = d.style.pixelTop;
299         }
300         d.style.top = (divTop + increment) + 'px';
301
302         // Resize the bottom of the preview pane...
303         d = $('preview_pane');
304         if (d.offsetHeight){
305                 divHeight = d.offsetHeight;
306         }
307         else if (d.style.pixelHeight) {
308                 divHeight = d.style.pixelHeight;
309         }
310         d.style.height = (divHeight - increment) + 'px';
311
312         // Then move the top of the slider bar.
313         d = $('resize_msglist');
314         if (d.offsetTop){
315                 divTop = d.offsetTop;
316         }
317         else if (d.style.pixelTop) {
318                 divTop = d.style.pixelTop;
319         }
320         d.style.top = (divTop + increment) + 'px';
321
322         saved_y = y;
323         return true;
324 }
325
326 function CtdlResizeMsgListMouseDown(evt) {
327         saved_y = (ns6 ? evt.clientY : event.clientY);
328         document.onmouseup = CtdlResizeMsgListMouseUp;
329         document.onmousemove = CtdlResizeMsgListMouseMove;
330         if (document.layers) {
331                 document.captureEvents(Event.MOUSEUP | Event.MOUSEMOVE);
332         }
333         return false;           // disable the default action
334 }
335
336
337
338 // These functions handle drag and drop message moving
339
340 var mm_div = null;
341
342 function CtdlMoveMsgMouseDown(evt, msgnum) {
343
344         // do the highlight first
345         CtdlSingleClickMsg(evt, msgnum);
346
347         // Now handle the possibility of dragging
348         saved_x = (ns6 ? evt.clientX : event.clientX);
349         saved_y = (ns6 ? evt.clientY : event.clientY);
350         document.onmouseup = CtdlMoveMsgMouseUp;
351         document.onmousemove = CtdlMoveMsgMouseMove;
352         if (document.layers) {
353                 document.captureEvents(Event.MOUSEUP | Event.MOUSEMOVE);
354         }
355
356         return false;
357 }
358
359 function CtdlMoveMsgMouseMove(evt) {
360         x = (ns6 ? evt.clientX : event.clientX);
361         y = (ns6 ? evt.clientY : event.clientY);
362
363         if ( (x == saved_x) && (y == saved_y) ) {
364                 return true;
365         }
366
367         if (CtdlNumMsgsSelected < 1) { 
368                 return true;
369         }
370
371         if (!mm_div) {
372
373
374                 drag_o_text = "<div style=\"overflow:none; background-color:#fff; color:#000; border: 1px solid black; filter:alpha(opacity=75); -moz-opacity:.75; opacity:.75;\"><tr><td>";
375                 for (i=0; i<CtdlNumMsgsSelected; ++i) {
376                         drag_o_text = drag_o_text + 
377                                 ctdl_ts_getInnerText(
378                                         $('m'+CtdlMsgsSelected[i]).cells[0]
379                                 ) + '<br>';
380                 }
381                 drag_o_text = drag_o_text + "<div>";
382
383                 mm_div = document.createElement("DIV");
384                 mm_div.style.position='absolute';
385                 mm_div.style.top = y + 'px';
386                 mm_div.style.left = x + 'px';
387                 mm_div.style.pixelHeight = '300';
388                 mm_div.style.pixelWidth = '300';
389                 mm_div.innerHTML = drag_o_text;
390                 document.body.appendChild(mm_div);
391         }
392         else {
393                 mm_div.style.top = y + 'px';
394                 mm_div.style.left = x + 'px';
395         }
396
397         return false;   // prevent the default mouse action from happening?
398 }
399
400 function CtdlMoveMsgMouseUp(evt) {
401         document.onmouseup = null;
402         document.onmousemove = null;
403         if (document.layers) {
404                 document.releaseEvents(Event.MOUSEUP | Event.MOUSEMOVE);
405         }
406
407         if (mm_div) {
408                 document.body.removeChild(mm_div);      
409                 mm_div = null;
410         }
411
412         if (num_drop_targets < 1) {     // nowhere to drop
413                 return true;
414         }
415
416         // Did we release the mouse button while hovering over a drop target?
417         // NOTE: this only works cross-browser because the iconbar div is always
418         //      positioned at 0,0.  Browsers differ in whether the 'offset'
419         //      functions return pos relative to the document or parent.
420
421         for (i=0; i<num_drop_targets; ++i) {
422
423                 x = (ns6 ? evt.clientX : event.clientX);
424                 y = (ns6 ? evt.clientY : event.clientY);
425
426                 l = parseInt(drop_targets_elements[i].offsetLeft);
427                 t = parseInt(drop_targets_elements[i].offsetTop);
428                 r = parseInt(drop_targets_elements[i].offsetLeft)
429                   + parseInt(drop_targets_elements[i].offsetWidth);
430                 b = parseInt(drop_targets_elements[i].offsetTop)
431                   + parseInt(drop_targets_elements[i].offsetHeight);
432
433                 /* alert('Offsets are: ' + l + ' ' + t + ' ' + r + ' ' + b + '.'); */
434         
435                 if ( (x >= l) && (x <= r) && (y >= t) && (y <= b) ) {
436                         // Yes, we dropped it on a hotspot.
437                         CtdlMoveSelectedMessages(evt, drop_targets_roomnames[i]);
438                         return true;
439                 }
440         }
441
442         return true;
443 }
444
445
446 function ctdl_ts_getInnerText(el) {
447         if (typeof el == "string") return el;
448         if (typeof el == "undefined") { return el };
449         if (el.innerText) return el.innerText;  //Not needed but it is faster
450         var str = "";
451         
452         var cs = el.childNodes;
453         var l = cs.length;
454         for (var i = 0; i < l; i++) {
455                 switch (cs[i].nodeType) {
456                         case 1: //ELEMENT_NODE
457                                 str += ts_getInnerText(cs[i]);
458                                 break;
459                         case 3: //TEXT_NODE
460                                 str += cs[i].nodeValue;
461                                 break;
462                 }
463         }
464         return str;
465 }
466
467
468
469 // This function handles the creation of new notes in the "Notes" view.
470 //
471 function add_new_note() {
472
473         new_eid = Math.random() + '';
474         new_eid = new_eid.substr(3);
475
476         $('new_notes_here').innerHTML = $('new_notes_here').innerHTML
477                 + '<IMG ALIGN=MIDDLE src=\"static/storenotes_48x.gif\">'
478                 + '<span id=\"note' + new_eid + '\">' + Date() + '</span><br />'
479         ;
480
481         new Ajax.InPlaceEditor('note' + new_eid,
482                 'updatenote?eid=' + new_eid , {rows:5,cols:72});
483 }