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