element.coffee in tao_ui-0.3.4

- old
+ new

@@ -15,19 +15,21 @@
 
   @attribute 'triggerAction', default: 'click'
 
   @attribute 'boundarySelector', 'direction', 'size'
 
-  @attribute 'offset', type: 'number', default: 0
+  @attribute 'offset', type: 'number', default: 5
 
   @attribute 'autoHide', 'autoDestroy', 'withArrow', 'autoActivate', type: 'boolean'
 
   _connected: ->
     @_initTarget()
     @_initTrigger()
     @_initSize()
 
+    @on 'transitionend', @_afterTransition.bind(@)
+
     if @autoActivate
       @reflow()
       @active = true
     else if @active
       @_activeChanged()
@@ -55,42 +57,56 @@
     else if @triggerAction == 'hover'
       @triggerEl.on 'mouseenter.tao-popover', (e) =>
         @active = true
         null
       .on 'mouseleave.tao-popover', (e) =>
+        return if @jq.is(e.relatedTarget) || @jq.has(e.relatedTarget).length
         @active = false
         null
 
+      @jq.on 'mouseleave', (e) =>
+        return if @triggerEl.is(e.relatedTarget) || @triggerEl.has(e.relatedTarget).length
+        @active = false
+        null
+
   _initSize: ->
     @jq.width(@size) if @size
 
   _beforeActiveChanged: (active) ->
     return false if @disabled
 
     if active
-      @namespacedTrigger 'beforeShow'
-      @jq.show()
-      @refresh()
-      @reflow()
+      @_prepareShowTransition()
     else
-      @namespacedTrigger 'beforeHide'
-      reset = =>
-        if @autoDestroy
-          @remove()
-        else
-          @jq.hide()
-        @namespacedTrigger 'afterHide'
+      @_prepareHideTransition()
 
-      if @jq.is(':visible')
-        @on 'transitionend', (e) =>
-          @off 'transitionend'
-          return unless e.target == @
-          reset()
-      else
-        reset()
     null
 
+  _prepareShowTransition: ->
+    @namespacedTrigger 'beforeShow'
+    @jq.show()
+    @refresh()
+    @reflow()
+    @_duringTransition = 'show'
+
+  _prepareHideTransition: ->
+    @namespacedTrigger 'beforeHide'
+    if @jq.is(':visible') && @jq.css('opacity') * 1 > 0
+      @_duringTransition = 'hide'
+    else
+      @reset()
+
+  _afterTransition: (e) ->
+    return unless $(e.target).is(@) && e.originalEvent.propertyName == 'opacity'
+    if @_duringTransition == 'show'
+      @namespacedTrigger 'afterShow'
+    else if @_duringTransition == 'hide'
+      @reset()
+      @namespacedTrigger 'afterHide'
+    @_duringTransition = false
+    null
+
   _activeChanged: ->
     if @active
       @target.addClass "#{@constructor._tag}-active"
       @_enableAutoHide() if @autoHide
       @namespacedTrigger 'show'
@@ -137,11 +153,11 @@
       top: @position.top
       left: @position.left
     @
 
   resetAttributes: ->
-    @active = false
+    @active = false if @active
     @triggerEl?.off '.tao-popover'
     @target = null
     @triggerEl = null
 
     for attr in _.toArray(@attributes)
@@ -156,20 +172,24 @@
   toggleActive: ->
     @active = !@active
     @
 
   beforeCache: ->
-    if @autoDestroy
-      @remove()
-    else
-      @jq.hide()
-      @active = false
+    @reset()
+    @active = false
 
   remove: ->
     @namespacedTrigger 'beforeRemove'
     @target.removeClass 'tao-popover-active'
     @jq.remove()
     @namespacedTrigger 'remove'
+    @
+
+  reset: ->
+    if @autoDestroy
+      @remove()
+    else
+      @jq.hide()
     @
 
   _disconnected: ->
     @triggerEl?.off '.tao-popover'
     $(document).off ".tao-popover-#{@taoId}"