Browse Source

Finish refactor of modal to support legacy positioning for IE11

legacy-modals
Jack 6 years ago
parent
commit
bbad43026d
4 changed files with 36 additions and 18 deletions
  1. 15
      src/definitions/modules/dimmer.js
  2. 6
      src/definitions/modules/dimmer.less
  3. 26
      src/definitions/modules/modal.js
  4. 7
      src/definitions/modules/modal.less

15
src/definitions/modules/dimmer.js

@ -92,10 +92,6 @@ $.fn.dimmer = function(parameters) {
module.bind.events();
module.set.dimmable();
if(!settings.useFlex) {
module.debug('Absolutely positioned flex not supported. Using legacy positioning.');
module.set.legacy();
}
module.instantiate();
},
@ -247,6 +243,14 @@ $.fn.dimmer = function(parameters) {
: function(){}
;
if(settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) {
if(settings.useFlex) {
module.debug('Using flex dimmer');
module.remove.legacy();
}
else {
module.debug('Using legacy non-flex dimmer');
module.set.legacy();
}
if(settings.opacity !== 'auto') {
module.set.opacity();
}
@ -455,6 +459,9 @@ $.fn.dimmer = function(parameters) {
.removeClass(className.active)
;
},
legacy: function() {
$dimmer.removeClass(className.legacy);
},
dimmed: function() {
$dimmable.removeClass(className.dimmed);
},

6
src/definitions/modules/dimmer.less

@ -125,12 +125,6 @@
display: block;
}
/* Resort to normal positioning */
.ui.legacy.page.dimmer > .ui.modal {
top: 50%;
left: 50%;
}
/*--------------
Alignment
---------------*/

26
src/definitions/modules/modal.js

@ -107,7 +107,6 @@ $.fn.modal = function(parameters) {
dimmer: function() {
var
defaultSettings = {
useFlex : module.can.useFlex(),
debug : settings.debug,
variation : settings.centered
? false
@ -133,7 +132,7 @@ $.fn.modal = function(parameters) {
$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);
}
@ -216,7 +215,7 @@ $.fn.modal = function(parameters) {
get: {
id: function() {
return (Math.random().toString(16) + '000000000').substr(2,8);
return (Math.random().toString(16) + '000000000').substr(2, 8);
}
},
@ -326,11 +325,15 @@ $.fn.modal = function(parameters) {
: function(){}
;
if( module.is.animating() || !module.is.active() ) {
module.showDimmer();
module.cacheSizes();
if(!module.can.useFlex()) {
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();
@ -520,6 +523,9 @@ $.fn.modal = function(parameters) {
active: function() {
$module.removeClass(className.active);
},
legacy: function() {
$module.removeClass(className.legacy);
},
clickaway: function() {
$dimmer
.off('click' + elementEventNamespace)
@ -618,7 +624,7 @@ $.fn.modal = function(parameters) {
},
modernBrowser: function() {
// appName for IE11 reports 'Netscape' can no longer use
return !(window.ActiveXObject || "ActiveXObject" in window);
return !(window.ActiveXObject || 'ActiveXObject' in window);
}
},
@ -650,10 +656,10 @@ $.fn.modal = function(parameters) {
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
@ -710,6 +716,9 @@ $.fn.modal = function(parameters) {
$dimmable.addClass(className.scrolling);
$module.addClass(className.scrolling);
},
legacy: function() {
$module.addClass(className.legacy);
},
type: function() {
if(module.can.fit()) {
module.verbose('Modal fits on screen');
@ -986,6 +995,7 @@ $.fn.modal.settings = {
animating : 'animating',
blurring : 'blurring',
inverted : 'inverted',
legacy : 'legacy',
loading : 'loading',
scrolling : 'scrolling',
undetached : 'undetached'

7
src/definitions/modules/modal.less

@ -310,6 +310,13 @@
color: @basicInvertedModalHeaderColor;
}
/* Resort to margin positioning if legacy */
.ui.legacy.modal,
.ui.legacy.page.dimmer > .ui.modal {
top: 50%;
left: 50%;
}
/* Tablet and Mobile */
@media only screen and (max-width : @largestTabletScreen) {
.ui.basic.modal > .close {

Loading…
Cancel
Save