Modal/dimmer now correctly handle several simultaneous animation conditions, showing while hiding, hiding others while showing, etc. Animations now use failsafe to avoid animationend race-conditions with webkit, and the same duration #1417 #1432

src/definitions/modules/modal.js

@@ -91,8 +91,8 @@ $.fn.modal = function(parameters) {
               closable   : false,
               useCSS     : true,
               duration   : {
-                show     : settings.duration * 0.9,
-                hide     : settings.duration * 1.1
+                show     : settings.duration,
+                hide     : settings.duration
               }
             })
           ;
@@ -293,7 +293,7 @@ $.fn.modal = function(parameters) {
             ? callback
             : function(){}
           ;
-          if( !module.is.active() ) {
+          if( module.is.animating() || !module.is.active() ) {
 
             if( !settings.allowMultiple && $otherModals.filter(':visible').size() > 0) {
               module.debug('Other modals visible, queueing show animation');
@@ -310,10 +310,11 @@ $.fn.modal = function(parameters) {
                 module.set.clickaway();
                 $module
                   .transition({
-                    debug     : settings.debug,
-                    animation : settings.transition + ' in',
-                    queue     : false,
-                    duration  : settings.duration,
+                    debug      : settings.debug,
+                    animation  : settings.transition + ' in',
+                    queue      : false,
+                    duration   : settings.duration,
+                    failSafe   : true,
                     onComplete : function() {
                       $.proxy(settings.onVisible, element)();
                       module.add.keyboardShortcuts();
@@ -345,7 +346,7 @@ $.fn.modal = function(parameters) {
         },
 
         showDimmer: function() {
-          if( !$dimmable.dimmer('is active') ) {
+          if($dimmable.dimmer('is animating') || !$dimmable.dimmer('is active') ) {
             module.debug('Showing dimmer');
             $dimmable.dimmer('show');
           }
@@ -355,7 +356,7 @@ $.fn.modal = function(parameters) {
         },
 
         hideDimmer: function() {
-          if( !($dimmable.dimmer('is active') || $dimmable.dimmer('is animating')) ) {
+          if( $dimmable.dimmer('is animating') || !($dimmable.dimmer('is active')) ) {
             module.debug('Dimmer is not visible cannot hide');
             return;
           }
@@ -375,35 +376,39 @@ $.fn.modal = function(parameters) {
           ;
           module.debug('Hiding modal');
           $.proxy(settings.onHide, element)();
-          if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
-            module.remove.active();
-            $module
-              .transition({
-                debug      : settings.debug,
-                animation  : settings.transition + ' out',
-                queue      : false,
-                duration   : settings.duration,
-                onStart    : function() {
-                  module.remove.keyboardShortcuts();
-                },
-                onComplete : function() {
+
+          if( module.is.animating() || module.is.active() ) {
+            if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
+              module.remove.active();
+              $module
+                .transition({
+                  debug      : settings.debug,
+                  animation  : settings.transition + ' out',
+                  queue      : false,
+                  duration   : settings.duration,
+                  failSafe   : true,
+                  onStart    : function() {
+                    module.remove.keyboardShortcuts();
+                  },
+                  onComplete : function() {
+                    $.proxy(settings.onHidden, element)();
+                    module.restore.focus();
+                    callback();
+                  }
+                })
+              ;
+            }
+            else {
+              module.remove.active();
+              module.remove.keyboardShortcuts();
+              $module
+                .fadeOut(settings.duration, settings.easing, function() {
                   $.proxy(settings.onHidden, element)();
                   module.restore.focus();
                   callback();
-                }
-              })
-            ;
-          }
-          else {
-            module.remove.active();
-            module.remove.keyboardShortcuts();
-            $module
-              .fadeOut(settings.duration, settings.easing, function() {
-                $.proxy(settings.onHidden, element)();
-                module.restore.focus();
-                callback();
-              })
-            ;
+                })
+              ;
+            }
           }
         },
 
@@ -437,6 +442,7 @@ $.fn.modal = function(parameters) {
         },
 
         othersActive: function() {
+          console.log($otherModals, $otherModals.filter('.' + className.active).size());
           return ($otherModals.filter('.' + className.active).size() > 0);
         },
 
@@ -827,6 +833,7 @@ $.fn.modal.settings = {
   },
   className : {
     active    : 'active',
+    animating : 'animating',
     scrolling : 'scrolling'
   }
 };