From ddba1eabbfdb0bf465898797ce6defb7f427974f Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Thu, 10 Mar 2016 18:25:10 -0500 Subject: [PATCH] Adds autoRemove option for popup, removing it immediately if its triggering element is destroyed --- RELEASE-NOTES.md | 1 + src/definitions/modules/popup.js | 23 ++++++++++++++++++++++- 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index 167ee4f71..4d5ebf031 100644 --- a/RELEASE-NOTES.md +++ b/RELEASE-NOTES.md @@ -3,6 +3,7 @@ ### Version 2.2.0 - Feb 15, 2016 **Major Enhancements** +- **Popup** - Added new settings `autoRemove`, which is enabled by default. This will add special event listeners to auto hide a popup if the triggering element is removed from the DOM. This is useful in controlled DOM environments like Meteor/Ember/React to ensure a popup auto-hides itself when a page navigation or other DOM change occurs. - **Dropdown** - Added new setting for search selection `hideAdditions` this will remove showing user additions inside the menu, making for a more intuitive adding process. Dropdowns now have a new state `empty` which will format an active dropdown with empty results. #3791 - **Icons** - 50+ new icons+ are included. Icons now use the latest Font Awesome `4.5.0` Icons. Thanks @BreadMaker for the PR and @davegandy for the font! - **Progress** - Progress now uses a polling interval for updates. Rapidly updating the progress bar over a period quicker than the animation duration (for example with xhr `onprogress` events say every 50ms) will now appear smooth as butter. diff --git a/src/definitions/modules/popup.js b/src/definitions/modules/popup.js index bbd75e5ed..a77833efd 100644 --- a/src/definitions/modules/popup.js +++ b/src/definitions/modules/popup.js @@ -76,7 +76,7 @@ $.fn.popup = function(parameters) { module.debug('Initializing', $module); module.createID(); module.bind.events(); - if( !module.exists() && settings.preserve) { + if(!module.exists() && settings.preserve) { module.create(); } module.instantiate(); @@ -380,6 +380,9 @@ $.fn.popup = function(parameters) { callback = $.isFunction(callback) ? callback : function(){}; if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { module.set.visible(); + if(settings.autoRemove) { + module.bind.autoRemoval(); + } $popup .transition({ animation : settings.transition + ' in', @@ -418,6 +421,9 @@ $.fn.popup = function(parameters) { module.reset(); callback.call($popup, element); settings.onHidden.call($popup, element); + if(settings.autoRemove) { + module.unbind.autoRemoval(); + } } }) ; @@ -933,6 +939,15 @@ $.fn.popup = function(parameters) { ; } }, + autoRemoval: function() { + $module + .one('remove' + eventNamespace, function() { + module.hide(function() { + module.removePopup(); + }); + }) + ; + }, close: function() { if(settings.hideOnScroll === true || (settings.hideOnScroll == 'auto' && settings.on != 'click')) { $document @@ -985,6 +1000,9 @@ $.fn.popup = function(parameters) { .off('click' + elementNamespace) ; } + }, + autoRemoval: function() { + $module.off('remove' + elementNamespace); } }, @@ -1262,6 +1280,9 @@ $.fn.popup.settings = { // callback after hide animation onHidden : function(){}, + // hides popup when triggering element is destroyed + autoRemove : true, + // when to show popup on : 'hover',