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