Finish adding useFlex setting for dimmer/modal

RELEASE-NOTES.md

@@ -1,5 +1,16 @@
 ## RELEASE NOTES
 
+### Version 2.3.4 - Aug xx, 2018
+
+**Enhancements**
+
+- **Modal/Dimmer** - Modals and dimmers now include a new setting `useFlex` which defaults to `auto`. Modals and dimmers will automatically revert to using non-flex layouts when there may be layout issues with using flexbox.
+
+For example when `attachable: false` is used with a modal, or if IE11/Edge is used (Absolutely positioned elements inside flex containers in IE behave differently)
+
+
+
+
 ### Version 2.3.3 - June 18, 2018
 
 **Bug Fixes**

src/definitions/modules/dimmer.js

@@ -252,7 +252,7 @@ $.fn.dimmer = function(parameters) {
               }
               $dimmer
                 .transition({
-                  displayType : settings.useFlex
+                  displayType : module.can.useFlex()
                     ? 'flex'
                     : 'block',
                   animation   : settings.transition + ' in',
@@ -299,7 +299,9 @@ $.fn.dimmer = function(parameters) {
               module.verbose('Hiding dimmer with css');
               $dimmer
                 .transition({
-                  displayType : 'flex',
+                  displayType : module.can.useFlex()
+                    ? 'flex'
+                    : 'block',
                   animation   : settings.transition + ' out',
                   queue       : false,
                   duration    : module.get.duration(),
@@ -361,6 +363,13 @@ $.fn.dimmer = function(parameters) {
           active: function() {
             return $dimmer.hasClass(className.active);
           },
+          ie: function() {
+            var
+              isIE11 = (!(window.ActiveXObject) && 'ActiveXObject' in window),
+              isIE   = ('ActiveXObject' in window)
+            ;
+            return (isIE11 || isIE);
+          },
           animating: function() {
             return ( $dimmer.is(':animated') || $dimmer.hasClass(className.animating) );
           },
@@ -398,8 +407,7 @@ $.fn.dimmer = function(parameters) {
 
         can: {
           useFlex: function() {
-            // test for IE11/edge
-            return true;
+            return !module.is.ie();
           },
           show: function() {
             return !$dimmer.hasClass(className.disabled);

src/definitions/modules/dimmer.less

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

src/definitions/modules/modal.js

@@ -168,6 +168,9 @@ $.fn.modal = function(parameters) {
         refresh: function() {
           module.remove.scrolling();
           module.cacheSizes();
+          if(!module.can.useFlex()) {
+            module.set.modalOffset();
+          }
           module.set.screenHeight();
           module.set.type();
         },
@@ -326,6 +329,9 @@ $.fn.modal = function(parameters) {
 
             module.showDimmer();
             module.cacheSizes();
+            if(!module.can.useFlex()) {
+              module.set.modalOffset();
+            }
             module.set.screenHeight();
             module.set.type();
             module.set.clickaway();
@@ -550,11 +556,13 @@ $.fn.modal = function(parameters) {
           $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')
@@ -569,7 +577,7 @@ $.fn.modal = function(parameters) {
 
         can: {
           useFlex: function() {
-            return $dimmer.dimmer('can use flex');
+            return settings.detachable && $dimmer.dimmer('can use flex');
           },
           fit: function() {
             var
@@ -633,6 +641,7 @@ $.fn.modal = function(parameters) {
             var
               defaultSettings = {
                 debug      : settings.debug,
+                useFlex    : module.can.useFlex(),
                 dimmerName : 'modals',
                 closable   : 'auto',
                 variation  : settings.centered
@@ -664,6 +673,18 @@ $.fn.modal = function(parameters) {
             }
             $context.dimmer('setting', dimmerSettings);
           },
+          modalOffset: function() {
+            var
+              width = module.cache.width,
+              height = module.cache.height
+            ;
+            $module
+              .css({
+                marginTop: -(height / 2),
+                marginLeft: -(width / 2)
+              })
+            ;
+          },
           screenHeight: function() {
             if( module.can.fit() ) {
               $body.css('height', '');
@@ -888,6 +909,7 @@ $.fn.modal.settings = {
   namespace      : 'modal',
 
   useFlex        : 'auto',
+  offset         : 0,
 
   silent         : false,
   debug          : false,
@@ -918,7 +940,6 @@ $.fn.modal.settings = {
 
   queue      : false,
   duration   : 500,
-  offset     : 0,
   transition : 'scale',
 
   // padding with edge of page