From 9707e40448212aa24ed74a58b838c14dceca4120 Mon Sep 17 00:00:00 2001
From: Jack Lukic <jacklukic@gmail.com>
Date: Sun, 19 Aug 2018 22:07:33 -0400
Subject: [PATCH 1/5] Working on legacy setting for modals

---
 src/definitions/modules/dimmer.js   | 19 ++++++++++++++++++-
 src/definitions/modules/dimmer.less | 12 ++++++++++++
 src/definitions/modules/modal.js    |  9 +++++++++
 src/definitions/modules/modal.less  |  1 +
 4 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/definitions/modules/dimmer.js b/src/definitions/modules/dimmer.js
index bdfc39abb..092cac287 100755
--- a/src/definitions/modules/dimmer.js
+++ b/src/definitions/modules/dimmer.js
@@ -92,6 +92,10 @@ $.fn.dimmer = function(parameters) {
 
           module.bind.events();
           module.set.dimmable();
+          if(!module.can.useFlex()) {
+            module.debug('Absolutely positioned flex not supported. Using legacy positioning.');
+            module.set.legacy();
+          }
           module.instantiate();
         },
 
@@ -248,7 +252,9 @@ $.fn.dimmer = function(parameters) {
               }
               $dimmer
                 .transition({
-                  displayType : 'flex',
+                  displayType : settings.useFlex
+                    ? 'flex'
+                    : 'block',
                   animation   : settings.transition + ' in',
                   queue       : false,
                   duration    : module.get.duration(),
@@ -391,6 +397,10 @@ $.fn.dimmer = function(parameters) {
         },
 
         can: {
+          useFlex: function() {
+            // test for IE11/edge
+            return true;
+          },
           show: function() {
             return !$dimmer.hasClass(className.disabled);
           }
@@ -415,6 +425,9 @@ $.fn.dimmer = function(parameters) {
             module.debug('Setting opacity to', opacity);
             $dimmer.css('background-color', color);
           },
+          legacy: function() {
+            $dimmer.addClass(className.legacy);
+          },
           active: function() {
             $dimmer.addClass(className.active);
           },
@@ -652,6 +665,9 @@ $.fn.dimmer.settings = {
   name        : 'Dimmer',
   namespace   : 'dimmer',
 
+  // whether should use flex layout
+  useFlex     : 'auto',
+
   silent      : false,
   debug       : false,
   verbose     : false,
@@ -700,6 +716,7 @@ $.fn.dimmer.settings = {
     dimmer     : 'dimmer',
     disabled   : 'disabled',
     hide       : 'hide',
+    legacy     : 'legacy',
     pageDimmer : 'page',
     show       : 'show'
   },
diff --git a/src/definitions/modules/dimmer.less b/src/definitions/modules/dimmer.less
index 3e534bc28..fb0ce54c5 100755
--- a/src/definitions/modules/dimmer.less
+++ b/src/definitions/modules/dimmer.less
@@ -113,6 +113,18 @@
            Variations
 *******************************/
 
+
+/*--------------
+    Legacy
+---------------*/
+
+/* Animating / Active / Visible */
+.dimmed.dimmable > .ui.animating.legacy.dimmer,
+.dimmed.dimmable > .ui.visible.legacy.dimmer,
+.ui.active.legacy.dimmer {
+  display: block;
+}
+
 /*--------------
     Alignment
 ---------------*/
diff --git a/src/definitions/modules/modal.js b/src/definitions/modules/modal.js
index b2ccea05e..edac20513 100755
--- a/src/definitions/modules/modal.js
+++ b/src/definitions/modules/modal.js
@@ -107,6 +107,7 @@ $.fn.modal = function(parameters) {
           dimmer: function() {
             var
               defaultSettings = {
+                flex       : settings.flex,
                 debug      : settings.debug,
                 variation  : settings.centered
                   ? false
@@ -335,6 +336,9 @@ $.fn.modal = function(parameters) {
             else {
               if(settings.allowMultiple && settings.detachable) {
                 $module.detach().appendTo($dimmer);
+              }
+              if(!module.can.useFlex()) {
+
               }
               settings.onShow.call(element);
               if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
@@ -564,6 +568,9 @@ $.fn.modal = function(parameters) {
         },
 
         can: {
+          useFlex: function() {
+            return $dimmer.dimmer('can use flex');
+          },
           fit: function() {
             var
               contextHeight  = module.cache.contextHeight,
@@ -880,6 +887,8 @@ $.fn.modal.settings = {
   name           : 'Modal',
   namespace      : 'modal',
 
+  useFlex        : 'auto',
+
   silent         : false,
   debug          : false,
   verbose        : false,
diff --git a/src/definitions/modules/modal.less b/src/definitions/modules/modal.less
index 6f0236ce7..0b59b5d61 100755
--- a/src/definitions/modules/modal.less
+++ b/src/definitions/modules/modal.less
@@ -23,6 +23,7 @@
 *******************************/
 
 .ui.modal {
+  position: absolute;
   display: none;
   z-index: @zIndex;
   text-align: left;

From e60921288810a60870f0676b9e65e8e4e06d9576 Mon Sep 17 00:00:00 2001
From: Jack Lukic <jacklukic@gmail.com>
Date: Sun, 19 Aug 2018 22:27:20 -0400
Subject: [PATCH 2/5] Finish adding useFlex setting for dimmer/modal

---
 RELEASE-NOTES.md                    | 11 +++++++++++
 src/definitions/modules/dimmer.js   | 16 ++++++++++++----
 src/definitions/modules/dimmer.less |  6 ++++++
 src/definitions/modules/modal.js    | 25 +++++++++++++++++++++++--
 4 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
index 96812b762..c6a82c298 100755
--- a/RELEASE-NOTES.md
+++ b/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**
diff --git a/src/definitions/modules/dimmer.js b/src/definitions/modules/dimmer.js
index 092cac287..9c1577920 100755
--- a/src/definitions/modules/dimmer.js
+++ b/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);
diff --git a/src/definitions/modules/dimmer.less b/src/definitions/modules/dimmer.less
index fb0ce54c5..24faa4680 100755
--- a/src/definitions/modules/dimmer.less
+++ b/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
 ---------------*/
diff --git a/src/definitions/modules/modal.js b/src/definitions/modules/modal.js
index edac20513..8a654cee4 100755
--- a/src/definitions/modules/modal.js
+++ b/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

From fa55d1f1081bc499dec9ceba39da8a5c931c6949 Mon Sep 17 00:00:00 2001
From: Jack Lukic <jacklukic@gmail.com>
Date: Sun, 19 Aug 2018 22:38:32 -0400
Subject: [PATCH 3/5] Finish adding legacy settings

---
 src/definitions/modules/dimmer.js | 22 ++++++----------------
 src/definitions/modules/modal.js  | 16 ++++++++++------
 2 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/src/definitions/modules/dimmer.js b/src/definitions/modules/dimmer.js
index 9c1577920..232854e12 100755
--- a/src/definitions/modules/dimmer.js
+++ b/src/definitions/modules/dimmer.js
@@ -92,7 +92,7 @@ $.fn.dimmer = function(parameters) {
 
           module.bind.events();
           module.set.dimmable();
-          if(!module.can.useFlex()) {
+          if(!settings.useFlex) {
             module.debug('Absolutely positioned flex not supported. Using legacy positioning.');
             module.set.legacy();
           }
@@ -252,7 +252,7 @@ $.fn.dimmer = function(parameters) {
               }
               $dimmer
                 .transition({
-                  displayType : module.can.useFlex()
+                  displayType : settings.useFlex
                     ? 'flex'
                     : 'block',
                   animation   : settings.transition + ' in',
@@ -299,7 +299,7 @@ $.fn.dimmer = function(parameters) {
               module.verbose('Hiding dimmer with css');
               $dimmer
                 .transition({
-                  displayType : module.can.useFlex()
+                  displayType : settings.useFlex
                     ? 'flex'
                     : 'block',
                   animation   : settings.transition + ' out',
@@ -363,13 +363,6 @@ $.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) );
           },
@@ -406,9 +399,6 @@ $.fn.dimmer = function(parameters) {
         },
 
         can: {
-          useFlex: function() {
-            return !module.is.ie();
-          },
           show: function() {
             return !$dimmer.hasClass(className.disabled);
           }
@@ -673,14 +663,14 @@ $.fn.dimmer.settings = {
   name        : 'Dimmer',
   namespace   : 'dimmer',
 
-  // whether should use flex layout
-  useFlex     : 'auto',
-
   silent      : false,
   debug       : false,
   verbose     : false,
   performance : true,
 
+  // whether should use flex layout
+  useFlex     : true,
+
   // name to distinguish between multiple dimmers in context
   dimmerName  : false,
 
diff --git a/src/definitions/modules/modal.js b/src/definitions/modules/modal.js
index 8a654cee4..6c55c2e6d 100755
--- a/src/definitions/modules/modal.js
+++ b/src/definitions/modules/modal.js
@@ -107,7 +107,7 @@ $.fn.modal = function(parameters) {
           dimmer: function() {
             var
               defaultSettings = {
-                flex       : settings.flex,
+                useFlex    : module.can.useFlex(),
                 debug      : settings.debug,
                 variation  : settings.centered
                   ? false
@@ -342,9 +342,6 @@ $.fn.modal = function(parameters) {
             else {
               if(settings.allowMultiple && settings.detachable) {
                 $module.detach().appendTo($dimmer);
-              }
-              if(!module.can.useFlex()) {
-
               }
               settings.onShow.call(element);
               if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
@@ -577,7 +574,7 @@ $.fn.modal = function(parameters) {
 
         can: {
           useFlex: function() {
-            return settings.detachable && $dimmer.dimmer('can use flex');
+            return settings.detachable && !module.is.ie();
           },
           fit: function() {
             var
@@ -600,6 +597,13 @@ $.fn.modal = function(parameters) {
           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')
@@ -641,7 +645,6 @@ $.fn.modal = function(parameters) {
             var
               defaultSettings = {
                 debug      : settings.debug,
-                useFlex    : module.can.useFlex(),
                 dimmerName : 'modals',
                 closable   : 'auto',
                 variation  : settings.centered
@@ -684,6 +687,7 @@ $.fn.modal = function(parameters) {
                 marginLeft: -(width / 2)
               })
             ;
+            module.verbose('Setting modal offset for legacy mode');
           },
           screenHeight: function() {
             if( module.can.fit() ) {

From cddcc364c35c4d66f5e8e7a299562b68af1ea803 Mon Sep 17 00:00:00 2001
From: Jack Lukic <jacklukic@gmail.com>
Date: Sun, 19 Aug 2018 22:40:19 -0400
Subject: [PATCH 4/5] Respect useFlex settinng if its a boolean

---
 src/definitions/modules/modal.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/definitions/modules/modal.js b/src/definitions/modules/modal.js
index 6c55c2e6d..b0432a1a7 100755
--- a/src/definitions/modules/modal.js
+++ b/src/definitions/modules/modal.js
@@ -574,7 +574,10 @@ $.fn.modal = function(parameters) {
 
         can: {
           useFlex: function() {
-            return settings.detachable && !module.is.ie();
+            return (settings.useFlex == 'auto')
+              ? settings.detachable && !module.is.ie()
+              : settings.useFlex
+            ;
           },
           fit: function() {
             var

From bbad43026d0d0c6f52a62d2d1260039f4657b397 Mon Sep 17 00:00:00 2001
From: Jack <jacklukic@gmail.com>
Date: Mon, 3 Sep 2018 15:37:25 -0700
Subject: [PATCH 5/5] Finish refactor of modal to support legacy positioning
 for IE11

---
 src/definitions/modules/dimmer.js   | 15 +++++++++++----
 src/definitions/modules/dimmer.less |  6 ------
 src/definitions/modules/modal.js    | 26 ++++++++++++++++++--------
 src/definitions/modules/modal.less  |  7 +++++++
 4 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/src/definitions/modules/dimmer.js b/src/definitions/modules/dimmer.js
index 232854e12..f622e925a 100755
--- a/src/definitions/modules/dimmer.js
+++ b/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);
           },
diff --git a/src/definitions/modules/dimmer.less b/src/definitions/modules/dimmer.less
index 24faa4680..fb0ce54c5 100755
--- a/src/definitions/modules/dimmer.less
+++ b/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
 ---------------*/
diff --git a/src/definitions/modules/modal.js b/src/definitions/modules/modal.js
index b0432a1a7..f281a3b08 100755
--- a/src/definitions/modules/modal.js
+++ b/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'
diff --git a/src/definitions/modules/modal.less b/src/definitions/modules/modal.less
index 0b59b5d61..03e12b954 100755
--- a/src/definitions/modules/modal.less
+++ b/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 {