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
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
17 document.observe("dom:loaded", createMessageView);
20 var message_view = null;
21 var loadingMsg = null;
23 var currentSortMode = null;
27 var mlh_subject = null;
29 var currentSorterToggle = null;
31 var currentlyMarkedRows = new Object();
32 var markedRowIndex = null;
33 var currentlyHasRowsSelected = false;
35 var mouseDownEvent = null;
36 var exitedMouseDown = false;
38 var is_shift_pressed = false;
39 var is_ctrl_pressed = false;
41 var originalMarkedRow = null;
42 var previousFinish = 0;
44 var trTemplate = new Array(11);
45 trTemplate[0] = "<tr id=\"";
46 trTemplate[2] = "\" citadel:dropenabled=\"dropenabled\" class=\"";
47 trTemplate[4] = "\" citadel:dndelement=\"summaryViewDragAndDropHandler\" citadel:msgid=\"";
48 trTemplate[6] = "\" citadel:ctdlrowid=\"";
49 trTemplate[8] = "\"><td class=\"col1\">";
50 trTemplate[10] = "</td><td class=\"col2\">";
51 trTemplate[12] = "</td><td class=\"col3\">";
52 trTemplate[14] = "</td></tr>";
57 "rdate" : sortRowsByDateDescending,
58 "date" : sortRowsByDateAscending,
59 "subj" : sortRowsBySubjectAscending,
60 "rsubj" : sortRowsBySubjectDescending,
61 "sender": sortRowsByFromAscending,
62 "rsender" : sortRowsByFromDescending
69 function createMessageView() {
70 message_view = document.getElementById("message_list_body");
71 loadingMsg = document.getElementById("loading");
73 mlh_date = $("mlh_date");
74 mlh_subject = $('mlh_subject');
75 mlh_from = $('mlh_from');
76 toggles["rdate"] = mlh_date;
77 toggles["date"] = mlh_date;
78 toggles["subj"] = mlh_subject;
79 toggles["rsubj"] = mlh_subject;
80 toggles["sender"] = mlh_from;
81 toggles["rsender"] = mlh_from;
82 mlh_date.observe('click',ApplySort);
83 mlh_subject.observe('click',ApplySort);
84 mlh_from.observe('click',ApplySort);
85 $(document).observe('keydown',CtdlMessageListKeyDown,false);
86 $(document).observe('keyup',CtdlMessageListKeyUp,false);
87 $('resize_msglist').observe('mousedown', CtdlResizeMouseDown);
88 $('m_refresh').observe('click', getMessages);
89 document.getElementById('m_refresh').setAttribute("href","#");
90 Event.observe(document.onresize ? document : window, "resize", normalizeHeaderTable);
91 Event.observe(document.onresize ? document : window, "resize", sizePreviewPane);
92 if ( $('summpage') ) {
93 $('summpage').observe('change', getPage);
96 alert('error: summpage does not exist');
98 takeOverSearchOMatic();
99 setupDragDrop(); // here for now
102 function getMessages() {
103 if (loadingMsg.parentNode == null) {
104 message_view.innerHTML = "";
105 message_view.appendChild(loadingMsg);
107 roomName = getTextContent(document.getElementById("rmname"));
108 var parameters = {'room':roomName, 'startmsg': startmsg, 'stopmsg': -1};
110 parameters['stopmsg'] = parseInt(startmsg)+499;
111 //parameters['maxmsgs'] = 500;
112 if (currentSortMode != null) {
113 var SortBy = currentSortMode[0];
114 if (SortBy.charAt(0) == 'r') {
115 SortBy = SortBy.substr(1);
116 parameters["SortOrder"] = "0";
118 parameters["SortBy"] = SortBy;
121 if (query.length > 0) {
122 parameters["query"] = query;
124 new Ajax.Request("roommsgs", {
126 onSuccess: loadMessages,
127 parameters: parameters,
130 onFailure: function(e) { alert("Failure: " + e);}
134 function evalJSON(data) {
136 if (typeof(JSON) === 'object' && typeof(JSON.parse) === 'function') {
138 jsonData = JSON.parse(data);
143 if (jsonData == null) {
144 jsonData = eval('('+data+')');
148 function loadMessages(transport) {
150 var data = evalJSON(transport.responseText);
151 if (!!data && transport.responseText.length < 2) {
152 alert("Message loading failed");
154 nummsgs = data['nummsgs'];
156 var length = msgs.length;
157 rowArray = new Array(length); // store so they can be sorted
158 WCLog("Row array length: "+rowArray.length);
160 //window.alert(e+"|"+e.description);
162 if (currentSortMode == null) {
163 if (sortmode.length < 1) {
166 currentSortMode = [sortmode, sortModes[sortmode]];
167 currentSorterToggle = toggles[sortmode];
170 resortAndDisplay(currentSortMode[1]);
173 resortAndDisplay(null);
175 if (loadingMsg.parentNode != null) {
176 loadingMsg.parentNode.removeChild(loadingMsg);
180 function resortAndDisplay(sortMode) {
181 WCLog("Begin resortAndDisplay");
183 /* We used to try and clear out the message_view element,
184 but stupid IE doesn't even do that properly */
185 var message_view_parent = message_view.parentNode;
186 message_view_parent.removeChild(message_view);
187 var startSort = new Date();
189 if (sortMode != null) {
193 WCLog("Sort error: " + e);
195 var endSort = new Date();
196 WCLog("Sort rowArray in " + (endSort-startSort));
197 var start = new Date();
198 var length = msgs.length;
199 var compiled = new Array(length+2);
200 compiled[0] = "<table class=\"mailbox_summary\" id=\"summary_headers\" \"cellspacing=0\" style=\"width:100%;-moz-user-select:none;\">";
201 for(var x=0; x<length; ++x) {
203 var currentRow = msgs[x];
204 trTemplate[1] = "msg_"+currentRow[0];
206 if (((x-1) % 2) == 0) {
207 className += "table-alt-row";
209 className += "table-row";
212 className += " new_message";
214 trTemplate[3] = className;
215 trTemplate[5] = currentRow[0];
217 trTemplate[9] = currentRow[1];
218 trTemplate[11] = currentRow[2];
219 trTemplate[13] = currentRow[4];
221 compiled[i] = trTemplate.join("");
223 WCLog("Exception on row " + x + ":" + e);
226 compiled[length+2] = "</table>";
227 var end = new Date();
228 WCLog("iterate: " + (end-start));
229 var compile = compiled.join("");
231 $(message_view_parent).update(compile);
232 message_view_parent.onclick = CtdlMessageListClick;
233 message_view = message_view_parent.firstChild;
235 var delta = end.getTime() - start.getTime();
236 WCLog("append: " + delta);
238 normalizeHeaderTable();
240 function sortRowsByDateAscending(a, b) {
243 return (dateOne - dateTwo);
245 function sortRowsByDateDescending(a, b) {
248 return (dateTwo - dateOne);
250 function sortRowsBySubjectAscending(a, b) {
251 var subjectOne = a[1];
252 var subjectTwo = b[1];
253 return strcmp(subjectOne, subjectTwo);
255 function sortRowsBySubjectDescending(a, b) {
256 var subjectOne = a[1];
257 var subjectTwo = b[1];
258 return strcmp(subjectTwo, subjectOne);
260 function sortRowsByFromAscending(a, b) {
263 return strcmp(fromOne, fromTwo);
265 function sortRowsByFromDescending(a, b) {
268 return strcmp(fromTwo, fromOne);
270 function CtdlMessageListClick(evt) {
271 /* Since element.onload is used here, test to see if evt is defined */
272 var event = evt ? evt : window.event;
273 var target = event.target ? event.target: event.srcElement; // and again..
274 var parent = target.parentNode;
275 var msgId = parent.getAttribute("citadel:msgid");
276 // If the ctrl key modifier wasn't used, unmark all rows and load the message
277 if (!is_shift_pressed && !is_ctrl_pressed) {
281 markedRowIndex = parent.rowIndex;
282 originalMarkedRow = parent;
283 document.getElementById("preview_pane").innerHTML = "";
284 new Ajax.Updater('preview_pane', 'msg/'+msgId, {method: 'get'});
286 var p = encodeURI('g_cmd=SEEN ' + msgId + '|1');
287 new Ajax.Request('ajax_servcmd', {
290 onComplete: CtdlMarkRowAsRead(parent)
292 // If the shift key modifier is used, mark a range...
293 } else if (event.button != 2 && is_shift_pressed) {
294 if (originalMarkedRow == null) {
295 originalMarkedRow = parent;
300 markRow(originalMarkedRow);
302 var rowIndex = parent.rowIndex;
303 if (markedFrom == 0) {
304 markedFrom = rowIndex;
306 var startMarkingFrom = 0;
308 if (rowIndex > markedRowIndex) {
309 startMarkingFrom = markedRowIndex+1;
311 } else if (rowIndex < markedRowIndex) {
312 startMarkingFrom = rowIndex+1;
313 finish = markedRowIndex;
315 previousFinish = finish;
316 WCLog('startMarkingFrom=' + startMarkingFrom + ', finish=' + finish);
317 for(var x = startMarkingFrom; x<finish; x++) {
318 WCLog("Marking row " + x);
319 markRow(parent.parentNode.rows[x]);
321 // If the ctrl key modifier is used, toggle one message
322 } else if (event.button != 2 && is_ctrl_pressed) {
323 if (parent.getAttribute("citadel:marked")) {
331 function CtdlMarkRowAsRead(rowElement) {
332 var classes = rowElement.className;
333 classes = classes.replace("new_message","");
334 rowElement.className = classes;
336 function ApplySort(event) {
337 var target = event.target;
338 var sortId = target.id;
339 removeOldSortClass();
340 currentSorterToggle = target;
341 var sortModes = getSortMode(target); // returns [[key, func],[key,func]]
342 var sortModeToUse = null;
343 if (currentSortMode[0] == sortModes[0][0]) {
344 sortModeToUse = sortModes[1];
346 sortModeToUse = sortModes[0];
348 currentSortMode = sortModeToUse;
350 getMessages(); // in safe mode, we load from server already sorted
352 resortAndDisplay(sortModeToUse[1]);
355 function getSortMode(toggleElem) {
358 for(var key in toggles) {
359 var kr = (key.charAt(0) == 'r');
360 if (toggles[key] == toggleElem && !kr) {
361 forward = [key, sortModes[key]];
362 } else if (toggles[key] == toggleElem && kr) {
363 reverse = [key, sortModes[key]];
366 return [forward, reverse];
368 function removeOldSortClass() {
369 if (currentSorterToggle) {
370 var classes = currentSorterToggle.className;
371 classes = classes.replace("current_sort_mode","");
372 classes = classes.replace("sort_ascending","");
373 classes = classes.replace("sort_descending","");
374 currentSorterToggle.className = classes;
377 function markRow(row) {
378 var msgId = row.getAttribute("citadel:msgid");
379 row.className = row.className += " marked_row";
380 row.setAttribute("citadel:marked","marked");
381 currentlyMarkedRows[msgId] = row;
383 function unmarkRow(row) {
384 var msgId = row.getAttribute("citadel:msgid");
385 row.className = row.className.replace("marked_row","");
386 row.removeAttribute("citadel:marked");
387 delete currentlyMarkedRows[msgId];
389 function unmarkAllRows() {
390 for(msgId in currentlyMarkedRows) {
391 unmarkRow(currentlyMarkedRows[msgId]);
394 function deleteAllMarkedRows() {
395 for(msgId in currentlyMarkedRows) {
396 var row = currentlyMarkedRows[msgId];
397 var rowArrayId = row.getAttribute("citadel:ctdlrowid");
398 row.parentNode.removeChild(row);
399 delete currentlyMarkedRows[msgId];
400 delete msgs[rowArrayId];
402 // Now we have to reconstruct rowarray as the array length has changed */
403 var newMsgs = new Array(msgs.length-1);
405 for(var i=0; i<rowArray.length; i++) {
406 var currentRow = msgs[i];
407 if (currentRow != null) {
408 newMsgs[x] = currentRow;
413 resortAndDisplay(null);
415 function deleteAllSelectedMessages() {
418 for(msgId in currentlyMarkedRows) {
421 if (msgIds.length > 800) {
422 if (!room_is_trash) {
423 mvCommand = encodeURI("g_cmd=MOVE " + msgIds + "|_TRASH_|0");
426 mvCommand = encodeURI("g_cmd=DELE " + msgIds);
428 new Ajax.Request("ajax_servcmd", {
429 parameters: mvCommand,
431 onSuccess: function(transport) {
432 WCLog(transport.responseText);
439 if (!room_is_trash) {
440 mvCommand = encodeURI("g_cmd=MOVE " + msgIds + "|_TRASH_|0");
443 mvCommand = encodeURI("g_cmd=DELE " + msgIds);
445 new Ajax.Request("ajax_servcmd", {
446 parameters: mvCommand,
448 onSuccess: function(transport) {
449 WCLog(transport.responseText);
453 document.getElementById("preview_pane").innerHTML = "";
454 deleteAllMarkedRows();
457 function CtdlMessageListKeyDown(event) {
458 var key = event.which || event.keyCode;
460 if (key == 16) { /* SHIFT */
461 is_shift_pressed = true;
462 $('ib_summary').innerHTML = 'SHIFT';
464 else if ( (key == 17) || (key == 18) ) { /* CTRL or ALT */
465 $('ib_summary').innerHTML = 'CTRL';
466 is_ctrl_pressed = true;
470 function CtdlMessageListKeyUp(event) {
471 var key = event.which || event.keyCode;
473 if (key == 16) { /* SHIFT */
474 is_shift_pressed = false;
475 $('ib_summary').innerHTML = ' ';
477 else if ( (key == 17) || (key == 18) ) { /* CTRL or ALT */
478 is_ctrl_pressed = false;
479 $('ib_summary').innerHTML = ' ';
481 else if (key == 46) { /* DELETE */
482 deleteAllSelectedMessages();
486 function clearMessage(msgId) {
487 var row = document.getElementById('msg_'+msgId);
488 row.parentNode.removeChild(row);
489 delete currentlyMarkedRows[msgId];
492 function summaryViewContextMenu() {
493 if (!exitedMouseDown) {
494 var contextSource = document.getElementById("listViewContextMenu");
495 CtdlSpawnContextMenu(mouseDownEvent, contextSource);
499 function summaryViewDragAndDropHandler() {
500 var element = document.createElement("div");
501 var msgList = document.createElement("ul");
502 element.appendChild(msgList);
503 for(msgId in currentlyMarkedRows) {
504 msgRow = currentlyMarkedRows[msgId];
505 var subject = getTextContent(msgRow.getElementsByTagName("td")[0]);
506 var li = document.createElement("li");
507 msgList.appendChild(li);
508 setTextContent(li, subject);
509 li.ctdlMsgId = msgId;
515 function CtdlResizeMouseDown(event) {
516 $(document).observe('mousemove', CtdlResizeMouseMove);
517 $(document).observe('mouseup', CtdlResizeMouseUp);
518 saved_y = event.clientY;
521 function sizePreviewPane() {
522 var preview_pane = document.getElementById("preview_pane");
523 var summary_view = document.getElementById("summary_view");
524 var banner = document.getElementById("banner");
525 var message_list_hdr = document.getElementById("message_list_hdr");
526 var content = $('global'); // we'd like to use prototype methods here
527 var childElements = content.childElements();
528 var sizeOfElementsAbove = 0;
529 var heightOfViewPort = document.viewport.getHeight() // prototypejs method
530 var bannerHeight = banner.offsetHeight;
531 var contentViewPortHeight = heightOfViewPort-banner.offsetHeight-message_list_hdr.offsetHeight;
532 contentViewPortHeight = 0.95 * contentViewPortHeight; // leave some error (especially for FF3!!)
533 // Set summary_view to 20%;
534 var summary_height = ctdlLocalPrefs.readPref("svheight");
535 if (summary_height == null) {
536 summary_height = 0.20 * contentViewPortHeight;
538 // Set preview_pane to the remainder
539 var preview_height = contentViewPortHeight - summary_height;
541 summary_view.style.height = (summary_height)+"px";
542 preview_pane.style.height = (preview_height)+"px";
544 function CtdlResizeMouseMove(event) {
545 var clientX = event.clientX;
546 var clientY = event.clientY;
547 var summary_view = document.getElementById("summary_view");
548 var summaryViewHeight = summary_view.offsetHeight;
549 var increment = clientY-saved_y;
550 var summary_view_height = increment+summaryViewHeight;
551 summary_view.style.height = (summary_view_height)+"px";
552 // store summary view height
553 ctdlLocalPrefs.setPref("svheight",summary_view_height);
554 var msglist = document.getElementById("preview_pane");
555 var msgListHeight = msglist.offsetHeight;
556 msglist.style.height = (msgListHeight-increment)+"px";
558 /* For some reason the grippy doesn't work without position: absolute
559 so we need to set its top pos manually all the time */
560 var resize = document.getElementById("resize_msglist");
561 var resizePos = resize.offsetTop;
562 resize.style.top = (resizePos+increment)+"px";
564 function CtdlResizeMouseUp(event) {
565 $(document).stopObserving('mousemove', CtdlResizeMouseMove);
566 $(document).stopObserving('mouseup', CtdlResizeMouseUp);
568 function ApplySorterToggle() {
569 var className = currentSorterToggle.className;
570 className += " current_sort_mode";
571 if (currentSortMode[1] == sortRowsByDateDescending ||
572 currentSortMode[1] == sortRowsBySubjectDescending ||
573 currentSortMode[1] == sortRowsByFromDescending) {
574 className += " sort_descending";
576 className += " sort_ascending";
578 currentSorterToggle.className = className;
581 /* Hack to make the header table line up with the data */
582 function normalizeHeaderTable() {
583 var message_list_hdr = document.getElementById("message_list_hdr");
584 var summary_view = document.getElementById("summary_view");
585 var resize_msglist = document.getElementById("resize_msglist");
586 var headerTable = message_list_hdr.getElementsByTagName("table")[0];
587 var dataTable = summary_view.getElementsByTagName("table")[0];
588 var dataTableWidth = dataTable.offsetWidth;
589 headerTable.style.width = dataTableWidth+"px";
592 function setupPageSelector() {
593 var summpage = document.getElementById("summpage");
594 var select_page = document.getElementById("selectpage");
595 summpage.innerHTML = "";
597 WCLog("unhiding parent page");
598 select_page.className = "";
602 var pages = nummsgs / 499;
603 for(var i=0; i<pages; i++) {
604 var opt = document.createElement("option");
605 var startmsg = i * 499;
606 opt.setAttribute("value",startmsg);
607 if (currentPage == i) {
608 opt.setAttribute("selected","selected");
610 opt.appendChild(document.createTextNode((i+1)));
611 summpage.appendChild(opt);
615 function getPage(event) {
616 var target = event.target;
617 startmsg = target.options.item(target.selectedIndex).value;
618 currentPage = target.selectedIndex;
619 //query = ""; // We are getting a page from the _entire_ msg list, don't query
623 function takeOverSearchOMatic() {
624 var searchForm = document.getElementById("searchomatic").getElementsByTagName("form")[0];
625 // First disable the form post
626 searchForm.setAttribute("action","javascript:void();");
627 searchForm.removeAttribute("method");
628 $(searchForm).observe('submit', doSearch);
630 function doSearch() {
631 query = document.getElementById("srchquery").value;