app/assets/javascripts/semantic-ui/modal.js in semantic-ui-sass-2.3.1.2 vs app/assets/javascripts/semantic-ui/modal.js in semantic-ui-sass-2.4.0.0
- old
+ new
@@ -108,12 +108,11 @@
var
defaultSettings = {
debug : settings.debug,
variation : settings.centered
? false
- : 'top aligned'
- ,
+ : 'top aligned',
dimmerName : 'modals'
},
dimmerSettings = $.extend(true, defaultSettings, settings.dimmerSettings)
;
if($.fn.dimmer === undefined) {
@@ -130,11 +129,11 @@
module.set.undetached();
}
$dimmer = $dimmable.dimmer('get dimmer');
},
id: function() {
- id = (Math.random().toString(16) + '000000000').substr(2,8);
+ id = (Math.random().toString(16) + '000000000').substr(2, 8);
elementEventNamespace = '.' + id;
module.verbose('Creating unique id for element', id);
}
},
@@ -165,10 +164,13 @@
},
refresh: function() {
module.remove.scrolling();
module.cacheSizes();
+ if(!module.can.useFlex()) {
+ module.set.modalOffset();
+ }
module.set.screenHeight();
module.set.type();
},
refreshModals: function() {
@@ -205,16 +207,26 @@
.on('click' + eventNamespace, selector.deny, module.event.deny)
;
$window
.on('resize' + elementEventNamespace, module.event.resize)
;
+ },
+ scrollLock: function() {
+ // touch events default to passive, due to changes in chrome to optimize mobile perf
+ $dimmable.get(0).addEventListener('touchmove', module.event.preventScroll, { passive: false });
}
},
+ unbind: {
+ scrollLock: function() {
+ $dimmable.get(0).removeEventListener('touchmove', module.event.preventScroll, { passive: false });
+ }
+ },
+
get: {
id: function() {
- return (Math.random().toString(16) + '000000000').substr(2,8);
+ return (Math.random().toString(16) + '000000000').substr(2, 8);
}
},
event: {
approve: function() {
@@ -225,10 +237,13 @@
ignoreRepeatedEvents = true;
module.hide(function() {
ignoreRepeatedEvents = false;
});
},
+ preventScroll: function(event) {
+ event.preventDefault();
+ },
deny: function() {
if(ignoreRepeatedEvents || settings.onDeny.call(element, $(this)) === false) {
module.verbose('Deny callback returned false cancelling hide');
return;
}
@@ -302,10 +317,12 @@
? callback
: function(){}
;
module.refreshModals();
module.set.dimmerSettings();
+ module.set.dimmerStyles();
+
module.showModal(callback);
},
hide: function(callback) {
callback = $.isFunction(callback)
@@ -320,13 +337,20 @@
callback = $.isFunction(callback)
? callback
: function(){}
;
if( module.is.animating() || !module.is.active() ) {
-
module.showDimmer();
module.cacheSizes();
+ if(module.can.useFlex()) {
+ module.remove.legacy();
+ }
+ else {
+ module.set.legacy();
+ module.set.modalOffset();
+ module.debug('Using non-flex legacy modal positioning.');
+ }
module.set.screenHeight();
module.set.type();
module.set.clickaway();
if( !settings.allowMultiple && module.others.active() ) {
@@ -400,10 +424,11 @@
module.remove.keyboardShortcuts();
}
},
onComplete : function() {
settings.onHidden.call(element);
+ module.remove.dimmerStyles();
module.restore.focus();
callback();
}
})
;
@@ -424,10 +449,11 @@
}
},
hideDimmer: function() {
if( $dimmable.dimmer('is animating') || ($dimmable.dimmer('is active')) ) {
+ module.unbind.scrollLock();
$dimmable.dimmer('hide', function() {
module.remove.clickaway();
module.remove.screenHeight();
});
}
@@ -511,15 +537,22 @@
remove: {
active: function() {
$module.removeClass(className.active);
},
+ legacy: function() {
+ $module.removeClass(className.legacy);
+ },
clickaway: function() {
$dimmer
.off('click' + elementEventNamespace)
;
},
+ dimmerStyles: function() {
+ $dimmer.removeClass(className.inverted);
+ $dimmable.removeClass(className.blurring);
+ },
bodyStyle: function() {
if($body.attr('style') === '') {
module.verbose('Removing style attribute');
$body.removeAttr('style');
}
@@ -544,15 +577,17 @@
cacheSizes: function() {
$module.addClass(className.loading);
var
scrollHeight = $module.prop('scrollHeight'),
+ modalWidth = $module.outerWidth(),
modalHeight = $module.outerHeight()
;
if(module.cache === undefined || modalHeight !== 0) {
module.cache = {
pageHeight : $(document).outerHeight(),
+ width : modalWidth,
height : modalHeight + settings.offset,
scrollHeight : scrollHeight + settings.offset,
contextHeight : (settings.context == 'body')
? $(window).height()
: $dimmable.height(),
@@ -562,10 +597,16 @@
$module.removeClass(className.loading);
module.debug('Caching modal and container sizes', module.cache);
},
can: {
+ useFlex: function() {
+ return (settings.useFlex == 'auto')
+ ? settings.detachable && !module.is.ie()
+ : settings.useFlex
+ ;
+ },
fit: function() {
var
contextHeight = module.cache.contextHeight,
verticalCenter = module.cache.contextHeight / 2,
topOffset = module.cache.topOffset,
@@ -583,10 +624,17 @@
is: {
active: function() {
return $module.hasClass(className.active);
},
+ ie: function() {
+ var
+ isIE11 = (!(window.ActiveXObject) && 'ActiveXObject' in window),
+ isIE = ('ActiveXObject' in window)
+ ;
+ return (isIE11 || isIE);
+ },
animating: function() {
return $module.transition('is supported')
? $module.transition('is animating')
: $module.is(':visible')
;
@@ -594,11 +642,11 @@
scrolling: function() {
return $dimmable.hasClass(className.scrolling);
},
modernBrowser: function() {
// appName for IE11 reports 'Netscape' can no longer use
- return !(window.ActiveXObject || "ActiveXObject" in window);
+ return !(window.ActiveXObject || 'ActiveXObject' in window);
}
},
set: {
autofocus: function() {
@@ -626,14 +674,14 @@
var
defaultSettings = {
debug : settings.debug,
dimmerName : 'modals',
closable : 'auto',
+ useFlex : module.can.useFlex(),
variation : settings.centered
? false
- : 'top aligned'
- ,
+ : 'top aligned',
duration : {
show : settings.duration,
hide : settings.duration
}
},
@@ -642,10 +690,15 @@
if(settings.inverted) {
dimmerSettings.variation = (dimmerSettings.variation !== undefined)
? dimmerSettings.variation + ' inverted'
: 'inverted'
;
+ }
+ $context.dimmer('setting', dimmerSettings);
+ },
+ dimmerStyles: function() {
+ if(settings.inverted) {
$dimmer.addClass(className.inverted);
}
else {
$dimmer.removeClass(className.inverted);
}
@@ -653,12 +706,26 @@
$dimmable.addClass(className.blurring);
}
else {
$dimmable.removeClass(className.blurring);
}
- $context.dimmer('setting', dimmerSettings);
},
+ modalOffset: function() {
+ var
+ width = module.cache.width,
+ height = module.cache.height
+ ;
+ $module
+ .css({
+ marginTop: (settings.centered && module.can.fit())
+ ? -(height / 2)
+ : 0,
+ marginLeft: -(width / 2)
+ })
+ ;
+ module.verbose('Setting modal offset for legacy mode');
+ },
screenHeight: function() {
if( module.can.fit() ) {
$body.css('height', '');
}
else {
@@ -672,16 +739,21 @@
$module.addClass(className.active);
},
scrolling: function() {
$dimmable.addClass(className.scrolling);
$module.addClass(className.scrolling);
+ module.unbind.scrollLock();
},
+ legacy: function() {
+ $module.addClass(className.legacy);
+ },
type: function() {
if(module.can.fit()) {
module.verbose('Modal fits on screen');
if(!module.others.active() && !module.others.animating()) {
module.remove.scrolling();
+ module.bind.scrollLock();
}
}
else {
module.verbose('Modal cannot fit on screen setting to scrolling');
module.set.scrolling();
@@ -878,10 +950,13 @@
$.fn.modal.settings = {
name : 'Modal',
namespace : 'modal',
+ useFlex : 'auto',
+ offset : 0,
+
silent : false,
debug : false,
verbose : false,
performance : true,
@@ -907,11 +982,10 @@
context : 'body',
queue : false,
duration : 500,
- offset : 0,
transition : 'scale',
// padding with edge of page
padding : 50,
@@ -947,9 +1021,10 @@
className : {
active : 'active',
animating : 'animating',
blurring : 'blurring',
inverted : 'inverted',
+ legacy : 'legacy',
loading : 'loading',
scrolling : 'scrolling',
undetached : 'undetached'
}
};