tao_ui 0.3.3 → 0.3.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 3288dc02b31c88e6e99f7d47beba2e01d7ec4f2e
-  data.tar.gz: 89f554782002b6f03dc210431323a90c6868fb20
+  metadata.gz: d701031ac79bef3e9845a54b6f122396a554e827
+  data.tar.gz: 87281c106b7756741f9e2ffae41ddb77e035ec37
 SHA512:
-  metadata.gz: 1dc06662259b356194e8c68e83b77562f5e5d1c599baeb0f20ab93a5b14bfa996dfc40997c9efbcbfb78642074e6f51b14ba1999c0e6459241b4fb64fb9d5127
-  data.tar.gz: b84e2af252fd0a2be91f593d8b795f33d84892b89d8ca8d5d900ca4f58fa8afca4b2c04a2176be3d7edb4d6f6fbd0a71296101f68f15fcbb9c3412d28233c8e0
+  metadata.gz: 400c6f452e8ad425918e07e5bd74956baae6113a89cd555285d9da29376530a68b187d8ad5f9c1c362a1f3d952b7a132b226563213908f3f084dc69f0d86fc7a
+  data.tar.gz: a7c6fcabb4b564ac066466c92e1fb2d1860d97bb7ea3eb80670eed9c714925ed9bead6b5a19aeffc45af78cba0c93cd9473ccba5931e50d0639a2a70e1334859

data/lib/assets/javascripts/tao/ui/dialog/element.coffee

@@ -1,5 +1,6 @@
 class Tao.Dialog.Element extends TaoComponent
 
+
   @tag 'tao-dialog'
 
   @attribute 'active', type: 'boolean', observe: true
@@ -11,6 +12,8 @@ class Tao.Dialog.Element extends TaoComponent
   @attribute 'triggerSelector', 'triggerTraversal', 'size'
 
   _connected: ->
+    @wrapper = @jq.find('.tao-dialog-wrapper')
+    @content = @jq.find('.tao-dialog-content')
     @triggerEl = if @triggerTraversal && @triggerSelector
       @jq[@triggerTraversal]?(@triggerSelector)
     else if @triggerSelector
@@ -31,58 +34,65 @@ class Tao.Dialog.Element extends TaoComponent
 
   _initSize: ->
     if _.isNumber(size = parseFloat @size)
-      @jq.find('.tao-dialog-wrapper').width size
+      @wrapper.width size
 
   _bind: ->
     @on 'click', (e) =>
-      @active = false if e.target == @
+      @active = false if @withCloseButton && e.target == @
       null
 
     @on 'click', ".tao-dialog-wrapper > .link-close, #{@closeSelector}", =>
       @active = false
       null
 
+    @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.find('.tao-dialog-content').css
-        maxHeight: $(window).height() - 40
-      @jq.show()
-      @reflow()
+      @_prepareShowTransition()
     else
-      @namespacedTrigger 'beforeHide'
-      reset = =>
-        if @autoDestroy
-          @remove()
-        else
-          @jq.hide()
-        @namespacedTrigger 'afterHide'
-
-      if @jq.is(':visible')
-        @on 'transitionend', (e) =>
-          @off 'transitionend'
-          return unless $(e.target).is('.tao-dialog-wrapper')
-          reset()
-      else
-        reset()
+      @_prepareHideTransition()
+    null
 
+  _prepareShowTransition: ->
+    @namespacedTrigger 'beforeShow'
+    @content.css
+      maxHeight: $(window).height() - 40
+    @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: ->
     if @active
-      $('body, html').addClass('tao-dialog-active')
+      $('body').addClass('tao-dialog-active')
       @namespacedTrigger 'show'
     else
-      $('body, html').removeClass('tao-dialog-active')
+      $('body').removeClass('tao-dialog-active')
       @namespacedTrigger 'hide'
 
   setContent: (content) ->
-    @jq.find('.tao-dialog-content').empty()
-      .append content
+    @content.empty().append content
     @
 
   remove: ->
@@ -91,11 +101,15 @@ class Tao.Dialog.Element extends TaoComponent
     @namespacedTrigger 'remove'
     @
 
-  beforeCache: ->
+  reset: ->
     if @autoDestroy
       @remove()
     else
       @jq.hide()
-      active = false
+    @
+
+  beforeCache: ->
+    @reset()
+    active = false
 
 TaoComponent.register Tao.Dialog.Element

data/lib/assets/javascripts/tao/ui/popover/element.coffee

@@ -17,7 +17,7 @@ class Tao.Popover.Element extends TaoComponent
 
   @attribute 'boundarySelector', 'direction', 'size'
 
-  @attribute 'offset', type: 'number', default: 0
+  @attribute 'offset', type: 'number', default: 5
 
   @attribute 'autoHide', 'autoDestroy', 'withArrow', 'autoActivate', type: 'boolean'
 
@@ -26,6 +26,8 @@ class Tao.Popover.Element extends TaoComponent
     @_initTrigger()
     @_initSize()
 
+    @on 'transitionend', @_afterTransition.bind(@)
+
     if @autoActivate
       @reflow()
       @active = true
@@ -57,6 +59,12 @@ class Tao.Popover.Element extends TaoComponent
         @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
 
@@ -67,26 +75,34 @@ class Tao.Popover.Element extends TaoComponent
     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'
-
-      if @jq.is(':visible')
-        @on 'transitionend', (e) =>
-          @off 'transitionend'
-          return unless e.target == @
-          reset()
-      else
-        reset()
+      @_prepareHideTransition()
+
+    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: ->
@@ -139,7 +155,7 @@ class Tao.Popover.Element extends TaoComponent
     @
 
   resetAttributes: ->
-    @active = false
+    @active = false if @active
     @triggerEl?.off '.tao-popover'
     @target = null
     @triggerEl = null
@@ -158,11 +174,8 @@ class Tao.Popover.Element extends TaoComponent
     @
 
   beforeCache: ->
-    if @autoDestroy
-      @remove()
-    else
-      @jq.hide()
-      @active = false
+    @reset()
+    @active = false
 
   remove: ->
     @namespacedTrigger 'beforeRemove'
@@ -171,6 +184,13 @@ class Tao.Popover.Element extends TaoComponent
     @namespacedTrigger 'remove'
     @
 
+  reset: ->
+    if @autoDestroy
+      @remove()
+    else
+      @jq.hide()
+    @
+
   _disconnected: ->
     @triggerEl?.off '.tao-popover'
     $(document).off ".tao-popover-#{@taoId}"

data/lib/assets/javascripts/tao/ui/shared/slide_box/element/base.coffee

@@ -13,6 +13,7 @@ class Tao.SlideBox.ElementBase extends TaoComponent
   @attribute 'size'
 
   _connected: ->
+    @wrapper = @jq.find('.slide-box-wrapper')
     @triggerEl = if @triggerTraversal && @triggerSelector
       @jq[@triggerTraversal]?(@triggerSelector)
     else if @triggerSelector
@@ -33,7 +34,7 @@ class Tao.SlideBox.ElementBase extends TaoComponent
       "#{$(window)[sizeProperty]() + size}px"
     else
       @size
-    @jq.find('.slide-box-wrapper').css sizeProperty, size
+    @wrapper.css sizeProperty, size
 
   _bind: ->
     @on 'click', (e) =>
@@ -42,42 +43,50 @@ class Tao.SlideBox.ElementBase extends TaoComponent
     @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'
-
-      # 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()
+      @_prepareHideTransition()
+    null
+
+  _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: ''
@@ -98,8 +107,12 @@ class Tao.SlideBox.ElementBase extends TaoComponent
     @
 
   beforeCache: ->
+    @reset()
+    active = false
+
+  reset: ->
     if @autoDestroy
       @remove()
     else
       @jq.hide()
-      active = false
+    @

data/lib/tao_ui/version.rb

@@ -1,3 +1,3 @@
 module TaoUi
-  VERSION = '0.3.3'
+  VERSION = '0.3.4'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: tao_ui
 version: !ruby/object:Gem::Version
-  version: 0.3.3
+  version: 0.3.4
 platform: ruby
 authors:
 - farthinker
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-12-04 00:00:00.000000000 Z
+date: 2017-12-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: tao_on_rails
@@ -252,7 +252,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.6.14
+rubygems_version: 2.6.11
 signing_key: 
 specification_version: 4
 summary: Tao UI