diff --git a/README.md b/README.md index 3cc02b9..bcb3963 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,12 @@ menu-aim is a jQuery plugin for dropdown menus that can differentiate between a user trying hover over a dropdown item vs trying to navigate into a submenu's contents. +## Installation +``` +bower install jquery.menuaim --save +``` + +## Demo [Try a demo.](https://rawgithub.com/kamens/jQuery-menu-aim/master/example/example.html) ![Amazon screenshot](https://raw.github.com/kamens/jQuery-menu-aim/master/amazon.png) @@ -63,7 +69,10 @@ 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", + + // ms delay when user appears to be entering submenu + delay = 300 }); menu-aim assumes that you are using a menu with submenus that expand diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..42f9b2b --- /dev/null +++ b/bower.json @@ -0,0 +1,12 @@ +{ + "name": "jquery.menu-aim", + "version": "1.1.0", + "main": "jquery.menu-aim.js", + "dependencies": { + "jquery": "*" + }, + "ignore": [ + "example", + "*.png" + ] +} diff --git a/jquery.menu-aim.js b/jquery.menu-aim.js index 0c32941..186d319 100644 --- a/jquery.menu-aim.js +++ b/jquery.menu-aim.js @@ -1,7 +1,8 @@ /** * menu-aim is a jQuery plugin for dropdown menus that can differentiate * between a user trying hover over a dropdown item vs trying to navigate into - * a submenu's contents. + * a submenu's contents. It will fire events when the user's mouse enters a + * new dropdown item *and* when that item is being intentionally hovered over. * * menu-aim assumes that you have are using a menu with submenus that expand * to the menu's right. It will fire events when the user's mouse enters a new @@ -95,11 +96,11 @@ exit: $.noop, activate: $.noop, deactivate: $.noop, - exitMenu: $.noop + exitMenu: $.noop, + delay: 300 }, opts); - var MOUSE_LOCS_TRACKED = 3, // number of past mouse locations to track - DELAY = 300; // ms delay when user appears to be entering submenu + var MOUSE_LOCS_TRACKED = 3; // number of past mouse locations to track /** * Keep track of the last few locations of the mouse. @@ -144,6 +145,12 @@ possiblyActivate(this); }, mouseleaveRow = function() { + + /* https://github.com/kamens/jQuery-menu-aim/pull/29/commits - thanks to magwo */ + if (timeoutId) { + // Cancel any pending activation + clearTimeout(timeoutId); + } options.exit(this); }; @@ -166,6 +173,12 @@ options.deactivate(activeRow); } + /* https://github.com/kamens/jQuery-menu-aim/pull/33/commits */ + if (! $(row).is(options.submenuSelector)){ + activeRow = null; + return; + } + options.activate(row); activeRow = row; }; @@ -205,7 +218,7 @@ var offset = $menu.offset(), upperLeft = { x: offset.left, - y: offset.top - options.tolerance + y: offset.top }, upperRight = { x: offset.left + $menu.outerWidth(), @@ -213,7 +226,7 @@ }, lowerLeft = { x: offset.left, - y: offset.top + $menu.outerHeight() + options.tolerance + y: offset.top + $menu.outerHeight() }, lowerRight = { x: offset.left + $menu.outerWidth(), @@ -230,6 +243,22 @@ prevLoc = loc; } + /* https://github.com/kamens/jQuery-menu-aim/pull/22/commits - thanks to tuckbick */ + // Adjust the corner points to enable tolerance. + if (options.submenuDirection == "right") { + upperRight.y -= options.tolerance; + lowerRight.y += options.tolerance; + } else if (options.submenuDirection == "left") { + upperLeft.y -= options.tolerance; + lowerLeft.y += options.tolerance; + } else if (options.submenuDirection == "above") { + upperLeft.x -= options.tolerance; + upperRight.x += options.tolerance; + } else if (options.submenuDirection == "below") { + lowerLeft.x -= options.tolerance; + lowerRight.x += options.tolerance; + } + if (prevLoc.x < offset.left || prevLoc.x > lowerRight.x || prevLoc.y < offset.top || prevLoc.y > lowerRight.y) { // If the previous mouse location was outside of the entire @@ -299,7 +328,7 @@ // currently activated submenu. Delay before activating a // new menu row, because user may be moving into submenu. lastDelayLoc = loc; - return DELAY; + return options.delay; } lastDelayLoc = null; @@ -316,8 +345,17 @@ .mouseleave(mouseleaveRow) .click(clickRow); + /* https://github.com/kamens/jQuery-menu-aim/pull/31/commits - thanks to saralk */ + $menu.bind('DOMNodeInserted', function(e) { + var $newEl = $(e.target); + if ($newEl.is(options.rowSelector)) { + $newEl.mouseenter(mouseenterRow) + .mouseleave(mouseleaveRow) + .click(clickRow); + } + }); + $(document).mousemove(mousemoveDocument); }; -})(jQuery); - +})(jQuery); \ No newline at end of file