tao_form 0.1.0

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

@@ -0,0 +1,41 @@
+#= require tao/form/shared/fields/select/multiple_result/base
+
+class Tao.Form.Select.MultipleResult extends Tao.Form.Select.MultipleResultBase
+
+  @attribute 'active', type: 'boolean'
+
+  _connected: ->
+    super
+    @linkAdd = @jq.find '.link-add'
+    @linkAdd.attr('tabindex', '0') unless @disabled
+
+  _bind: ->
+    super
+
+    @on 'click', '.link-add', (e) =>
+      return if @disabled
+      @trigger 'activeClick'
+      false
+
+    @on 'keydown', '.link-add', (e) =>
+      return if @disabled
+      if e.which == 13
+        @trigger 'enterPress'
+        false
+      else if e.which == 38
+        @trigger 'arrowPress', ['up']
+        false
+      else if e.which == 40
+        @trigger 'arrowPress', ['down']
+        false
+
+  _disabledChanged: ->
+    if @disabled
+      @linkAdd.removeAttr 'tabindex'
+    else
+      @linkAdd.attr 'tabindex', '0'
+
+  focus: ->
+    @linkAdd.focus()
+
+TaoComponent.register Tao.Form.Select.MultipleResult

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

@@ -0,0 +1,39 @@
+#= require tao/form/shared/fields/select/result/base
+
+class Tao.Form.Select.Result extends Tao.Form.Select.ResultBase
+
+  @attribute 'active', type: 'boolean'
+
+  _connected: ->
+    super
+    @jq.attr('tabindex', '0') unless @disabled
+
+  _bind: ->
+    super
+
+    @on 'click', (e) =>
+      return if @disabled
+      @trigger 'activeClick'
+
+    @on 'keydown', (e) =>
+      return if @disabled
+      if e.which == 13
+        @trigger 'enterPress'
+        false
+      else if e.which == 8 || e.which == 46
+        @clear() && @trigger('clear')
+        false
+      else if e.which == 38
+        @trigger 'arrowPress', ['up']
+        false
+      else if e.which == 40
+        @trigger 'arrowPress', ['down']
+        false
+
+  _disabledChanged: ->
+    if @disabled
+      @jq.removeAttr 'tabindex'
+    else
+      @jq.attr 'tabindex', '0'
+
+TaoComponent.register Tao.Form.Select.Result

data/lib/assets/javascripts/tao/form/fields/switch.coffee

@@ -0,0 +1,14 @@
+#= require tao/form/shared/fields/switch
+
+class Tao.Form.Switch extends Tao.Form.SwitchBase
+
+  _bind: ->
+    super
+
+    @on 'keydown', '.switch-wrapper', (e) =>
+      return unless e.which == 13 && @field.is(':enabled')
+      @_toggleChecked()
+      @trigger 'change'
+      false
+
+TaoComponent.register Tao.Form.Switch

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

@@ -0,0 +1,17 @@
+#= require moment
+#= require moment/zh-cn
+#= require tao/ui
+#= require tao/ui/icons/form
+#= require_self
+#= require ./element
+#= require ./fields
+
+Tao.Form =
+  Mixins: {}
+
+Tao.Application.initializer 'moment', (app) ->
+  if moment? && app.locale
+    moment.locale(app.locale.toLowerCase())
+
+  if moment?.tz? && app.timeZone
+    moment.tz.setDefault(app.timeZone)

data/lib/assets/javascripts/tao/form/mobile/element.coffee

@@ -0,0 +1,5 @@
+#= require tao/form/shared/element/base
+
+class Tao.Form.Element extends Tao.Form.ElementBase
+
+TaoComponent.register Tao.Form.Element

data/lib/assets/javascripts/tao/form/mobile/fields/checkbox.coffee

@@ -0,0 +1,5 @@
+#= require tao/form/shared/fields/checkbox
+
+class Tao.Form.Checkbox extends Tao.Form.CheckboxBase
+
+TaoComponent.register Tao.Form.Checkbox

data/lib/assets/javascripts/tao/form/mobile/fields/index.coffee

@@ -0,0 +1,9 @@
+#= require ./checkbox
+#= require ./switch
+#= require ./radio
+#= require ./select
+#= require ./moment_picker
+#= require tao/form/shared/fields/date_picker
+#= require tao/form/shared/fields/time_picker
+#= require tao/form/shared/fields/datetime_picker
+#= require tao/form/shared/fields/month_picker

data/lib/assets/javascripts/tao/form/mobile/fields/moment_picker/element.coffee

@@ -0,0 +1,36 @@
+#= require tao/form/shared/fields/moment_picker/element/base
+
+class Tao.Form.MomentPicker.Element extends Tao.Form.MomentPicker.ElementBase
+
+  _connected: ->
+    @slideBox = @findComponent '.slide-box'
+    super
+
+  _bind: ->
+    super
+
+    @on 'click', '.header .link-close', (e) =>
+      @active = false
+      null
+
+    @on 'click', '.header .button-confirm', (e) =>
+      @active = false
+      @setMoment moment(@segmentList.momentData)
+      null
+
+    @on 'clear', 'tao-moment-picker-segment-list', (e) =>
+      return if @disabled
+      @active = false
+      @setMoment null
+      @trigger 'change', [@moment]
+      null
+
+  _activeChanged: ->
+    @slideBox.active = @active
+    if @active
+      @segmentList.setMoment @moment
+      @segmentList.clearable = !!@moment
+      @segmentList.refreshHeight()
+
+
+TaoComponent.register Tao.Form.MomentPicker.Element

data/lib/assets/javascripts/tao/form/mobile/fields/moment_picker/index.coffee

@@ -0,0 +1,7 @@
+#= require_self
+#= require tao/form/shared/fields/moment_picker/segments
+#= require ./element
+#= require ./result
+#= require ./segment_list
+
+Tao.Form.MomentPicker = {}

data/lib/assets/javascripts/tao/form/mobile/fields/moment_picker/result.coffee

@@ -0,0 +1,5 @@
+#= require tao/form/shared/fields/moment_picker/result/base
+
+class Tao.Form.MomentPicker.Result extends Tao.Form.MomentPicker.ResultBase
+
+TaoComponent.register Tao.Form.MomentPicker.Result

data/lib/assets/javascripts/tao/form/mobile/fields/moment_picker/segment_list.coffee

@@ -0,0 +1,24 @@
+#= require tao/form/shared/fields/moment_picker/segment_list/base
+
+MomentPicker = Tao.Form.MomentPicker
+
+class MomentPicker.SegmentList extends MomentPicker.SegmentListBase
+
+  @attribute 'clearable', type: 'boolean'
+
+  _bind: ->
+    super
+
+    @on 'click', '.link-clear', (e) =>
+      @trigger 'clear'
+      null
+
+  refreshHeight: ->
+    return unless @activeSegment
+    winHeight = $(window).height()
+    offsetTop = @activeSegment.getBoundingClientRect().top
+
+    @activeSegment.jq.css
+      height: winHeight - offsetTop
+
+TaoComponent.register Tao.Form.MomentPicker.SegmentList

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

@@ -0,0 +1,5 @@
+#= require tao/form/shared/fields/radio
+
+class Tao.Form.Radio extends Tao.Form.RadioBase
+
+TaoComponent.register Tao.Form.Radio

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

@@ -0,0 +1,61 @@
+#= require tao/form/shared/fields/select/element/base
+
+class Tao.Form.Select.Element extends Tao.Form.Select.ElementBase
+
+  _connected: ->
+    @slideBox = @findComponent '.slide-box'
+    super
+
+  _bind: ->
+    super
+
+    @on 'click', '.select-result-delegate', (e) =>
+      @_toggleActive()
+      null
+
+    @on 'click', '.header .link-close', (e) =>
+      @active = false
+      null
+
+    @on 'click', '.header .button-ok', (e) =>
+      @active = false
+      null
+
+    @on 'change', =>
+      @list.refreshHeight() if @active
+      @_refreshSelectedText()
+
+  _bindListEvents: ->
+    super
+
+    @on 'selectOption', '.select-list', (e, option) =>
+      if @multiple
+        @list.reset()
+      else
+        @active = false
+      null
+
+  _resultReady: ->
+    super
+    @_refreshSelectedText()
+
+  _refreshSelectedText: ->
+    text = if @multiple && @selectedOption.length > 0
+      @selectedOption.map (opt) ->
+        opt.text
+      .join ', '
+    else if @selectedOption
+      @selectedOption.text
+    else
+      ''
+
+    @jq.find('.select-result-delegate .selected-text').text text
+
+  _activeChanged: ->
+    @slideBox.active = @active
+    if @active
+      @list.refreshHeight()
+    else
+      @list.reset()
+
+TaoComponent.register Tao.Form.Select.Element

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

@@ -0,0 +1,8 @@
+#= require_self
+#= require tao/form/shared/fields/select/models
+#= require ./result
+#= require ./multiple_result
+#= require ./list
+#= require ./element
+
+Tao.Form.Select = {}

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

@@ -0,0 +1,13 @@
+#= require tao/form/shared/fields/select/list/base
+
+class Tao.Form.Select.List extends Tao.Form.Select.ListBase
+
+  refreshHeight: ->
+    $listWrapper = @jq.find('.list-wrapper')
+    winHeight = $(window).height()
+    offsetTop = $listWrapper[0].getBoundingClientRect().top
+
+    $listWrapper.css
+      height: winHeight - offsetTop
+
+TaoComponent.register Tao.Form.Select.List

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

@@ -0,0 +1,5 @@
+#= require tao/form/shared/fields/select/multiple_result/base
+
+class Tao.Form.Select.MultipleResult extends Tao.Form.Select.MultipleResultBase
+
+TaoComponent.register Tao.Form.Select.MultipleResult

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

@@ -0,0 +1,5 @@
+#= require tao/form/shared/fields/select/result/base
+
+class Tao.Form.Select.Result extends Tao.Form.Select.ResultBase
+
+TaoComponent.register Tao.Form.Select.Result

data/lib/assets/javascripts/tao/form/mobile/fields/switch.coffee

@@ -0,0 +1,5 @@
+#= require tao/form/shared/fields/switch
+
+class Tao.Form.Switch extends Tao.Form.SwitchBase
+
+TaoComponent.register Tao.Form.Switch

data/lib/assets/javascripts/tao/form/mobile/index.coffee

@@ -0,0 +1,10 @@
+#= require moment
+#= require moment/zh-cn
+#= require tao/ui/mobile
+#= require tao/ui/icons/form
+#= require_self
+#= require ./element
+#= require ./fields
+
+Tao.Form =
+  Mixins: {}

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

@@ -0,0 +1,48 @@
+class Tao.Form.ElementBase extends TaoComponent
+
+  @tag 'tao-form'
+
+  @attribute 'successMessage'
+
+  _connected: ->
+    @_bind()
+
+  _bind: ->
+    @on 'ajax:beforeSend', '> form', (e) =>
+      @_clearErrors()
+      @trigger 'beforeSubmit'
+
+    @on 'ajax:success', '> form', (e) =>
+      @_showSuccessMessage()
+      @trigger 'success'
+
+  _disconnected: ->
+    @off()
+
+  _clearErrors: ->
+    @jq.find('.input-with-errors').each (i, input) =>
+      @_clearError input
+
+  _clearError: (input) ->
+    $(input).removeClass('input-with-errors')
+      .find('.error').remove()
+
+  _showSuccessMessage: ->
+    return unless @successMessage
+
+    $button = @jq.find('button[data-disable-with]:disabled, input[data-disable-with]:disabled')
+    $message = $('<div>')
+      .addClass('success-message')
+      .append([Tao.iconTag('success'), @successMessage])
+      .insertAfter $button.hide()
+
+    @_successTimer = setTimeout =>
+      $button.show()
+      $message.remove()
+    , 3000
+
+  beforeCache: ->
+    super
+    clearTimeout @_successTimer
+    @jq.find('.success-message').remove()
+    @jq.find('button[data-disable-with]:hidden, input[data-disable-with]:hidden').show()

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

@@ -0,0 +1,21 @@
+#= require tao/form/shared/mixins/checkable
+
+class Tao.Form.CheckboxBase extends TaoComponent
+
+  @include Tao.Form.Mixins.Checkable
+
+  @tag 'tao-check-box'
+
+  _connected: ->
+    @field = @jq.find('input:checkbox')
+    @_bind()
+
+  _bind: ->
+    @on 'click', '.checkbox-wrapper', (e) =>
+      if @field.is(':enabled')
+        @_toggleChecked()
+        @trigger 'change'
+      false
+
+  _disconnected: ->
+    @off()

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

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

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

@@ -0,0 +1,62 @@
+
+class Tao.Form.DatetimePicker extends TaoComponent
+
+  @tag 'tao-datetime-picker'
+
+  @attribute 'valueFormat', default: 'YYYY-MM-DDTHH:mm:ss'
+
+  @attribute 'dateValueFormat', default: 'YYYY-MM-DD'
+
+  @attribute 'dateDisplayFormat', default: 'YYYY-MM-DD'
+
+  @attribute 'timeValueFormat', default: 'HH:mm'
+
+  @attribute 'timeDisplayFormat', default: 'HH:mm'
+
+  _connected: ->
+    @field = @jq.find '> input'
+    datePickerDeferred = $.Deferred()
+    timePickerDeferred = $.Deferred()
+
+    @datePicker = @findComponent 'tao-date-picker', =>
+      datePickerDeferred.resolve()
+
+    @timePicker = @findComponent 'tao-time-picker', =>
+      timePickerDeferred.resolve()
+
+    $.when datePickerDeferred, timePickerDeferred
+      .done => @_initMoment()
+
+    @_bind()
+
+  _bind: ->
+    @on 'change', '.moment-picker', (e, m) =>
+      @_syncMoment()
+
+  _initMoment: ->
+    m = moment @field.val(), @valueFormat
+
+    if m && m.isValid()
+      @datePicker.setMoment m.format(@dateValueFormat)
+      @timePicker.setMoment m.format(@timeValueFormat)
+      @moment = m
+    else
+      @moment = null
+
+  _syncMoment: ->
+    if @datePicker.moment
+      dateValue = @datePicker.moment.format(@dateValueFormat)
+      timeValue = if @timePicker.moment
+        @timePicker.moment.format(@timeValueFormat)
+      else
+        moment().startOf('day').format(@timeValueFormat)
+
+      value = _.trim "#{dateValue} #{timeValue}"
+      m = moment value, "#{@dateValueFormat} #{@timeValueFormat}"
+      @field.val m.format(@valueFormat)
+      @moment = m
+    else
+      @field.val ''
+      @moment = null
+
+TaoComponent.register Tao.Form.DatetimePicker