tao_form 0.1.0

data/lib/assets/javascripts/tao/form/shared/fields/month_picker.coffee

@@ -0,0 +1,10 @@
+
+class Tao.Form.MonthPicker extends Tao.Form.MomentPicker.Element
+
+  @tag 'tao-month-picker'
+
+  @attribute 'valueFormat', default: 'YYYY-MM'
+
+  @attribute 'displayFormat', default: 'YYYY-MM'
+
+TaoComponent.register Tao.Form.MonthPicker

data/lib/assets/javascripts/tao/form/shared/fields/radio.coffee

@@ -0,0 +1,19 @@
+class Tao.Form.RadioBase extends TaoComponent
+
+  @include Tao.Form.Mixins.Checkable
+
+  @tag 'tao-radio-button'
+
+  _connected: ->
+    @field = @jq.find('input:radio')
+    @_bind()
+
+  _bind: ->
+    @on 'click', '.radio-wrapper', (e) =>
+      if @field.is(':enabled')
+        @_toggleChecked()
+        @trigger 'change'
+      false
+
+  _disconnected: ->
+    @off()

data/lib/assets/javascripts/tao/form/shared/fields/select/element/base.coffee

@@ -0,0 +1,122 @@
+#= require tao/form/shared/fields/select/models/data_provider
+
+DataProvider = Tao.Form.Select.DataProvider
+
+class Tao.Form.Select.ElementBase extends TaoComponent
+
+  @tag 'tao-select'
+
+  @attribute 'multiple', type: 'boolean'
+
+  @attribute 'active', 'selected', type: 'boolean', observe: true
+
+  @attribute 'remote', type: 'hash'
+
+  @attribute 'searchableSize', type: 'number', default: 8
+
+  @get 'value', ->
+    @field.val()
+
+  _connected: ->
+    @field = @jq.find 'select'
+    @selectedOption = if @multiple then [] else null
+
+    @dataProvider = new DataProvider
+      remote: @remote
+      field: @field
+
+    @result = @findComponent '.select-result', =>
+      @_resultReady()
+
+    @list = @findComponent '.select-list', =>
+      @_listReady()
+
+    @_bind()
+
+  _resultReady: ->
+    if @multiple
+      values = @field.val()
+      if values && _.isArray(values)
+        @selectOption(value) for value in values
+    else
+      @selectOption @field.val()
+
+  _listReady: ->
+    options = @dataProvider.unselectedOptions()
+    @list.setOptions options, @remote?.totalOptionSize
+    @list.searchable = if @remote
+      @dataProvider.options.length < @remote.totalOptionSize
+    else
+      @dataProvider.options.length > @searchableSize
+
+  _bind: ->
+    @_bindResultEvents()
+    @_bindListEvents()
+
+  _bindResultEvents: ->
+    @on 'activeClick', '.select-result', (e) =>
+      @_toggleActive()
+      null
+
+    if @multiple
+      @on 'unselectOption', '.select-result', (e, option) =>
+        _.remove @selectedOption, (opt) -> opt.value == option.value
+        @selected = false if @selectedOption.length == 0
+        @_filterList ''
+        @trigger 'change', @selectedOption
+        null
+    else
+      @on 'clear', '.select-result', (e) =>
+        @active = false
+        @selectedOption = null
+        @selected = false
+        @_filterList ''
+        @trigger 'change', @selectedOption
+        null
+
+  _bindListEvents: ->
+    @on 'selectOption', '.select-list', (e, option) =>
+      @selectOption option
+      @trigger 'change', @selectedOption
+      null
+
+    @on 'search', '.select-list', (e, value) =>
+      @_filterList value
+
+  _disconnected: ->
+    @off()
+    @dataProvider = null
+
+  _toggleActive: ->
+    @active = !@active
+
+  _filterList: (value) ->
+    @list.loading = true
+    @dataProvider.filter value, (options, totalSize) =>
+      @list.loading = false
+      options = @dataProvider.unselectedOptions options
+      @list.setOptions options, totalSize
+
+  selectOption: (option) ->
+    option = @dataProvider.getOption option
+    return false unless option && option != @selectedOption
+    @result.selectOption option
+    if @multiple
+      @selectedOption.push option
+    else
+      @selectedOption = option
+    @selected = true
+    true
+
+  unselectOption: (option) ->
+    if @multiple
+      option = @dataProvider.getOption option
+      return false unless option && (option in @selectedOption)
+      @result.unselectOption option
+      _.remove @selectedOption, (opt) -> opt.value == option.value
+      @selected = false if @selectedOption.length == 0
+    else
+      @result.unselectOption()
+      @selectedOption = null
+      @selected = false
+    true

data/lib/assets/javascripts/tao/form/shared/fields/select/list/base.coffee

@@ -0,0 +1,79 @@
+#= require tao/form/shared/fields/select/models/option
+
+Option = Tao.Form.Select.Option
+
+class Tao.Form.Select.ListBase extends TaoComponent
+
+  @tag 'tao-select-list'
+
+  @attribute 'empty', 'loading', 'searching', 'searchable', type: 'boolean'
+
+  @attribute 'hiddenSize', type: 'number', observe: true
+
+  @attribute 'maxListSize', type: 'number', default: 20
+
+  _connected: ->
+    @searchField = @jq.find('.search-field')
+    @_bind()
+
+  _disconnected: ->
+    @off()
+
+  _bind: ->
+    @on 'input', '.search-field', _.debounce (e) =>
+      val = @searchField.val()
+      @searching = !!val
+      @trigger 'search', [val]
+    , 200
+
+    @on 'click', '.option', (e) =>
+      $option = $ e.currentTarget
+      option = $option.data('option')
+      @trigger('selectOption', [option]) if option
+      null
+
+  _hiddenSizeChanged: ->
+    @jq.find('.tips .size').text(@hiddenSize)
+
+  _refreshScrollPosition: ->
+    @_reflow()
+    @jq.find('.list-wrapper').scrollTop 0
+
+  setOptions: (options, totalSize) ->
+    @options = options.slice 0, @maxListSize
+    @hiddenSize = (totalSize || @options.length) - @options.length
+    $list = @jq.find('.options-list').empty()
+
+    if @options.length > 0
+      @empty = false
+
+      @_lastRenderGroup = null
+      for option in @options
+        if option.data.group && @_lastRenderGroup != option.data.group
+          @_lastRenderGroup = option.data.group
+          $list.append @_renderGroup(option.data.group)
+        $list.append @_renderOption(option)
+
+      @_refreshScrollPosition()
+    else
+      @empty = true
+
+  _renderGroup: (name) ->
+    $('<div>', class: 'optgroup').text(name)
+
+  _renderOption: (option) ->
+    $option = $("""
+      <div class="option">
+        <span class="name"></span>
+        <span class="hint"></span>
+      </div>
+    """).data('option', option)
+    $option.find('.name').text(option.data.label || option.text)
+    $option.find('.hint').text(option.data.hint) if option.data.hint
+    $option.attr 'data-value', option.value
+    $option
+
+  reset: ->
+    @searchField.val ''
+    @searching = false
+    @trigger 'search', ['']

data/lib/assets/javascripts/tao/form/shared/fields/select/models/data_provider.coffee

@@ -0,0 +1,75 @@
+
+Option = Tao.Form.Select.Option
+
+class Tao.Form.Select.DataProvider extends TaoModule
+
+  @option 'remote', default: false
+
+  @option 'field'
+
+  _init: ->
+    @options = @field.find('option').map (i, optionEl) =>
+      Option.fromElement optionEl
+    .get()
+
+    @field.on 'addOption', (e, option) =>
+      if option.data?.group
+        index = _.findIndex @options, (opt) -> opt.data?.group == option.data?.group
+        @options.splice index, 0, option
+      else
+        @options.unshift option
+
+  getOption: (value) ->
+    return value if value instanceof Option
+    return null if _.isNull(value) || _.isUndefined(value)
+
+    result = @options.filter (option) -> option.value == value
+    if result.length > 0 then result[0] else null
+
+  filter: (value, callback) ->
+    if @remote && @options.length < @remote.totalOptionSize
+      if value
+        @_fetch value, callback
+      else
+        callback? @options, @remote.totalOptionSize
+    else
+      options = @options.filter (option) -> option.match(value)
+      callback? options
+
+    null
+
+  _fetch: (value, callback) ->
+    return unless @remote && @remote.url
+
+    $.ajax
+      url: @remote.url
+      data: _.extend {}, @remote.params,
+        "#{@remote.searchKey}": value
+      dataType: 'json'
+    .done (result) ->
+      options = if _.isArray(result.options) && result.options.length > 0 && _.isArray(result.options[0])
+        result.options.reduce (opts, group) ->
+          return unless _.isArray(group) && group.length > 1 && _.isArray(group[1])
+          group[1].forEach (opt) ->
+            opts.push Option.fromJson(opt, group[0])
+          opts
+        , []
+      else if _.isPlainObject(result.options)
+        _.flatten(
+          for groupName, opts of result.options
+            Option.fromJson(opt, groupName) for opt in opts
+        )
+      else if _.isArray result.options
+        (Option.fromJson(option) for option in result.options)
+      else
+        []
+
+      callback? options, result.totalSize
+
+  unselectedOptions: (options = @options) ->
+    options.filter (option) =>
+      value = @field.val()
+      if _.isArray(value)
+        !(option.value in value)
+      else
+        option.value != value

data/lib/assets/javascripts/tao/form/shared/fields/select/models/index.coffee

@@ -0,0 +1,2 @@
+#= require ./option
+#= require ./data_provider

data/lib/assets/javascripts/tao/form/shared/fields/select/models/option.coffee

@@ -0,0 +1,37 @@
+
+# instance of this class should be immutable
+
+class Tao.Form.Select.Option extends TaoModule
+
+  @option 'text', 'value', 'data'
+
+  @fromElement: (element) ->
+    $element = $ element
+    return unless (value = $element.val()) && !$element.is(':disabled')
+
+    data = $element.data()
+    data.group = $element.parent('optgroup').prop('label') if $element.parent('optgroup').length
+
+    new @
+      text: $element.text()
+      value: value
+      data: data
+
+  @fromJson: (json, group) ->
+    data = if json.length > 2 then json[2] else {}
+    data.group = group if group
+
+    new @
+      text: json[0]
+      value: json[1]
+      data: data
+
+  _init: ->
+    if @data
+      @data[_.camelCase key.replace(/^data-/, '')] = value for key, value of @data
+    else
+      @data = {}
+
+  match: (value) ->
+    filterKey = @data.searchKey || @text
+    String(filterKey).toLowerCase().indexOf(value.toLowerCase()) > -1

data/lib/assets/javascripts/tao/form/shared/fields/select/multiple_result/base.coffee

@@ -0,0 +1,81 @@
+
+class Tao.Form.Select.MultipleResultBase extends TaoComponent
+
+  @tag 'tao-multiple-select-result'
+
+  @attribute 'selected', type: 'boolean'
+
+  @attribute 'disabled', type: 'boolean', observe: true
+
+  _connected: ->
+    @field = @jq.find 'select'
+    @selectedOption = []
+    @_bind()
+
+  _disconnected: ->
+    @off()
+
+  _bind: ->
+    @on 'click', 'select', =>
+      @trigger 'activeClick'
+      false
+
+    @on 'click', '.selected-item', (e) =>
+      return if @disabled
+      $option = $ e.currentTarget
+      option = $option.data 'option'
+      @unselectOption option
+      @trigger 'unselectOption', [option]
+      false
+
+  selectOption: (option) ->
+    return false unless option && !(option in @selectedOption)
+
+    unless @jq.find(".selected-item[data-value='#{option.value}']").length > 0
+      $item = @_generateItem(option)
+      if @selectedOption.length > 0
+        @jq.find('.selected-item:last').after $item
+      else
+        @jq.prepend $item
+
+    @selectedOption.push option
+    @_setSelectedOption option
+    @selected = true
+    true
+
+  unselectOption: (option) ->
+    return false unless option && option in @selectedOption
+    @jq.find(".selected-item[data-value='#{option.value}']").remove()
+    _.remove @selectedOption, (opt) -> opt.value == option.value
+    @_setUnselectedOption option
+    @selected = false if @selectedOption.length == 0
+    true
+
+  _setSelectedOption: (option) ->
+    return unless option
+    $option = @field.find("option[value='#{option.value}']")
+    $option = @_generateOption(option) unless $option.length > 0
+    $option.prop 'selected', true
+
+  _setUnselectedOption: (option) ->
+    return unless option
+    $option = @field.find("option[value='#{option.value}']")
+    $option.prop 'selected', false
+
+  _generateOption: (option) ->
+    $option = $('<option>', test: option.text, value: option.value).appendTo(@field)
+    @field.trigger 'addOption', option, $option
+    $option
+
+  _generateItem: (option) ->
+    $item = $("""
+      <a href="javascript:;" class="selected-item" tabindex="-1">
+        <span class="name"></span>
+      </a>
+    """)
+
+    $item.append Tao.iconTag('close')
+    $item.attr 'data-value', option.value
+      .data 'option', option
+      .find('.name').text option.text
+    $item

data/lib/assets/javascripts/tao/form/shared/fields/select/result/base.coffee

@@ -0,0 +1,57 @@
+
+class Tao.Form.Select.ResultBase extends TaoComponent
+
+  @tag 'tao-select-result'
+
+  @attribute 'selected', 'clearable', type: 'boolean'
+
+  @attribute 'disabled', type: 'boolean', observe: true
+
+  _connected: ->
+    @field = @jq.find 'select'
+    @_bind()
+
+  _disconnected: ->
+    @off()
+
+  _bind: ->
+    @on 'click', 'select', =>
+      @trigger 'activeClick'
+      false
+
+    @on 'click', '.link-clear', (e) =>
+      return if @disabled
+      @clear() && @trigger('clear')
+      false
+
+  selectOption: (option) ->
+    return false unless option
+    @selectedOption = option
+    @selected = true
+    @_setSelectedOption option
+    @jq.find('.selected-text').text option.text
+    true
+
+  unselectOption: (option = @selectedOption) ->
+    return false unless option
+    @selectedOption = null
+    @selected = false
+    @_setSelectedOption false
+    @jq.find('.selected-text').text ''
+    true
+
+  _setSelectedOption: (option) ->
+    @field.find('option:selected').prop 'selected', false
+    return unless option
+
+    $option = @field.find("option[value='#{option.value}']")
+    $option = @_generateOption(option) unless $option.length > 0
+    $option.prop 'selected', true
+
+  _generateOption: (option) ->
+    $option = $('<option>', test: option.text, value: option.value).appendTo(@field)
+    @field.trigger 'addOption', option, $option
+    $option
+
+  clear: ->
+    @unselectOption()