From b2417a8eb3c117e55e2c05be3590593841d80b36 Mon Sep 17 00:00:00 2001 From: Antoine Guillou Date: Tue, 16 Apr 2013 18:14:21 +0200 Subject: [PATCH 1/3] Add activation delay Add new option "activationDelay". This option adds a delay (in milliseconds) before really opening submenu to prevent flickering submenus when moving cursor quickly between rows. If this option is not set, no delay is applied. --- jquery.menu-aim.js | 34 ++++++++++++++++++++++++++-------- 1 file changed, 26 insertions(+), 8 deletions(-) diff --git a/jquery.menu-aim.js b/jquery.menu-aim.js index b06f888..a028e4a 100644 --- a/jquery.menu-aim.js +++ b/jquery.menu-aim.js @@ -86,6 +86,7 @@ mouseLocs = [], lastDelayLoc = null, timeoutId = null, + activationTimeoutId = undefined, options = $.extend({ rowSelector: "> li", submenuSelector: "*", @@ -95,7 +96,8 @@ exit: $.noop, activate: $.noop, deactivate: $.noop, - exitMenu: $.noop + exitMenu: $.noop, + activationDelay: 0 }, opts); var MOUSE_LOCS_TRACKED = 3, // number of past mouse locations to track @@ -144,6 +146,11 @@ possiblyActivate(this); }, mouseleaveRow = function() { + if(activationTimeoutId){ + clearTimeout(activationTimeoutId); + activationTimeoutId = undefined; + } + options.exit(this); }; @@ -154,13 +161,24 @@ if (row == activeRow) { return; } - - if (activeRow) { - options.deactivate(activeRow); - } - - options.activate(row); - activeRow = row; + + if(options.activationDelay > 0) { + if(activationTimeoutId) { + clearTimeout(activationTimeoutId); + } + activationTimeoutId = setTimeout(reallyActivate, options.activationDelay); + } else { + reallyActivate(); + } + + function reallyActivate() { + if (activeRow) { + options.deactivate(activeRow); + } + + options.activate(row); + activeRow = row; + } }; /** From c6cae1bdf8d27489d3a8b45e0692d8138191a3b2 Mon Sep 17 00:00:00 2001 From: Antoine Guillou Date: Tue, 16 Apr 2013 18:19:13 +0200 Subject: [PATCH 2/3] Update documentation for "activationDelay" option --- README.md | 7 ++++++- jquery.menu-aim.js | 7 ++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 0708e27..a3de3ab 100644 --- a/README.md +++ b/README.md @@ -63,7 +63,12 @@ the relevant row's HTML element as the execution context ('this'): // controls which direction is "forgiving" as the user moves their // cursor from the main menu into the submenu. Can be one of "right", // "left", "above", or "below". Defaults to "right". - submenuDirection: "right" + submenuDirection: "right", + + // This option adds a delay (in milliseconds) before really opening + // submenu to prevent flickering submenus when moving cursor quickly + // between rows. Default is 0 + activationDelay: 0 }); menu-aim assumes that you are using a menu with submenus that expand diff --git a/jquery.menu-aim.js b/jquery.menu-aim.js index a028e4a..3eb3070 100644 --- a/jquery.menu-aim.js +++ b/jquery.menu-aim.js @@ -64,7 +64,12 @@ * * // Direction the submenu opens relative to the main menu. Can be * // left, right, above, or below. Defaults to "right". - * submenuDirection: "right" + * submenuDirection: "right", + * + * // This option adds a delay (in milliseconds) before really opening + * // submenu to prevent flickering submenus when moving cursor quickly + * // between rows. Default is 0 + * activationDelay: 0 * }); * * https://github.com/kamens/jQuery-menu-aim From 3a585db9fd05b7228a032390c632823f033288c9 Mon Sep 17 00:00:00 2001 From: Antoine Guillou Date: Tue, 16 Apr 2013 18:33:07 +0200 Subject: [PATCH 3/3] Add parameters to activate & deactivate functions Activate : add previously activated row as a second parameter if any. Deactivate : add next activated row as a second parameter if any. --- README.md | 6 ++++-- jquery.menu-aim.js | 16 +++++++++------- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index a3de3ab..d07f4bc 100644 --- a/README.md +++ b/README.md @@ -30,10 +30,12 @@ the relevant row's HTML element as the execution context ('this'): .menuAim({ // Function to call when a row is purposefully activated. Use this // to show a submenu's content for the activated row. - activate: function() {}, + // previouslyActivatedRow parameter can be null if no row was active before. + activate: function(activatedRow, previouslyActivatedRow) {}, // Function to call when a row is deactivated. - deactivate: function() {}, + // postActivatedRow parameter can be null if mouse cursor exited menu. + deactivate: function(deactivatedRow, postActivatedRow) {}, // Function to call when mouse enters a menu row. Entering a row // does not mean the row has been activated, as the user may be diff --git a/jquery.menu-aim.js b/jquery.menu-aim.js index 3eb3070..9a028ad 100644 --- a/jquery.menu-aim.js +++ b/jquery.menu-aim.js @@ -39,11 +39,13 @@ * * .menuAim({ * // Function to call when a row is purposefully activated. Use this - * // to show a submenu's content for the activated row. - * activate: function() {}, + * // to show a submenu's content for the activated row. + * // previouslyActivatedRow parameter can be null if no row was active before. + * activate: function(activatedRow, previouslyActivatedRow) {}, * - * // Function to call when a row is deactivated. - * deactivate: function() {}, + * // Function to call when a row is deactivated. + * // postActivatedRow parameter can be null if mouse cursor exited menu. + * deactivate: function(deactivatedRow, postActivatedRow) {}, * * // Function to call when mouse enters a menu row. Entering a row * // does not mean the row has been activated, as the user may be @@ -131,7 +133,7 @@ // currently active row on menu exit. if (options.exitMenu(this)) { if (activeRow) { - options.deactivate(activeRow); + options.deactivate(activeRow, null); } activeRow = null; @@ -178,10 +180,10 @@ function reallyActivate() { if (activeRow) { - options.deactivate(activeRow); + options.deactivate(activeRow, row); } - options.activate(row); + options.activate(row, activeRow); activeRow = row; } };