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 originalMarkedRow = null;
39 var previousFinish = 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>";
54 "rdate" : sortRowsByDateDescending,
55 "date" : sortRowsByDateAscending,
56 "subj" : sortRowsBySubjectAscending,
57 "rsubj" : sortRowsBySubjectDescending,
58 "sender": sortRowsByFromAscending,
59 "rsender" : sortRowsByFromDescending
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;
74 function createMessageView() {
75 message_view = document.getElementById("message_list_body");
76 loadingMsg = document.getElementById("loading");
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);
100 alert('error: summpage does not exist');
102 takeOverSearchOMatic();
103 setupDragDrop(); // here for now
106 function getMessages() {
107 if (loadingMsg.parentNode == null) {
108 message_view.innerHTML = "";
109 message_view.appendChild(loadingMsg);
111 roomName = getTextContent(document.getElementById("rmname"));
112 var parameters = {'room':roomName, 'startmsg': startmsg, 'stopmsg': -1};
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";
122 parameters["SortBy"] = SortBy;
125 if (query.length > 0) {
126 parameters["query"] = query;
128 new Ajax.Request("roommsgs", {
130 onSuccess: loadMessages,
131 parameters: parameters,
134 onFailure: function(e) { alert("Failure: " + e);}
138 function evalJSON(data) {
140 if (typeof(JSON) === 'object' && typeof(JSON.parse) === 'function') {
142 jsonData = JSON.parse(data);
147 if (jsonData == null) {
148 jsonData = eval('('+data+')');
152 function loadMessages(transport) {
154 var data = evalJSON(transport.responseText);
155 if (!!data && transport.responseText.length < 2) {
156 alert("Message loading failed");
158 nummsgs = data['nummsgs'];
159 newmsgs = data['newmsgs'];
161 var length = msgs.length;
162 rowArray = new Array(length); // store so they can be sorted
163 wCLog("Row array length: "+rowArray.length);
165 //window.alert(e+"|"+e.description);
167 if (currentSortMode == null) {
168 if (sortmode.length < 1) {
171 currentSortMode = [sortmode, sortModes[sortmode]];
172 currentSorterToggle = toggles[sortmode];
175 resortAndDisplay(currentSortMode[1]);
178 resortAndDisplay(null);
180 if (loadingMsg.parentNode != null) {
181 loadingMsg.parentNode.removeChild(loadingMsg);
184 refreshMessageCounter();
186 function resortAndDisplay(sortMode) {
187 wCLog("Begin resortAndDisplay");
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();
195 if (sortMode != null) {
199 wCLog("Sort error: " + e);
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) {
209 var currentRow = msgs[x];
210 trTemplate[1] = "msg_"+currentRow[0];
212 if (((x-1) % 2) == 0) {
213 className += "table-alt-row";
215 className += "table-row";
218 className += " new_message";
220 trTemplate[3] = className;
221 trTemplate[5] = currentRow[0];
223 trTemplate[9] = currentRow[1];
224 trTemplate[11] = currentRow[2];
225 trTemplate[13] = currentRow[4];
227 compiled[i] = trTemplate.join("");
229 wCLog("Exception on row " + x + ":" + e);
232 compiled[length+2] = "</table>";
233 var end = new Date();
234 wCLog("iterate: " + (end-start));
235 var compile = compiled.join("");
237 $(message_view_parent).update(compile);
238 message_view_parent.observe('click', CtdlMessageListClick);
239 message_view = message_view_parent.firstChild;
241 var delta = end.getTime() - start.getTime();
242 wCLog("append: " + delta);
244 normalizeHeaderTable();
246 function sortRowsByDateAscending(a, b) {
249 return (dateOne - dateTwo);
251 function sortRowsByDateDescending(a, b) {
254 return (dateTwo - dateOne);
256 function sortRowsBySubjectAscending(a, b) {
257 var subjectOne = a[1];
258 var subjectTwo = b[1];
259 return strcmp(subjectOne, subjectTwo);
261 function sortRowsBySubjectDescending(a, b) {
262 var subjectOne = a[1];
263 var subjectTwo = b[1];
264 return strcmp(subjectTwo, subjectOne);
266 function sortRowsByFromAscending(a, b) {
269 return strcmp(fromOne, fromTwo);
271 function sortRowsByFromDescending(a, b) {
274 return strcmp(fromTwo, fromOne);
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;
289 if (is_shift_pressed) {
293 if (is_ctrl_pressed) {
297 $('ib_summary').innerHTML = str;
300 // If the ctrl key modifier wasn't used, unmark all rows and load the message
301 if (!is_shift_pressed && !is_ctrl_pressed) {
305 markedRowIndex = parent.rowIndex;
306 originalMarkedRow = parent;
307 document.getElementById("preview_pane").innerHTML = "";
308 new Ajax.Updater('preview_pane', 'msg/'+msgId, {method: 'get'});
312 var p = encodeURI('g_cmd=SEEN ' + msgId + '|1');
313 new Ajax.Request('ajax_servcmd', {
316 onComplete: CtdlMarkRowAsRead(parent)
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;
327 markRow(originalMarkedRow);
329 var rowIndex = parent.rowIndex;
330 if (markedFrom == 0) {
331 markedFrom = rowIndex;
333 var startMarkingFrom = 0;
335 if (markedRowIndex === null) {
336 startMarkingFrom = 0;
339 else if (rowIndex > markedRowIndex) {
340 startMarkingFrom = markedRowIndex+1;
342 } else if (rowIndex < markedRowIndex) {
343 startMarkingFrom = rowIndex+1;
344 finish = markedRowIndex;
346 previousFinish = finish;
347 wCLog('startMarkingFrom=' + startMarkingFrom + ', finish=' + finish);
348 for(var x = startMarkingFrom; x<finish; x++) {
349 wCLog("Marking row " + x);
350 markRow(parent.parentNode.rows[x]);
352 // If the ctrl key modifier is used, toggle one message
353 } else if (event.button != 2 && is_ctrl_pressed) {
354 if (parent.getAttribute("citadel:marked")) {
362 function CtdlMarkRowAsRead(rowElement) {
363 var classes = rowElement.className;
364 classes = classes.replace("new_message","");
365 rowElement.className = classes;
367 refreshMessageCounter();
369 function ApplySort(event) {
370 var target = event.target;
371 var sortId = target.id;
372 removeOldSortClass();
373 currentSorterToggle = target;
374 var sortModes = getSortMode(target); // returns [[key, func],[key,func]]
375 var sortModeToUse = null;
376 if (currentSortMode[0] == sortModes[0][0]) {
377 sortModeToUse = sortModes[1];
379 sortModeToUse = sortModes[0];
381 currentSortMode = sortModeToUse;
383 getMessages(); // in safe mode, we load from server already sorted
385 resortAndDisplay(sortModeToUse[1]);
388 function getSortMode(toggleElem) {
391 for(var key in toggles) {
392 var kr = (key.charAt(0) == 'r');
393 if (toggles[key] == toggleElem && !kr) {
394 forward = [key, sortModes[key]];
395 } else if (toggles[key] == toggleElem && kr) {
396 reverse = [key, sortModes[key]];
399 return [forward, reverse];
401 function removeOldSortClass() {
402 if (currentSorterToggle) {
403 var classes = currentSorterToggle.className;
404 classes = classes.replace("current_sort_mode","");
405 classes = classes.replace("sort_ascending","");
406 classes = classes.replace("sort_descending","");
407 currentSorterToggle.className = classes;
410 function markRow(row) {
411 var msgId = row.getAttribute("citadel:msgid");
412 row.className = row.className += " marked_row";
413 row.setAttribute("citadel:marked","marked");
414 currentlyMarkedRows[msgId] = row;
416 function unmarkRow(row) {
417 var msgId = row.getAttribute("citadel:msgid");
418 row.className = row.className.replace("marked_row","");
419 row.removeAttribute("citadel:marked");
420 delete currentlyMarkedRows[msgId];
422 function unmarkAllRows() {
423 for(msgId in currentlyMarkedRows) {
424 unmarkRow(currentlyMarkedRows[msgId]);
427 function deleteAllMarkedRows() {
428 for(msgId in currentlyMarkedRows) {
429 var row = currentlyMarkedRows[msgId];
430 var rowclass = row.getAttribute("class");
431 var msgUnseen = rowclass.search("new_message") >= 0;
433 var rowArrayId = row.getAttribute("citadel:ctdlrowid");
434 row.parentNode.removeChild(row);
435 delete currentlyMarkedRows[msgId];
436 delete msgs[rowArrayId];
441 // Now we have to reconstruct rowarray as the array length has changed */
442 var newMsgs = new Array(msgs.length-1);
444 for(var i=0; i<rowArray.length; i++) {
445 var currentRow = msgs[i];
446 if (currentRow != null) {
447 newMsgs[x] = currentRow;
452 resortAndDisplay(null);
453 refreshMessageCounter();
455 function deleteAllSelectedMessages() {
458 for(msgId in currentlyMarkedRows) {
461 if (msgIds.length > 800) {
462 if (!room_is_trash) {
463 mvCommand = encodeURI("g_cmd=MOVE " + msgIds + "|_TRASH_|0");
466 mvCommand = encodeURI("g_cmd=DELE " + msgIds);
468 new Ajax.Request("ajax_servcmd", {
469 parameters: mvCommand,
471 onSuccess: function(transport) {
472 wCLog(transport.responseText);
479 if (!room_is_trash) {
480 mvCommand = encodeURI("g_cmd=MOVE " + msgIds + "|_TRASH_|0");
483 mvCommand = encodeURI("g_cmd=DELE " + msgIds);
485 new Ajax.Request("ajax_servcmd", {
486 parameters: mvCommand,
488 onSuccess: function(transport) {
489 wCLog(transport.responseText);
493 document.getElementById("preview_pane").innerHTML = "";
494 deleteAllMarkedRows();
498 function CtdlMessageListKeyUp(event) {
499 var key = event.which || event.keyCode;
501 if (key == 46) { /* DELETE */
502 deleteAllSelectedMessages();
506 function clearMessage(msgId) {
507 var row = document.getElementById('msg_'+msgId);
508 row.parentNode.removeChild(row);
509 delete currentlyMarkedRows[msgId];
512 function summaryViewContextMenu() {
513 if (!exitedMouseDown) {
514 var contextSource = document.getElementById("listViewContextMenu");
515 CtdlSpawnContextMenu(mouseDownEvent, contextSource);
519 function summaryViewDragAndDropHandler() {
520 var element = document.createElement("div");
521 var msgList = document.createElement("ul");
522 element.appendChild(msgList);
523 for(msgId in currentlyMarkedRows) {
524 msgRow = currentlyMarkedRows[msgId];
525 var subject = getTextContent(msgRow.getElementsByTagName("td")[0]);
526 var li = document.createElement("li");
527 msgList.appendChild(li);
528 setTextContent(li, subject);
529 li.ctdlMsgId = msgId;
535 function CtdlResizeMouseDown(event) {
536 $(document).observe('mousemove', CtdlResizeMouseMove);
537 $(document).observe('mouseup', CtdlResizeMouseUp);
538 saved_y = event.clientY;
541 function sizePreviewPane() {
542 var preview_pane = document.getElementById("preview_pane");
543 var summary_view = document.getElementById("summary_view");
544 var banner = document.getElementById("banner");
545 var message_list_hdr = document.getElementById("message_list_hdr");
546 var content = $('global'); // we'd like to use prototype methods here
547 var childElements = content.childElements();
548 var sizeOfElementsAbove = 0;
549 var heightOfViewPort = document.viewport.getHeight() // prototypejs method
550 var bannerHeight = banner.offsetHeight;
551 var contentViewPortHeight = heightOfViewPort-banner.offsetHeight-message_list_hdr.offsetHeight;
552 contentViewPortHeight = 0.95 * contentViewPortHeight; // leave some error (especially for FF3!!)
553 // Set summary_view to 20%;
554 var summary_height = ctdlLocalPrefs.readPref("svheight");
555 if (summary_height == null) {
556 summary_height = 0.20 * contentViewPortHeight;
558 // Set preview_pane to the remainder
559 var preview_height = contentViewPortHeight - summary_height;
561 summary_view.style.height = (summary_height)+"px";
562 preview_pane.style.height = (preview_height)+"px";
564 function CtdlResizeMouseMove(event) {
565 var clientX = event.clientX;
566 var clientY = event.clientY;
567 var summary_view = document.getElementById("summary_view");
568 var summaryViewHeight = summary_view.offsetHeight;
569 var increment = clientY-saved_y;
570 var summary_view_height = increment+summaryViewHeight;
571 summary_view.style.height = (summary_view_height)+"px";
572 // store summary view height
573 ctdlLocalPrefs.setPref("svheight",summary_view_height);
574 var msglist = document.getElementById("preview_pane");
575 var msgListHeight = msglist.offsetHeight;
576 msglist.style.height = (msgListHeight-increment)+"px";
578 /* For some reason the grippy doesn't work without position: absolute
579 so we need to set its top pos manually all the time */
580 var resize = document.getElementById("resize_msglist");
581 var resizePos = resize.offsetTop;
582 resize.style.top = (resizePos+increment)+"px";
584 function CtdlResizeMouseUp(event) {
585 $(document).stopObserving('mousemove', CtdlResizeMouseMove);
586 $(document).stopObserving('mouseup', CtdlResizeMouseUp);
588 function ApplySorterToggle() {
589 var className = currentSorterToggle.className;
590 className += " current_sort_mode";
591 if (currentSortMode[1] == sortRowsByDateDescending ||
592 currentSortMode[1] == sortRowsBySubjectDescending ||
593 currentSortMode[1] == sortRowsByFromDescending) {
594 className += " sort_descending";
596 className += " sort_ascending";
598 currentSorterToggle.className = className;
601 /* Hack to make the header table line up with the data */
602 function normalizeHeaderTable() {
603 var message_list_hdr = document.getElementById("message_list_hdr");
604 var summary_view = document.getElementById("summary_view");
605 var resize_msglist = document.getElementById("resize_msglist");
606 var headerTable = message_list_hdr.getElementsByTagName("table")[0];
607 var dataTable = summary_view.getElementsByTagName("table")[0];
608 var dataTableWidth = dataTable.offsetWidth;
609 headerTable.style.width = dataTableWidth+"px";
612 function setupPageSelector() {
613 var summpage = document.getElementById("summpage");
614 var select_page = document.getElementById("selectpage");
615 summpage.innerHTML = "";
617 wCLog("unhiding parent page");
618 select_page.className = "";
622 var pages = nummsgs / 499;
623 for(var i=0; i<pages; i++) {
624 var opt = document.createElement("option");
625 var startmsg = i * 499;
626 opt.setAttribute("value",startmsg);
627 if (currentPage == i) {
628 opt.setAttribute("selected","selected");
630 opt.appendChild(document.createTextNode((i+1)));
631 summpage.appendChild(opt);
635 function getPage(event) {
636 var target = event.target;
637 startmsg = target.options.item(target.selectedIndex).value;
638 currentPage = target.selectedIndex;
639 //query = ""; // We are getting a page from the _entire_ msg list, don't query
643 function takeOverSearchOMatic() {
644 var searchForm = document.getElementById("searchomatic").getElementsByTagName("form")[0];
645 // First disable the form post
646 searchForm.setAttribute("action","javascript:void();");
647 searchForm.removeAttribute("method");
648 $(searchForm).observe('submit', doSearch);
650 function doSearch() {
651 query = document.getElementById("srchquery").value;