Misc. form UI utilities in coffeescript

contingent_fieldset.coffee

# Toggles element visibility and nested values based on another elements state

class ContingetFieldset
  constructor: (options) ->
    @container = $("#{options.container}")
    @changer   = $("#{options.changer}")
    @trigger   = $("#{options.trigger}")
    @must_be   = options.must_be
    @event     = options.event || 'change'

    @showHideFields()
    @changer.on @event, =>
      @showHideFields()

  showHideFields: ->
    if @trigger.is("#{@must_be}")
      @container.show()
    else
      @container.hide()
      @container.find("input:not([type='submit'], [type='hidden']), textarea, select").each (i, el) ->
        $(el).val ''

    $(window).trigger 'contingentFieldChange'
    
# Example uses

drink_details = new ContingetFieldset
  container: 'fieldset.beverage-details'        # this element will be shown if `trigger` is :checked
  changer:   "input[name='are_you_a_drinker']"
  trigger:   'input#totally_a_drinker'
  must_be:   ':checked'
  
upload_form = new ContingetFieldset
  container: '#uploader'
  changer:   "a.upload-toggle"
  trigger:   'a.upload-toggle'
  must_be:   '.active'
  event:     'click' 

set_tab_indexes.coffee

# Set keyboard tab order down the page. Useful to call when new form elements are added to a page

set_tab_indexes = ->
  $(window).keydown (e) ->
    if e.keyCode == 32
      if $(e.target).is('a')
        e.preventDefault()
        $(e.target).trigger 'click'

  index = 1
  for item in $('input, select, .radio-button-toggle, textarea')

    #handle text inputs
    if $(item).is('input') && $(item).attr('type') != 'hidden' && $(item).attr('type') != 'radio'
      $(item).attr 'tabindex', index
      index++

    #handle textareas
    if $(item).is('textarea')
      $(item).attr 'tabindex', index
      index++

    #handle selects
    if $(item).is('select') && $(item).attr('type') != 'hidden'
      $(item).attr 'tabindex', index
      index++
      
    #handle radio replacements
    if $(item).hasClass('radio-button-toggle')
      list_items = $(item).find('li')
      for list_item in list_items
        $(list_item).find('a').attr 'tabindex', index
        index++

totals_calc.coffee

# Form input numeric total calculator - Totals values of inputs together and prints to an element

class TotalsCalculator
  values:     []
  sum:        0
  total_el:  '.total'
  
  constructor: (options)->
    @parent    = options.inputs_container
    @container = options.output_container
    @inputs    = options.inputs
    @range     = options.range

    $(window).on 'contingentFieldChange', =>
      @setValues()
      @calculateTotal()

    $(@parent).on 'keyup', $(@inputs), (event) =>
      @setValues()
      @calculateTotal()
    @setValues()
    @calculateTotal()

  setValues: ->
    @values = []
    $(@parent).find(@inputs).each (i, el) =>
      val = $(el).val()
      val = val.replace(/,/g,'').replace('$','').replace(' ', '')
      if val == ''
        val = 0      
      val = parseInt(val)
      if $(el).data('subtract') == true
        val = -val
      @values.push val

  calculateTotal: () ->
    @sum = 0
    for val in @values
      @sum += parseInt(val)
    @handleValidation()
    @printToView()

  handleValidation: ->
    if @range
      if @sum < @range[0] || @sum > @range[1]
        $(@container).addClass 'error'
      else
        $(@container).removeClass 'error'    

  printToView: ->
    sum = @sum.formatMoney(0, '.', ',')
    $(@container).find("#{@total_el}").text "#{sum}"
    
    
# Example use

personal_worth = new TotalsCalculator
  inputs_container: 'fieldset.personal'
  output_container: '.total-worth'
  inputs: '.dollar'