tao_form 0.1.0

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

@@ -0,0 +1,52 @@
+
+class Tao.Form.MomentPicker.ElementBase extends TaoComponent
+
+  @attribute 'valueFormat', 'displayFormat'
+
+  @attribute 'active', 'disabled', type: 'boolean', observe: true
+
+  _connected: ->
+    @result = @findComponent 'tao-moment-picker-result', =>
+      @field = @result.field
+      @result.format = @displayFormat
+      @setMoment @field.val()
+    @segmentList = @findComponent 'tao-moment-picker-segment-list'
+
+    @_bind()
+
+  _disconnected: ->
+    @off()
+
+  _bind: ->
+    @on 'activeClick', 'tao-moment-picker-result', (e) =>
+      return if @disabled
+      @_toggleActive()
+      null
+
+    @on 'clear', 'tao-moment-picker-result', (e) =>
+      return if @disabled
+      @active = false
+      @setMoment null
+      @trigger 'change', [@moment]
+      null
+
+    @on 'momentSelect', 'tao-moment-picker-segment-list', (e, m) =>
+      @active = false
+      @setMoment m
+      @trigger 'change', [@moment]
+      null
+
+  _toggleActive: ->
+    @active = !@active
+
+  setMoment: (m) ->
+    m = moment(m, @valueFormat) unless moment.isMoment(m)
+    if m && m.isValid()
+      @result.setMoment m
+      @field.val m.format(@valueFormat)
+      @moment = m
+    else
+      @result.setMoment null
+      @field.val ''
+      @moment = null
+    @moment

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

@@ -0,0 +1,39 @@
+
+class Tao.Form.MomentPicker.ResultBase extends TaoComponent
+
+  @tag 'tao-moment-picker-result'
+
+  @attribute 'selected', type: 'boolean'
+
+  @attribute 'disabled', type: 'boolean', observe: true
+
+  @attribute 'format'
+
+  _connected: ->
+    @field = @jq.find '> input'
+    @_bind()
+
+  _disconnected: ->
+    @off()
+
+  _bind: ->
+    @on 'click', 'input', =>
+      @trigger 'activeClick'
+      false
+
+    @on 'click', (e) =>
+      return if @disabled
+      @trigger 'activeClick'
+
+  clear: ->
+    @moment = null
+    @selected = false
+    @jq.find('.result-text').text ''
+
+  setMoment: (m) ->
+    unless m && moment.isMoment(m)
+      @clear()
+      return
+    @moment = m
+    @selected = true
+    @jq.find('.result-text').text m.format(@format)

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

@@ -0,0 +1,85 @@
+
+class Tao.Form.MomentPicker.SegmentListBase extends TaoComponent
+
+  @tag 'tao-moment-picker-segment-list'
+
+  @attribute 'defaultSegment'
+
+  _connected: ->
+    @segments = @jq.find('.segment').get()
+    @momentData = null
+
+    @_bind()
+
+  _bind: ->
+    @on 'click', '.segment-label', (e) =>
+      segment = $(e.currentTarget).data('segment')
+      @_setActiveSegment segment
+      null
+
+    @on 'dataSelect', '.segment', (e, momentData) =>
+      @_setMomentData momentData
+      @_activateNextSegment()
+
+    @on 'dataRefresh', '.segment', (e, momentData) =>
+      @_setMomentData momentData
+
+  setMoment: (m) ->
+    m = null unless m && moment.isMoment(m)
+    momentData = {}
+
+    @segments.forEach (segment) ->
+      momentData[segment.segmentName] = if m
+        m[segment.segmentName]()
+      else
+        null
+
+    @_setActiveSegment @defaultSegment
+    @_setMomentData momentData
+    m
+
+  _findSegmentLabel: (segment) ->
+    segment = @_findSegment(segment) if typeof segment == 'string'
+    @jq.find(".segment-label[data-segment='#{segment.segmentName}']")
+
+  _findSegment: (segmentName) ->
+    if segmentName instanceof Tao.Form.MomentPicker.SegmentBase
+      return segmentName
+    _.find @segments, (segment) -> segment.segmentName == segmentName
+
+  _setMomentData: (momentData) ->
+    for segment in @segments
+      break if segment.setMomentData(_.clone(momentData)) == false
+      $label = @_findSegmentLabel(segment)
+      if !_.isNil segment.value()
+        $label.addClass 'selected'
+          .find('.value').text segment.label()
+      else
+        $label.removeClass 'selected'
+          .find('.value').text ''
+
+    @momentData = momentData
+
+  _setActiveSegment: (segment) ->
+    segment = @_findSegment(segment) if typeof segment == 'string'
+    return if segment == @activeSegment
+
+    if @activeSegment
+      @_findSegmentLabel(@activeSegment).removeClass 'active'
+      @activeSegment.active = false
+
+    @_findSegmentLabel(segment).addClass 'active'
+    segment.active = true
+    @activeSegment = segment
+
+  _activateNextSegment: ->
+    segment = _.find @segments, (s) => _.isNil @momentData[s.segmentName]
+    if segment
+      @_setActiveSegment segment
+    else if @activeSegment
+      if ($segment = @activeSegment.jq.next('.segment')).length > 0
+        @_setActiveSegment $segment.get(0)
+      else
+        @trigger 'momentSelect', [moment @momentData]
+    else
+      @_setActiveSegment @segments[0]

data/lib/assets/javascripts/tao/form/shared/fields/moment_picker/segments/base.coffee

@@ -0,0 +1,25 @@
+
+class Tao.Form.MomentPicker.SegmentBase extends TaoComponent
+
+  @attribute 'labelFormat'
+
+  @attribute 'active', type: 'boolean'
+
+  segmentName: ''
+
+  _connected: ->
+    @momentData = {}
+    @_bind()
+
+  _bind: ->
+
+  setMomentData: (momentData) ->
+    @momentData = momentData
+
+  value: ->
+    @momentData[@segmentName]
+
+  label: ->
+    format = @labelFormat || "{{ #{@segmentName} }}"
+    compiled = _.template(format, interpolate: /{{([\s\S]+?)}}/g)
+    compiled @momentData

data/lib/assets/javascripts/tao/form/shared/fields/moment_picker/segments/date_segment.coffee

@@ -0,0 +1,95 @@
+#= require ./base
+
+MomentPicker = Tao.Form.MomentPicker
+
+class MomentPicker.DateSegment extends MomentPicker.SegmentBase
+
+  @tag 'tao-moment-picker-date-segment'
+
+  segmentName: 'date'
+
+  dateFormat: 'YYYY-MM-DD'
+
+  _connected: ->
+    super
+    @momentData = {}
+    @_renderWeekdays()
+
+  _bind: ->
+    @on 'click', '.day', (e) =>
+      $day = $ e.currentTarget
+      date = moment $day.data('date'), @dateFormat
+      momentData = _.clone @momentData
+      momentData.year = date.year()
+      momentData.month = date.month()
+      momentData.date = date.date()
+      @trigger 'dataSelect', [momentData]
+
+    @on 'click', '.link-prev-month, .link-next-month', (e) =>
+      month = if $(e.currentTarget).is('.link-prev-month')
+        moment(@momentData).subtract(1, 'month')
+      else
+        moment(@momentData).add(1, 'month')
+
+      momentData = _.clone @momentData
+      momentData.year = month.year()
+      momentData.month = month.month()
+      momentData.date = null
+      @trigger 'dataRefresh', [momentData]
+
+  setMomentData: (momentData) ->
+    if @active && (_.isNil(momentData['year']) || _.isNil(momentData['month']))
+      now = moment()
+      momentData.year = now.year()
+      momentData.month = now.month()
+      momentData.date = null
+      @trigger 'dataRefresh', [momentData]
+      return false
+    else if @momentData && momentData &&
+        momentData['year'] == @momentData['year'] &&
+        momentData['month'] == @momentData['month']
+      @_renderDate momentData
+    else
+      @_renderCalendar momentData
+
+    super
+
+  _renderDate: (momentData = @momentData) ->
+    @jq.find('.day.selected').removeClass('selected')
+
+    date = moment(momentData)
+    return if _.isNil(momentData[@segmentName]) || !date.isValid()
+    @jq.find(".day[data-date='#{date.format(@dateFormat)}']")
+      .addClass('selected')
+
+  _renderCalendar: (momentData = @momentData) ->
+    $days = @jq.find('.days').empty()
+    date = moment(momentData).startOf('day')
+    startDate = date.clone().startOf('month').startOf('week')
+    endDate = date.clone().endOf('month').endOf('week')
+    while startDate.isSameOrBefore(endDate)
+      $day = $ '<a>',
+        href: 'javascript:;'
+        class: 'day'
+        'data-date': startDate.format(@dateFormat)
+        text: startDate.format('D')
+
+      $day.addClass('outside') unless startDate.month() == date.month()
+      $day.addClass('today') if startDate.isSame(moment().startOf('day'))
+      if startDate.date() == momentData['date'] &&
+          startDate.month() == momentData['month']
+        $day.addClass('selected')
+
+      weekdays = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']
+      $day.addClass weekdays[startDate.day()]
+        .appendTo $days
+      startDate.add 1, 'days'
+
+  _renderWeekdays: ->
+    $head = @jq.find('.weekdays')
+    $.each moment.weekdaysMin(true), (i, weekdayName) ->
+      $('<span>', class: 'weekday', text: weekdayName)
+        .appendTo $head
+
+
+TaoComponent.register MomentPicker.DateSegment

data/lib/assets/javascripts/tao/form/shared/fields/moment_picker/segments/hour_segment.coffee

@@ -0,0 +1,28 @@
+#= require ./base
+
+MomentPicker = Tao.Form.MomentPicker
+
+class MomentPicker.HourSegment extends MomentPicker.SegmentBase
+
+  @tag 'tao-moment-picker-hour-segment'
+
+  segmentName: 'hour'
+
+  _bind: ->
+    @on 'click', '.hour', (e) =>
+      $hour = $ e.currentTarget
+      momentData = _.clone @momentData
+      momentData.hour = $hour.data 'hour'
+      @trigger 'dataSelect', [momentData]
+
+  setMomentData: (momentData) ->
+    super
+    @_render()
+    @momentData
+
+  _render: ->
+    @jq.find('.hour.selected').removeClass 'selected'
+    unless _.isNil @value()
+      @jq.find(".hour[data-hour='#{@value()}']").addClass 'selected'
+
+TaoComponent.register MomentPicker.HourSegment

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

@@ -0,0 +1 @@
+#= require_tree ./

data/lib/assets/javascripts/tao/form/shared/fields/moment_picker/segments/minute_segment.coffee

@@ -0,0 +1,28 @@
+#= require ./base
+
+MomentPicker = Tao.Form.MomentPicker
+
+class MomentPicker.MinuteSegment extends MomentPicker.SegmentBase
+
+  @tag 'tao-moment-picker-minute-segment'
+
+  segmentName: 'minute'
+
+  _bind: ->
+    @on 'click', '.minute', (e) =>
+      $minute = $ e.currentTarget
+      momentData = _.clone @momentData
+      momentData.minute = $minute.data 'minute'
+      @trigger 'dataSelect', [momentData]
+
+  setMomentData: (momentData) ->
+    super
+    @_render()
+    @momentData
+
+  _render: ->
+    @jq.find('.minute.selected').removeClass 'selected'
+    unless _.isNil @value()
+      @jq.find(".minute[data-minute='#{@value()}']").addClass 'selected'
+
+TaoComponent.register MomentPicker.MinuteSegment

data/lib/assets/javascripts/tao/form/shared/fields/moment_picker/segments/month_segment.coffee

@@ -0,0 +1,46 @@
+#= require ./base
+
+MomentPicker = Tao.Form.MomentPicker
+
+class MomentPicker.MonthSegment extends MomentPicker.SegmentBase
+
+  @tag 'tao-moment-picker-month-segment'
+
+  segmentName: 'month'
+
+  _bind: ->
+    @on 'click', '.month', (e) =>
+      $month = $ e.currentTarget
+      momentData = _.clone @momentData
+      momentData.month = $month.data 'month'
+      momentData.date = null
+      @trigger 'dataSelect', [momentData]
+
+    @on 'click', '.link-prev-year, .link-next-year', (e) =>
+      momentData = _.clone @momentData
+      if $(e.currentTarget).is('.link-prev-year')
+        momentData['year'] -= 1
+      else
+        momentData['year'] += 1
+      momentData.date = null
+      @trigger 'dataRefresh', [momentData]
+
+  setMomentData: (momentData) ->
+    super
+    @_render()
+    @momentData
+
+  _render: ->
+    @jq.find('.month.selected').removeClass 'selected'
+    @jq.find('.month.current').removeClass 'current'
+    unless _.isNil @value()
+      @jq.find(".month[data-month='#{@value()}']").addClass 'selected'
+
+    now = moment()
+    if @momentData['year'] == now.year()
+      @jq.find(".month[data-month='#{now.month()}']").addClass 'current'
+
+  label: ->
+    moment.monthsShort()[@value() * 1]
+
+TaoComponent.register MomentPicker.MonthSegment

data/lib/assets/javascripts/tao/form/shared/fields/moment_picker/segments/year_segment.coffee

@@ -0,0 +1,57 @@
+#= require ./base
+
+MomentPicker = Tao.Form.MomentPicker
+
+class MomentPicker.YearSegment extends MomentPicker.SegmentBase
+
+  @tag 'tao-moment-picker-year-segment'
+
+  segmentName: 'year'
+
+  _bind: ->
+    @on 'click', '.year', (e) =>
+      $year = $ e.currentTarget
+      momentData = _.clone @momentData
+      momentData.year = $year.data 'year'
+      momentData.month = null
+      momentData.date = null
+      @trigger 'dataSelect', [momentData]
+
+    @on 'click', '.link-prev-years, .link-next-years', (e) =>
+      momentData = _.clone @momentData
+      if $(e.currentTarget).is('.link-prev-years')
+        momentData['year'] -= 9
+      else
+        momentData['year'] += 9
+      momentData.month = null
+      momentData.date = null
+      @trigger 'dataRefresh', [momentData]
+
+  setMomentData: (momentData) ->
+    super
+
+    if _.isNil @value()
+      momentData.year = moment().year()
+      @trigger 'dataRefresh', [momentData]
+      return false
+
+    @_render()
+
+  _render: ->
+    $yearList = @jq.find('.year-list').empty()
+
+    start = @value() - 4
+    end = @value() + 4
+    currentYear = moment().year()
+    for year in [start..end]
+      $year = $ '<a>',
+        href: 'javascript:;'
+        class: 'year'
+        'data-year': year
+        text: year
+
+      $year.addClass('current') if year == currentYear
+      $year.addClass('selected') if year == @value()
+      $year.appendTo $yearList
+
+TaoComponent.register MomentPicker.YearSegment