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);
10 var message_view = null;
11 var loadingMsg = null;
13 var currentSortMode = null;
17 var mlh_subject = null;
19 var currentSorterToggle = null;
21 var currentlyMarkedRows = new Object();
22 var markedRowId = null;
24 var mouseDownEvent = null;
25 var exitedMouseDown = false;
29 "rdate" : sortRowsByDateDescending,
30 "date" : sortRowsByDateAscending,
31 // "reverse" : sortRowsByDateDescending,
32 "subj" : sortRowsBySubjectAscending,
33 "rsubj" : sortRowsBySubjectDescending,
34 "sender": sortRowsByFromAscending,
35 "rsender" : sortRowsByFromDescending
41 function createMessageView() {
42 message_view = document.getElementById("message_list_body");
43 loadingMsg = document.getElementById("loading");
45 mlh_date = $("mlh_date");
46 mlh_subject = $('mlh_subject');
47 mlh_from = $('mlh_from');
48 toggles["rdate"] = mlh_date;
49 toggles["date"] = mlh_date;
50 // toggles["reverse"] = mlh_date;
51 toggles["subj"] = mlh_subject;
52 toggles["rsubj"] = mlh_subject;
53 toggles["sender"] = mlh_from;
54 toggles["rsender"] = mlh_from;
55 mlh_date.observe('click',ApplySort);
56 mlh_subject.observe('click',ApplySort);
57 mlh_from.observe('click',ApplySort);
58 $(document).observe('keyup',CtdlMessageListKeyUp,false);
59 //window.oncontextmenu = function() { return false; };
60 $('resize_msglist').observe('mousedown', CtdlResizeMouseDown);
61 $('m_refresh').observe('click', getMessages);
62 document.getElementById('m_refresh').setAttribute("href","#");
63 Event.observe(document.onresize ? document : window, "resize", normalizeHeaderTable);
64 Event.observe(document.onresize ? document : window, "resize", sizePreviewPane);
65 $('summpage').observe('change', getPage);
66 takeOverSearchOMatic();
67 setupDragDrop(); // here for now
69 function getMessages() {
70 if (loadingMsg.parentNode == null) {
71 message_view.innerHTML = "";
72 message_view.appendChild(loadingMsg);
74 roomName = getTextContent(document.getElementById("rmname"));
75 var parameters = {'room':roomName, 'startmsg': startmsg, 'stopmsg': -1};
77 parameters['stopmsg'] = parseInt(startmsg)+500;
78 //parameters['maxmsgs'] = 500;
79 if (currentSortMode != null) {
80 var SortBy = currentSortMode[0];
81 if (SortBy.charAt(0) == 'r') {
82 SortBy = SortBy.substr(1);
83 parameters["SortOrder"] = "0";
85 parameters["SortBy"] = SortBy;
88 if (query.length > 0) {
89 parameters["query"] = query;
91 new Ajax.Request("roommsgs", {
93 onSuccess: loadMessages,
94 parameters: parameters,
97 onFailure: function(e) { alert("Failure: " + e);}
100 function loadMessages(transport) {
102 var data = eval('('+transport.responseText+')');
103 if (!!data && transport.responseText.length < 2) {
104 alert("Message loading failed");
106 nummsgs = data['nummsgs'];
107 var msgs = data['msgs'];
108 var length = msgs.length;
109 rowArray = new Array(); // store so they can be sorted
110 WCLog("Row array length: "+rowArray.length);
111 var start = new Date();
112 for(var i=0; i<length;i++) {
113 var trElement = document.createElement("tr");
116 var rowId = "msg_" + msgId;
117 trElement.setAttribute("id",rowId);
118 //$(trElement).observe('click', CtdlMessageListClick);
119 trElement.ctdlMsgId = msgId;
120 for(var j=1; j<5;j++) { // 1=msgId (hidden), 4 date timestamp (hidden) 6 = isNew etc.
121 var content = data[j];
122 if(content.length < 1) {
126 trElement.ctdlDate = content;
129 var tdElement = document.createElement("td");
130 trElement.appendChild(tdElement);
131 var txtContent = document.createTextNode(content);
132 tdElement.appendChild(txtContent);
135 var classStmt = "col"+x;
136 //tdElement.setAttribute("class", classStmt);
137 tdElement.className = classStmt;
139 WCLog("Error on #"+msgId +" col"+j+":"+e);
144 trElement.ctdlNewMsg = true;
146 trElement.dropEnabled = true;
147 trElement.ctdlMarked = false;
148 rowArray[i] = trElement;
150 var end = new Date();
151 var delta = end.getTime() - start.getTime();
152 WCLog("loadMessages construct: " + delta);
154 //window.alert(e+"|"+e.description);
156 if (currentSortMode == null) {
157 if (sortmode.length < 1) {
160 currentSortMode = [sortmode, sortModes[sortmode]];
161 currentSorterToggle = toggles[sortmode];
164 resortAndDisplay(currentSortMode[1]);
167 resortAndDisplay(null);
169 if (loadingMsg.parentNode != null) {
170 loadingMsg.parentNode.removeChild(loadingMsg);
174 function resortAndDisplay(sortMode) {
175 WCLog("Begin resortAndDisplay");
176 var start = new Date();
177 /* We used to try and clear out the message_view element,
178 but stupid IE doesn't even do that properly */
179 var message_view_parent = message_view.parentNode;
180 message_view_parent.removeChild(message_view);
181 message_view = document.createElement("tbody");
182 message_view.setAttribute("id","message_list_body");
183 message_view.className="mailbox_summary";
184 message_view_parent.appendChild(message_view);
186 var fragment = document.createDocumentFragment();
187 if (sortMode != null) {
188 rowArray.sort(sortMode);
190 var length = rowArray.length;
191 for(var x=0; x<length; ++x) {
193 var currentRow = rowArray[x];
194 currentRow.setAttribute("class","");
196 if (((x-1) % 2) == 0) {
197 className = "table-alt-row";
199 className = "table-row";
201 if (currentRow.ctdlNewMsg) {
202 className += " new_message";
204 currentRow.className = className;
205 /* Using element.onclick is evil, but until IE
206 supports addEventListener, it is much faster
207 than prototype observe */
208 currentRow.onclick = CtdlMessageListClick;
209 currentRow.ctdlDnDElement = summaryViewDragAndDropHandler;
210 currentRow.ctdlRowId = x;
211 fragment.appendChild(currentRow);
213 alert("Exception" + e);
216 message_view.appendChild(fragment);
217 var end = new Date();
218 var delta = end.getTime() - start.getTime();
219 WCLog("resortAndDisplay sort and append: " + delta);
221 normalizeHeaderTable();
223 function sortRowsByDateAscending(a, b) {
224 var dateOne = a.ctdlDate;
225 var dateTwo = b.ctdlDate;
226 return (dateOne - dateTwo);
228 function sortRowsByDateDescending(a, b) {
229 var dateOne = a.ctdlDate;
230 var dateTwo = b.ctdlDate;
231 return (dateTwo - dateOne);
234 function sortRowsBySubjectAscending(a, b) {
235 var subjectOne = getTextContent(a.getElementsByTagName("td")[0]).toLowerCase();
236 var subjectTwo = getTextContent(b.getElementsByTagName("td")[0]).toLowerCase();
237 return strcmp(subjectOne, subjectTwo);
240 function sortRowsBySubjectDescending(a, b) {
241 var subjectOne = getTextContent(a.getElementsByTagName("td")[0]).toLowerCase();
242 var subjectTwo = getTextContent(b.getElementsByTagName("td")[0]).toLowerCase();
243 return strcmp(subjectTwo, subjectOne);
246 function sortRowsByFromAscending(a, b) {
247 var fromOne = getTextContent(a.getElementsByTagName("td")[1]).toLowerCase();
248 var fromTwo = getTextContent(b.getElementsByTagName("td")[1]).toLowerCase();
249 return strcmp(fromOne, fromTwo);
252 function sortRowsByFromDescending(a, b) {
253 var fromOne = getTextContent(a.getElementsByTagName("td")[1]).toLowerCase();
254 var fromTwo = getTextContent(b.getElementsByTagName("td")[1]).toLowerCase();
255 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.ctdlMsgId;
264 // If the ctrl key modifier wasn't used, unmark all rows and load the message
265 if (!event.shiftKey && !event.ctrlKey && !event.altKey) {
267 markedRowId = parent.ctdlRowId;
268 document.getElementById("preview_pane").innerHTML = "";
269 new Ajax.Updater('preview_pane', 'msg/'+msgId, {method: 'get'});
271 new Ajax.Request('ajax_servcmd', {
273 parameters: 'g_cmd=SEEN ' + msgId + '|1',
274 onComplete: CtdlMarkRowAsRead(parent)});
275 } else if (event.button != 2 && event.shiftKey) {
277 var rowId = parent.ctdlRowId;
278 var startMarkingFrom = 0;
280 if (rowId > markedRowId) {
281 startMarkingFrom = markedRowId+1;
283 } else if (rowId < markedRowId) {
284 startMarkingFrom = rowId+1;
285 finish = markedRowId;
287 for(var x = startMarkingFrom; x<finish; x++) {
288 WCLog("Marking row "+x);
289 markRow(rowArray[x]);
291 } else if (event.button != 2 && (event.ctrlKey || event.altKey)) {
295 function CtdlMarkRowAsRead(rowElement) {
296 var classes = rowElement.className;
297 classes = classes.replace("new_message","");
298 rowElement.className = classes;
300 function ApplySort(event) {
301 var target = event.target;
302 var sortId = target.id;
303 removeOldSortClass();
304 currentSorterToggle = target;
305 var sortModes = getSortMode(target); // returns [[key, func],[key,func]]
306 var sortModeToUse = null;
307 if (currentSortMode[0] == sortModes[0][0]) {
308 sortModeToUse = sortModes[1];
310 sortModeToUse = sortModes[0];
312 currentSortMode = sortModeToUse;
314 getMessages(); // in safe mode, we load from server already sorted
316 resortAndDisplay(sortModeToUse[1]);
319 function getSortMode(toggleElem) {
322 for(var key in toggles) {
323 var kr = (key.charAt(0) == 'r');
324 if (toggles[key] == toggleElem && !kr) {
325 forward = [key, sortModes[key]];
326 } else if (toggles[key] == toggleElem && kr) {
327 reverse = [key, sortModes[key]];
330 return [forward, reverse];
332 function removeOldSortClass() {
333 if (currentSorterToggle) {
334 var classes = currentSorterToggle.className;
335 /* classes = classes.replace("current_sort_mode","");
336 classes = classes.replace("sort_ascending","");
337 classes = classes.replace("sort_descending",""); */
338 currentSorterToggle.className = "";
341 function markRow( row) {
342 var msgId = row.ctdlMsgId;
343 row.className = row.className += " marked_row";
344 row.ctdlMarked = true;
345 currentlyMarkedRows[msgId] = row;
347 function unmarkRow(row) {
348 var msgId = row.ctdlMsgId;
349 row.className = row.className.replace("marked_row","");
350 row.ctdlMarked = false;
351 delete currentlyMarkedRows[msgId];
353 function unmarkAllRows() {
354 for(msgId in currentlyMarkedRows) {
355 unmarkRow(currentlyMarkedRows[msgId]);
358 function deleteAllMarkedRows() {
359 for(msgId in currentlyMarkedRows) {
360 var row = currentlyMarkedRows[msgId];
361 var rowArrayId = row.ctdlRowId;
362 row.parentNode.removeChild(row);
363 delete currentlyMarkedRows[msgId];
364 delete rowArray[rowArrayId];
366 // Now we have to reconstruct rowarray as the array length has changed */
367 var newRowArray = new Array();
369 for(var i=0; i<rowArray.length; i++) {
370 var currentRow = rowArray[i];
371 if (currentRow != null) {
372 newRowArray[x] = currentRow;
376 rowArray = newRowArray;
377 resortAndDisplay(null);
380 function deleteAllSelectedMessages() {
381 for(msgId in currentlyMarkedRows) {
382 if (!room_is_trash) {
383 new Ajax.Request('ajax_servcmd',
385 parameters: 'g_cmd=MOVE ' + msgId + '|_TRASH_|0'
388 new Ajax.Request('ajax_servcmd', {method: 'post',
389 parameters: 'g_cmd=DELE '+msgId});
392 document.getElementById("preview_pane").innerHTML = "";
393 deleteAllMarkedRows();
396 function CtdlMessageListKeyUp(event) {
397 var key = event.which;
398 if (key == 46) { // DELETE
399 deleteAllSelectedMessages();
403 function clearMessage(msgId) {
404 var row = document.getElementById('msg_'+msgId);
405 row.parentNode.removeChild(row);
406 delete currentlyMarkedRows[msgId];
409 function summaryViewContextMenu() {
410 if (!exitedMouseDown) {
411 var contextSource = document.getElementById("listViewContextMenu");
412 CtdlSpawnContextMenu(mouseDownEvent, contextSource);
416 function summaryViewDragAndDropHandler() {
417 var element = document.createElement("div");
418 var msgList = document.createElement("ul");
419 element.appendChild(msgList);
420 for(msgId in currentlyMarkedRows) {
421 msgRow = currentlyMarkedRows[msgId];
422 var subject = getTextContent(msgRow.getElementsByTagName("td")[0]);
423 var li = document.createElement("li");
424 msgList.appendChild(li);
425 setTextContent(li, subject);
426 li.ctdlMsgId = msgId;
432 function CtdlResizeMouseDown(event) {
433 $(document).observe('mousemove', CtdlResizeMouseMove);
434 $(document).observe('mouseup', CtdlResizeMouseUp);
435 saved_y = event.clientY;
438 function sizePreviewPane() {
439 var preview_pane = document.getElementById("preview_pane");
440 var summary_view = document.getElementById("summary_view");
441 var banner = document.getElementById("banner");
442 var message_list_hdr = document.getElementById("message_list_hdr");
443 var content = $('global'); // we'd like to use prototype methods here
444 var childElements = content.childElements();
445 var sizeOfElementsAbove = 0;
446 var heightOfViewPort = document.viewport.getHeight() // prototypejs method
447 var bannerHeight = banner.offsetHeight;
448 var contentViewPortHeight = heightOfViewPort-banner.offsetHeight-message_list_hdr.offsetHeight;
449 contentViewPortHeight = 0.98 * contentViewPortHeight; // leave some error
450 // Set summary_view to 20%;
451 var summary_height = ctdlLocalPrefs.readPref("svheight");
452 if (summary_height == null) {
453 summary_height = 0.20 * contentViewPortHeight;
455 // Set preview_pane to the remainder
456 var preview_height = contentViewPortHeight - summary_height;
458 summary_view.style.height = (summary_height)+"px";
459 preview_pane.style.height = (preview_height)+"px";
461 function CtdlResizeMouseMove(event) {
462 var clientX = event.clientX;
463 var clientY = event.clientY;
464 var summary_view = document.getElementById("summary_view");
465 var summaryViewHeight = summary_view.offsetHeight;
466 var increment = clientY-saved_y;
467 var summary_view_height = increment+summaryViewHeight;
468 summary_view.style.height = (summary_view_height)+"px";
469 // store summary view height
470 ctdlLocalPrefs.setPref("svheight",summary_view_height);
471 var msglist = document.getElementById("preview_pane");
472 var msgListHeight = msglist.offsetHeight;
473 msglist.style.height = (msgListHeight-increment)+"px";
475 /* For some reason the grippy doesn't work without position: absolute
476 so we need to set its top pos manually all the time */
477 var resize = document.getElementById("resize_msglist");
478 var resizePos = resize.offsetTop;
479 resize.style.top = (resizePos+increment)+"px";
481 function CtdlResizeMouseUp(event) {
482 $(document).stopObserving('mousemove', CtdlResizeMouseMove);
483 $(document).stopObserving('mouseup', CtdlResizeMouseUp);
485 function ApplySorterToggle() {
486 var className = currentSorterToggle.className;
487 className += " current_sort_mode";
488 if (currentSortMode[1] == sortRowsByDateDescending ||
489 currentSortMode[1] == sortRowsBySubjectDescending ||
490 currentSortMode[1] == sortRowsByFromDescending) {
491 className += " sort_descending";
493 className += " sort_ascending";
495 currentSorterToggle.className = className;
497 /** Hack to make the header table line up with the data */
498 function normalizeHeaderTable() {
499 var message_list_hdr = document.getElementById("message_list_hdr");
500 var summary_view = document.getElementById("summary_view");
501 var resize_msglist = document.getElementById("resize_msglist");
502 var headerTable = message_list_hdr.getElementsByTagName("table")[0];
503 var dataTable = summary_view.getElementsByTagName("table")[0];
504 var dataTableWidth = dataTable.offsetWidth;
505 headerTable.style.width = dataTableWidth+"px";
508 function setupPageSelector() {
509 var summpage = document.getElementById("summpage");
510 var select_page = document.getElementById("selectpage");
511 summpage.innerHTML = "";
513 WCLog("unhiding parent page");
514 select_page.className = "";
518 var pages = nummsgs / 500;
519 for(var i=0; i<pages; i++) {
520 var opt = document.createElement("option");
521 var startmsg = i * 500;
522 opt.setAttribute("value",startmsg);
523 if (currentPage == i) {
524 opt.setAttribute("selected","selected");
526 opt.appendChild(document.createTextNode((i+1)));
527 summpage.appendChild(opt);
530 function getPage(event) {
531 var target = event.target;
532 startmsg = target.options.item(target.selectedIndex).value;
533 currentPage = target.selectedIndex;
534 //query = ""; // We are getting a page from the _entire_ msg list, don't query
537 function takeOverSearchOMatic() {
538 var searchForm = document.getElementById("searchomatic").getElementsByTagName("form")[0];
539 // First disable the form post
540 searchForm.setAttribute("action","javascript:void();");
541 searchForm.removeAttribute("method");
542 $(searchForm).observe('submit', doSearch);
544 function doSearch() {
545 query = document.getElementById("srchquery").value;