From 7b97fafda2e66daf1e1136a7d11636afd0c628d0 Mon Sep 17 00:00:00 2001 From: ldayananda Date: Tue, 28 Jun 2016 16:34:14 -0400 Subject: [PATCH 1/5] Forcing mouseout handler on the menu content instead of on the overall mouse button --- src/js/menu/menu-button.js | 41 ++++++++++++++++++++++++++++++++++---- src/js/menu/menu.js | 11 ++++++++++ 2 files changed, 48 insertions(+), 4 deletions(-) diff --git a/src/js/menu/menu-button.js b/src/js/menu/menu-button.js index 11d8f575c8..5eec500dba 100644 --- a/src/js/menu/menu-button.js +++ b/src/js/menu/menu-button.js @@ -7,6 +7,8 @@ import Menu from './menu.js'; import * as Dom from '../utils/dom.js'; import * as Fn from '../utils/fn.js'; import toTitleCase from '../utils/to-title-case.js'; +// import * as Browser from '../utils/browser.js'; +import * as Events from '../utils/events.js'; /** * A button class with a popup menu @@ -28,6 +30,7 @@ class MenuButton extends ClickableComponent { this.el_.setAttribute('aria-haspopup', 'true'); this.el_.setAttribute('role', 'menuitem'); this.on('keydown', this.handleSubmenuKeyPress); + this.on('hideMenuButton', this.hideMenuButton); } /** @@ -141,10 +144,8 @@ class MenuButton extends ClickableComponent { * @method handleClick */ handleClick() { - this.one('mouseout', Fn.bind(this, function(){ - this.menu.unlockShowing(); - this.el_.blur(); - })); + this.handleMouseOut(); + if (this.buttonPressed_){ this.unpressButton(); } else { @@ -152,6 +153,38 @@ class MenuButton extends ClickableComponent { } } + handleMouseOut() { + // var menuContent = this.menu.el().querySelector('.vjs-menu-content'); + var menuContent = this.menu.contentEl(); + + // this.one(menuContent, 'mouseout', Fn.bind(this, function(elem, event) { + // console.log('somehow got what i wanted', elem, event); + // this.unpressButton(); + // this.el_.blur(); + // })); + + Events.on(menuContent, 'mouseout', function(e) { + // console.log('mousing out of actual menu', e, e.relatedTarget); + + var listItemName = 'vjs-menu-item'; + // console.log(listItemName, '|', e.relatedTarget.className); + + if (e.relatedTarget && !(e.relatedTarget.className.includes(listItemName))) { + + // Dom.removeElClass(this.parentNode, 'vjs-lock-showing'); + this.parentNode.parentNode.blur(); + + Events.trigger(this.parentNode.parentNode, 'hideMenuButton'); + } + }); + } + + hideMenuButton() { + console.log('the menu button knows to hide'); + this.unpressButton(); + this.el_.blur(); + } + /** * Handle key press on menu * diff --git a/src/js/menu/menu.js b/src/js/menu/menu.js index 688e44a11a..fa49361763 100644 --- a/src/js/menu/menu.js +++ b/src/js/menu/menu.js @@ -63,6 +63,17 @@ class Menu extends Component { event.stopImmediatePropagation(); }); + // Events.on(this.contentEl_, 'mouseout', function(e, elem) { + // console.log('mousing out of actual menu', e, e.relatedTarget, 'elem', elem); + // var listItemName = 'vjs-menu-item'; + // console.log(listItemName, e.relatedTarget.className); + // if (e.relatedTarget && !(e.relatedTarget.className.includes(listItemName))) { + // console.log('trying to hide menu because we got the right thing'); + // // this.menuButton.unpressButton(); + // // this.menuButton.el().blur(); + // } + // }); + return el; } From 5514d8432f8561e4a08665df191d32edb09da9e1 Mon Sep 17 00:00:00 2001 From: ldayananda Date: Tue, 28 Jun 2016 16:46:49 -0400 Subject: [PATCH 2/5] Cleaning up previous change. Added a comment to make the logic more clear --- src/js/menu/menu-button.js | 21 ++++----------------- src/js/menu/menu.js | 11 ----------- 2 files changed, 4 insertions(+), 28 deletions(-) diff --git a/src/js/menu/menu-button.js b/src/js/menu/menu-button.js index 5eec500dba..775e591f7a 100644 --- a/src/js/menu/menu-button.js +++ b/src/js/menu/menu-button.js @@ -7,7 +7,6 @@ import Menu from './menu.js'; import * as Dom from '../utils/dom.js'; import * as Fn from '../utils/fn.js'; import toTitleCase from '../utils/to-title-case.js'; -// import * as Browser from '../utils/browser.js'; import * as Events from '../utils/events.js'; /** @@ -154,33 +153,21 @@ class MenuButton extends ClickableComponent { } handleMouseOut() { - // var menuContent = this.menu.el().querySelector('.vjs-menu-content'); var menuContent = this.menu.contentEl(); - // this.one(menuContent, 'mouseout', Fn.bind(this, function(elem, event) { - // console.log('somehow got what i wanted', elem, event); - // this.unpressButton(); - // this.el_.blur(); - // })); - + /** + * Listens to mouseout events on the menu content, and only tells the menu to hide itself + * when leaving the menu content(as opposed to a menu item.) + **/ Events.on(menuContent, 'mouseout', function(e) { - // console.log('mousing out of actual menu', e, e.relatedTarget); - var listItemName = 'vjs-menu-item'; - // console.log(listItemName, '|', e.relatedTarget.className); - if (e.relatedTarget && !(e.relatedTarget.className.includes(listItemName))) { - - // Dom.removeElClass(this.parentNode, 'vjs-lock-showing'); - this.parentNode.parentNode.blur(); - Events.trigger(this.parentNode.parentNode, 'hideMenuButton'); } }); } hideMenuButton() { - console.log('the menu button knows to hide'); this.unpressButton(); this.el_.blur(); } diff --git a/src/js/menu/menu.js b/src/js/menu/menu.js index fa49361763..688e44a11a 100644 --- a/src/js/menu/menu.js +++ b/src/js/menu/menu.js @@ -63,17 +63,6 @@ class Menu extends Component { event.stopImmediatePropagation(); }); - // Events.on(this.contentEl_, 'mouseout', function(e, elem) { - // console.log('mousing out of actual menu', e, e.relatedTarget, 'elem', elem); - // var listItemName = 'vjs-menu-item'; - // console.log(listItemName, e.relatedTarget.className); - // if (e.relatedTarget && !(e.relatedTarget.className.includes(listItemName))) { - // console.log('trying to hide menu because we got the right thing'); - // // this.menuButton.unpressButton(); - // // this.menuButton.el().blur(); - // } - // }); - return el; } From c1b17802622b2bf9108dec226ae7d4af8ae6de1f Mon Sep 17 00:00:00 2001 From: ldayananda Date: Tue, 28 Jun 2016 17:31:26 -0400 Subject: [PATCH 3/5] Chaning mouseout to mouseleave to simplify and tidy up. --- src/js/menu/menu-button.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/menu/menu-button.js b/src/js/menu/menu-button.js index 11d8f575c8..fe692b001a 100644 --- a/src/js/menu/menu-button.js +++ b/src/js/menu/menu-button.js @@ -141,8 +141,8 @@ class MenuButton extends ClickableComponent { * @method handleClick */ handleClick() { - this.one('mouseout', Fn.bind(this, function(){ - this.menu.unlockShowing(); + this.one(this.menu.contentEl(), 'mouseleave', Fn.bind(this, function(e){ + this.unpressButton(); this.el_.blur(); })); if (this.buttonPressed_){ From 37b04a657d50e91fcf8d75711d25711d0ea57ad6 Mon Sep 17 00:00:00 2001 From: ldayananda Date: Tue, 28 Jun 2016 17:36:53 -0400 Subject: [PATCH 4/5] Forgot to remove the binding --- src/js/menu/menu-button.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/js/menu/menu-button.js b/src/js/menu/menu-button.js index 367b0b86b8..513cb1ba8b 100644 --- a/src/js/menu/menu-button.js +++ b/src/js/menu/menu-button.js @@ -29,7 +29,6 @@ class MenuButton extends ClickableComponent { this.el_.setAttribute('aria-haspopup', 'true'); this.el_.setAttribute('role', 'menuitem'); this.on('keydown', this.handleSubmenuKeyPress); - this.on('hideMenuButton', this.hideMenuButton); } /** From ee98d3fc8dba978cc57955588d85b4cddd530537 Mon Sep 17 00:00:00 2001 From: ldayananda Date: Tue, 28 Jun 2016 17:42:04 -0400 Subject: [PATCH 5/5] And left in an import that is no longer needed --- src/js/menu/menu-button.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/js/menu/menu-button.js b/src/js/menu/menu-button.js index 513cb1ba8b..fe692b001a 100644 --- a/src/js/menu/menu-button.js +++ b/src/js/menu/menu-button.js @@ -7,7 +7,6 @@ import Menu from './menu.js'; import * as Dom from '../utils/dom.js'; import * as Fn from '../utils/fn.js'; import toTitleCase from '../utils/to-title-case.js'; -import * as Events from '../utils/events.js'; /** * A button class with a popup menu