From 214d66be76e56aa1e0b1305f0077967eba14a719 Mon Sep 17 00:00:00 2001 From: jlukic Date: Sun, 6 Oct 2013 16:36:50 -0400 Subject: [PATCH] Fixes #172 popup side being inverted, also fixes bug with offstage position not being calculated correctly on multiple refreshes of a popup, showing an offstage popup. Also removes inline styles after popup hide Former-commit-id: f54eb1a9ce94329a5bed3bcd305908570306b1b0 Former-commit-id: 7f6a637b2fc8e9f2a6f3898f3f462a2d88a63f1b --- src/modules/popup.js | 47 ++++++++++++++++++++++++------------------ src/modules/popup.less | 38 +++++++++++++++++++++++++--------- 2 files changed, 55 insertions(+), 30 deletions(-) diff --git a/src/modules/popup.js b/src/modules/popup.js index 911adaf60..a033636c4 100755 --- a/src/modules/popup.js +++ b/src/modules/popup.js @@ -14,6 +14,7 @@ $.fn.popup = function(parameters) { var $allModules = $(this), + $document = $(document), settings = ( $.isPlainObject(parameters) ) ? $.extend(true, {}, $.fn.popup.settings, parameters) @@ -204,6 +205,7 @@ $.fn.popup = function(parameters) { left : (popup.position.left < boundary.left) }; } + module.verbose('Checking if outside viewable area', popup.position); // return only boundaries that have been surpassed $.each(offstage, function(direction, isOffstage) { if(isOffstage) { @@ -259,7 +261,7 @@ $.fn.popup = function(parameters) { module.show(); } else { - module.hide(); + // module.hide(); } }, @@ -291,9 +293,10 @@ $.fn.popup = function(parameters) { switch(position) { case 'top left': positioning = { - top : 'auto', bottom : parentHeight - offset.top + settings.distanceAway, - left : offset.left + arrowOffset + right : parentWidth - offset.left - width - arrowOffset, + top : 'auto', + left : 'auto' }; break; case 'top center': @@ -306,10 +309,9 @@ $.fn.popup = function(parameters) { break; case 'top right': positioning = { - bottom : parentHeight - offset.top + settings.distanceAway, - right : parentWidth - offset.left - width - arrowOffset, top : 'auto', - left : 'auto' + bottom : parentHeight - offset.top + settings.distanceAway, + left : offset.left + arrowOffset }; break; case 'left center': @@ -331,9 +333,9 @@ $.fn.popup = function(parameters) { case 'bottom left': positioning = { top : offset.top + height + settings.distanceAway, - left : offset.left + arrowOffset, - bottom : 'auto', - right : 'auto' + right : parentWidth - offset.left - width - arrowOffset, + left : 'auto', + bottom : 'auto' }; break; case 'bottom center': @@ -347,9 +349,9 @@ $.fn.popup = function(parameters) { case 'bottom right': positioning = { top : offset.top + height + settings.distanceAway, - right : parentWidth - offset.left - width - arrowOffset, - left : 'auto', - bottom : 'auto' + left : offset.left + arrowOffset, + bottom : 'auto', + right : 'auto' }; break; } @@ -359,11 +361,8 @@ $.fn.popup = function(parameters) { }); // tentatively place on stage $popup - .removeAttr('style') - .removeClass('top right bottom left center') + .attr('class', position + ' ' + className.popup + ' ' + className.loading) .css(positioning) - .addClass(position) - .addClass(className.loading) ; // check if is offstage offstagePosition = module.get.offstagePosition(); @@ -414,7 +413,7 @@ $.fn.popup = function(parameters) { } if(settings.on == 'click' && settings.clicktoClose) { module.debug('Binding popup close event'); - $(document) + $document .on('click.' + namespace, module.gracefully.hide) ; } @@ -436,18 +435,18 @@ $.fn.popup = function(parameters) { module.debug('Hiding pop-up'); if(settings.transition && $.fn.transition !== undefined) { $popup - .transition(settings.transition + ' out', settings.duration) + .transition(settings.transition + ' out', settings.duration, module.reset) ; } else { $popup .stop() - .fadeOut(settings.duration, settings.easing) + .fadeOut(settings.duration, settings.easing, module.reset) ; } } if(settings.on == 'click' && settings.clicktoClose) { - $(document) + $document .off('click.' + namespace) ; } @@ -457,6 +456,14 @@ $.fn.popup = function(parameters) { } }, + reset: function() { + module.verbose('Resetting inline styles'); + $popup + .attr('style', '') + .removeAttr('style') + ; + }, + gracefully: { hide: function(event) { // don't close on clicks inside popup diff --git a/src/modules/popup.less b/src/modules/popup.less index e546ed2cf..47c302165 100755 --- a/src/modules/popup.less +++ b/src/modules/popup.less @@ -82,6 +82,7 @@ /*-------------- Spacing ---------------*/ + .ui.popup { margin: 0em; } @@ -116,26 +117,35 @@ -moz-box-shadow: -1px -1px 1px #dcddde; box-shadow: -1px -1px 1px #dcddde; } + +.ui.bottom.left.popup { + margin-right: -0.8em; +} .ui.bottom.left.popup:before { top: -0.4em; - left: 1em; - right: auto; + right: 1em; bottom: auto; + left: auto; margin-left: 0em; -webkit-box-shadow: -1px -1px 1px #dcddde; -moz-box-shadow: -1px -1px 1px #dcddde; box-shadow: -1px -1px 1px #dcddde; } + +.ui.bottom.right.popup { + margin-left: -0.8em; +} .ui.bottom.right.popup:before { top: -0.4em; - right: 1em; + left: 1em; + right: auto; bottom: auto; - left: auto; margin-left: 0em; -webkit-box-shadow: -1px -1px 1px #dcddde; -moz-box-shadow: -1px -1px 1px #dcddde; box-shadow: -1px -1px 1px #dcddde; } + /*--- Above ---*/ .ui.top.center.popup:before { top: auto; @@ -144,21 +154,28 @@ left: 50%; margin-left: -0.4em; } +.ui.top.left.popup { + margin-right: -0.8em; +} .ui.top.left.popup:before { bottom: -0.4em; - left: 1em; + right: 1em; top: auto; - right: auto; + left: auto; margin-left: 0em; } +.ui.top.right.popup { + margin-left: -0.8em; +} .ui.top.right.popup:before { bottom: -0.4em; - right: 1em; + left: 1em; top: auto; - left: auto; + right: auto; margin-left: 0em; } -/*--- Left ---*/ + +/*--- Left Center ---*/ .ui.left.center.popup:before { top: 50%; right: -0.35em; @@ -169,7 +186,8 @@ -webkit-box-shadow: 1px -1px 1px #dcddde; box-shadow: 1px -1px 1px #dcddde; } -/*--- Right ---*/ + +/*--- Right Center ---*/ .ui.right.center.popup:before { top: 50%; left: -0.35em;