From 3e749e6e2f05eccc9a13217844756dc2c3f746f4 Mon Sep 17 00:00:00 2001
From: jlukic <jacklukic@gmail.com>
Date: Thu, 13 Nov 2014 15:43:15 -0500
Subject: [PATCH] Fixes #1238, Modal classnames are removed by .transition()
 when set in onStart

---
 src/definitions/modules/modal.js | 58 ++++++++++++++++++++------------
 1 file changed, 37 insertions(+), 21 deletions(-)

diff --git a/src/definitions/modules/modal.js b/src/definitions/modules/modal.js
index 7f57bd1f3..a2068abfc 100644
--- a/src/definitions/modules/modal.js
+++ b/src/definitions/modules/modal.js
@@ -65,6 +65,7 @@ $.fn.modal = function(parameters) {
 
         element      = this,
         instance     = $module.data(moduleNamespace),
+        observer,
         module
       ;
       module  = {
@@ -76,6 +77,7 @@ $.fn.modal = function(parameters) {
             module.error(error.dimmer);
             return;
           }
+
           $dimmable = $context
             .dimmer({
               debug      : settings.debug,
@@ -88,25 +90,18 @@ $.fn.modal = function(parameters) {
               }
             })
           ;
-
           if(settings.detachable) {
             $dimmable.dimmer('add content', $module);
           }
 
-          $dimmer = $dimmable
-            .dimmer('get dimmer')
-          ;
-
+          $dimmer = $dimmable.dimmer('get dimmer');
           $otherModals = $module.siblings(selector.modal);
           $allModals   = $otherModals.add($module);
 
           module.verbose('Attaching close events', $close);
-          $close
-            .on('click' + eventNamespace, module.event.close)
-          ;
-          $window
-            .on('resize' + eventNamespace, module.event.resize)
-          ;
+          module.bind.events();
+          module.observeChanges();
+
           module.instantiate();
         },
 
@@ -124,12 +119,22 @@ $.fn.modal = function(parameters) {
             .removeData(moduleNamespace)
             .off(eventNamespace)
           ;
-          $close
-            .off(eventNamespace)
-          ;
-          $context
-            .dimmer('destroy')
-          ;
+          $close.off(eventNamespace);
+          $context.dimmer('destroy');
+        },
+
+        observeChanges: function() {
+          if('MutationObserver' in window) {
+            observer = new MutationObserver(function(mutations) {
+              module.debug('DOM tree modified, updating selector cache');
+              module.refresh();
+            });
+            observer.observe(element, {
+              childList : true,
+              subtree   : true
+            });
+            module.debug('Setting up mutation observer', observer);
+          }
         },
 
         refresh: function() {
@@ -160,6 +165,17 @@ $.fn.modal = function(parameters) {
           }
         },
 
+        bind: {
+          events: function() {
+            $close
+              .on('click' + eventNamespace, module.event.close)
+            ;
+            $window
+              .on('resize' + eventNamespace, module.event.resize)
+            ;
+          }
+        },
+
         event: {
           close: function() {
             module.verbose('Closing element pressed');
@@ -255,6 +271,10 @@ $.fn.modal = function(parameters) {
               $.proxy(settings.onShow, element)();
               if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
                 module.debug('Showing modal with css animations');
+                module.cacheSizes();
+                module.set.position();
+                module.set.screenHeight();
+                module.set.type();
                 $module
                   .transition({
                     debug     : settings.debug,
@@ -262,10 +282,6 @@ $.fn.modal = function(parameters) {
                     queue     : false,
                     duration  : settings.duration,
                     onStart   : function() {
-                      module.cacheSizes();
-                      module.set.position();
-                      module.set.screenHeight();
-                      module.set.type();
                       module.set.clickaway();
                     },
                     onComplete : function() {