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 document.observe("dom:loaded", createMessageView);
11 var message_view = null;
12 var loadingMsg = null;
14 var currentSortMode = null;
18 var mlh_subject = null;
20 var currentSorterToggle = null;
22 var currentlyMarkedRows = new Object();
23 var markedRowIndex = null;
25 var mouseDownEvent = null;
26 var exitedMouseDown = false;
28 var trTemplate = new Array(11);
29 trTemplate[0] = "<tr id=\"";
30 trTemplate[2] = "\" citadel:dropenabled=\"dropenabled\" class=\"";
31 trTemplate[4] = "\" citadel:dndelement=\"summaryViewDragAndDropHandler\" citadel:msgid=\"";
32 trTemplate[6] = "\" citadel:ctdlrowid=\"";
33 trTemplate[8] = "\"><td class=\"col1\">";
34 trTemplate[10] = "</td><td class=\"col2\">";
35 trTemplate[12] = "</td><td class=\"col3\">";
36 trTemplate[14] = "</td></tr>";
40 "rdate" : sortRowsByDateDescending,
41 "date" : sortRowsByDateAscending,
42 "subj" : sortRowsBySubjectAscending,
43 "rsubj" : sortRowsBySubjectDescending,
44 "sender": sortRowsByFromAscending,
45 "rsender" : sortRowsByFromDescending
52 function createMessageView() {
53 message_view = document.getElementById("message_list_body");
54 loadingMsg = document.getElementById("loading");
56 mlh_date = $("mlh_date");
57 mlh_subject = $('mlh_subject');
58 mlh_from = $('mlh_from');
59 toggles["rdate"] = mlh_date;
60 toggles["date"] = mlh_date;
61 toggles["subj"] = mlh_subject;
62 toggles["rsubj"] = mlh_subject;
63 toggles["sender"] = mlh_from;
64 toggles["rsender"] = mlh_from;
65 mlh_date.observe('click',ApplySort);
66 mlh_subject.observe('click',ApplySort);
67 mlh_from.observe('click',ApplySort);
68 $(document).observe('keyup',CtdlMessageListKeyUp,false);
69 $('resize_msglist').observe('mousedown', CtdlResizeMouseDown);
70 $('m_refresh').observe('click', getMessages);
71 document.getElementById('m_refresh').setAttribute("href","#");
72 Event.observe(document.onresize ? document : window, "resize", normalizeHeaderTable);
73 Event.observe(document.onresize ? document : window, "resize", sizePreviewPane);
74 $('summpage').observe('change', getPage);
75 takeOverSearchOMatic();
76 setupDragDrop(); // here for now
78 function getMessages() {
79 if (loadingMsg.parentNode == null) {
80 message_view.innerHTML = "";
81 message_view.appendChild(loadingMsg);
83 roomName = getTextContent(document.getElementById("rmname"));
84 var parameters = {'room':roomName, 'startmsg': startmsg, 'stopmsg': -1};
86 parameters['stopmsg'] = parseInt(startmsg)+499;
87 //parameters['maxmsgs'] = 500;
88 if (currentSortMode != null) {
89 var SortBy = currentSortMode[0];
90 if (SortBy.charAt(0) == 'r') {
91 SortBy = SortBy.substr(1);
92 parameters["SortOrder"] = "0";
94 parameters["SortBy"] = SortBy;
97 if (query.length > 0) {
98 parameters["query"] = query;
100 new Ajax.Request("roommsgs", {
102 onSuccess: loadMessages,
103 parameters: parameters,
106 onFailure: function(e) { alert("Failure: " + e);}
109 function evalJSON(data) {
111 if (typeof(JSON) === 'object' && typeof(JSON.parse) === 'function') {
113 jsonData = JSON.parse(data);
118 if (jsonData == null) {
119 return eval('('+data+')');
122 function loadMessages(transport) {
124 var data = evalJSON(transport.responseText);
125 if (!!data && transport.responseText.length < 2) {
126 alert("Message loading failed");
128 nummsgs = data['nummsgs'];
130 var length = msgs.length;
131 rowArray = new Array(length); // store so they can be sorted
132 WCLog("Row array length: "+rowArray.length);
134 //window.alert(e+"|"+e.description);
136 if (currentSortMode == null) {
137 if (sortmode.length < 1) {
140 currentSortMode = [sortmode, sortModes[sortmode]];
141 currentSorterToggle = toggles[sortmode];
144 resortAndDisplay(currentSortMode[1]);
147 resortAndDisplay(null);
149 if (loadingMsg.parentNode != null) {
150 loadingMsg.parentNode.removeChild(loadingMsg);
154 function resortAndDisplay(sortMode) {
155 WCLog("Begin resortAndDisplay");
157 /* We used to try and clear out the message_view element,
158 but stupid IE doesn't even do that properly */
159 var message_view_parent = message_view.parentNode;
160 message_view_parent.removeChild(message_view);
161 var startSort = new Date();
162 if (sortMode != null) {
165 var endSort = new Date();
166 WCLog("Sort rowArray in " + (endSort-startSort));
167 var start = new Date();
168 var length = msgs.length;
169 var compiled = new Array(length+2);
170 compiled[0] = "<tbody xmlns:citadel=\"http://citadel.org\" id=\"message_list_body\" class=\"mailbox_summary\">";
171 for(var x=0; x<length; ++x) {
173 var currentRow = msgs[x];
174 trTemplate[1] = "msg_"+currentRow[0];
176 if (((x-1) % 2) == 0) {
177 className += "table-alt-row";
179 className += "table-row";
182 className += " new_message";
184 trTemplate[3] = className;
185 trTemplate[5] = currentRow[0];
187 trTemplate[9] = currentRow[1];
188 trTemplate[11] = currentRow[2];
189 trTemplate[13] = currentRow[4];
191 compiled[i] = trTemplate.join("");
193 WCLog("Exception on row " + x + ":" + e);
196 compiled[length+2] = "</tbody>";
197 var end = new Date();
198 WCLog("iterate: " + (end-start));
199 var compile = compiled.join("");
201 $(message_view_parent).update(compile);
202 message_view_parent.onclick = CtdlMessageListClick;
203 message_view = message_view_parent.firstChild;
205 var delta = end.getTime() - start.getTime();
206 WCLog("append: " + delta);
208 normalizeHeaderTable();
210 function sortRowsByDateAscending(a, b) {
213 return (dateOne - dateTwo);
215 function sortRowsByDateDescending(a, b) {
218 return (dateTwo - dateOne);
220 function sortRowsBySubjectAscending(a, b) {
221 var subjectOne = a[1];
222 var subjectTwo = b[1];
223 return strcmp(subjectOne, subjectTwo);
225 function sortRowsBySubjectDescending(a, b) {
226 var subjectOne = a[1];
227 var subjectTwo = b[1];
228 return strcmp(subjectTwo, subjectOne);
230 function sortRowsByFromAscending(a, b) {
233 return strcmp(fromOne, fromTwo);
235 function sortRowsByFromDescending(a, b) {
238 return strcmp(fromTwo, fromOne);
240 function CtdlMessageListClick(evt) {
241 /* Since element.onload is used here, test to see if evt is defined */
242 var event = evt ? evt : window.event;
243 var target = event.target ? event.target: event.srcElement; // and again..
244 var parent = target.parentNode;
245 var msgId = parent.getAttribute("citadel:msgid");
246 // If the ctrl key modifier wasn't used, unmark all rows and load the message
247 if (!event.shiftKey && !event.ctrlKey && !event.altKey) {
249 markedRowIndex = parent.rowIndex;
250 document.getElementById("preview_pane").innerHTML = "";
251 new Ajax.Updater('preview_pane', 'msg/'+msgId, {method: 'get'});
253 new Ajax.Request('ajax_servcmd', {
255 parameters: 'g_cmd=SEEN ' + msgId + '|1',
256 onComplete: CtdlMarkRowAsRead(parent)});
257 // If the shift key modifier is used, mark a range...
258 } else if (event.button != 2 && event.shiftKey) {
260 var rowIndex = parent.rowIndex;
261 var startMarkingFrom = 0;
263 if (rowIndex > markedRowIndex) {
264 startMarkingFrom = markedRowIndex+1;
266 } else if (rowIndex < markedRowIndex) {
267 startMarkingFrom = rowIndex+1;
268 finish = markedRowIndex;
270 WCLog('startMarkingFrom=' + startMarkingFrom + ', finish=' + finish);
271 for(var x = startMarkingFrom; x<finish; x++) {
272 WCLog("Marking row " + x);
273 markRow(parent.parentNode.rows[x]);
275 // If the ctrl key modifier is used, toggle one message
276 } else if (event.button != 2 && (event.ctrlKey || event.altKey)) {
277 if (parent.getAttribute("citadel:marked")) {
285 function CtdlMarkRowAsRead(rowElement) {
286 var classes = rowElement.className;
287 classes = classes.replace("new_message","");
288 rowElement.className = classes;
290 function ApplySort(event) {
291 var target = event.target;
292 var sortId = target.id;
293 removeOldSortClass();
294 currentSorterToggle = target;
295 var sortModes = getSortMode(target); // returns [[key, func],[key,func]]
296 var sortModeToUse = null;
297 if (currentSortMode[0] == sortModes[0][0]) {
298 sortModeToUse = sortModes[1];
300 sortModeToUse = sortModes[0];
302 currentSortMode = sortModeToUse;
304 getMessages(); // in safe mode, we load from server already sorted
306 resortAndDisplay(sortModeToUse[1]);
309 function getSortMode(toggleElem) {
312 for(var key in toggles) {
313 var kr = (key.charAt(0) == 'r');
314 if (toggles[key] == toggleElem && !kr) {
315 forward = [key, sortModes[key]];
316 } else if (toggles[key] == toggleElem && kr) {
317 reverse = [key, sortModes[key]];
320 return [forward, reverse];
322 function removeOldSortClass() {
323 if (currentSorterToggle) {
324 var classes = currentSorterToggle.className;
325 /* classes = classes.replace("current_sort_mode","");
326 classes = classes.replace("sort_ascending","");
327 classes = classes.replace("sort_descending",""); */
328 currentSorterToggle.className = "";
331 function markRow(row) {
332 var msgId = row.getAttribute("citadel:msgid");
333 row.className = row.className += " marked_row";
334 row.setAttribute("citadel:marked","marked");
335 currentlyMarkedRows[msgId] = row;
337 function unmarkRow(row) {
338 var msgId = row.getAttribute("citadel:msgid");
339 row.className = row.className.replace("marked_row","");
340 row.removeAttribute("citadel:marked");
341 delete currentlyMarkedRows[msgId];
343 function unmarkAllRows() {
344 for(msgId in currentlyMarkedRows) {
345 unmarkRow(currentlyMarkedRows[msgId]);
348 function deleteAllMarkedRows() {
349 for(msgId in currentlyMarkedRows) {
350 var row = currentlyMarkedRows[msgId];
351 var rowArrayId = row.ctdlRowId;
352 row.parentNode.removeChild(row);
353 delete currentlyMarkedRows[msgId];
354 delete rowArray[rowArrayId];
356 // Now we have to reconstruct rowarray as the array length has changed */
357 var newRowArray = new Array();
359 for(var i=0; i<rowArray.length; i++) {
360 var currentRow = rowArray[i];
361 if (currentRow != null) {
362 newRowArray[x] = currentRow;
366 rowArray = newRowArray;
367 resortAndDisplay(null);
370 function deleteAllSelectedMessages() {
371 for(msgId in currentlyMarkedRows) {
372 if (!room_is_trash) {
373 new Ajax.Request('ajax_servcmd',
375 parameters: 'g_cmd=MOVE ' + msgId + '|_TRASH_|0'
378 new Ajax.Request('ajax_servcmd', {method: 'post',
379 parameters: 'g_cmd=DELE '+msgId});
382 document.getElementById("preview_pane").innerHTML = "";
383 deleteAllMarkedRows();
386 function CtdlMessageListKeyUp(event) {
387 var key = event.which;
388 if (key == 46) { // DELETE
389 deleteAllSelectedMessages();
393 function clearMessage(msgId) {
394 var row = document.getElementById('msg_'+msgId);
395 row.parentNode.removeChild(row);
396 delete currentlyMarkedRows[msgId];
399 function summaryViewContextMenu() {
400 if (!exitedMouseDown) {
401 var contextSource = document.getElementById("listViewContextMenu");
402 CtdlSpawnContextMenu(mouseDownEvent, contextSource);
406 function summaryViewDragAndDropHandler() {
407 var element = document.createElement("div");
408 var msgList = document.createElement("ul");
409 element.appendChild(msgList);
410 for(msgId in currentlyMarkedRows) {
411 msgRow = currentlyMarkedRows[msgId];
412 var subject = getTextContent(msgRow.getElementsByTagName("td")[0]);
413 var li = document.createElement("li");
414 msgList.appendChild(li);
415 setTextContent(li, subject);
416 li.ctdlMsgId = msgId;
422 function CtdlResizeMouseDown(event) {
423 $(document).observe('mousemove', CtdlResizeMouseMove);
424 $(document).observe('mouseup', CtdlResizeMouseUp);
425 saved_y = event.clientY;
428 function sizePreviewPane() {
429 var preview_pane = document.getElementById("preview_pane");
430 var summary_view = document.getElementById("summary_view");
431 var banner = document.getElementById("banner");
432 var message_list_hdr = document.getElementById("message_list_hdr");
433 var content = $('global'); // we'd like to use prototype methods here
434 var childElements = content.childElements();
435 var sizeOfElementsAbove = 0;
436 var heightOfViewPort = document.viewport.getHeight() // prototypejs method
437 var bannerHeight = banner.offsetHeight;
438 var contentViewPortHeight = heightOfViewPort-banner.offsetHeight-message_list_hdr.offsetHeight;
439 contentViewPortHeight = 0.98 * contentViewPortHeight; // leave some error
440 // Set summary_view to 20%;
441 var summary_height = ctdlLocalPrefs.readPref("svheight");
442 if (summary_height == null) {
443 summary_height = 0.20 * contentViewPortHeight;
445 // Set preview_pane to the remainder
446 var preview_height = contentViewPortHeight - summary_height;
448 summary_view.style.height = (summary_height)+"px";
449 preview_pane.style.height = (preview_height)+"px";
451 function CtdlResizeMouseMove(event) {
452 var clientX = event.clientX;
453 var clientY = event.clientY;
454 var summary_view = document.getElementById("summary_view");
455 var summaryViewHeight = summary_view.offsetHeight;
456 var increment = clientY-saved_y;
457 var summary_view_height = increment+summaryViewHeight;
458 summary_view.style.height = (summary_view_height)+"px";
459 // store summary view height
460 ctdlLocalPrefs.setPref("svheight",summary_view_height);
461 var msglist = document.getElementById("preview_pane");
462 var msgListHeight = msglist.offsetHeight;
463 msglist.style.height = (msgListHeight-increment)+"px";
465 /* For some reason the grippy doesn't work without position: absolute
466 so we need to set its top pos manually all the time */
467 var resize = document.getElementById("resize_msglist");
468 var resizePos = resize.offsetTop;
469 resize.style.top = (resizePos+increment)+"px";
471 function CtdlResizeMouseUp(event) {
472 $(document).stopObserving('mousemove', CtdlResizeMouseMove);
473 $(document).stopObserving('mouseup', CtdlResizeMouseUp);
475 function ApplySorterToggle() {
476 var className = currentSorterToggle.className;
477 className += " current_sort_mode";
478 if (currentSortMode[1] == sortRowsByDateDescending ||
479 currentSortMode[1] == sortRowsBySubjectDescending ||
480 currentSortMode[1] == sortRowsByFromDescending) {
481 className += " sort_descending";
483 className += " sort_ascending";
485 currentSorterToggle.className = className;
487 /** Hack to make the header table line up with the data */
488 function normalizeHeaderTable() {
489 var message_list_hdr = document.getElementById("message_list_hdr");
490 var summary_view = document.getElementById("summary_view");
491 var resize_msglist = document.getElementById("resize_msglist");
492 var headerTable = message_list_hdr.getElementsByTagName("table")[0];
493 var dataTable = summary_view.getElementsByTagName("table")[0];
494 var dataTableWidth = dataTable.offsetWidth;
495 headerTable.style.width = dataTableWidth+"px";
498 function setupPageSelector() {
499 var summpage = document.getElementById("summpage");
500 var select_page = document.getElementById("selectpage");
501 summpage.innerHTML = "";
503 WCLog("unhiding parent page");
504 select_page.className = "";
508 var pages = nummsgs / 499;
509 for(var i=0; i<pages; i++) {
510 var opt = document.createElement("option");
511 var startmsg = i * 499;
512 opt.setAttribute("value",startmsg);
513 if (currentPage == i) {
514 opt.setAttribute("selected","selected");
516 opt.appendChild(document.createTextNode((i+1)));
517 summpage.appendChild(opt);
520 function getPage(event) {
521 var target = event.target;
522 startmsg = target.options.item(target.selectedIndex).value;
523 currentPage = target.selectedIndex;
524 //query = ""; // We are getting a page from the _entire_ msg list, don't query
527 function takeOverSearchOMatic() {
528 var searchForm = document.getElementById("searchomatic").getElementsByTagName("form")[0];
529 // First disable the form post
530 searchForm.setAttribute("action","javascript:void();");
531 searchForm.removeAttribute("method");
532 $(searchForm).observe('submit', doSearch);
534 function doSearch() {
535 query = document.getElementById("srchquery").value;