From 60d2d303c57a76d9cc886c0181d46dde3153d0e1 Mon Sep 17 00:00:00 2001 From: Michael M Slusarz Date: Thu, 2 Apr 2009 22:43:36 -0600 Subject: [PATCH] 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. --- imp/js/src/ContextSensitive.js | 86 ++++++++++++++++++++++-------------------- imp/js/src/DimpBase.js | 43 +++++++++++---------- imp/js/src/DimpCore.js | 2 +- imp/js/src/fullmessage-dimp.js | 4 +- 4 files changed, 69 insertions(+), 66 deletions(-) diff --git a/imp/js/src/ContextSensitive.js b/imp/js/src/ContextSensitive.js index 6b7dc417b..900330a01 100644 --- 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 6226c3263..fd030f0cb 100644 --- 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 cbe26ca4f..19aaf090e 100644 --- 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 60076ecc3..026af6acf 100644 --- 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; } }, -- 2.11.0