base.coffee in tao_ui-0.3.4

- old
+ new

@@ -11,10 +11,11 @@
   @attribute 'direction', default: 'btt'
 
   @attribute 'size'
 
   _connected: ->
+    @wrapper = @jq.find('.slide-box-wrapper')
     @triggerEl = if @triggerTraversal && @triggerSelector
       @jq[@triggerTraversal]?(@triggerSelector)
     else if @triggerSelector
       $ @triggerSelector
 
@@ -31,55 +32,63 @@
     sizeProperty = if @direction in ['btt', 'ttb'] then 'height' else 'width'
     size = if (size = parseFloat(@size)) < 0
       "#{$(window)[sizeProperty]() + size}px"
     else
       @size
-    @jq.find('.slide-box-wrapper').css sizeProperty, size
+    @wrapper.css sizeProperty, size
 
   _bind: ->
     @on 'click', (e) =>
       @active = false if e.target == @
 
     @on 'click', '.slide-box-wrapper > .link-close', =>
       @active = false
 
+    @on 'transitionend', @_afterTransition.bind(@)
+
     if @triggerEl && @triggerEl.length > 0
       @triggerEl.on "click.tao-slide-box-#{@taoId}", (e) =>
         @active = true
 
   _beforeActiveChanged: (active) ->
     if active
-      @namespacedTrigger 'beforeShow'
-      @jq.show()
-      @reflow()
+      @_prepareShowTransition()
     else
-      @namespacedTrigger 'beforeHide'
-      reset = =>
-        if @autoDestroy
-          @remove()
-        else
-          @jq.hide()
-        @namespacedTrigger 'afterHide'
+      @_prepareHideTransition()
+    null
 
-      # in case the slide box is hidden too fast
-      if @jq.is(':visible')
-        @on 'transitionend', (e) =>
-          @off 'transitionend'
-          return unless $(e.target).is('.slide-box-wrapper')
-          reset()
-      else
-        reset()
+  _prepareShowTransition: ->
+    @namespacedTrigger 'beforeShow'
+    @jq.show()
+    @reflow()
+    @_duringTransition = 'show'
+
+  _prepareHideTransition: ->
+    @namespacedTrigger 'beforeHide'
+    if @jq.is(':visible') && @wrapper.css('opacity') * 1 > 0
+      @_duringTransition = 'hide'
+    else
+      @reset()
+
+  _afterTransition: (e) ->
+    return unless $(e.target).is(@wrapper) && e.originalEvent.propertyName == 'opacity'
+    if @_duringTransition == 'show'
+      @namespacedTrigger 'afterShow'
+    else if @_duringTransition == 'hide'
+      @reset()
+      @namespacedTrigger 'afterHide'
+    @_duringTransition = false
     null
 
   _activeChanged: ->
     @_unbindAutoHideEvent() if @autoHide
     if @active
       @_bindAutoHideEvent() if @autoHide
-      $('body, html').addClass('slide-box-active')
+      $('body').addClass('slide-box-active')
       @namespacedTrigger 'show'
     else
-      $('body, html').removeClass('slide-box-active')
+      $('body').removeClass('slide-box-active')
       @namespacedTrigger 'hide'
 
   _autoHideEvent: ''
 
   _unbindAutoHideEvent: ->
@@ -96,10 +105,14 @@
     @jq.remove()
     @namespacedTrigger 'remove'
     @
 
   beforeCache: ->
+    @reset()
+    active = false
+
+  reset: ->
     if @autoDestroy
       @remove()
     else
       @jq.hide()
-      active = false
+    @