Tweak ContextMenu effects.

Showing fade on submenus is just too much of a hassle. Only fade in/out
on display of base contextmenu.
Rework internals to be clearer/not use extra variables.

diff --git a/imp/js/src/ContextSensitive.js b/imp/js/src/ContextSensitive.js
index 6b7dc41..900330a 100644 (file)
--- a/imp/js/src/ContextSensitive.js
+++ b/imp/js/src/ContextSensitive.js
@@ -30,19 +30,14 @@
 
 var ContextSensitive = Class.create({
 
-    queueSettings: {
-        limit: 5,
-        position: 'end',
-        scope: 'contextsensitive'
-    },
-
     initialize: function(opts)
     {
-        this.basectx = this.submenu = null;
-        this.elements = $H();
-        this.submenus = $H();
+        this.baseelt = null;
         this.current = [];
+        this.elements = $H();
         this.opts = opts || {};
+        this.submenus = $H();
+        this.triggers = [];
 
         document.observe('contextmenu', this._rightClickHandler.bindAsEventListener(this));
         document.observe('click', this._leftClickHandler.bindAsEventListener(this));
@@ -74,22 +69,29 @@ var ContextSensitive = Class.create({
      */
     close: function()
     {
-        this._closeSubmenu(0, true);
+        this._closeMenu(0, true);
     },
 
     /**
-     * Close all submenus below a specified level.
+     * Close all menus below a specified level.
      */
-    _closeSubmenu: function(idx, immediate)
+    _closeMenu: function(idx, immediate)
     {
         if (this.current.size()) {
             this.current.splice(idx, this.current.size() - idx).each(function(s) {
-                Effect.Fade(s, {
-                    duration: 0.15,
-                    afterFinish: function() { this.basectx = this.submenu = null; }.bind(this),
-                    queue: immediate ? 'global' : this.queueSettings
-                });
-            }, this);
+                // Fade-out on final display.
+                if (idx == 0) {
+                    Effect.Fade(s, { duration: 0.15 });
+                } else {
+                    $(s).hide();
+                }
+            });
+
+            this.triggers.splice(idx, this.triggers.size() - idx);
+
+            if (idx == 0) {
+                this.baseelt = null;
+            }
         }
     },
 
@@ -128,7 +130,7 @@ var ContextSensitive = Class.create({
      */
     _leftClickHandler: function(e)
     {
-        var base, elt, elt_up, submenu;
+        var base, elt, elt_up, trigger;
 
         // Check for a right click. FF on Linux triggers an onclick event even
         // w/a right click, so disregard.
@@ -146,13 +148,13 @@ var ContextSensitive = Class.create({
 
                 if (elt.hasClassName('contextSubmenu') &&
                     elt_up.readAttribute('id') != this.currentmenu()) {
-                    this._closeSubmenu(this.current.indexOf(elt.readAttribute('id')));
+                    this._closeMenu(this.current.indexOf(elt.readAttribute('id')));
                 } else {
-                    base = this.current.first();
-                    submenu = this.submenu;
+                    base = this.baseelt;
+                    trigger = this.triggers.last();
                     this.close();
                     if (this.opts.onClick) {
-                        this.opts.onClick(elt, base, submenu);
+                        this.opts.onClick(elt, base, trigger);
                     }
                 }
                 return;
@@ -204,10 +206,11 @@ var ContextSensitive = Class.create({
             return false;
         }
 
-        // Register the current element that will be shown and the element
-        // that was clicked on.
         this.close();
 
+        // Register the element that was clicked on.
+        this.baseelt = target;
+
         offset = ctx.opts.offset;
         if (!offset && (Object.isUndefined(x) || Object.isUndefined(y))) {
             offset = target.readAttribute('id');
@@ -221,8 +224,8 @@ var ContextSensitive = Class.create({
             y = offsets[1] + offset.getHeight() + voffsets.top;
         }
 
-        this.basectx = ctx;
         this._displayMenu(el, x, y);
+        this.triggers.push(el_id);
 
         return true;
     },
@@ -230,7 +233,7 @@ var ContextSensitive = Class.create({
     /**
      * Display the [sub]menu on the screen.
      */
-    _displayMenu: function(elt, x, y, submenu)
+    _displayMenu: function(elt, x, y)
     {
         // Get window/element dimensions
         var id = elt.readAttribute('id'),
@@ -246,19 +249,19 @@ var ContextSensitive = Class.create({
         }
 
         if (this.opts.onShow) {
-            this.opts.onShow(id, this.basectx);
+            this.opts.onShow(id, elt);
+        }
+
+        elt.setStyle({ left: x + 'px', top: y + 'px' })
+
+        if (this.current.size()) {
+            elt.show();
+        } else {
+            // Fade-in on initial display.
+            Effect.Appear(elt, { duration: 0.15 });
         }
 
-        Effect.Appear(elt, {
-            from: 0.0,
-            afterSetup: function() {
-                elt.setStyle({ left: x + 'px', top: y + 'px' })
-                this.current.push(id);
-                this.submenu = submenu;
-            }.bind(this),
-            duration: 0.15,
-            queue: this.queueSettings
-        });
+        this.current.push(id);
     },
 
     /**
@@ -299,9 +302,9 @@ var ContextSensitive = Class.create({
 
         if (elt.hasClassName('contextSubmenu')) {
             sub = this.submenus.get(id);
-            if (sub != cm || this.submenu != id) {
+            if (sub != cm || this.currentmenu() != id) {
                 if (id_div != cm) {
-                    this._closeSubmenu(this.current.indexOf(id_div) + 1);
+                    this._closeMenu(this.current.indexOf(id_div) + 1);
                 }
 
                 offsets = elt.viewportOffset();
@@ -309,11 +312,12 @@ var ContextSensitive = Class.create({
                 x = offsets[0] + voffsets.left + elt.getWidth();
                 y = offsets[1] + voffsets.top;
                 this._displayMenu($(sub), x, y, id);
+                this.triggers.push(id);
             }
         } else if ((this.current.size() > 1) &&
                    elt_up.hasClassName('contextMenu') &&
                    id_div != cm) {
-            this._closeSubmenu(this.current.indexOf(id));
+            this._closeMenu(this.current.indexOf(id));
         }
     }
 

diff --git a/imp/js/src/DimpBase.js b/imp/js/src/DimpBase.js
index 6226c32..fd030f0 100644 (file)
--- a/imp/js/src/DimpBase.js
+++ b/imp/js/src/DimpBase.js
@@ -614,29 +614,29 @@ var DimpBase = {
         DimpCore.DMenu.removeElement($(elt).identify());
     },
 
-    contextOnClick: function(parentfunc, elt, base, submenu)
+    contextOnClick: function(parentfunc, elt, baseelt, menu)
     {
         var id = elt.readAttribute('id');
 
         switch (id) {
         case 'ctx_folder_create':
-            this.createSubFolder(base);
+            this.createSubFolder(baseelt);
             break;
 
         case 'ctx_container_rename':
         case 'ctx_folder_rename':
-            this.renameFolder(base);
+            this.renameFolder(baseelt);
             break;
 
         case 'ctx_folder_empty':
-            mbox = base.readAttribute('mbox');
+            mbox = baseelt.readAttribute('mbox');
             if (window.confirm(DIMP.text.empty_folder)) {
                 DimpCore.doAction('EmptyFolder', { view: mbox }, null, this._emptyFolderCallback.bind(this));
             }
             break;
 
         case 'ctx_folder_delete':
-            mbox = base.readAttribute('mbox');
+            mbox = baseelt.readAttribute('mbox');
             if (window.confirm(DIMP.text.delete_folder)) {
                 DimpCore.doAction('DeleteFolder', { view: mbox }, null, this.bcache.get('folderC') || this.bcache.set('folderC', this._folderCallback.bind(this)));
             }
@@ -644,16 +644,16 @@ var DimpBase = {
 
         case 'ctx_folder_seen':
         case 'ctx_folder_unseen':
-            this.flag(id == 'ctx_folder_seen' ? 'allSeen' : 'allUnseen', { mailbox: base.readAttribute('mbox') });
+            this.flag(id == 'ctx_folder_seen' ? 'allSeen' : 'allUnseen', { mailbox: baseelt.readAttribute('mbox') });
             break;
 
         case 'ctx_folder_poll':
         case 'ctx_folder_nopoll':
-            this.modifyPollFolder(base.readAttribute('mbox'), id == 'ctx_folder_poll');
+            this.modifyPollFolder(baseelt.readAttribute('mbox'), id == 'ctx_folder_poll');
             break;
 
         case 'ctx_container_create':
-            this.createSubFolder(base);
+            this.createSubFolder(baseelt);
             break;
 
         case 'ctx_message_spam':
@@ -708,40 +708,39 @@ var DimpBase = {
             break;
 
         default:
-            if (submenu == 'ctx_message_setflag' ||
-                submenu == 'ctx_draft_setflag' ||
-                submenu == 'oa_setflag') {
+            if (menu == 'ctx_message_setflag' ||
+                menu == 'ctx_draft_setflag' ||
+                menu == 'oa_setflag') {
                 this.flag('imapflag', { imap: elt.readAttribute('flag'), set: true });
-            } else if (submenu == 'ctx_message_unsetflag' ||
-                       submenu == 'ctx_draft_unsetflag' ||
-                       submenu == 'oa_unsetflag') {
+            } else if (menu == 'ctx_message_unsetflag' ||
+                       menu == 'ctx_draft_unsetflag' ||
+                       menu == 'oa_unsetflag') {
                 this.flag('imapflag', { imap: elt.readAttribute('flag'), set: false });
             } else {
-                parentfunc(elt, base, submenu);
+                parentfunc(elt, baseelt, menu);
             }
             break;
         }
     },
 
-    contextOnShow: function(parentfunc, ctx_id, ctx)
+    contextOnShow: function(parentfunc, ctx_id, base)
     {
-        var elts, folder, ob, sel, tmp;
+        var elts, ob, sel, tmp;
 
         switch (ctx_id) {
         case 'ctx_folder':
             elts = $('ctx_folder_create', 'ctx_folder_rename', 'ctx_folder_delete');
-            folder = $(ctx.ctx);
-            if (folder.readAttribute('mbox') == 'INBOX') {
+            if (base.readAttribute('mbox') == 'INBOX') {
                 elts.invoke('hide');
             } else if (DIMP.conf.fixed_folders &&
-                       DIMP.conf.fixed_folders.indexOf(folder.readAttribute('mbox')) != -1) {
+                       DIMP.conf.fixed_folders.indexOf(base.readAttribute('mbox')) != -1) {
                 elts.shift();
                 elts.invoke('hide');
             } else {
                 elts.invoke('show');
             }
 
-            tmp = folder.hasAttribute('u');
+            tmp = base.hasAttribute('u');
             [ $('ctx_folder_poll') ].invoke(tmp ? 'hide' : 'show');
             [ $('ctx_folder_nopoll') ].invoke(tmp? 'show' : 'hide');
             break;
@@ -765,7 +764,7 @@ var DimpBase = {
             break;
 
         default:
-            parentfunc(ctx_id, ctx);
+            parentfunc(ctx_id, base);
             break;
         }
     },

diff --git a/imp/js/src/DimpCore.js b/imp/js/src/DimpCore.js
index cbe26ca..19aaf09 100644 (file)
--- a/imp/js/src/DimpCore.js
+++ b/imp/js/src/DimpCore.js
@@ -524,7 +524,7 @@ DimpCore = {
     // By default, no context onShow action
     contextOnShow: Prototype.emptyFunction,
 
-    contextOnClick: function(elt, base, submenu)
+    contextOnClick: function(elt, baseelt, menu)
     {
         switch (elt.readAttribute('id')) {
         case 'ctx_contacts_new':

diff --git a/imp/js/src/fullmessage-dimp.js b/imp/js/src/fullmessage-dimp.js
index 60076ec..026af6a 100644 (file)
--- a/imp/js/src/fullmessage-dimp.js
+++ b/imp/js/src/fullmessage-dimp.js
@@ -113,7 +113,7 @@ var DimpFullmessage = {
         parentfunc(e);
     },
 
-    contextOnClick: function(parentfunc, elt, base, submenu)
+    contextOnClick: function(parentfunc, elt, baseelt, menu)
     {
         var id = elt.readAttribute('id');
 
@@ -125,7 +125,7 @@ var DimpFullmessage = {
             break;
 
         default:
-            parentfunc(elt, base, submenu);
+            parentfunc(elt, baseelt, menu);
             break;
         }
     },