diff --git a/src/definitions/modules/popup.js b/src/definitions/modules/popup.js index 945db8c53..a8de7c7f3 100644 --- a/src/definitions/modules/popup.js +++ b/src/definitions/modules/popup.js @@ -447,7 +447,8 @@ $.fn.popup = function(parameters) { targetPosition = (settings.inline || settings.popup) ? $target.position() : $target.offset(), - calculations = {} + calculations = {}, + screen ; calculations = { // element which is launching popup @@ -471,18 +472,15 @@ $.fn.popup = function(parameters) { }, // screen boundaries screen : { - top : $window.scrollTop(), - left : $window.scrollLeft(), - width : $body.width(), - height : $body.height() - }, - boundary: { - top : screen.top, - bottom : screen.top + screen.height, - left : screen.left, - right : screen.left + screen.width - }, + scroll: { + top : $window.scrollTop(), + left : $window.scrollLeft() + }, + width : $window.width(), + height : $window.height() + } }; + // add in margins if inline calculations.target.margin.top = (settings.inline) ? parseInt( window.getComputedStyle(targetElement).getPropertyValue('margin-top'), 10) @@ -494,6 +492,14 @@ $.fn.popup = function(parameters) { : parseInt( window.getComputedStyle(targetElement).getPropertyValue('margin-left') , 10) : 0 ; + // calculate screen boundaries + screen = calculations.screen; + calculations.boundary = { + top : screen.scroll.top, + bottom : screen.scroll.top + screen.height, + left : screen.scroll.left, + right : screen.scroll.left + screen.width + }; return calculations; }, id: function() { @@ -825,14 +831,15 @@ $.fn.popup = function(parameters) { module.debug('Position is on stage', position); module.remove.attempts(); - module.set.fluidWidth(); + module.set.fluidWidth(calculations); module.remove.loading(); return true; }, - fluidWidth: function() { + fluidWidth: function(calculations) { + calculations = calculations || module.get.calculations(); if( settings.setFluidWidth && $popup.hasClass(className.fluid) ) { - $popup.css('width', $offsetParent.width()); + $popup.css('width', calculations.parent.width); } }, @@ -1171,14 +1178,19 @@ $.fn.popup.settings = { // callback only when element added to dom onCreate : function(){}, + // callback before element removed from dom onRemove : function(){}, + // callback before show animation onShow : function(){}, + // callback after show animation onVisible : function(){}, + // callback before hide animation onHide : function(){}, + // callback after hide animation onHidden : function(){}, @@ -1190,36 +1202,49 @@ $.fn.popup.settings = { // default position relative to element position : 'top left', + // name of variation to use variation : '', + // whether popup should be moved to context movePopup : true, + // element which popup should be relative to target : false, + // jq selector or element that should be used as popup popup : false, + // popup should remain inline next to activator inline : false, + // popup should be removed from page on hide preserve : false, + // popup should not close when being hovered on hoverable : false, // explicitly set content content : false, + // explicitly set html html : false, + // explicitly set title title : false, // whether automatically close on clickaway when on click closable : true, + // automatically hide on scroll hideOnScroll : 'auto', + // hide other popups on show exclusive : false, + // context to attach popups context : 'body', + // position to prefer when calculating new position prefer : 'opposite', @@ -1235,7 +1260,6 @@ $.fn.popup.settings = { // whether fluid variation should assign width explicitly setFluidWidth : true, - // transition settings duration : 200, transition : 'scale', @@ -1246,7 +1270,7 @@ $.fn.popup.settings = { // offset on aligning axis from calculated position offset : 0, - // maximum times to look for a position before failing + // maximum times to look for a position before failing (9 positions total) maxSearchDepth : 20, error: { @@ -1325,12 +1349,5 @@ $.fn.popup.settings = { }; -// Adds easing -$.extend( $.easing, { - easeOutQuad: function (x, t, b, c, d) { - return -c *(t/=d)*(t-2) + b; - } -}); - })( jQuery, window , document ); diff --git a/src/definitions/modules/popup.less b/src/definitions/modules/popup.less index 6b077b8a2..65b560aea 100755 --- a/src/definitions/modules/popup.less +++ b/src/definitions/modules/popup.less @@ -82,17 +82,43 @@ .ui.popup { margin: 0em; } -.ui.popup.bottom { - margin: @popupDistanceAway 0em 0em; -} -.ui.popup.top { + +/* Extending from Top */ +.ui.top.popup { margin: 0em 0em @popupDistanceAway; } -.ui.popup.left.center { +.ui.top.left.popup { + transform-origin: bottom left; +} +.ui.top.center.popup { + transform-origin: bottom center; +} +.ui.top.right.popup { + transform-origin: bottom right; +} + +/* Extending from Vertical Center */ +.ui.left.center.popup { margin: 0em @popupDistanceAway 0em 0em; + transform-origin: right 50%; } -.ui.popup.right.center { +.ui.right.center.popup { margin: 0em 0em 0em @popupDistanceAway; + transform-origin: left 50%; +} + +/* Extending from Bottom */ +.ui.bottom.popup { + margin: @popupDistanceAway 0em 0em; +} +.ui.bottom.left.popup { + transform-origin: top left; +} +.ui.bottom.center.popup { + transform-origin: top center; +} +.ui.bottom.right.popup { + transform-origin: top right; } /*--------------