* This change appears to restore ctrl-click's ability to deselect a currently selecte...
[citadel.git] / webcit / static / summaryview.js
1 /**
2  * Webcit Summary View v2
3  *   All comments, flowers and death threats to Mathew McBride
4  *   <matt@mcbridematt.dhs.org> / <matt@comalies>
5  * Copyright 2009 The Citadel Team
6  * Licensed under the GPL V3
7  */
8 document.observe("dom:loaded", createMessageView);
9
10 var msgs = null;
11 var message_view = null;
12 var loadingMsg = null;
13 var rowArray = null;
14 var currentSortMode = null;
15
16 // Header elements
17 var mlh_date = null;
18 var mlh_subject = null;
19 var mlh_from = null;
20 var currentSorterToggle = null;
21 var query = "";
22 var currentlyMarkedRows = new Object();
23 var markedRowIndex = null;
24
25 var mouseDownEvent = null;
26 var exitedMouseDown = false;
27
28 var trTemplate = new Array(11);
29 trTemplate[0] = "<tr id=\"";
30 trTemplate[2] = "\" citadel:dropenabled=\"dropenabled\" class=\"";
31 trTemplate[4] = "\" citadel:dndelement=\"summaryViewDragAndDropHandler\" citadel:msgid=\"";
32 trTemplate[6] = "\" citadel:ctdlrowid=\"";
33 trTemplate[8] = "\"><td class=\"col1\">";
34 trTemplate[10] = "</td><td class=\"col2\">";
35 trTemplate[12] = "</td><td class=\"col3\">";
36 trTemplate[14] = "</td></tr>";
37
38 var currentPage = 0;
39 var sortModes = {
40   "rdate" : sortRowsByDateDescending,
41   "date" : sortRowsByDateAscending,
42   "subj" : sortRowsBySubjectAscending,
43   "rsubj" : sortRowsBySubjectDescending,
44   "sender": sortRowsByFromAscending,
45   "rsender" : sortRowsByFromDescending
46 };
47 var toggles = {};
48
49 var nummsgs = 0;
50 var startmsg = 0;
51
52 function createMessageView() {
53   message_view = document.getElementById("message_list_body");
54   loadingMsg = document.getElementById("loading");
55   getMessages();
56   mlh_date = $("mlh_date");
57   mlh_subject = $('mlh_subject');
58   mlh_from = $('mlh_from');
59   toggles["rdate"] = mlh_date;
60   toggles["date"] = mlh_date;
61   toggles["subj"] = mlh_subject;
62   toggles["rsubj"] = mlh_subject;
63   toggles["sender"] = mlh_from;
64   toggles["rsender"] = mlh_from;
65   mlh_date.observe('click',ApplySort);
66   mlh_subject.observe('click',ApplySort);
67   mlh_from.observe('click',ApplySort);
68   $(document).observe('keyup',CtdlMessageListKeyUp,false);
69   $('resize_msglist').observe('mousedown', CtdlResizeMouseDown);
70   $('m_refresh').observe('click', getMessages);
71   document.getElementById('m_refresh').setAttribute("href","#");
72   Event.observe(document.onresize ? document : window, "resize", normalizeHeaderTable);
73   Event.observe(document.onresize ? document : window, "resize", sizePreviewPane);
74   $('summpage').observe('change', getPage);
75   takeOverSearchOMatic();
76   setupDragDrop(); // here for now
77 }
78 function getMessages() {
79   if (loadingMsg.parentNode == null) {
80     message_view.innerHTML = "";
81     message_view.appendChild(loadingMsg);
82   }
83 roomName = getTextContent(document.getElementById("rmname"));
84  var parameters = {'room':roomName, 'startmsg': startmsg, 'stopmsg': -1};
85  if (is_safe_mode) {
86    parameters['stopmsg'] = parseInt(startmsg)+499;
87    //parameters['maxmsgs'] = 500;
88    if (currentSortMode != null) {
89      var SortBy = currentSortMode[0];
90      if (SortBy.charAt(0) == 'r') {
91        SortBy = SortBy.substr(1);
92        parameters["SortOrder"] = "0";
93      }
94      parameters["SortBy"] = SortBy;
95    }
96  } 
97  if (query.length > 0) {
98    parameters["query"] = query;
99  }
100 new Ajax.Request("roommsgs", {
101     method: 'get',
102         onSuccess: loadMessages,
103         parameters: parameters,
104         sanitize: false,
105       evalJSON: false,
106       onFailure: function(e) { alert("Failure: " + e);}
107         });
108 }
109 function evalJSON(data) {
110   var jsonData = null;
111   if (typeof(JSON) === 'object' && typeof(JSON.parse) === 'function') {
112     try {
113     jsonData = JSON.parse(data);
114     } catch (e) {
115       // ignore
116     }
117   }
118   if (jsonData == null) {
119     return eval('('+data+')');
120   }
121 }
122 function loadMessages(transport) {
123   try {
124     var data = evalJSON(transport.responseText);
125   if (!!data && transport.responseText.length < 2) {
126     alert("Message loading failed");
127   } 
128   nummsgs = data['nummsgs'];
129   msgs = data['msgs'];
130   var length = msgs.length;
131   rowArray = new Array(length); // store so they can be sorted
132   WCLog("Row array length: "+rowArray.length);
133   } catch (e) {
134     //window.alert(e+"|"+e.description);
135   }
136   if (currentSortMode == null) {
137   if (sortmode.length < 1) {
138     sortmode = "rdate";
139   }
140   currentSortMode = [sortmode, sortModes[sortmode]];
141   currentSorterToggle = toggles[sortmode];
142   }
143   if (!is_safe_mode) {
144   resortAndDisplay(currentSortMode[1]);
145   } else {
146     setupPageSelector();
147     resortAndDisplay(null);
148   }
149   if (loadingMsg.parentNode != null) {
150     loadingMsg.parentNode.removeChild(loadingMsg);
151   }
152   sizePreviewPane();
153 }
154 function resortAndDisplay(sortMode) {
155   WCLog("Begin resortAndDisplay");
156   
157   /* We used to try and clear out the message_view element,
158      but stupid IE doesn't even do that properly */
159   var message_view_parent = message_view.parentNode;
160   message_view_parent.removeChild(message_view);
161   var startSort = new Date();
162   if (sortMode != null) {
163     msgs.sort(sortMode);
164   }
165   var endSort = new Date();
166   WCLog("Sort rowArray in " + (endSort-startSort));
167   var start = new Date();
168   var length = msgs.length;
169   var compiled = new Array(length+2);
170   compiled[0] = "<tbody xmlns:citadel=\"http://citadel.org\" id=\"message_list_body\" class=\"mailbox_summary\">";
171   for(var x=0; x<length; ++x) {
172     try {
173       var currentRow = msgs[x];
174       trTemplate[1] = "msg_"+currentRow[0];
175       var className = "";
176     if (((x-1) % 2) == 0) {
177       className += "table-alt-row";
178     } else {
179       className += "table-row";
180     }
181     if (currentRow[5]) {
182       className += " new_message";
183     }
184     trTemplate[3] = className;
185     trTemplate[5] = currentRow[0];
186     trTemplate[7] = x;
187     trTemplate[9] = currentRow[1];
188     trTemplate[11] = currentRow[2];
189     trTemplate[13] = currentRow[4];
190     var i = x+1;
191     compiled[i] = trTemplate.join("");
192     } catch (e) {
193       WCLog("Exception on row " +  x + ":" + e);
194     }
195   }
196   compiled[length+2] = "</tbody>";
197   var end = new Date();
198   WCLog("iterate: " + (end-start));
199   var compile = compiled.join("");
200   start = new Date();
201   $(message_view_parent).update(compile);
202   message_view_parent.onclick = CtdlMessageListClick;
203   message_view = message_view_parent.firstChild;
204   end = new Date();
205     var delta = end.getTime() - start.getTime();
206     WCLog("append: " + delta);
207   ApplySorterToggle();
208   normalizeHeaderTable();
209 }
210 function sortRowsByDateAscending(a, b) {
211   var dateOne = a[3];
212   var dateTwo = b[3];
213   return (dateOne - dateTwo);
214 };
215 function sortRowsByDateDescending(a, b) {
216   var dateOne = a[3];
217   var dateTwo = b[3];
218   return (dateTwo - dateOne);
219 };
220 function sortRowsBySubjectAscending(a, b) {
221   var subjectOne = a[1];
222   var subjectTwo = b[1];
223   return strcmp(subjectOne, subjectTwo);
224 };
225 function sortRowsBySubjectDescending(a, b) {
226   var subjectOne = a[1];
227   var subjectTwo = b[1];
228   return strcmp(subjectTwo, subjectOne);
229 };
230 function sortRowsByFromAscending(a, b) {
231   var fromOne = a[2];
232   var fromTwo = b[2];
233   return strcmp(fromOne, fromTwo);
234 };
235 function sortRowsByFromDescending(a, b) {
236   var fromOne = a[2];
237   var fromTwo = b[2];
238   return strcmp(fromTwo, fromOne);
239 };
240 function CtdlMessageListClick(evt) {
241   /* Since element.onload is used here, test to see if evt is defined */
242   var event = evt ? evt : window.event; 
243   var target = event.target ? event.target: event.srcElement; // and again..
244   var parent = target.parentNode;
245   var msgId = parent.getAttribute("citadel:msgid");
246   // If the ctrl key modifier wasn't used, unmark all rows and load the message
247   if (!event.shiftKey && !event.ctrlKey && !event.altKey) {
248     unmarkAllRows();
249     markedRowIndex = parent.rowIndex;
250     document.getElementById("preview_pane").innerHTML = "";
251     new Ajax.Updater('preview_pane', 'msg/'+msgId, {method: 'get'});
252     markRow(parent);
253     new Ajax.Request('ajax_servcmd', {
254       method: 'post',
255           parameters: 'g_cmd=SEEN ' + msgId + '|1',
256           onComplete: CtdlMarkRowAsRead(parent)});
257   // If the shift key modifier is used, mark a range...
258   } else if (event.button != 2 && event.shiftKey) {
259     markRow(parent);
260     var rowIndex = parent.rowIndex;
261     var startMarkingFrom = 0;
262     var finish = 0;
263     if (rowIndex > markedRowIndex) {
264       startMarkingFrom = markedRowIndex+1;
265       finish = rowIndex;
266     } else if (rowIndex < markedRowIndex) {
267       startMarkingFrom = rowIndex+1;
268       finish = markedRowIndex;
269     }
270     WCLog('startMarkingFrom=' + startMarkingFrom + ', finish=' + finish);
271     for(var x = startMarkingFrom; x<finish; x++) {
272       WCLog("Marking row " + x);
273       markRow(parent.parentNode.rows[x]);
274     }
275   // If the ctrl key modifier is used, toggle one message
276   } else if (event.button != 2 && (event.ctrlKey || event.altKey)) {
277     if (parent.getAttribute("citadel:marked")) {
278       unmarkRow(parent);
279     }
280     else {
281       markRow(parent);
282     }
283   }
284 }
285 function CtdlMarkRowAsRead(rowElement) {
286   var classes = rowElement.className;
287   classes = classes.replace("new_message","");
288   rowElement.className = classes;
289 }
290 function ApplySort(event) {
291   var target = event.target;
292   var sortId = target.id;
293   removeOldSortClass();
294   currentSorterToggle = target;
295   var sortModes = getSortMode(target); // returns [[key, func],[key,func]]
296   var sortModeToUse = null;
297   if (currentSortMode[0] == sortModes[0][0]) {
298     sortModeToUse = sortModes[1];
299   } else {
300     sortModeToUse = sortModes[0];
301   }
302   currentSortMode = sortModeToUse;
303   if (is_safe_mode) {
304     getMessages(); // in safe mode, we load from server already sorted
305   } else {
306   resortAndDisplay(sortModeToUse[1]);
307   }
308 }
309 function getSortMode(toggleElem) {
310   var forward = null;
311   var reverse = null;
312   for(var key in toggles) {
313     var kr = (key.charAt(0) == 'r');
314     if (toggles[key] == toggleElem && !kr) {
315       forward = [key, sortModes[key]];
316     } else if (toggles[key] == toggleElem && kr) {
317       reverse = [key, sortModes[key]];
318     }
319   }
320   return [forward, reverse];
321 }
322 function removeOldSortClass() {
323   if (currentSorterToggle) {
324     var classes = currentSorterToggle.className;
325     /* classes = classes.replace("current_sort_mode","");
326     classes = classes.replace("sort_ascending","");
327     classes = classes.replace("sort_descending",""); */
328     currentSorterToggle.className = "";
329   }
330 }
331 function markRow(row) {
332   var msgId = row.getAttribute("citadel:msgid");
333   row.className = row.className += " marked_row";
334   row.setAttribute("citadel:marked","marked");
335   currentlyMarkedRows[msgId] = row;
336 }
337 function unmarkRow(row) {
338   var msgId = row.getAttribute("citadel:msgid");
339   row.className = row.className.replace("marked_row","");
340   row.removeAttribute("citadel:marked");
341   delete currentlyMarkedRows[msgId];
342 }
343 function unmarkAllRows() {
344   for(msgId in currentlyMarkedRows) {
345     unmarkRow(currentlyMarkedRows[msgId]);
346   }
347 }
348 function deleteAllMarkedRows() {
349   for(msgId in currentlyMarkedRows) {
350     var row = currentlyMarkedRows[msgId];
351     var rowArrayId = row.ctdlRowId;
352     row.parentNode.removeChild(row);
353     delete currentlyMarkedRows[msgId];
354     delete rowArray[rowArrayId];
355   }
356   // Now we have to reconstruct rowarray as the array length has changed */
357   var newRowArray = new Array();
358   var x=0;
359   for(var i=0; i<rowArray.length; i++) {
360     var currentRow = rowArray[i];
361     if (currentRow != null) {
362       newRowArray[x] = currentRow;
363       x++;
364     }
365   }
366   rowArray = newRowArray;
367   resortAndDisplay(null);
368 }
369
370 function deleteAllSelectedMessages() {
371     for(msgId in currentlyMarkedRows) {
372       if (!room_is_trash) {
373       new Ajax.Request('ajax_servcmd', 
374                        {method: 'post',
375                            parameters: 'g_cmd=MOVE ' + msgId + '|_TRASH_|0'
376                            });
377       } else {
378         new Ajax.Request('ajax_servcmd', {method: 'post',
379               parameters: 'g_cmd=DELE '+msgId});
380       }
381     }
382     document.getElementById("preview_pane").innerHTML = "";
383     deleteAllMarkedRows();
384 }
385
386 function CtdlMessageListKeyUp(event) {
387         var key = event.which;
388         if (key == 46) { // DELETE
389                 deleteAllSelectedMessages();
390         }
391 }
392
393 function clearMessage(msgId) {
394   var row = document.getElementById('msg_'+msgId);
395   row.parentNode.removeChild(row);
396   delete currentlyMarkedRows[msgId];
397 }
398
399 function summaryViewContextMenu() {
400   if (!exitedMouseDown) {
401     var contextSource = document.getElementById("listViewContextMenu");
402     CtdlSpawnContextMenu(mouseDownEvent, contextSource);
403   }
404 }
405
406 function summaryViewDragAndDropHandler() {
407   var element = document.createElement("div");
408   var msgList = document.createElement("ul");
409   element.appendChild(msgList);
410   for(msgId in currentlyMarkedRows) {
411     msgRow = currentlyMarkedRows[msgId];
412     var subject = getTextContent(msgRow.getElementsByTagName("td")[0]);
413     var li = document.createElement("li");
414     msgList.appendChild(li);
415     setTextContent(li, subject);
416     li.ctdlMsgId = msgId;
417   }
418   return element;
419 }
420
421 var saved_y = 0;
422 function CtdlResizeMouseDown(event) {
423   $(document).observe('mousemove', CtdlResizeMouseMove);
424   $(document).observe('mouseup', CtdlResizeMouseUp);
425   saved_y = event.clientY;
426 }
427
428 function sizePreviewPane() {
429   var preview_pane = document.getElementById("preview_pane");
430   var summary_view = document.getElementById("summary_view");
431   var banner = document.getElementById("banner");
432   var message_list_hdr = document.getElementById("message_list_hdr");
433   var content = $('global');  // we'd like to use prototype methods here
434   var childElements = content.childElements();
435   var sizeOfElementsAbove = 0;
436   var heightOfViewPort = document.viewport.getHeight() // prototypejs method
437   var bannerHeight = banner.offsetHeight;
438   var contentViewPortHeight = heightOfViewPort-banner.offsetHeight-message_list_hdr.offsetHeight;
439   contentViewPortHeight = 0.98 * contentViewPortHeight; // leave some error
440   // Set summary_view to 20%;
441   var summary_height = ctdlLocalPrefs.readPref("svheight");
442   if (summary_height == null) {
443     summary_height = 0.20 * contentViewPortHeight;
444   }
445   // Set preview_pane to the remainder
446   var preview_height = contentViewPortHeight - summary_height;
447   
448   summary_view.style.height = (summary_height)+"px";
449   preview_pane.style.height = (preview_height)+"px";
450 }
451 function CtdlResizeMouseMove(event) {
452   var clientX = event.clientX;
453   var clientY = event.clientY;
454   var summary_view = document.getElementById("summary_view");
455   var summaryViewHeight = summary_view.offsetHeight;
456   var increment = clientY-saved_y;
457   var summary_view_height = increment+summaryViewHeight;
458   summary_view.style.height = (summary_view_height)+"px";
459   // store summary view height 
460   ctdlLocalPrefs.setPref("svheight",summary_view_height);
461   var msglist = document.getElementById("preview_pane");
462   var msgListHeight = msglist.offsetHeight;
463   msglist.style.height = (msgListHeight-increment)+"px";
464   saved_y = clientY;
465   /* For some reason the grippy doesn't work without position: absolute
466      so we need to set its top pos manually all the time */
467   var resize = document.getElementById("resize_msglist");
468   var resizePos = resize.offsetTop;
469   resize.style.top = (resizePos+increment)+"px";
470 }
471 function CtdlResizeMouseUp(event) {
472   $(document).stopObserving('mousemove', CtdlResizeMouseMove);
473   $(document).stopObserving('mouseup', CtdlResizeMouseUp);
474 }
475 function ApplySorterToggle() {
476   var className = currentSorterToggle.className;
477   className += " current_sort_mode";
478   if (currentSortMode[1] == sortRowsByDateDescending ||
479       currentSortMode[1] == sortRowsBySubjectDescending ||
480       currentSortMode[1] == sortRowsByFromDescending) {
481     className += " sort_descending";
482   } else {
483     className += " sort_ascending";
484   }
485   currentSorterToggle.className = className;
486 }
487 /** Hack to make the header table line up with the data */
488 function normalizeHeaderTable() {
489   var message_list_hdr = document.getElementById("message_list_hdr");
490   var summary_view = document.getElementById("summary_view");
491   var resize_msglist = document.getElementById("resize_msglist");
492   var headerTable = message_list_hdr.getElementsByTagName("table")[0];
493   var dataTable = summary_view.getElementsByTagName("table")[0];
494   var dataTableWidth = dataTable.offsetWidth;
495   headerTable.style.width = dataTableWidth+"px";
496 }
497
498 function setupPageSelector() {
499   var summpage = document.getElementById("summpage");
500   var select_page = document.getElementById("selectpage");
501   summpage.innerHTML = "";
502   if (is_safe_mode) {
503     WCLog("unhiding parent page");
504     select_page.className = "";
505   } else {
506     return;
507   }
508   var pages = nummsgs / 499;
509   for(var i=0; i<pages; i++) {
510     var opt = document.createElement("option");
511     var startmsg = i * 499;
512     opt.setAttribute("value",startmsg);
513     if (currentPage == i) {
514       opt.setAttribute("selected","selected");
515     }
516     opt.appendChild(document.createTextNode((i+1)));
517     summpage.appendChild(opt);
518   }
519 }
520 function getPage(event) {
521   var target = event.target;
522   startmsg = target.options.item(target.selectedIndex).value;
523   currentPage = target.selectedIndex;
524   //query = ""; // We are getting a page from the _entire_ msg list, don't query
525   getMessages();
526 }
527 function takeOverSearchOMatic() {
528   var searchForm = document.getElementById("searchomatic").getElementsByTagName("form")[0];
529   // First disable the form post
530   searchForm.setAttribute("action","javascript:void();");
531   searchForm.removeAttribute("method");
532   $(searchForm).observe('submit', doSearch);
533 }
534 function doSearch() {
535   query = document.getElementById("srchquery").value;
536   getMessages();
537   return false;
538 }