tao_ui 0.3.4 → 1.0.0.beta.1

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

@@ -1,147 +0,0 @@
-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) ->
-    @namespacedTrigger 'beforeSortStart', [$item]
-    @_sortingItem = $item
-    setTimeout -> $item.addClass('tao-sortable-sorting')
-    @namespacedTrigger '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')
-    @namespacedTrigger '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'
-      return if @triggerHandler('tao:sorting', [@_sortingItem, item]) == false
-      item.el.append @_sortingItem
-    else
-      method = if (@axis == 'y' && mousePosition.y > item.center.y) ||
-          (@axis == 'x' && mousePosition.x > item.center.x)
-        'after'
-      else
-        'before'
-      return if @triggerHandler('tao:sorting', [@_sortingItem, item, method]) == false
-      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) ->
-    rect = item.dimension
-    if position.x >= rect.left && position.x <= rect.right &&
-        position.y >= rect.top && position.y <= rect.bottom
-      0
-    else
-      deltaX = Math.min(Math.abs(position.x - rect.left), Math.abs(position.x - rect.right))
-      deltaY = Math.min(Math.abs(position.y - rect.top), Math.abs(position.y - rect.bottom))
-      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

@@ -1,13 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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
-        @namespacedTrigger 'expandRow', $row
-      else
-        @expandRow $row
-        @namespacedTrigger '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 $panelWrapper
-    @
-
-  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: ($panelWrapper) ->
-    return unless $panelWrapper.is('[data-url]')
-    $.ajax
-      url: $panelWrapper.data('url')
-      method: 'get'
-      dataType: 'script'
-    .done ->
-      $panelWrapper.removeAttr 'data-url'
-      $panelWrapper.css 'height', $panelWrapper[0].scrollHeight

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

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

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

@@ -1,52 +0,0 @@
-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
-      @namespacedTrigger 'selectedChange', [@selectedRows]
-
-    @on 'tao:change', '.th-checkbox tao-check-box', (e) =>
-      cb = e.currentTarget
-      if cb.checked
-        @selectAllRows()
-      else
-        @unselectAllRows()
-      @namespacedTrigger '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/tooltip.coffee

@@ -1,5 +0,0 @@
-class Tao.Tooltip extends Tao.Popover.Element
-
-  @tag 'tao-tooltip'
-
-TaoComponent.register Tao.Tooltip

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

@@ -1,58 +0,0 @@
-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
-      @namespacedTrigger '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

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

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

@@ -1,93 +0,0 @@
-class Tao.Tree.Item extends TaoComponent
-
-  @tag 'tao-tree-item'
-
-  @attribute 'depth', type: 'number'
-
-  @attribute 'expandable', 'selectable', type: 'boolean'
-
-  @attribute 'expanded', 'selected', 'indeterminate', type: 'boolean', observe: true
-
-  @attribute 'remote', type: 'hash'
-
-  _connected: ->
-    @_initSelectable() if @selectable
-    @_initExpandable() if @expandable
-
-  _disconnected: ->
-    @off()
-    @checkbox?.off()
-    @checkbox = null
-
-  _initSelectable: ->
-    @checkbox = @findComponent '> .tao-tree-item-content tao-check-box', =>
-      @_selectedChanged() if @selected
-
-    @checkbox.on 'tao:change', (e) =>
-      @selected = e.currentTarget.checked
-      @namespacedTrigger 'selectedChange', [@selected]
-      null
-
-  _initExpandable: ->
-    @on 'click', '> .tao-tree-item-content > .link-toggle-item', (e) =>
-      return if @jq.hasClass('expanding')
-      @_toggleExpanded()
-      null
-
-  _beforeExpandedChanged: (expanded) ->
-    $list = @jq.find('> .tao-tree-list')
-    @jq.addClass 'expanding'
-    $list.css 'display', 'block'
-    $list.css 'height',  if expanded then '0' else $list.get(0).scrollHeight
-    $list.one 'transitionend', => @_afterTransition()
-    @reflow()
-    null
-
-  _expandedChanged: ->
-    return unless @expandable
-    $list = @jq.find('> .tao-tree-list')
-    if @expanded
-      $list.css 'height',  $list.get(0).scrollHeight
-    else
-      $list.css 'height', '0'
-
-  _selectedChanged: ->
-    return unless @selectable
-    @checkbox.checked = @selected
-    null
-
-  _indeterminateChanged: ->
-    return unless @selectable
-    @checkbox.indeterminate = @indeterminate
-    null
-
-  _afterTransition: ->
-    $list = @jq.find('> .tao-tree-list')
-    @jq.removeClass 'expanding'
-    if @expanded
-      $list.css 'height', 'auto'
-      if @remote && $list.find('> .tao-tree-loading').length > 0
-        @_requestList()
-    else
-      $list.hide()
-
-  _toggleExpanded: ->
-    @expanded = !@expanded
-
-  _requestList: ->
-    $.ajax
-      url: @remote.url
-      type: 'get'
-      data: _.extend {}, @remote.params,
-        tree_item_id: @taoId
-        depth: @depth
-        selectable: @selectable || undefined
-        selected: @selected || undefined
-      dataType: 'script'
-
-  updateList: ($newList) ->
-    @_afterTransition() if @jq.hasClass('expanding')
-    @jq.find('> .tao-tree-list').replaceWith($newList)
-    @namespacedTrigger 'listUpdate', [$newList]
-
-TaoComponent.register Tao.Tree.Item

data/lib/assets/stylesheets/tao/ui/_custom.scss

@@ -1 +0,0 @@
-// override this file in project

data/lib/assets/stylesheets/tao/ui/_globals.scss

@@ -1,3 +0,0 @@
-@import 'tao/ui/custom';
-@import 'tao/ui/variables';
-@import 'tao/ui/mixins';

data/lib/assets/stylesheets/tao/ui/_mixins.scss

@@ -1,2 +0,0 @@
-@import 'tao/ui/shared/mixins/base';
-@import 'tao/ui/shared/mixins/buttons';

data/lib/assets/stylesheets/tao/ui/_variables.scss

@@ -1,4 +0,0 @@
-@import 'tao/ui/variables/base';
-@import 'tao/ui/variables/tree';
-@import 'tao/ui/shared/variables/buttons';
-@import 'tao/ui/shared/variables/tables';

data/lib/assets/stylesheets/tao/ui/basic.scss

@@ -1,30 +0,0 @@
-@import 'tao/ui/globals';
-@import 'tao/ui/shared/basic';
-
-a {
-  &:hover {
-    color: $link-hover-color;
-    fill: $link-hover-color;
-  }
-
-  &.warn:hover {
-    color: lighten($red-color, 10%);
-    fill: lighten($red-color, 10%);
-  }
-
-  &.disabled:hover {
-    color: $lightest-grey-color;
-    fill: $lightest-grey-color;
-  }
-}
-
-a:not([href]):not([tabindex]) {
-  &:hover {
-    color: inherit;
-    fill: inherit;
-  }
-
-  &:focus {
-    outline: 0;
-  }
-}

data/lib/assets/stylesheets/tao/ui/buttons.scss

@@ -1,8 +0,0 @@
-@import 'tao/ui/globals';
-@import 'tao/ui/shared/buttons';
-
-.button {
-  &:hover {
-    text-decoration: none;
-  }
-}

data/lib/assets/stylesheets/tao/ui/code.scss

@@ -1,2 +0,0 @@
-@import 'tao/ui/globals';
-@import 'tao/ui/shared/code';

data/lib/assets/stylesheets/tao/ui/dialog.scss

@@ -1,117 +0,0 @@
-@import 'tao/ui/globals';
-
-.tao-dialog-active {
-  overflow: hidden;
-}
-
-.tao-dialog {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: $z-index-dialog;
-  display: none;
-  overflow: hidden;
-
-  &[modal] {
-    background-color: rgba(0, 0, 0, 0);
-    transition: background-color 300ms;
-  }
-
-  &[modal][active] {
-    background-color: rgba(0, 0, 0, 0.55);
-  }
-
-  &[active] .tao-dialog-wrapper {
-    transform: translate(0, 0);
-    opacity: 1;
-  }
-
-  .tao-dialog-wrapper {
-    position: relative;
-    width: 37.5rem;
-    min-height: 1em;
-    margin: 0 auto;
-    border-radius: 0 0 $border-radius-s $border-radius-s;
-    background-color: $white-color;
-    box-shadow: 0 0 4px 4px rgba(0,0,0,0.1);
-    transform: translate(0, -30%);
-    transition: transform 300ms, opacity 300ms;
-    opacity: 0;
-
-    .tao-dialog-content {
-      padding: 1rem 2rem;
-
-      h3:first-child,
-      .title:first-child {
-        margin-bottom: 2rem;
-      }
-    }
-
-    .tao-dialog-buttons,
-    .tao-dialog-content .buttons,
-    .tao-dialog-content .form-buttons {
-      margin-left: 0;
-      margin-bottom: 1rem;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      .button, a {
-        margin: 0 0.75rem;
-      }
-    }
-
-    .tao-dialog-buttons {
-      margin: 1.5rem 0 0 0;
-    }
-  }
-
-  &.tao-confirm-dialog,
-  &.tao-message-dialog {
-    .tao-dialog-wrapper {
-      width: 32.5rem;
-      padding: 1.5rem 2rem;
-
-      .tao-dialog-content {
-        padding: 0;
-      }
-    }
-  }
-
-  &[size='l'] .tao-dialog-wrapper {
-    width: 53.75rem;
-  }
-
-  &[size='xl'] .tao-dialog-wrapper {
-    width: 71.25rem;
-  }
-
-  .tao-dialog-wrapper > .link-close {
-    display: none;
-    align-items: center;
-    justify-content: center;
-    width: 2rem;
-    height: 2rem;
-    position: absolute;
-    top: 0.625rem;
-    right: 0.625rem;
-    text-decoration: none;
-    fill: $lighter-grey-color;
-
-    &:hover {
-      fill: $grey-color;
-    }
-
-    .icon {
-      width: 1.25rem;
-      height: 1.25rem;
-    }
-  }
-
-  &[with-close-button] .tao-dialog-wrapper > .link-close {
-    display: flex;
-  }
-
-}

data/lib/assets/stylesheets/tao/ui/icons.scss

@@ -1,2 +0,0 @@
-@import 'tao/ui/globals';
-@import 'tao/ui/shared/icons';

data/lib/assets/stylesheets/tao/ui/index.scss

@@ -1,13 +0,0 @@
-//= require normalize
-//= require ./icons
-//= require ./basic
-//= require ./code
-//= require ./buttons
-//= require ./tables
-//= require ./slide_box
-//= require ./popover
-//= require ./tooltip
-//= require ./dialog
-//= require ./sortable
-//= require ./tree
-//= require ./tabs

data/lib/assets/stylesheets/tao/ui/mobile/_custom.scss

@@ -1 +0,0 @@
-// override this file in project

data/lib/assets/stylesheets/tao/ui/mobile/_globals.scss

@@ -1,3 +0,0 @@
-@import 'tao/ui/mobile/custom';
-@import 'tao/ui/mobile/variables';
-@import 'tao/ui/mobile/mixins';

data/lib/assets/stylesheets/tao/ui/mobile/_mixins.scss

@@ -1,2 +0,0 @@
-@import 'tao/ui/shared/mixins/base';
-@import 'tao/ui/shared/mixins/buttons';

data/lib/assets/stylesheets/tao/ui/mobile/_variables.scss

@@ -1,3 +0,0 @@
-@import 'tao/ui/mobile/variables/base';
-@import 'tao/ui/mobile/variables/buttons';
-@import 'tao/ui/shared/variables/tables';