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.
10 1. Resort messages in both normal and paged view.
11 mv 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
16 document.observe("dom:loaded", createMessageView);
19 var message_view = null;
20 var loadingMsg = null;
22 var currentSortMode = null;
26 var mlh_subject = null;
28 var currentSorterToggle = null;
30 var currentlyMarkedRows = new Object();
31 var markedRowIndex = null;
32 var currentlyHasRowsSelected = false;
34 var mouseDownEvent = null;
35 var exitedMouseDown = false;
37 var originalMarkedRow = null;
38 var previousFinish = 0;
40 var trTemplate = new Array(11);
41 trTemplate[0] = "<tr id=\"";
42 trTemplate[2] = "\" citadel:dropenabled=\"dropenabled\" class=\"";
43 trTemplate[4] = "\" citadel:dndelement=\"summaryViewDragAndDropHandler\" citadel:msgid=\"";
44 trTemplate[6] = "\" citadel:ctdlrowid=\"";
45 trTemplate[8] = "\"><td class=\"col1\">";
46 trTemplate[10] = "</td><td class=\"col2\">";
47 trTemplate[12] = "</td><td class=\"col3\">";
48 trTemplate[14] = "</td></tr>";
53 "rdate" : sortRowsByDateDescending,
54 "date" : sortRowsByDateAscending,
55 "subj" : sortRowsBySubjectAscending,
56 "rsubj" : sortRowsBySubjectDescending,
57 "sender": sortRowsByFromAscending,
58 "rsender" : sortRowsByFromDescending
65 function createMessageView() {
66 message_view = document.getElementById("message_list_body");
67 loadingMsg = document.getElementById("loading");
69 mlh_date = $("mlh_date");
70 mlh_subject = $('mlh_subject');
71 mlh_from = $('mlh_from');
72 toggles["rdate"] = mlh_date;
73 toggles["date"] = mlh_date;
74 toggles["subj"] = mlh_subject;
75 toggles["rsubj"] = mlh_subject;
76 toggles["sender"] = mlh_from;
77 toggles["rsender"] = mlh_from;
78 mlh_date.observe('click',ApplySort);
79 mlh_subject.observe('click',ApplySort);
80 mlh_from.observe('click',ApplySort);
81 $(document).observe('keyup',CtdlMessageListKeyUp,false);
82 $('resize_msglist').observe('mousedown', CtdlResizeMouseDown);
83 $('m_refresh').observe('click', getMessages);
84 document.getElementById('m_refresh').setAttribute("href","#");
85 Event.observe(document.onresize ? document : window, "resize", normalizeHeaderTable);
86 Event.observe(document.onresize ? document : window, "resize", sizePreviewPane);
87 $('summpage').observe('change', getPage);
88 takeOverSearchOMatic();
89 setupDragDrop(); // here for now
91 function getMessages() {
92 if (loadingMsg.parentNode == null) {
93 message_view.innerHTML = "";
94 message_view.appendChild(loadingMsg);
96 roomName = getTextContent(document.getElementById("rmname"));
97 var parameters = {'room':roomName, 'startmsg': startmsg, 'stopmsg': -1};
99 parameters['stopmsg'] = parseInt(startmsg)+499;
100 //parameters['maxmsgs'] = 500;
101 if (currentSortMode != null) {
102 var SortBy = currentSortMode[0];
103 if (SortBy.charAt(0) == 'r') {
104 SortBy = SortBy.substr(1);
105 parameters["SortOrder"] = "0";
107 parameters["SortBy"] = SortBy;
110 if (query.length > 0) {
111 parameters["query"] = query;
113 new Ajax.Request("roommsgs", {
115 onSuccess: loadMessages,
116 parameters: parameters,
119 onFailure: function(e) { alert("Failure: " + e);}
122 function evalJSON(data) {
124 if (typeof(JSON) === 'object' && typeof(JSON.parse) === 'function') {
126 jsonData = JSON.parse(data);
131 if (jsonData == null) {
132 jsonData = eval('('+data+')');
136 function loadMessages(transport) {
138 var data = evalJSON(transport.responseText);
139 if (!!data && transport.responseText.length < 2) {
140 alert("Message loading failed");
142 nummsgs = data['nummsgs'];
144 var length = msgs.length;
145 rowArray = new Array(length); // store so they can be sorted
146 WCLog("Row array length: "+rowArray.length);
148 //window.alert(e+"|"+e.description);
150 if (currentSortMode == null) {
151 if (sortmode.length < 1) {
154 currentSortMode = [sortmode, sortModes[sortmode]];
155 currentSorterToggle = toggles[sortmode];
158 resortAndDisplay(currentSortMode[1]);
161 resortAndDisplay(null);
163 if (loadingMsg.parentNode != null) {
164 loadingMsg.parentNode.removeChild(loadingMsg);
168 function resortAndDisplay(sortMode) {
169 WCLog("Begin resortAndDisplay");
171 /* We used to try and clear out the message_view element,
172 but stupid IE doesn't even do that properly */
173 var message_view_parent = message_view.parentNode;
174 message_view_parent.removeChild(message_view);
175 var startSort = new Date();
177 if (sortMode != null) {
181 WCLog("Sort error: " + e);
183 var endSort = new Date();
184 WCLog("Sort rowArray in " + (endSort-startSort));
185 var start = new Date();
186 var length = msgs.length;
187 var compiled = new Array(length+2);
188 compiled[0] = "<tbody xmlns:citadel=\"http://citadel.org\" id=\"message_list_body\" class=\"mailbox_summary\">";
189 for(var x=0; x<length; ++x) {
191 var currentRow = msgs[x];
192 trTemplate[1] = "msg_"+currentRow[0];
194 if (((x-1) % 2) == 0) {
195 className += "table-alt-row";
197 className += "table-row";
200 className += " new_message";
202 trTemplate[3] = className;
203 trTemplate[5] = currentRow[0];
205 trTemplate[9] = currentRow[1];
206 trTemplate[11] = currentRow[2];
207 trTemplate[13] = currentRow[4];
209 compiled[i] = trTemplate.join("");
211 WCLog("Exception on row " + x + ":" + e);
214 compiled[length+2] = "</tbody>";
215 var end = new Date();
216 WCLog("iterate: " + (end-start));
217 var compile = compiled.join("");
219 $(message_view_parent).update(compile);
220 message_view_parent.onclick = CtdlMessageListClick;
221 message_view = message_view_parent.firstChild;
223 var delta = end.getTime() - start.getTime();
224 WCLog("append: " + delta);
226 normalizeHeaderTable();
228 function sortRowsByDateAscending(a, b) {
231 return (dateOne - dateTwo);
233 function sortRowsByDateDescending(a, b) {
236 return (dateTwo - dateOne);
238 function sortRowsBySubjectAscending(a, b) {
239 var subjectOne = a[1];
240 var subjectTwo = b[1];
241 return strcmp(subjectOne, subjectTwo);
243 function sortRowsBySubjectDescending(a, b) {
244 var subjectOne = a[1];
245 var subjectTwo = b[1];
246 return strcmp(subjectTwo, subjectOne);
248 function sortRowsByFromAscending(a, b) {
251 return strcmp(fromOne, fromTwo);
253 function sortRowsByFromDescending(a, b) {
256 return strcmp(fromTwo, fromOne);
258 function CtdlMessageListClick(evt) {
259 /* Since element.onload is used here, test to see if evt is defined */
260 var event = evt ? evt : window.event;
261 var target = event.target ? event.target: event.srcElement; // and again..
262 var parent = target.parentNode;
263 var msgId = parent.getAttribute("citadel:msgid");
264 // If the ctrl key modifier wasn't used, unmark all rows and load the message
265 if (!event.shiftKey && !event.ctrlKey && !event.altKey) {
269 markedRowIndex = parent.rowIndex;
270 originalMarkedRow = parent;
271 document.getElementById("preview_pane").innerHTML = "";
272 new Ajax.Updater('preview_pane', 'msg/'+msgId, {method: 'get'});
274 new Ajax.Request('ajax_servcmd', {
276 parameters: 'g_cmd=SEEN ' + msgId + '|1',
277 onComplete: CtdlMarkRowAsRead(parent)});
278 // If the shift key modifier is used, mark a range...
279 } else if (event.button != 2 && event.shiftKey) {
280 if (originalMarkedRow == null) {
281 originalMarkedRow = parent;
286 markRow(originalMarkedRow);
288 var rowIndex = parent.rowIndex;
289 if (markedFrom == 0) {
290 markedFrom = rowIndex;
292 var startMarkingFrom = 0;
294 if (rowIndex > markedRowIndex) {
295 startMarkingFrom = markedRowIndex+1;
297 } else if (rowIndex < markedRowIndex) {
298 startMarkingFrom = rowIndex+1;
299 finish = markedRowIndex;
301 previousFinish = finish;
302 WCLog('startMarkingFrom=' + startMarkingFrom + ', finish=' + finish);
303 for(var x = startMarkingFrom; x<finish; x++) {
304 WCLog("Marking row " + x);
305 markRow(parent.parentNode.rows[x]);
307 // If the ctrl key modifier is used, toggle one message
308 } else if (event.button != 2 && (event.ctrlKey || event.altKey)) {
309 if (parent.getAttribute("citadel:marked")) {
317 function CtdlMarkRowAsRead(rowElement) {
318 var classes = rowElement.className;
319 classes = classes.replace("new_message","");
320 rowElement.className = classes;
322 function ApplySort(event) {
323 var target = event.target;
324 var sortId = target.id;
325 removeOldSortClass();
326 currentSorterToggle = target;
327 var sortModes = getSortMode(target); // returns [[key, func],[key,func]]
328 var sortModeToUse = null;
329 if (currentSortMode[0] == sortModes[0][0]) {
330 sortModeToUse = sortModes[1];
332 sortModeToUse = sortModes[0];
334 currentSortMode = sortModeToUse;
336 getMessages(); // in safe mode, we load from server already sorted
338 resortAndDisplay(sortModeToUse[1]);
341 function getSortMode(toggleElem) {
344 for(var key in toggles) {
345 var kr = (key.charAt(0) == 'r');
346 if (toggles[key] == toggleElem && !kr) {
347 forward = [key, sortModes[key]];
348 } else if (toggles[key] == toggleElem && kr) {
349 reverse = [key, sortModes[key]];
352 return [forward, reverse];
354 function removeOldSortClass() {
355 if (currentSorterToggle) {
356 var classes = currentSorterToggle.className;
357 /* classes = classes.replace("current_sort_mode","");
358 classes = classes.replace("sort_ascending","");
359 classes = classes.replace("sort_descending",""); */
360 currentSorterToggle.className = "";
363 function markRow(row) {
364 var msgId = row.getAttribute("citadel:msgid");
365 row.className = row.className += " marked_row";
366 row.setAttribute("citadel:marked","marked");
367 currentlyMarkedRows[msgId] = row;
369 function unmarkRow(row) {
370 var msgId = row.getAttribute("citadel:msgid");
371 row.className = row.className.replace("marked_row","");
372 row.removeAttribute("citadel:marked");
373 delete currentlyMarkedRows[msgId];
375 function unmarkAllRows() {
376 for(msgId in currentlyMarkedRows) {
377 unmarkRow(currentlyMarkedRows[msgId]);
380 function deleteAllMarkedRows() {
381 for(msgId in currentlyMarkedRows) {
382 var row = currentlyMarkedRows[msgId];
383 var rowArrayId = row.getAttribute("citadel:ctdlrowid");
384 row.parentNode.removeChild(row);
385 delete currentlyMarkedRows[msgId];
386 delete msgs[rowArrayId];
388 // Now we have to reconstruct rowarray as the array length has changed */
389 var newMsgs = new Array(msgs.length-1);
391 for(var i=0; i<rowArray.length; i++) {
392 var currentRow = msgs[i];
393 if (currentRow != null) {
394 newMsgs[x] = currentRow;
399 resortAndDisplay(null);
402 function deleteAllSelectedMessages() {
403 for(msgId in currentlyMarkedRows) {
404 if (!room_is_trash) {
405 new Ajax.Request('ajax_servcmd',
407 parameters: 'g_cmd=MOVE ' + msgId + '|_TRASH_|0'
410 new Ajax.Request('ajax_servcmd', {method: 'post',
411 parameters: 'g_cmd=DELE '+msgId});
414 document.getElementById("preview_pane").innerHTML = "";
415 deleteAllMarkedRows();
418 function CtdlMessageListKeyUp(event) {
419 var key = event.which;
420 if (key == 46) { // DELETE
421 deleteAllSelectedMessages();
425 function clearMessage(msgId) {
426 var row = document.getElementById('msg_'+msgId);
427 row.parentNode.removeChild(row);
428 delete currentlyMarkedRows[msgId];
431 function summaryViewContextMenu() {
432 if (!exitedMouseDown) {
433 var contextSource = document.getElementById("listViewContextMenu");
434 CtdlSpawnContextMenu(mouseDownEvent, contextSource);
438 function summaryViewDragAndDropHandler() {
439 var element = document.createElement("div");
440 var msgList = document.createElement("ul");
441 element.appendChild(msgList);
442 for(msgId in currentlyMarkedRows) {
443 msgRow = currentlyMarkedRows[msgId];
444 var subject = getTextContent(msgRow.getElementsByTagName("td")[0]);
445 var li = document.createElement("li");
446 msgList.appendChild(li);
447 setTextContent(li, subject);
448 li.ctdlMsgId = msgId;
454 function CtdlResizeMouseDown(event) {
455 $(document).observe('mousemove', CtdlResizeMouseMove);
456 $(document).observe('mouseup', CtdlResizeMouseUp);
457 saved_y = event.clientY;
460 function sizePreviewPane() {
461 var preview_pane = document.getElementById("preview_pane");
462 var summary_view = document.getElementById("summary_view");
463 var banner = document.getElementById("banner");
464 var message_list_hdr = document.getElementById("message_list_hdr");
465 var content = $('global'); // we'd like to use prototype methods here
466 var childElements = content.childElements();
467 var sizeOfElementsAbove = 0;
468 var heightOfViewPort = document.viewport.getHeight() // prototypejs method
469 var bannerHeight = banner.offsetHeight;
470 var contentViewPortHeight = heightOfViewPort-banner.offsetHeight-message_list_hdr.offsetHeight;
471 contentViewPortHeight = 0.98 * contentViewPortHeight; // leave some error
472 // Set summary_view to 20%;
473 var summary_height = ctdlLocalPrefs.readPref("svheight");
474 if (summary_height == null) {
475 summary_height = 0.20 * contentViewPortHeight;
477 // Set preview_pane to the remainder
478 var preview_height = contentViewPortHeight - summary_height;
480 summary_view.style.height = (summary_height)+"px";
481 preview_pane.style.height = (preview_height)+"px";
483 function CtdlResizeMouseMove(event) {
484 var clientX = event.clientX;
485 var clientY = event.clientY;
486 var summary_view = document.getElementById("summary_view");
487 var summaryViewHeight = summary_view.offsetHeight;
488 var increment = clientY-saved_y;
489 var summary_view_height = increment+summaryViewHeight;
490 summary_view.style.height = (summary_view_height)+"px";
491 // store summary view height
492 ctdlLocalPrefs.setPref("svheight",summary_view_height);
493 var msglist = document.getElementById("preview_pane");
494 var msgListHeight = msglist.offsetHeight;
495 msglist.style.height = (msgListHeight-increment)+"px";
497 /* For some reason the grippy doesn't work without position: absolute
498 so we need to set its top pos manually all the time */
499 var resize = document.getElementById("resize_msglist");
500 var resizePos = resize.offsetTop;
501 resize.style.top = (resizePos+increment)+"px";
503 function CtdlResizeMouseUp(event) {
504 $(document).stopObserving('mousemove', CtdlResizeMouseMove);
505 $(document).stopObserving('mouseup', CtdlResizeMouseUp);
507 function ApplySorterToggle() {
508 var className = currentSorterToggle.className;
509 className += " current_sort_mode";
510 if (currentSortMode[1] == sortRowsByDateDescending ||
511 currentSortMode[1] == sortRowsBySubjectDescending ||
512 currentSortMode[1] == sortRowsByFromDescending) {
513 className += " sort_descending";
515 className += " sort_ascending";
517 currentSorterToggle.className = className;
519 /** Hack to make the header table line up with the data */
520 function normalizeHeaderTable() {
521 var message_list_hdr = document.getElementById("message_list_hdr");
522 var summary_view = document.getElementById("summary_view");
523 var resize_msglist = document.getElementById("resize_msglist");
524 var headerTable = message_list_hdr.getElementsByTagName("table")[0];
525 var dataTable = summary_view.getElementsByTagName("table")[0];
526 var dataTableWidth = dataTable.offsetWidth;
527 headerTable.style.width = dataTableWidth+"px";
530 function setupPageSelector() {
531 var summpage = document.getElementById("summpage");
532 var select_page = document.getElementById("selectpage");
533 summpage.innerHTML = "";
535 WCLog("unhiding parent page");
536 select_page.className = "";
540 var pages = nummsgs / 499;
541 for(var i=0; i<pages; i++) {
542 var opt = document.createElement("option");
543 var startmsg = i * 499;
544 opt.setAttribute("value",startmsg);
545 if (currentPage == i) {
546 opt.setAttribute("selected","selected");
548 opt.appendChild(document.createTextNode((i+1)));
549 summpage.appendChild(opt);
552 function getPage(event) {
553 var target = event.target;
554 startmsg = target.options.item(target.selectedIndex).value;
555 currentPage = target.selectedIndex;
556 //query = ""; // We are getting a page from the _entire_ msg list, don't query
559 function takeOverSearchOMatic() {
560 var searchForm = document.getElementById("searchomatic").getElementsByTagName("form")[0];
561 // First disable the form post
562 searchForm.setAttribute("action","javascript:void();");
563 searchForm.removeAttribute("method");
564 $(searchForm).observe('submit', doSearch);
566 function doSearch() {
567 query = document.getElementById("srchquery").value;