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