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
66 function createMessageView() {
67 message_view = document.getElementById("message_list_body");
68 loadingMsg = document.getElementById("loading");
70 mlh_date = $("mlh_date");
71 mlh_subject = $('mlh_subject');
72 mlh_from = $('mlh_from');
73 toggles["rdate"] = mlh_date;
74 toggles["date"] = mlh_date;
75 toggles["subj"] = mlh_subject;
76 toggles["rsubj"] = mlh_subject;
77 toggles["sender"] = mlh_from;
78 toggles["rsender"] = mlh_from;
79 mlh_date.observe('click',ApplySort);
80 mlh_subject.observe('click',ApplySort);
81 mlh_from.observe('click',ApplySort);
82 $(document).observe('keyup',CtdlMessageListKeyUp,false);
83 $('resize_msglist').observe('mousedown', CtdlResizeMouseDown);
84 $('m_refresh').observe('click', getMessages);
85 document.getElementById('m_refresh').setAttribute("href","#");
86 Event.observe(document.onresize ? document : window, "resize", normalizeHeaderTable);
87 Event.observe(document.onresize ? document : window, "resize", sizePreviewPane);
88 $('summpage').observe('change', getPage);
89 takeOverSearchOMatic();
90 setupDragDrop(); // here for now
93 function getMessages() {
94 if (loadingMsg.parentNode == null) {
95 message_view.innerHTML = "";
96 message_view.appendChild(loadingMsg);
98 roomName = getTextContent(document.getElementById("rmname"));
99 var parameters = {'room':roomName, 'startmsg': startmsg, 'stopmsg': -1};
101 parameters['stopmsg'] = parseInt(startmsg)+499;
102 //parameters['maxmsgs'] = 500;
103 if (currentSortMode != null) {
104 var SortBy = currentSortMode[0];
105 if (SortBy.charAt(0) == 'r') {
106 SortBy = SortBy.substr(1);
107 parameters["SortOrder"] = "0";
109 parameters["SortBy"] = SortBy;
112 if (query.length > 0) {
113 parameters["query"] = query;
115 new Ajax.Request("roommsgs", {
117 onSuccess: loadMessages,
118 parameters: parameters,
121 onFailure: function(e) { alert("Failure: " + e);}
125 function evalJSON(data) {
127 if (typeof(JSON) === 'object' && typeof(JSON.parse) === 'function') {
129 jsonData = JSON.parse(data);
134 if (jsonData == null) {
135 jsonData = eval('('+data+')');
139 function loadMessages(transport) {
141 var data = evalJSON(transport.responseText);
142 if (!!data && transport.responseText.length < 2) {
143 alert("Message loading failed");
145 nummsgs = data['nummsgs'];
147 var length = msgs.length;
148 rowArray = new Array(length); // store so they can be sorted
149 WCLog("Row array length: "+rowArray.length);
151 //window.alert(e+"|"+e.description);
153 if (currentSortMode == null) {
154 if (sortmode.length < 1) {
157 currentSortMode = [sortmode, sortModes[sortmode]];
158 currentSorterToggle = toggles[sortmode];
161 resortAndDisplay(currentSortMode[1]);
164 resortAndDisplay(null);
166 if (loadingMsg.parentNode != null) {
167 loadingMsg.parentNode.removeChild(loadingMsg);
171 function resortAndDisplay(sortMode) {
172 WCLog("Begin resortAndDisplay");
174 /* We used to try and clear out the message_view element,
175 but stupid IE doesn't even do that properly */
176 var message_view_parent = message_view.parentNode;
177 message_view_parent.removeChild(message_view);
178 var startSort = new Date();
180 if (sortMode != null) {
184 WCLog("Sort error: " + e);
186 var endSort = new Date();
187 WCLog("Sort rowArray in " + (endSort-startSort));
188 var start = new Date();
189 var length = msgs.length;
190 var compiled = new Array(length+2);
191 compiled[0] = "<tbody xmlns:citadel=\"http://citadel.org\" id=\"message_list_body\" class=\"mailbox_summary\">";
192 for(var x=0; x<length; ++x) {
194 var currentRow = msgs[x];
195 trTemplate[1] = "msg_"+currentRow[0];
197 if (((x-1) % 2) == 0) {
198 className += "table-alt-row";
200 className += "table-row";
203 className += " new_message";
205 trTemplate[3] = className;
206 trTemplate[5] = currentRow[0];
208 trTemplate[9] = currentRow[1];
209 trTemplate[11] = currentRow[2];
210 trTemplate[13] = currentRow[4];
212 compiled[i] = trTemplate.join("");
214 WCLog("Exception on row " + x + ":" + e);
217 compiled[length+2] = "</tbody>";
218 var end = new Date();
219 WCLog("iterate: " + (end-start));
220 var compile = compiled.join("");
222 $(message_view_parent).update(compile);
223 message_view_parent.onclick = CtdlMessageListClick;
224 message_view = message_view_parent.firstChild;
226 var delta = end.getTime() - start.getTime();
227 WCLog("append: " + delta);
229 normalizeHeaderTable();
231 function sortRowsByDateAscending(a, b) {
234 return (dateOne - dateTwo);
236 function sortRowsByDateDescending(a, b) {
239 return (dateTwo - dateOne);
241 function sortRowsBySubjectAscending(a, b) {
242 var subjectOne = a[1];
243 var subjectTwo = b[1];
244 return strcmp(subjectOne, subjectTwo);
246 function sortRowsBySubjectDescending(a, b) {
247 var subjectOne = a[1];
248 var subjectTwo = b[1];
249 return strcmp(subjectTwo, subjectOne);
251 function sortRowsByFromAscending(a, b) {
254 return strcmp(fromOne, fromTwo);
256 function sortRowsByFromDescending(a, b) {
259 return strcmp(fromTwo, fromOne);
261 function CtdlMessageListClick(evt) {
262 /* Since element.onload is used here, test to see if evt is defined */
263 var event = evt ? evt : window.event;
264 var target = event.target ? event.target: event.srcElement; // and again..
265 var parent = target.parentNode;
266 var msgId = parent.getAttribute("citadel:msgid");
267 // If the ctrl key modifier wasn't used, unmark all rows and load the message
268 if (!event.shiftKey && !event.ctrlKey && !event.altKey) {
272 markedRowIndex = parent.rowIndex;
273 originalMarkedRow = parent;
274 document.getElementById("preview_pane").innerHTML = "";
275 new Ajax.Updater('preview_pane', 'msg/'+msgId, {method: 'get'});
277 new Ajax.Request('ajax_servcmd', {
279 parameters: 'g_cmd=SEEN ' + msgId + '|1',
280 onComplete: CtdlMarkRowAsRead(parent)});
281 // If the shift key modifier is used, mark a range...
282 } else if (event.button != 2 && event.shiftKey) {
283 if (originalMarkedRow == null) {
284 originalMarkedRow = parent;
289 markRow(originalMarkedRow);
291 var rowIndex = parent.rowIndex;
292 if (markedFrom == 0) {
293 markedFrom = rowIndex;
295 var startMarkingFrom = 0;
297 if (rowIndex > markedRowIndex) {
298 startMarkingFrom = markedRowIndex+1;
300 } else if (rowIndex < markedRowIndex) {
301 startMarkingFrom = rowIndex+1;
302 finish = markedRowIndex;
304 previousFinish = finish;
305 WCLog('startMarkingFrom=' + startMarkingFrom + ', finish=' + finish);
306 for(var x = startMarkingFrom; x<finish; x++) {
307 WCLog("Marking row " + x);
308 markRow(parent.parentNode.rows[x]);
310 // If the ctrl key modifier is used, toggle one message
311 } else if (event.button != 2 && (event.ctrlKey || event.altKey)) {
312 if (parent.getAttribute("citadel:marked")) {
320 function CtdlMarkRowAsRead(rowElement) {
321 var classes = rowElement.className;
322 classes = classes.replace("new_message","");
323 rowElement.className = classes;
325 function ApplySort(event) {
326 var target = event.target;
327 var sortId = target.id;
328 removeOldSortClass();
329 currentSorterToggle = target;
330 var sortModes = getSortMode(target); // returns [[key, func],[key,func]]
331 var sortModeToUse = null;
332 if (currentSortMode[0] == sortModes[0][0]) {
333 sortModeToUse = sortModes[1];
335 sortModeToUse = sortModes[0];
337 currentSortMode = sortModeToUse;
339 getMessages(); // in safe mode, we load from server already sorted
341 resortAndDisplay(sortModeToUse[1]);
344 function getSortMode(toggleElem) {
347 for(var key in toggles) {
348 var kr = (key.charAt(0) == 'r');
349 if (toggles[key] == toggleElem && !kr) {
350 forward = [key, sortModes[key]];
351 } else if (toggles[key] == toggleElem && kr) {
352 reverse = [key, sortModes[key]];
355 return [forward, reverse];
357 function removeOldSortClass() {
358 if (currentSorterToggle) {
359 var classes = currentSorterToggle.className;
360 /* classes = classes.replace("current_sort_mode","");
361 classes = classes.replace("sort_ascending","");
362 classes = classes.replace("sort_descending",""); */
363 currentSorterToggle.className = "";
366 function markRow(row) {
367 var msgId = row.getAttribute("citadel:msgid");
368 row.className = row.className += " marked_row";
369 row.setAttribute("citadel:marked","marked");
370 currentlyMarkedRows[msgId] = row;
372 function unmarkRow(row) {
373 var msgId = row.getAttribute("citadel:msgid");
374 row.className = row.className.replace("marked_row","");
375 row.removeAttribute("citadel:marked");
376 delete currentlyMarkedRows[msgId];
378 function unmarkAllRows() {
379 for(msgId in currentlyMarkedRows) {
380 unmarkRow(currentlyMarkedRows[msgId]);
383 function deleteAllMarkedRows() {
384 for(msgId in currentlyMarkedRows) {
385 var row = currentlyMarkedRows[msgId];
386 var rowArrayId = row.getAttribute("citadel:ctdlrowid");
387 row.parentNode.removeChild(row);
388 delete currentlyMarkedRows[msgId];
389 delete msgs[rowArrayId];
391 // Now we have to reconstruct rowarray as the array length has changed */
392 var newMsgs = new Array(msgs.length-1);
394 for(var i=0; i<rowArray.length; i++) {
395 var currentRow = msgs[i];
396 if (currentRow != null) {
397 newMsgs[x] = currentRow;
402 resortAndDisplay(null);
405 function deleteAllSelectedMessages() {
406 for(msgId in currentlyMarkedRows) {
407 if (!room_is_trash) {
408 new Ajax.Request('ajax_servcmd',
410 parameters: 'g_cmd=MOVE ' + msgId + '|_TRASH_|0'
413 new Ajax.Request('ajax_servcmd', {method: 'post',
414 parameters: 'g_cmd=DELE '+msgId});
417 document.getElementById("preview_pane").innerHTML = "";
418 deleteAllMarkedRows();
421 function CtdlMessageListKeyUp(event) {
422 var key = event.which;
423 if (key == 46) { // DELETE
424 deleteAllSelectedMessages();
428 function clearMessage(msgId) {
429 var row = document.getElementById('msg_'+msgId);
430 row.parentNode.removeChild(row);
431 delete currentlyMarkedRows[msgId];
434 function summaryViewContextMenu() {
435 if (!exitedMouseDown) {
436 var contextSource = document.getElementById("listViewContextMenu");
437 CtdlSpawnContextMenu(mouseDownEvent, contextSource);
441 function summaryViewDragAndDropHandler() {
442 var element = document.createElement("div");
443 var msgList = document.createElement("ul");
444 element.appendChild(msgList);
445 for(msgId in currentlyMarkedRows) {
446 msgRow = currentlyMarkedRows[msgId];
447 var subject = getTextContent(msgRow.getElementsByTagName("td")[0]);
448 var li = document.createElement("li");
449 msgList.appendChild(li);
450 setTextContent(li, subject);
451 li.ctdlMsgId = msgId;
457 function CtdlResizeMouseDown(event) {
458 $(document).observe('mousemove', CtdlResizeMouseMove);
459 $(document).observe('mouseup', CtdlResizeMouseUp);
460 saved_y = event.clientY;
463 function sizePreviewPane() {
464 var preview_pane = document.getElementById("preview_pane");
465 var summary_view = document.getElementById("summary_view");
466 var banner = document.getElementById("banner");
467 var message_list_hdr = document.getElementById("message_list_hdr");
468 var content = $('global'); // we'd like to use prototype methods here
469 var childElements = content.childElements();
470 var sizeOfElementsAbove = 0;
471 var heightOfViewPort = document.viewport.getHeight() // prototypejs method
472 var bannerHeight = banner.offsetHeight;
473 var contentViewPortHeight = heightOfViewPort-banner.offsetHeight-message_list_hdr.offsetHeight;
474 contentViewPortHeight = 0.98 * contentViewPortHeight; // leave some error
475 // Set summary_view to 20%;
476 var summary_height = ctdlLocalPrefs.readPref("svheight");
477 if (summary_height == null) {
478 summary_height = 0.20 * contentViewPortHeight;
480 // Set preview_pane to the remainder
481 var preview_height = contentViewPortHeight - summary_height;
483 summary_view.style.height = (summary_height)+"px";
484 preview_pane.style.height = (preview_height)+"px";
486 function CtdlResizeMouseMove(event) {
487 var clientX = event.clientX;
488 var clientY = event.clientY;
489 var summary_view = document.getElementById("summary_view");
490 var summaryViewHeight = summary_view.offsetHeight;
491 var increment = clientY-saved_y;
492 var summary_view_height = increment+summaryViewHeight;
493 summary_view.style.height = (summary_view_height)+"px";
494 // store summary view height
495 ctdlLocalPrefs.setPref("svheight",summary_view_height);
496 var msglist = document.getElementById("preview_pane");
497 var msgListHeight = msglist.offsetHeight;
498 msglist.style.height = (msgListHeight-increment)+"px";
500 /* For some reason the grippy doesn't work without position: absolute
501 so we need to set its top pos manually all the time */
502 var resize = document.getElementById("resize_msglist");
503 var resizePos = resize.offsetTop;
504 resize.style.top = (resizePos+increment)+"px";
506 function CtdlResizeMouseUp(event) {
507 $(document).stopObserving('mousemove', CtdlResizeMouseMove);
508 $(document).stopObserving('mouseup', CtdlResizeMouseUp);
510 function ApplySorterToggle() {
511 var className = currentSorterToggle.className;
512 className += " current_sort_mode";
513 if (currentSortMode[1] == sortRowsByDateDescending ||
514 currentSortMode[1] == sortRowsBySubjectDescending ||
515 currentSortMode[1] == sortRowsByFromDescending) {
516 className += " sort_descending";
518 className += " sort_ascending";
520 currentSorterToggle.className = className;
522 /** Hack to make the header table line up with the data */
523 function normalizeHeaderTable() {
524 var message_list_hdr = document.getElementById("message_list_hdr");
525 var summary_view = document.getElementById("summary_view");
526 var resize_msglist = document.getElementById("resize_msglist");
527 var headerTable = message_list_hdr.getElementsByTagName("table")[0];
528 var dataTable = summary_view.getElementsByTagName("table")[0];
529 var dataTableWidth = dataTable.offsetWidth;
530 headerTable.style.width = dataTableWidth+"px";
533 function setupPageSelector() {
534 var summpage = document.getElementById("summpage");
535 var select_page = document.getElementById("selectpage");
536 summpage.innerHTML = "";
538 WCLog("unhiding parent page");
539 select_page.className = "";
543 var pages = nummsgs / 499;
544 for(var i=0; i<pages; i++) {
545 var opt = document.createElement("option");
546 var startmsg = i * 499;
547 opt.setAttribute("value",startmsg);
548 if (currentPage == i) {
549 opt.setAttribute("selected","selected");
551 opt.appendChild(document.createTextNode((i+1)));
552 summpage.appendChild(opt);
555 function getPage(event) {
556 var target = event.target;
557 startmsg = target.options.item(target.selectedIndex).value;
558 currentPage = target.selectedIndex;
559 //query = ""; // We are getting a page from the _entire_ msg list, don't query
562 function takeOverSearchOMatic() {
563 var searchForm = document.getElementById("searchomatic").getElementsByTagName("form")[0];
564 // First disable the form post
565 searchForm.setAttribute("action","javascript:void();");
566 searchForm.removeAttribute("method");
567 $(searchForm).observe('submit', doSearch);
569 function doSearch() {
570 query = document.getElementById("srchquery").value;