From 70a83a1ab0cca868002f777c8a2c093b9e4be6f5 Mon Sep 17 00:00:00 2001 From: Mike MacMillan Date: Thu, 4 Dec 2014 10:46:16 -0800 Subject: [PATCH 1/5] Modified showHidePopover to toggle the popover if already visible. Added click handlers, in addition to touchend, for showing/hiding the popover. --- js/popovers.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/js/popovers.js b/js/popovers.js index fe72ac788..02f8a7c1b 100644 --- a/js/popovers.js +++ b/js/popovers.js @@ -24,6 +24,12 @@ } }; + var hidePopover = function(e) { + popover.addEventListener('webkitTransitionEnd', onPopoverHidden); + popover.classList.remove('visible'); + popover.parentNode.removeChild(backdrop); + } + var onPopoverHidden = function () { popover.style.display = 'none'; popover.removeEventListener('webkitTransitionEnd', onPopoverHidden); @@ -34,11 +40,8 @@ element.classList.add('backdrop'); - element.addEventListener('touchend', function () { - popover.addEventListener('webkitTransitionEnd', onPopoverHidden); - popover.classList.remove('visible'); - popover.parentNode.removeChild(backdrop); - }); + element.addEventListener('touchend', hidePopover); + element.addEventListener('click', hidePopover); return element; }()); @@ -75,6 +78,9 @@ return; } + if(popover.classList.contains('visible')) + return hidePopover(); + popover.style.display = 'block'; popover.offsetHeight; popover.classList.add('visible'); @@ -83,5 +89,6 @@ }; window.addEventListener('touchend', showHidePopover); + window.addEventListener('click', showHidePopover); }()); From 69795454a5f2f19223eebb51448711cebb80cf7f Mon Sep 17 00:00:00 2001 From: Mike MacMillan Date: Thu, 4 Dec 2014 10:48:57 -0800 Subject: [PATCH 2/5] Added rapid-click protection that could cause the popover to get stuck without the ability to close --- js/popovers.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/js/popovers.js b/js/popovers.js index 02f8a7c1b..04eff622c 100644 --- a/js/popovers.js +++ b/js/popovers.js @@ -9,7 +9,7 @@ !(function () { 'use strict'; - var popover; + var popover, listener; var findPopovers = function (target) { var i; @@ -25,14 +25,14 @@ }; var hidePopover = function(e) { - popover.addEventListener('webkitTransitionEnd', onPopoverHidden); + popover.addEventListener('webkitTransitionEnd', (listener = onPopoverHidden)); popover.classList.remove('visible'); popover.parentNode.removeChild(backdrop); } var onPopoverHidden = function () { popover.style.display = 'none'; - popover.removeEventListener('webkitTransitionEnd', onPopoverHidden); + listener = popover.removeEventListener('webkitTransitionEnd', onPopoverHidden); }; var backdrop = (function () { @@ -74,7 +74,7 @@ var showHidePopover = function (e) { var popover = getPopover(e); - if (!popover) { + if (!popover || !!listener) { return; } From f3c11cb0459f492c3067a3757a76bdd31074fb35 Mon Sep 17 00:00:00 2001 From: Mike MacMillan Date: Thu, 4 Dec 2014 11:01:30 -0800 Subject: [PATCH 3/5] Minor changes to satisfy jshint --- js/popovers.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/popovers.js b/js/popovers.js index 04eff622c..d0d941490 100644 --- a/js/popovers.js +++ b/js/popovers.js @@ -24,11 +24,11 @@ } }; - var hidePopover = function(e) { + var hidePopover = function() { popover.addEventListener('webkitTransitionEnd', (listener = onPopoverHidden)); popover.classList.remove('visible'); popover.parentNode.removeChild(backdrop); - } + }; var onPopoverHidden = function () { popover.style.display = 'none'; From a7dd7f08642de0061f63cd947d88226a5b602f3d Mon Sep 17 00:00:00 2001 From: Mike MacMillan Date: Thu, 4 Dec 2014 11:11:08 -0800 Subject: [PATCH 4/5] Minor changes to satisfy jscs --- js/popovers.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/js/popovers.js b/js/popovers.js index d0d941490..0d71644cb 100644 --- a/js/popovers.js +++ b/js/popovers.js @@ -9,7 +9,8 @@ !(function () { 'use strict'; - var popover, listener; + var popover; + var listener; var findPopovers = function (target) { var i; @@ -24,10 +25,10 @@ } }; - var hidePopover = function() { - popover.addEventListener('webkitTransitionEnd', (listener = onPopoverHidden)); - popover.classList.remove('visible'); - popover.parentNode.removeChild(backdrop); + var hidePopover = function () { + popover.addEventListener('webkitTransitionEnd', (listener = onPopoverHidden)); + popover.classList.remove('visible'); + popover.parentNode.removeChild(backdrop); }; var onPopoverHidden = function () { @@ -78,8 +79,9 @@ return; } - if(popover.classList.contains('visible')) - return hidePopover(); + if (popover.classList.contains('visible')) { + return hidePopover(); + } popover.style.display = 'block'; popover.offsetHeight; From c5fd255856f3808f90d3b458e1f3269fbaaced9b Mon Sep 17 00:00:00 2001 From: Mike MacMillan Date: Thu, 4 Dec 2014 23:45:41 -0800 Subject: [PATCH 5/5] Added a global accessor for the popover implementation, POPOVER, allowing programmatic showing/hiding of the popover. --- js/popovers.js | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/js/popovers.js b/js/popovers.js index 0d71644cb..852149b8c 100644 --- a/js/popovers.js +++ b/js/popovers.js @@ -40,22 +40,21 @@ var element = document.createElement('div'); element.classList.add('backdrop'); - element.addEventListener('touchend', hidePopover); element.addEventListener('click', hidePopover); return element; }()); - var getPopover = function (e) { - var anchor = findPopovers(e.target); + var getPopover = function (e, id) { + var anchor = e && findPopovers(e.target); - if (!anchor || !anchor.hash || (anchor.hash.indexOf('/') > 0)) { + if ((!anchor || !anchor.hash || (anchor.hash.indexOf('/') > 0)) && !id) { return; } try { - popover = document.querySelector(anchor.hash); + popover = document.querySelector(id || anchor.hash); } catch (error) { popover = null; @@ -72,8 +71,8 @@ return popover; }; - var showHidePopover = function (e) { - var popover = getPopover(e); + var showHidePopover = function (e, id) { + var popover = getPopover(e, id); if (!popover || !!listener) { return; @@ -92,5 +91,12 @@ window.addEventListener('touchend', showHidePopover); window.addEventListener('click', showHidePopover); - + window.POPOVER = { + show: function (id) { + showHidePopover(null, id); + }, + hide: function () { + popover && hidePopover(); + } + }; }());