lukechilds
/
Semantic-UI-Docs
mirror of https://github.com/lukechilds/Semantic-UI-Docs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

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
beta
jlukic 11 years ago
parent
f1c9203534
commit
214d66be76
2 changed files with 55 additions and 30 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 47
      src/modules/popup.js
  2. 38
      src/modules/popup.less

47
src/modules/popup.js
View File

@ -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

38
src/modules/popup.less
View File

@ -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;

Write Preview
Loading…
Cancel
Save