webcit/static/summaryview.js

   1 /*
   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
   7  *
   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
  15  */
  16
  17 document.observe("dom:loaded", createMessageView);
  18
  19 var msgs = null;
  20 var message_view = null;
  21 var loadingMsg = null;
  22 var rowArray = null;
  23 var currentSortMode = null;
  24
  25 // Header elements
  26 var mlh_date = null;
  27 var mlh_subject = null;
  28 var mlh_from = null;
  29 var currentSorterToggle = null;
  30 var query = "";
  31 var currentlyMarkedRows = new Object();
  32 var markedRowIndex = null;
  33 var currentlyHasRowsSelected = false;
  34
  35 var mouseDownEvent = null;
  36 var exitedMouseDown = false;
  37
  38 var originalMarkedRow = null;
  39 var previousFinish = 0;
  40 var markedFrom = 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>";
  50
  51
  52 var currentPage = 0;
  53 var sortModes = {
  54         "rdate" : sortRowsByDateDescending,
  55         "date" : sortRowsByDateAscending,
  56         "subj" : sortRowsBySubjectAscending,
  57         "rsubj" : sortRowsBySubjectDescending,
  58         "sender": sortRowsByFromAscending,
  59         "rsender" : sortRowsByFromDescending
  60 };
  61 var toggles = {};
  62
  63 var nummsgs = 0;
  64 var startmsg = 0;
  65
  66 function createMessageView() {
  67         message_view = document.getElementById("message_list_body");
  68         loadingMsg = document.getElementById("loading");
  69         getMessages();
  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", sizePreviewPane);
  87         $('summpage').observe('change', getPage);
  88         takeOverSearchOMatic();
  89         setupDragDrop(); // here for now
  90 }
  91
  92 function getMessages() {
  93         if (loadingMsg.parentNode == null) {
  94                 message_view.innerHTML = "";
  95                 message_view.appendChild(loadingMsg);
  96         }
  97         roomName = getTextContent(document.getElementById("rmname"));
  98         var parameters = {'room':roomName, 'startmsg': startmsg, 'stopmsg': -1};
  99         if (is_safe_mode) {
 100                 parameters['stopmsg'] = parseInt(startmsg)+499;
 101                 //parameters['maxmsgs'] = 500;
 102                 if (currentSortMode != null) {
 103                         var SortBy = currentSortMode[0];
 104                         if (SortBy.charAt(0) == 'r') {
 105                                 SortBy = SortBy.substr(1);
 106                                 parameters["SortOrder"] = "0";
 107                         }
 108                         parameters["SortBy"] = SortBy;
 109                 }
 110         }
 111         if (query.length > 0) {
 112                 parameters["query"] = query;
 113         }
 114         new Ajax.Request("roommsgs", {
 115                 method: 'get',
 116                                 onSuccess: loadMessages,
 117                                 parameters: parameters,
 118                                 sanitize: false,
 119                                 evalJSON: false,
 120                                 onFailure: function(e) { alert("Failure: " + e);}
 121         });
 122 }
 123
 124 function evalJSON(data) {
 125         var jsonData = null;
 126         if (typeof(JSON) === 'object' && typeof(JSON.parse) === 'function') {
 127                 try {
 128                         jsonData = JSON.parse(data);
 129                 } catch (e) {
 130                         // ignore
 131                 }
 132         }
 133         if (jsonData == null) {
 134                 jsonData = eval('('+data+')');
 135         }
 136         return jsonData;
 137 }
 138 function loadMessages(transport) {
 139         try {
 140                 var data = evalJSON(transport.responseText);
 141                 if (!!data && transport.responseText.length < 2) {
 142                         alert("Message loading failed");
 143                 }
 144                 nummsgs = data['nummsgs'];
 145                 msgs = data['msgs'];
 146                 var length = msgs.length;
 147                 rowArray = new Array(length); // store so they can be sorted
 148                 WCLog("Row array length: "+rowArray.length);
 149         } catch (e) {
 150                 //window.alert(e+"|"+e.description);
 151         }
 152         if (currentSortMode == null) {
 153                 if (sortmode.length < 1) {
 154                         sortmode = "rdate";
 155                 }
 156                 currentSortMode = [sortmode, sortModes[sortmode]];
 157                 currentSorterToggle = toggles[sortmode];
 158         }
 159         if (!is_safe_mode) {
 160                 resortAndDisplay(currentSortMode[1]);
 161         } else {
 162                 setupPageSelector();
 163                 resortAndDisplay(null);
 164         }
 165         if (loadingMsg.parentNode != null) {
 166                 loadingMsg.parentNode.removeChild(loadingMsg);
 167         }
 168         sizePreviewPane();
 169 }
 170 function resortAndDisplay(sortMode) {
 171         WCLog("Begin resortAndDisplay");
 172
 173         /* We used to try and clear out the message_view element,
 174            but stupid IE doesn't even do that properly */
 175         var message_view_parent = message_view.parentNode;
 176         message_view_parent.removeChild(message_view);
 177         var startSort = new Date();
 178         try {
 179                 if (sortMode != null) {
 180                         msgs.sort(sortMode);
 181                 }
 182         } catch (e) {
 183                 WCLog("Sort error: " + e);
 184         }
 185         var endSort = new Date();
 186         WCLog("Sort rowArray in " + (endSort-startSort));
 187         var start = new Date();
 188         var length = msgs.length;
 189         var compiled = new Array(length+2);
 190         compiled[0] = "<table class=\"mailbox_summary\" id=\"summary_headers\" \"cellspacing=0\" style=\"width:100%;-moz-user-select:none;\">";
 191         for(var x=0; x<length; ++x) {
 192                 try {
 193                         var currentRow = msgs[x];
 194                         trTemplate[1] = "msg_"+currentRow[0];
 195                         var className = "";
 196                         if (((x-1) % 2) == 0) {
 197                                 className += "table-alt-row";
 198                         } else {
 199                                 className += "table-row";
 200                         }
 201                         if (currentRow[5]) {
 202                                 className += " new_message";
 203                         }
 204                         trTemplate[3] = className;
 205                         trTemplate[5] = currentRow[0];
 206                         trTemplate[7] = x;
 207                         trTemplate[9] = currentRow[1];
 208                         trTemplate[11] = currentRow[2];
 209                         trTemplate[13] = currentRow[4];
 210                         var i = x+1;
 211                         compiled[i] = trTemplate.join("");
 212                 } catch (e) {
 213                         WCLog("Exception on row " +  x + ":" + e);
 214                 }
 215         }
 216         compiled[length+2] = "</table>";
 217         var end = new Date();
 218         WCLog("iterate: " + (end-start));
 219         var compile = compiled.join("");
 220         start = new Date();
 221         $(message_view_parent).update(compile);
 222         message_view_parent.onclick = CtdlMessageListClick;
 223         message_view = message_view_parent.firstChild;
 224         end = new Date();
 225         var delta = end.getTime() - start.getTime();
 226         WCLog("append: " + delta);
 227         ApplySorterToggle();
 228 }
 229 function sortRowsByDateAscending(a, b) {
 230         var dateOne = a[3];
 231         var dateTwo = b[3];
 232         return (dateOne - dateTwo);
 233 };
 234 function sortRowsByDateDescending(a, b) {
 235         var dateOne = a[3];
 236         var dateTwo = b[3];
 237         return (dateTwo - dateOne);
 238 };
 239 function sortRowsBySubjectAscending(a, b) {
 240         var subjectOne = a[1];
 241         var subjectTwo = b[1];
 242         return strcmp(subjectOne, subjectTwo);
 243 };
 244 function sortRowsBySubjectDescending(a, b) {
 245         var subjectOne = a[1];
 246         var subjectTwo = b[1];
 247         return strcmp(subjectTwo, subjectOne);
 248 };
 249 function sortRowsByFromAscending(a, b) {
 250         var fromOne = a[2];
 251         var fromTwo = b[2];
 252         return strcmp(fromOne, fromTwo);
 253 };
 254 function sortRowsByFromDescending(a, b) {
 255         var fromOne = a[2];
 256         var fromTwo = b[2];
 257         return strcmp(fromTwo, fromOne);
 258 };
 259 function CtdlMessageListClick(evt) {
 260         /* Since element.onload is used here, test to see if evt is defined */
 261         var event = evt ? evt : window.event;
 262         var target = event.target ? event.target: event.srcElement; // and again..
 263         var parent = target.parentNode;
 264         var msgId = parent.getAttribute("citadel:msgid");
 265         // If the ctrl key modifier wasn't used, unmark all rows and load the message
 266         if (!event.shiftKey && !event.ctrlKey && !event.altKey) {
 267                 previousFinish = 0;
 268                 markedFrom = 0;
 269                 unmarkAllRows();
 270                 markedRowIndex = parent.rowIndex;
 271                 originalMarkedRow = parent;
 272                 document.getElementById("preview_pane").innerHTML = "";
 273                 new Ajax.Updater('preview_pane', 'msg/'+msgId, {method: 'get'});
 274                 markRow(parent);
 275                 new Ajax.Request('ajax_servcmd', {
 276                         method: 'post',
 277                                         parameters: 'g_cmd=SEEN ' + msgId + '|1',
 278                                         onComplete: CtdlMarkRowAsRead(parent)});
 279                 // If the shift key modifier is used, mark a range...
 280         } else if (event.button != 2 && event.shiftKey) {
 281                 if (originalMarkedRow == null) {
 282                         originalMarkedRow = parent;
 283                         markRow(parent);
 284                 } else {
 285                         unmarkAllRows();
 286                         markRow(parent);
 287                         markRow(originalMarkedRow);
 288                 }
 289                 var rowIndex = parent.rowIndex;
 290                 if (markedFrom == 0) {
 291                         markedFrom = rowIndex;
 292                 }
 293                 var startMarkingFrom = 0;
 294                 var finish = 0;
 295                 if (rowIndex > markedRowIndex) {
 296                         startMarkingFrom = markedRowIndex+1;
 297                         finish = rowIndex;
 298                 } else if (rowIndex < markedRowIndex) {
 299                         startMarkingFrom = rowIndex+1;
 300                         finish = markedRowIndex;
 301                 }
 302                 previousFinish = finish;
 303                 WCLog('startMarkingFrom=' + startMarkingFrom + ', finish=' + finish);
 304                 for(var x = startMarkingFrom; x<finish; x++) {
 305                         WCLog("Marking row " + x);
 306                         markRow(parent.parentNode.rows[x]);
 307                 }
 308                 // If the ctrl key modifier is used, toggle one message
 309         } else if (event.button != 2 && (event.ctrlKey || event.altKey)) {
 310                 if (parent.getAttribute("citadel:marked")) {
 311                         unmarkRow(parent);
 312                 }
 313                 else {
 314                         markRow(parent);
 315                 }
 316         }
 317 }
 318 function CtdlMarkRowAsRead(rowElement) {
 319         var classes = rowElement.className;
 320         classes = classes.replace("new_message","");
 321         rowElement.className = classes;
 322 }
 323 function ApplySort(event) {
 324         var target = event.target;
 325         var sortId = target.id;
 326         removeOldSortClass();
 327         currentSorterToggle = target;
 328         var sortModes = getSortMode(target); // returns [[key, func],[key,func]]
 329         var sortModeToUse = null;
 330         if (currentSortMode[0] == sortModes[0][0]) {
 331                 sortModeToUse = sortModes[1];
 332         } else {
 333                 sortModeToUse = sortModes[0];
 334         }
 335         currentSortMode = sortModeToUse;
 336         if (is_safe_mode) {
 337                 getMessages(); // in safe mode, we load from server already sorted
 338         } else {
 339                 resortAndDisplay(sortModeToUse[1]);
 340         }
 341 }
 342 function getSortMode(toggleElem) {
 343         var forward = null;
 344         var reverse = null;
 345         for(var key in toggles) {
 346                 var kr = (key.charAt(0) == 'r');
 347                 if (toggles[key] == toggleElem && !kr) {
 348                         forward = [key, sortModes[key]];
 349                 } else if (toggles[key] == toggleElem && kr) {
 350                         reverse = [key, sortModes[key]];
 351                 }
 352         }
 353         return [forward, reverse];
 354 }
 355 function removeOldSortClass() {
 356         if (currentSorterToggle) {
 357                 var classes = currentSorterToggle.className;
 358                 /* classes = classes.replace("current_sort_mode","");
 359                    classes = classes.replace("sort_ascending","");
 360                    classes = classes.replace("sort_descending",""); */
 361                 currentSorterToggle.className = "";
 362         }
 363 }
 364 function markRow(row) {
 365         var msgId = row.getAttribute("citadel:msgid");
 366         row.className = row.className += " marked_row";
 367         row.setAttribute("citadel:marked","marked");
 368         currentlyMarkedRows[msgId] = row;
 369 }
 370 function unmarkRow(row) {
 371         var msgId = row.getAttribute("citadel:msgid");
 372         row.className = row.className.replace("marked_row","");
 373         row.removeAttribute("citadel:marked");
 374         delete currentlyMarkedRows[msgId];
 375 }
 376 function unmarkAllRows() {
 377         for(msgId in currentlyMarkedRows) {
 378                 unmarkRow(currentlyMarkedRows[msgId]);
 379         }
 380 }
 381 function deleteAllMarkedRows() {
 382         for(msgId in currentlyMarkedRows) {
 383                 var row = currentlyMarkedRows[msgId];
 384                 var rowArrayId = row.getAttribute("citadel:ctdlrowid");
 385                 row.parentNode.removeChild(row);
 386                 delete currentlyMarkedRows[msgId];
 387                 delete msgs[rowArrayId];
 388         }
 389         // Now we have to reconstruct rowarray as the array length has changed */
 390         var newMsgs = new Array(msgs.length-1);
 391         var x=0;
 392         for(var i=0; i<rowArray.length; i++) {
 393                 var currentRow = msgs[i];
 394                 if (currentRow != null) {
 395                         newMsgs[x] = currentRow;
 396                         x++;
 397                 }
 398         }
 399         msgs = newMsgs;
 400         resortAndDisplay(null);
 401 }
 402
 403 function deleteAllSelectedMessages() {
 404         for(msgId in currentlyMarkedRows) {
 405                 if (!room_is_trash) {
 406                         new Ajax.Request('ajax_servcmd',
 407                                          {method: 'post',
 408                                                          parameters: 'g_cmd=MOVE ' + msgId + '|_TRASH_|0'
 409                                                          });
 410                 } else {
 411                         new Ajax.Request('ajax_servcmd', {method: 'post',
 412                                                 parameters: 'g_cmd=DELE '+msgId});
 413                 }
 414         }
 415         document.getElementById("preview_pane").innerHTML = "";
 416         deleteAllMarkedRows();
 417 }
 418
 419 function CtdlMessageListKeyUp(event) {
 420         var key = event.which;
 421         if (key == 46) { // DELETE
 422                 deleteAllSelectedMessages();
 423         }
 424 }
 425
 426 function clearMessage(msgId) {
 427         var row = document.getElementById('msg_'+msgId);
 428         row.parentNode.removeChild(row);
 429         delete currentlyMarkedRows[msgId];
 430 }
 431
 432 function summaryViewContextMenu() {
 433         if (!exitedMouseDown) {
 434                 var contextSource = document.getElementById("listViewContextMenu");
 435                 CtdlSpawnContextMenu(mouseDownEvent, contextSource);
 436         }
 437 }
 438
 439 function summaryViewDragAndDropHandler() {
 440         var element = document.createElement("div");
 441         var msgList = document.createElement("ul");
 442         element.appendChild(msgList);
 443         for(msgId in currentlyMarkedRows) {
 444                 msgRow = currentlyMarkedRows[msgId];
 445                 var subject = getTextContent(msgRow.getElementsByTagName("td")[0]);
 446                 var li = document.createElement("li");
 447                 msgList.appendChild(li);
 448                 setTextContent(li, subject);
 449                 li.ctdlMsgId = msgId;
 450         }
 451         return element;
 452 }
 453
 454 var saved_y = 0;
 455 function CtdlResizeMouseDown(event) {
 456         $(document).observe('mousemove', CtdlResizeMouseMove);
 457         $(document).observe('mouseup', CtdlResizeMouseUp);
 458         saved_y = event.clientY;
 459 }
 460
 461 function sizePreviewPane() {
 462         var preview_pane = document.getElementById("preview_pane");
 463         var summary_view = document.getElementById("summary_view");
 464         var banner = document.getElementById("banner");
 465         var message_list_hdr = document.getElementById("message_list_hdr");
 466         var content = $('global');  // we'd like to use prototype methods here
 467         var childElements = content.childElements();
 468         var sizeOfElementsAbove = 0;
 469         var heightOfViewPort = document.viewport.getHeight() // prototypejs method
 470                 var bannerHeight = banner.offsetHeight;
 471         var contentViewPortHeight = heightOfViewPort-banner.offsetHeight-message_list_hdr.offsetHeight;
 472         contentViewPortHeight = 0.98 * contentViewPortHeight; // leave some error
 473         // Set summary_view to 20%;
 474         var summary_height = ctdlLocalPrefs.readPref("svheight");
 475         if (summary_height == null) {
 476                 summary_height = 0.20 * contentViewPortHeight;
 477         }
 478         // Set preview_pane to the remainder
 479         var preview_height = contentViewPortHeight - summary_height;
 480
 481         summary_view.style.height = (summary_height)+"px";
 482         preview_pane.style.height = (preview_height)+"px";
 483 }
 484 function CtdlResizeMouseMove(event) {
 485         var clientX = event.clientX;
 486         var clientY = event.clientY;
 487         var summary_view = document.getElementById("summary_view");
 488         var summaryViewHeight = summary_view.offsetHeight;
 489         var increment = clientY-saved_y;
 490         var summary_view_height = increment+summaryViewHeight;
 491         summary_view.style.height = (summary_view_height)+"px";
 492         // store summary view height
 493         ctdlLocalPrefs.setPref("svheight",summary_view_height);
 494         var msglist = document.getElementById("preview_pane");
 495         var msgListHeight = msglist.offsetHeight;
 496         msglist.style.height = (msgListHeight-increment)+"px";
 497         saved_y = clientY;
 498         /* For some reason the grippy doesn't work without position: absolute
 499            so we need to set its top pos manually all the time */
 500         var resize = document.getElementById("resize_msglist");
 501         var resizePos = resize.offsetTop;
 502         resize.style.top = (resizePos+increment)+"px";
 503 }
 504 function CtdlResizeMouseUp(event) {
 505         $(document).stopObserving('mousemove', CtdlResizeMouseMove);
 506         $(document).stopObserving('mouseup', CtdlResizeMouseUp);
 507 }
 508 function ApplySorterToggle() {
 509         var className = currentSorterToggle.className;
 510         className += " current_sort_mode";
 511         if (currentSortMode[1] == sortRowsByDateDescending ||
 512             currentSortMode[1] == sortRowsBySubjectDescending ||
 513             currentSortMode[1] == sortRowsByFromDescending) {
 514                 className += " sort_descending";
 515         } else {
 516                 className += " sort_ascending";
 517         }
 518         currentSorterToggle.className = className;
 519 }
 520 function setupPageSelector() {
 521         var summpage = document.getElementById("summpage");
 522         var select_page = document.getElementById("selectpage");
 523         summpage.innerHTML = "";
 524         if (is_safe_mode) {
 525                 WCLog("unhiding parent page");
 526                 select_page.className = "";
 527         } else {
 528                 return;
 529         }
 530         var pages = nummsgs / 499;
 531         for(var i=0; i<pages; i++) {
 532                 var opt = document.createElement("option");
 533                 var startmsg = i * 499;
 534                 opt.setAttribute("value",startmsg);
 535                 if (currentPage == i) {
 536                         opt.setAttribute("selected","selected");
 537                 }
 538                 opt.appendChild(document.createTextNode((i+1)));
 539                 summpage.appendChild(opt);
 540         }
 541 }
 542 function getPage(event) {
 543         var target = event.target;
 544         startmsg = target.options.item(target.selectedIndex).value;
 545         currentPage = target.selectedIndex;
 546         //query = ""; // We are getting a page from the _entire_ msg list, don't query
 547         getMessages();
 548 }
 549 function takeOverSearchOMatic() {
 550         var searchForm = document.getElementById("searchomatic").getElementsByTagName("form")[0];
 551         // First disable the form post
 552         searchForm.setAttribute("action","javascript:void();");
 553         searchForm.removeAttribute("method");
 554         $(searchForm).observe('submit', doSearch);
 555 }
 556 function doSearch() {
 557         query = document.getElementById("srchquery").value;
 558         getMessages();
 559         return false;
 560 }