From 83ad7addd11b8ae31e393e653054c065ffdd962e Mon Sep 17 00:00:00 2001 From: Bryce Gilhome Date: Sat, 23 May 2015 11:29:49 +1000 Subject: [PATCH 1/4] Prevent default on click event on dropdowns with .content class, unless click target has attr dropdown-close --- src/dropdownToggle/dropdownToggle.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/dropdownToggle/dropdownToggle.js b/src/dropdownToggle/dropdownToggle.js index 48a4154..3ecd7cd 100644 --- a/src/dropdownToggle/dropdownToggle.js +++ b/src/dropdownToggle/dropdownToggle.js @@ -89,7 +89,20 @@ angular.module('mm.foundation.dropdownToggle', [ 'mm.foundation.position', 'mm.f parent.removeClass('hover'); } }; - $document.on('click', closeMenu); + $document.on('click', function(event) { + // Disable close for click on/in dropdown with .content + // Unless target has attr dropdown-close + // Use $.contains to test if in dropdown - could test whether + // target is parent, but would still have to use $contains + // (parent could have children) + if (dropdown.hasClass('content') + && (event.target == dropdown[0] || $.contains(dropdown[0], event.target)) + && !event.target.hasAttribute('dropdown-close')) { + event.preventDefault(); + return; + } + closeMenu(); + }); } }; From 47ba0ba7d62aa13a2ad78e2cb55213cccefd0152 Mon Sep 17 00:00:00 2001 From: Bryce Gilhome Date: Sat, 23 May 2015 11:52:48 +1000 Subject: [PATCH 2/4] Change test to attribute dropdown-content --- src/dropdownToggle/dropdownToggle.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/dropdownToggle/dropdownToggle.js b/src/dropdownToggle/dropdownToggle.js index 3ecd7cd..6511c9e 100644 --- a/src/dropdownToggle/dropdownToggle.js +++ b/src/dropdownToggle/dropdownToggle.js @@ -95,7 +95,7 @@ angular.module('mm.foundation.dropdownToggle', [ 'mm.foundation.position', 'mm.f // Use $.contains to test if in dropdown - could test whether // target is parent, but would still have to use $contains // (parent could have children) - if (dropdown.hasClass('content') + if (dropdown[0].hasAttribute('dropdown-content') && (event.target == dropdown[0] || $.contains(dropdown[0], event.target)) && !event.target.hasAttribute('dropdown-close')) { event.preventDefault(); From 3e564a04a45d45abde2cec8eb7c78d69447f2c77 Mon Sep 17 00:00:00 2001 From: Bryce Gilhome Date: Sat, 23 May 2015 12:25:46 +1000 Subject: [PATCH 3/4] Use current Foundation aria-autoclose attribute for enabling/disabling close on dropdowns. Also move check to inside closeMenu function for proper binding/unbinding click handler. --- src/dropdownToggle/dropdownToggle.js | 38 +++++++++++++--------------- 1 file changed, 17 insertions(+), 21 deletions(-) diff --git a/src/dropdownToggle/dropdownToggle.js b/src/dropdownToggle/dropdownToggle.js index 6511c9e..be6352d 100644 --- a/src/dropdownToggle/dropdownToggle.js +++ b/src/dropdownToggle/dropdownToggle.js @@ -80,29 +80,25 @@ angular.module('mm.foundation.dropdownToggle', [ 'mm.foundation.position', 'mm.f openElement = element; closeMenu = function (event) { - $document.off('click', closeMenu); - dropdown.css('display', 'none'); - element.removeClass('expanded'); - closeMenu = angular.noop; - openElement = null; - if (parent.hasClass('hover')) { - parent.removeClass('hover'); + // Disable close for click on dropdown or contained element with aria-autoclose="false" + // Unless target has attr aria-autoclose="true" + if ((event.target == dropdown[0] || $.contains(dropdown[0], event.target)) + && ($(event.target).attr('aria-autoclose') === 'false' || dropdown.attr('aria-autoclose') === 'false') + && $(event.target).attr('aria-autoclose') !== 'true' + ) { + // do anything? + } else { + $document.off('click', closeMenu); + dropdown.css('display', 'none'); + element.removeClass('expanded'); + closeMenu = angular.noop; + openElement = null; + if (parent.hasClass('hover')) { + parent.removeClass('hover'); + } } }; - $document.on('click', function(event) { - // Disable close for click on/in dropdown with .content - // Unless target has attr dropdown-close - // Use $.contains to test if in dropdown - could test whether - // target is parent, but would still have to use $contains - // (parent could have children) - if (dropdown[0].hasAttribute('dropdown-content') - && (event.target == dropdown[0] || $.contains(dropdown[0], event.target)) - && !event.target.hasAttribute('dropdown-close')) { - event.preventDefault(); - return; - } - closeMenu(); - }); + $document.on('click', closeMenu); } }; From c8b1b2d9a0a2538e2a4ea04e861dfda02339dfa5 Mon Sep 17 00:00:00 2001 From: Bryce Gilhome Date: Sun, 24 May 2015 12:18:29 +1000 Subject: [PATCH 4/4] Allow for when event is undefined eg. path change --- src/dropdownToggle/dropdownToggle.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/dropdownToggle/dropdownToggle.js b/src/dropdownToggle/dropdownToggle.js index be6352d..54f68fa 100644 --- a/src/dropdownToggle/dropdownToggle.js +++ b/src/dropdownToggle/dropdownToggle.js @@ -82,7 +82,8 @@ angular.module('mm.foundation.dropdownToggle', [ 'mm.foundation.position', 'mm.f closeMenu = function (event) { // Disable close for click on dropdown or contained element with aria-autoclose="false" // Unless target has attr aria-autoclose="true" - if ((event.target == dropdown[0] || $.contains(dropdown[0], event.target)) + if (angular.isDefined(event) + && (event.target == dropdown[0] || $.contains(dropdown[0], event.target)) && ($(event.target).attr('aria-autoclose') === 'false' || dropdown.attr('aria-autoclose') === 'false') && $(event.target).attr('aria-autoclose') !== 'true' ) {