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