feature(macModal): Use $animate to show and hide mac-modal

angular-macgyver · Nov 13, 2013 · 6a7373d · 6a7373d
1 parent 771ddcb
commit 6a7373d
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 20 deletions.
diff --git a/src/css/modal.styl b/src/css/modal.styl
@@ -7,17 +7,23 @@
   bottom           0
   opacity          0
   visibility       hidden
-  transition       all 0.2s ease-out
   overflow-y       auto
   z-index          3
 
-  &.visible
+  &.visible, &.visible-add-active
     visibility visible
     opacity    1.0
 
     .modal
       top 50%
 
+  &.visible-add, &.visible-remove
+    transition 0.2s ease-out all
+
+  &.visible-remove-active
+    visibility hidden
+    opacity    0
+
   .modal
     position      absolute
     top           0

diff --git a/src/services/modal.coffee b/src/services/modal.coffee
@@ -36,14 +36,13 @@ There are multiple components used by modal.
 angular.module("Mac").service("modal", [
   "$rootScope"
   "$animate"
-  "$timeout"
   "$templateCache"
   "$compile"
   "$http"
   "$controller"
   "modalViews"
   "keys"
-  ($rootScope, $animate, $timeout, $templateCache, $compile, $http, $controller, modalViews, keys) ->
+  ($rootScope, $animate, $templateCache, $compile, $http, $controller, modalViews, keys) ->
     # Dictionary of registered modal
     registered: modalViews.registered
 
@@ -74,18 +73,18 @@ angular.module("Mac").service("modal", [
         angular.extend options, triggerOptions
 
         showModal = (element) =>
-          $animate.removeClass element, "hide", ->
-            $animate.addClass element, "visible"
+          $animate.removeClass element, "hide", =>
+            $animate.addClass element, "visible", =>
 
-          # Update opened modal object
-          @opened = {id, element, options}
-          @resize @opened
-          @bindingEvents()
+              # Update opened modal object
+              @opened = {id, element, options}
+              @resize @opened
+              @bindingEvents()
 
-          options.callback?()
+              options.callback?()
 
-          $rootScope.$broadcast "modalWasShown", id
-          @clearWaiting()
+              $rootScope.$broadcast "modalWasShown", id
+              @clearWaiting()
 
         # if modal is created thru module method "modal"
         if options.moduleMethod?
@@ -172,10 +171,7 @@ angular.module("Mac").service("modal", [
 
       {id, options, element} = @opened
 
-      $animate.removeClass element, "visible"
-
-      # 250ms timeout is added to account for the hide modal animation
-      $timeout =>
+      $animate.removeClass element, "visible", =>
         @bindingEvents "unbind"
         @opened = null
 
@@ -188,7 +184,6 @@ angular.module("Mac").service("modal", [
         $rootScope.$broadcast "modalWasHidden", id
 
         callback && callback()
-      , 250
 
     bindingEvents: (action = "bind") ->
       return unless action in ["bind", "unbind"] and @opened?

diff --git a/test/unit/modal.spec.coffee b/test/unit/modal.spec.coffee
@@ -56,6 +56,7 @@ describe "Mac modal", ->
 
       modal.register "test-modal", element, {}, angular.noop
       modal.show "test-modal"
+      $timeout.flush()
 
       modalElement = $(".modal", element)
       expect(modalElement.attr("style")).toBeDefined()
@@ -156,6 +157,7 @@ describe "Mac modal", ->
       $rootScope.$digest()
 
       element.click()
+      $timeout.flush()
       expect(modal.opened.id).toBe "test-modal"
 
     it "should bind data to opened modal", ->
@@ -166,6 +168,7 @@ describe "Mac modal", ->
       $rootScope.$digest()
 
       element.click()
+      $timeout.flush()
       expect(modal.opened.options.data.text).toBe "hello"
 
   describe "modal method", ->
@@ -216,7 +219,9 @@ describe "Mac modal", ->
       modal.show "testing"
       $timeout.flush()
 
-      modal.hide()
+      callback = jasmine.createSpy "select"
+
+      modal.hide(callback)
       $timeout.flush()
 
-      expect(angular.element(".modal-content-wrapper").length).toBe 0
+      expect(callback).toHaveBeenCalled()