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