tao_ui 0.2.6 → 0.2.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 841fce6a55ee514e77c1ed90b33f6c61d24e45e3
-  data.tar.gz: 50243fe3e1cc627cc8aee3e790fb6ad5ff74f712
+  metadata.gz: a1c1bccc0ee34c50adb3a33ea9518467baded118
+  data.tar.gz: c07e17ea24685306501e40b19f482494ce813e9b
 SHA512:
-  metadata.gz: 64a759788b0e0926fb9aef4a0ffd76aa8ca556fbe750b6933369f7e5d735025df26dd0b54d2bdfe389b14d874af931388a856fac836c79d4de44956321a02ca0
-  data.tar.gz: 4feec975f323094c0d032a7a41a7592d4b55ce9dc1c06b8340acdfe087f86c21c3a8c73e6b995f125b6732810848c1aaeb0e188d4e3dffc0507c3401c5cc8c08
+  metadata.gz: 3d1f8a06f43ded1c8cb3ae312dda29362a3d716b87863c96137be5475bb667f2a426104938b3935ea8f6ea386a7b3e4eee96f06d76d4b6a205d9a581163b729f
+  data.tar.gz: 2e13f7440facfaffd146a524fb45d8c2a53e055eccf482ad530c04f264e0821576a0fbffe8a6420732dcff7eb6e61595e09787d3ec1baa5826c2304d9994f130

data/config/locales/tao_ui/components/tree/en.yml

@@ -0,0 +1,6 @@
+en:
+  tao_ui:
+    components:
+      tree:
+        item:
+          loading: Loading

data/config/locales/tao_ui/components/tree/zh-CN.yml

@@ -0,0 +1,6 @@
+zh-CN:
+  tao_ui:
+    components:
+      tree:
+        item:
+          loading: 正在加载

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

@@ -3,4 +3,14 @@
 #= require ./message
 #= require ./confirm
 
-window.TaoDialog = Tao.Dialog = {}
+window.TaoDialog = Tao.Dialog =
+
+  closeAll: ->
+    $('.tao-dialog').each (i, dialog) ->
+      dialog.active = false
+      null
+
+  removeAll: ->
+    $('.tao-dialog').each (i, dialog) ->
+      dialog.remove()
+      null

data/lib/assets/javascripts/tao/ui/index.coffee

@@ -1,9 +1,12 @@
 #= require_self
 #= require tao/ui/shared/ujs
 #= require ./icons
+#= require ./table
 #= require ./slide_box
 #= require ./popover
 #= require ./tooltip
 #= require ./dialog
+#= require ./sortable
+#= require ./tree
 
 window.Tao ||= {}

data/lib/assets/javascripts/tao/ui/mobile/slide_box/index.coffee

@@ -1,4 +1,2 @@
-#= require_self
+#= require tao/ui/shared/slide_box/export
 #= require ./element
-
-Tao.SlideBox = {}

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

@@ -3,4 +3,14 @@
 #= require ./confirm
 #= require ./create
 
-window.TaoPopover = Tao.Popover = {}
+window.TaoPopover = Tao.Popover =
+
+  closeAll: ->
+    $('.tao-popover').each (i, dialog) ->
+      dialog.active = false
+      null
+
+  removeAll: ->
+    $('.tao-popover').each (i, dialog) ->
+      dialog.remove()
+      null

data/lib/assets/javascripts/tao/ui/shared/slide_box/export.coffee

@@ -0,0 +1,11 @@
+Tao.SlideBox =
+
+  closeAll: ->
+    $('.tao-slide-box').each (i, dialog) ->
+      dialog.active = false
+      null
+
+  removeAll: ->
+    $('.tao-slide-box').each (i, dialog) ->
+      dialog.remove()
+      null

data/lib/assets/javascripts/tao/ui/slide_box/index.coffee

@@ -1,4 +1,2 @@
-#= require_self
+#= require tao/ui/shared/slide_box/export
 #= require ./element
-
-Tao.SlideBox = {}

data/lib/assets/javascripts/tao/ui/sortable.coffee

@@ -0,0 +1,140 @@
+class Tao.Sortable extends TaoComponent
+
+  @tag 'tao-sortable'
+
+  @attribute 'groupSelector'
+
+  @attribute 'itemSelector', default: '[draggable="true"]'
+
+  @attribute 'axis', default: 'y'
+
+  _connected: ->
+    @on 'dragstart', @itemSelector, (e) =>
+      e.stopPropagation()
+      $item = $ e.currentTarget
+      itemRect = $item.get(0).getBoundingClientRect()
+      @_startDragging $item
+
+      e.originalEvent.dataTransfer.effectAllowed = 'move'
+      e.originalEvent.dataTransfer.setData 'text/plain', 'tao-sortable'
+      e.originalEvent.dataTransfer.setDragImage(
+        @_sortingItem.get(0),
+        e.clientX - itemRect.left,
+        e.clientY - itemRect.top
+      )
+      null
+
+  _disconnected: ->
+    @off()
+    $(document).off ".tao-sortable-#{@taoId}"
+
+  _startDragging: ($item) ->
+    @trigger 'tao:beforeSortStart', [$item]
+    @_sortingItem = $item
+    setTimeout -> $item.addClass('tao-sortable-sorting')
+    @trigger 'tao:sortStart', [@_sortingItem]
+
+    $(window).on "scroll.tao-sortable-#{@taoId}", _.throttle (e) =>
+      @_expireDimensionCache()
+      null
+    , 100
+
+    $(document).on "dragover.tao-sortable-#{@taoId}", _.throttle (e) =>
+      e.preventDefault()
+      @_performDragging x: e.clientX, y: e.clientY
+      e.originalEvent.dataTransfer.dropEffect = 'move'
+      null
+    , 100
+
+    $(document).on "dragend.tao-sortable-#{@taoId}", (e) =>
+      e.preventDefault()
+      @_stopDragging()
+      $(document).off ".tao-sortable-#{@taoId}"
+      $(window).off ".tao-sortable-#{@taoId}"
+      null
+
+  _performDragging: (mousePosition) ->
+    return unless @_sortingItem
+    item = @_findNearestItem mousePosition
+    return unless item && item.el.get(0) != @_sortingItem.get(0)
+
+    @_moveItem item, mousePosition
+    @_expireDimensionCache()
+
+  _stopDragging: ->
+    @_sortingItem.removeClass('tao-sortable-sorting')
+    @trigger 'tao:sortEnd', [@_sortingItem]
+    @_sortingItem = null
+
+  _findNearestItem: (mousePosition, dimensions = @_itemDimensions()) ->
+    minDistance = null
+    nearestItem = null
+
+    dimensions.forEach (item) =>
+      distance = @_getDistanceFromItem item, mousePosition
+      if _.isNil(minDistance) || minDistance > distance
+        minDistance = distance
+        nearestItem = item
+
+    if nearestItem.type == 'group' && nearestItem.items &&
+        nearestItem.items.length > 0
+      nearestItem = @_findNearestItem mousePosition, nearestItem.items
+
+    nearestItem
+
+  _moveItem: (item, mousePosition) ->
+    if item.type == 'group'
+      item.el.append @_sortingItem
+    else
+      method = if (@axis == 'y' && mousePosition.y > item.center.y) ||
+          (@axis == 'x' && mousePosition.x > item.center.x)
+        'after'
+      else
+        'before'
+      item.el[method] @_sortingItem
+
+  _itemDimensions: ->
+    @_dimentions ||= do =>
+      if @groupSelector
+        @jq.find(@groupSelector).map (i, groupEl) =>
+          @_getGroupDimension groupEl
+        .get()
+      else
+        @jq.find(@itemSelector).map (i, itemEl) =>
+          @_getItemDimension itemEl
+        .get()
+
+  _getGroupDimension: (groupEl) ->
+    $group = $ groupEl
+    dimension = $group.get(0).getBoundingClientRect()
+
+    type: 'group'
+    el: $group
+    dimension: dimension
+    center: @_getCenterPointOfDimension(dimension)
+    items: $group.find(@itemSelector).map (i, itemEl) =>
+      @_getItemDimension itemEl
+    .get()
+
+  _getItemDimension: (itemEl) ->
+    $item = $ itemEl
+    dimension = $item.get(0).getBoundingClientRect()
+
+    type: 'item'
+    el: $item
+    dimension: dimension
+    center: @_getCenterPointOfDimension(dimension)
+
+  _getCenterPointOfDimension: (dimension) ->
+    x: dimension.left + (dimension.width / 2)
+    y: dimension.top + (dimension.height / 2)
+
+  _getDistanceFromItem: (item, position) ->
+    deltaX = Math.abs(position.x - item.center.x)
+    deltaY = Math.abs(position.y - item.center.y)
+    Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2))
+
+  _expireDimensionCache: ->
+    @_dimentions = null
+
+TaoComponent.register Tao.Sortable

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

@@ -0,0 +1,13 @@
+class Tao.Table.Element extends TaoComponent
+
+  @tag 'tao-table'
+
+  @include Tao.Table.Selectable
+
+  @include Tao.Table.Expandable
+
+  _connected: ->
+    @_initSelectable()
+    @_initExpandable()
+
+TaoComponent.register Tao.Table.Element

data/lib/assets/javascripts/tao/ui/table/expandable.coffee

@@ -0,0 +1,61 @@
+Tao.Table.Expandable = ->
+
+  @attribute 'expandable', type: 'boolean'
+
+  _initExpandable: ->
+    @on 'click', 'tbody > tr.expandable', (e) =>
+      return if !@expandable || $(e.target).is('a, input')
+      $row = $ e.currentTarget
+      if $row.hasClass 'expanded'
+        @collapseRow $row
+        @trigger 'tao:expandRow', $row
+      else
+        @expandRow $row
+        @trigger 'tao:collapseRow', $row
+      null
+
+  expandRow: (row) ->
+    $row = $ row
+    return @ if $row.is('.disabled, .hidden, .expanded, .expanding')
+
+    $panel = $row.next('.expandable-panel')
+    return @ unless $panel.length > 0
+    $panelWrapper = $panel.find('> td > div:first')
+
+    $panel.show()
+    $panel[0].offsetHeight # force reflow
+    $panelWrapper.one 'transitionend', (e) ->
+      $row.removeClass 'expanding'
+
+    $row.addClass 'expanded expanding'
+    $panel.addClass 'expanded'
+    $panelWrapper.css 'height', $panelWrapper[0].scrollHeight
+    @_loadRemotePanel $panel
+    @
+
+  collapseRow: (row) ->
+    $row = $ row
+    return @ if $row.is('.disabled, .hidden, :not(.expanded), .collapsing')
+
+    $panel = $row.next('.expandable-panel')
+    return @ unless $panel.length > 0
+    $panelWrapper = $panel.find('> td > div:first')
+
+    $panelWrapper.one 'transitionend', (e) ->
+      $row.removeClass 'collapsing'
+      $panel.hide()
+
+    $row.removeClass 'expanded'
+      .addClass 'collapsing'
+    $panel.removeClass 'expanded'
+    $panelWrapper.css 'height', 0
+    @
+
+  _loadRemotePanel: ($panel) ->
+    return unless $panel.is('[data-url]')
+    $.ajax
+      url: $panel.data('url')
+      method: 'get'
+      dataType: 'script'
+    .done ->
+      $panel.removeAttr 'data-url'

data/lib/assets/javascripts/tao/ui/table/index.coffee

@@ -0,0 +1,6 @@
+#= require_self
+#= require ./selectable
+#= require ./expandable
+#= require ./element
+
+Tao.Table = {}

data/lib/assets/javascripts/tao/ui/table/selectable.coffee

@@ -0,0 +1,52 @@
+Tao.Table.Selectable = ->
+
+  @attribute 'selectable', type: 'boolean'
+
+  @get 'selectedRows', ->
+    @jq.find('tbody > tr.selected')
+
+  _initSelectable: ->
+    @on 'tao:change', '.td-checkbox tao-check-box', (e) =>
+      cb = e.currentTarget
+      $row = cb.jq.closest('tr')
+      @toggleSelectRow $row, cb.checked
+      @trigger 'tao:selectedChange', [@selectedRows]
+
+    @on 'tao:change', '.th-checkbox tao-check-box', (e) =>
+      cb = e.currentTarget
+      if cb.checked
+        @selectAllRows()
+      else
+        @unselectAllRows()
+      @trigger 'tao:selectedChange', [@selectedRows]
+
+  toggleSelectRow: (row, selected) ->
+    return @ unless @selectable
+
+    $row = $ row
+    currentSelected = $row.hasClass('selected')
+    selected = !currentSelected if _.isNil selected
+    if $row.is('.disabled, .hidden, .expandable-panel')\
+        || selected == currentSelected
+      return @
+
+    $row.toggleClass 'selected', selected
+    cb = $row.find('.td-checkbox tao-check-box').get(0)
+    cb.checked = selected if cb.checked != selected
+    @
+
+  selectRow: (row) ->
+    @toggleSelectRow row, true
+
+  unselectRow: (row) ->
+    @toggleSelectRow row, false
+
+  selectAllRows: ->
+    return @ unless @selectable
+    @jq.find('tbody > tr').each (i, row) => @selectRow(row)
+    @
+
+  unselectAllRows: ->
+    return @ unless @selectable
+    @jq.find('tbody > tr').each (i, row) => @unselectRow(row)
+    @

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

@@ -0,0 +1,58 @@
+class Tao.Tree.Element extends TaoComponent
+
+  @tag 'tao-tree'
+
+  @attribute 'selectable', 'associatedSelect', type: 'boolean'
+
+  @get 'selectedItems', ->
+    if @associatedSelect
+      @_getAssociatedSelectedItems()
+    else
+      @jq.find('.tao-tree-item[selected]').get()
+
+  _connected: ->
+    @_bind()
+
+  _disconnected: ->
+    @off()
+
+  _bind: ->
+    @on 'tao-tree-item:selectedChange', '.tao-tree-item', (e) =>
+      item = e.currentTarget
+      return unless item == e.target
+      @_refreshAssociatedItems(item) if @associatedSelect
+      @trigger 'tao-tree:selectedChange', [@selectedItems]
+      null
+
+  _refreshAssociatedItems: (item) ->
+    item.jq.find('.tao-tree-item').prop('selected', item.selected)
+    @_refreshAncestorItems(item)
+
+  _refreshAncestorItems: (item) ->
+    $parentItem = $(item).parent().closest('.tao-tree-item', @)
+    return unless $parentItem.length > 0
+
+    $items = $parentItem.find('> .tao-tree-list > .tao-tree-item')
+    if $items.filter('[selected], [indeterminate]').length == 0
+      $parentItem.prop 'selected', false
+      $parentItem.prop 'indeterminate', false
+    else if $items.filter(':not([selected])').length == 0
+      $parentItem.prop 'selected', true
+      $parentItem.prop 'indeterminate', false
+    else
+      $parentItem.prop 'selected', false
+      $parentItem.prop 'indeterminate', true
+
+    @_refreshAncestorItems $parentItem
+
+  _getAssociatedSelectedItems: ($list = @jq.find('> .tao-tree-list')) ->
+    selectedItems = []
+    $list.find('> .tao-tree-item').each (i, item) =>
+      if item.selected
+        selectedItems.push item
+      else if ($childList = item.jq.find('> .tao-tree-list')).length > 0
+        selectedItems = selectedItems.concat @_getAssociatedSelectedItems($childList)
+    selectedItems
+
+
+TaoComponent.register Tao.Tree.Element

data/lib/assets/javascripts/tao/ui/tree/index.coffee

@@ -0,0 +1,5 @@
+#= require_self
+#= require ./item
+#= require ./element
+
+Tao.Tree = {}