Do DIMP header sort generation entirely within javascript code

diff --git a/imp/js/DimpBase.js b/imp/js/DimpBase.js
index 93763a6..316432c 100644 (file)
--- a/imp/js/DimpBase.js
+++ b/imp/js/DimpBase.js
@@ -452,7 +452,7 @@ var DimpBase = {
             onContent: function(row) {
                 var bg, re, u,
                     thread = $H(this.viewport.getMetaData('thread')),
-                    tsort = (this.viewport.getMetaData('sortby') == DIMP.conf.sortthread);
+                    tsort = (this.viewport.getMetaData('sortby') == $H(DIMP.conf.sort).get('thread').v);
 
                 row.subjectdata = row.status = '';
                 row.subjecttitle = row.subject;
@@ -602,8 +602,8 @@ var DimpBase = {
                         $('folderName').next().hide();
                     }
                 } else if (this.filtertoggle &&
-                           this.viewport.getMetaData('sortby') == DIMP.conf.sortthread) {
-                    ssc = DIMP.conf.sortdate;
+                           this.viewport.getMetaData('sortby') == $H(DIMP.conf.sort).get('thread').v) {
+                    ssc = $H(DIMP.conf.sort).get('date').v;
                 }
 
                 this.setSortColumns(ssc);
@@ -727,7 +727,7 @@ var DimpBase = {
         case 'ctx_folderopts_collapse':
             $('normalfolders').select('LI.folder').each(function(f) {
                 this._toggleSubFolder(f, id == 'ctx_folderopts_expand' ? 'exp' : 'col', true);
-            }.bind(this));
+            }, this);
             break;
 
         case 'ctx_folderopts_reload':
@@ -741,7 +741,7 @@ var DimpBase = {
             tmp = baseelt.up('LI');
             [ tmp, $(this.getSubFolderId(tmp.readAttribute('id'))).select('LI.folder') ].flatten().each(function(f) {
                 this._toggleSubFolder(f, (id == 'ctx_container_expand' || id == 'ctx_folder_expand') ? 'exp' : 'col', true);
-            }.bind(this));
+            }, this);
             break;
 
         case 'ctx_message_spam':
@@ -934,16 +934,8 @@ var DimpBase = {
             return;
         }
 
-        var s, sortby,
-            elt = e.element();
-
-        if (!elt.hasAttribute('sortby')) {
-            elt = elt.up('[sortby]');
-            if (!elt) {
-                return;
-            }
-        }
-        sortby = Number(elt.readAttribute('sortby'));
+        var s,
+            sortby = Number(e.element().retrieve('sortby'));
 
         if (sortby == this.viewport.getMetaData('sortby')) {
             s = { sortdir: (this.viewport.getMetaData('sortdir') ? 0 : 1) };
@@ -952,6 +944,7 @@ var DimpBase = {
             s = { sortby: sortby };
             this.viewport.setMetaData({ sortby: s.sortby });
         }
+
         this.setSortColumns(sortby);
         this.viewport.reload(s);
     },
@@ -959,40 +952,67 @@ var DimpBase = {
     setSortColumns: function(sortby)
     {
         var tmp,
+            ptr = DIMP.conf.sort,
+            togglesort = [],
             m = $('msglistHeader');
 
         if (Object.isUndefined(sortby)) {
             sortby = this.viewport.getMetaData('sortby');
         }
 
-        tmp = m.down('small[sortby=' + sortby + ']');
-        if (tmp && tmp.up().visible()) {
-           tmp.up(1).childElements().invoke('toggle');
+        /* Init once per load. */
+        if (Object.isHash(ptr)) {
+            m.childElements().invoke('removeClassName', 'sortup').invoke('removeClassName', 'sortdown');
+        } else {
+            DIMP.conf.sort = ptr = $H(ptr);
+            ptr.each(function(s) {
+                s.value.e = new Element('A', { className: 'widget' }).store('sortby', s.value.v).insert(s.value.t);
+            }, this);
+
+            m.down('.msgFrom').update(ptr.get('from').e).insert(ptr.get('to').e);
+            m.down('.msgSize').update(ptr.get('size').e);
         }
 
-        tmp = m.down('div.msgFrom a');
+        /* Toggle between From/To header. */
+        tmp = m.down('.msgFrom a');
         if (this.viewport.getMetaData('special')) {
             tmp.hide().next().show();
         } else {
             tmp.show().next().hide();
         }
 
-        tmp = m.down('div.msgSubject a');
+        /* Toggle between Subject/Thread header. */
+        tmp = m.down('.msgSubject');
         if (this.isSearch() ||
             this.viewport.getMetaData('nothread') ||
             this.viewport.getMetaData('sortlimit')) {
-            tmp.show().next().hide();
-            tmp.down().hide();
+            togglesort.push({ l: 'subject', t: tmp });
+        } else if (sortby == ptr.get('thread').v) {
+            togglesort.push({ l: 'thread', s: 'subject', t: tmp });
         } else {
-            tmp.down().show();
+            togglesort.push({ l: 'subject', s: 'thread', t: tmp });
         }
 
-        m.childElements().invoke('removeClassName', 'sortup').invoke('removeClassName', 'sortdown');
-
-        tmp = m.down('div a[sortby=' + sortby + ']');
-        if (tmp) {
-            tmp.up().addClassName(this.viewport.getMetaData('sortdir') ? 'sortup' : 'sortdown');
+        /* Toggle between Date/Arrival header. */
+        tmp = m.down('.msgDate');
+        if (sortby == ptr.get('arrival').v) {
+            togglesort.push({ l: 'arrival', s: 'date', t: tmp });
+        } else {
+            togglesort.push({ l: 'date', s: 'arrival', t: tmp });
         }
+
+        togglesort.each(function(hdr) {
+            hdr.t.update(ptr.get(hdr.l).e.removeClassName('smallSort').update(ptr.get(hdr.l).t));
+            if (hdr.s) {
+                hdr.t.insert(ptr.get(hdr.s).e.addClassName('smallSort').update('[' + ptr.get(hdr.s).t + ']'));
+            }
+        }, this);
+
+        ptr.find(function(s) {
+            return (sortby == s.value.v)
+                ? s.value.e.up().addClassName(this.viewport.getMetaData('sortdir') ? 'sortup' : 'sortdown')
+                : false;
+        }, this);
     },
 
     // Preview pane functions
@@ -2085,7 +2105,7 @@ var DimpBase = {
                     });
                 }
             }
-        }.bind(this));
+        }, this);
     },
 
     // Folder actions.

diff --git a/imp/templates/index/index-dimp.inc b/imp/templates/index/index-dimp.inc
index 3984c23..7a773b9 100644 (file)
--- a/imp/templates/index/index-dimp.inc
+++ b/imp/templates/index/index-dimp.inc
@@ -191,29 +191,10 @@ function _simpleButton($id, $text, $image)
 
      <div id="msglistHeader" class="item">
       <div class="msgStatus"></div>
-      <div class="msgFrom sep">
-       <a class="widget" sortby="<?php echo Horde_Imap_Client::SORT_FROM ?>"><?php echo _("From") ?></a>
-       <a class="widget" style="display:none" sortby="<?php echo Horde_Imap_Client::SORT_TO ?>"><?php echo _("To") ?></a>
-      </div>
-      <div class="msgSubject sep">
-       <a class="widget" sortby="<?php echo Horde_Imap_Client::SORT_SUBJECT ?>"><?php echo _("Subject") ?>
-        <small sortby="<?php echo Horde_Imap_Client::SORT_THREAD ?>">[<?php echo _("Thread") ?>]</small>
-       </a>
-       <a class="widget" style="display:none" sortby="<?php echo Horde_Imap_Client::SORT_THREAD ?>"><?php echo _("Thread") ?>
-        <small sortby="<?php echo Horde_Imap_Client::SORT_SUBJECT ?>">[<?php echo _("Subject") ?>]</small>
-       </a>
-      </div>
-      <div class="msgDate sep">
-       <a class="widget" sortby="<?php echo Horde_Imap_Client::SORT_DATE ?>"><?php echo _("Date") ?>
-        <small sortby="<?php echo Horde_Imap_Client::SORT_ARRIVAL ?>">[<?php echo _("Arrival") ?>]</small>
-       </a>
-       <a class="widget" style="display:none" sortby="<?php echo Horde_Imap_Client::SORT_ARRIVAL ?>"><?php echo _("Arrival") ?>
-        <small sortby="<?php echo Horde_Imap_Client::SORT_DATE ?>">[<?php echo _("Date") ?>]</small>
-       </a>
-      </div>
-      <div class="msgSize sep">
-       <a class="widget" sortby="<?php echo Horde_Imap_Client::SORT_SIZE ?>"><?php echo _("Size") ?></a>
-      </div>
+      <div class="msgFrom sep"></div>
+      <div class="msgSubject sep"></div>
+      <div class="msgDate sep"></div>
+      <div class="msgSize sep"></div>
      </div>
     </div>
 

diff --git a/imp/templates/javascript_defs_dimp.php b/imp/templates/javascript_defs_dimp.php
index cf083cc..4a1b94b 100644 (file)
--- a/imp/templates/javascript_defs_dimp.php
+++ b/imp/templates/javascript_defs_dimp.php
@@ -76,8 +76,36 @@ $code['conf'] = array_filter(array(
     'refresh_time' => intval($GLOBALS['prefs']->getValue('refresh_time')),
     'searchprefix' => IMP_Search::MBOX_PREFIX,
     'sidebar_width' => max((int)$GLOBALS['prefs']->getValue('sidebar_width'), 150) . 'px',
-    'sortdate' => Horde_Imap_Client::SORT_DATE,
-    'sortthread' => Horde_Imap_Client::SORT_THREAD,
+    'sort' => array(
+        'from' => array(
+            't' => _("From"),
+            'v' => Horde_Imap_Client::SORT_FROM
+        ),
+        'to' => array(
+            't' => _("To"),
+            'v' => Horde_Imap_Client::SORT_TO
+        ),
+        'subject' => array(
+            't' => _("Subject"),
+            'v' => Horde_Imap_Client::SORT_SUBJECT
+        ),
+        'thread' => array(
+            't' => _("Thread"),
+            'v' => Horde_Imap_Client::SORT_THREAD
+        ),
+        'date' => array(
+            't' => _("Date"),
+            'v' => Horde_Imap_Client::SORT_DATE
+        ),
+        'arrival' => array(
+            't' => _("Arrival"),
+            'v' => Horde_Imap_Client::SORT_ARRIVAL
+        ),
+        'size' => array(
+            't' => _("Size"),
+            'v' => Horde_Imap_Client::SORT_SIZE
+        )
+    ),
     'spam_mbox' => IMP::folderPref($GLOBALS['prefs']->getValue('spam_folder'), true),
     'spam_spammbox' => intval(!empty($GLOBALS['conf']['spam']['spamfolder'])),
     'splitbar_pos' => intval($GLOBALS['prefs']->getValue('dimp_splitbar')),

diff --git a/imp/themes/screen-dimp.css b/imp/themes/screen-dimp.css
index 6990645..87edc6e 100644 (file)
--- a/imp/themes/screen-dimp.css
+++ b/imp/themes/screen-dimp.css
@@ -156,6 +156,11 @@ div.msgSize {
 #msglistHeader a {
     cursor: pointer;
 }
+#msglistHeader a.smallSort {
+    font-size: 75%;
+    font-weight: normal;
+    padding-left: 4px !important;
+}
 #msglistHeader div {
     padding-top: 1px;
     height: 15px;
@@ -171,10 +176,6 @@ div.msgSize {
 #msglistHeader div.sep {
     border-left: 1px solid #ddd;
 }
-#msglistHeader a small {
-    padding-left: 2px;
-    font-weight: normal;
-}
 
 /* Message ViewPort */
 .msglist {