chr 0.1.0

data/app/assets/javascripts/chr/form/_inputCheckbox.coffee

@@ -0,0 +1,70 @@
+# -----------------------------------------------------------------------------
+# INPUT CHECKBOX
+# -----------------------------------------------------------------------------
+class @InputCheckbox extends InputString
+  _safeValue: ->
+    if not @value or @value == 'false' or @value == 0 or @value == '0'
+      return false
+    else
+      return true
+
+  _addInput: ->
+    # NOTE: for boolean checkbox to be serialized correctly we need a hidden false
+    #       value which is used by default and overriden by checked value
+    @$false_hidden_input =$ "<input type='hidden' name='#{ @name }' value='false' />"
+    @$el.append @$false_hidden_input
+
+    @$input =$ "<input type='checkbox' name='#{ @name }' id='#{ @name }' value='true' #{ if @_safeValue() then 'checked' else '' } />"
+    @$el.append @$input
+
+  #
+  # PUBLIC
+  #
+
+  constructor: (@name, @value, @config, @object) ->
+    @$el =$ "<label for='#{ @name }' class='input-#{ @config.type } input-#{ @config.klass } #{ @config.klassName }'>"
+
+    @_addInput()
+    @_addLabel()
+
+    return this
+
+  updateValue: (@value) ->
+    @$input.prop('checked', @_safeValue())
+
+  hash: (hash={}) ->
+    hash[@config.klassName] = @$input.prop('checked')
+    return hash
+
+_chrFormInputs['checkbox'] = InputCheckbox
+
+# -----------------------------------------------------------------------------
+# INPUT CHECKBOX SWITCH
+# -----------------------------------------------------------------------------
+class @InputCheckboxSwitch extends InputCheckbox
+  _addInput: ->
+    @$switch =$ "<div class='switch'>"
+    @$el.append @$switch
+
+    @$false_hidden_input =$ "<input type='hidden' name='#{ @name }' value='false' />"
+    @$switch.append @$false_hidden_input
+
+    @$input =$ "<input type='checkbox' name='#{ @name }' id='#{ @name }' value='true' #{ if @_safeValue() then 'checked' else '' } />"
+    @$switch.append @$input
+
+    @$checkbox =$ "<div class='checkbox'>"
+    @$switch.append @$checkbox
+
+  constructor: (@name, @value, @config, @object) ->
+    @$el =$ "<label for='#{ @name }' class='input-#{ @config.type } input-#{ @config.klass } #{ @config.klassName }'>"
+
+    @_addLabel()
+    @_addInput()
+
+    return this
+
+_chrFormInputs['switch'] = InputCheckboxSwitch
+
+
+
+

data/app/assets/javascripts/chr/form/_inputColor.coffee

@@ -0,0 +1,35 @@
+# -----------------------------------------------------------------------------
+# INPUT COLOR
+# -----------------------------------------------------------------------------
+class @InputColor extends InputString
+  _addColorPreview: ->
+    @$colorPreview =$ "<div class='preview'>"
+    @$el.append @$colorPreview
+
+  _updateColorPreview: ->
+    @$colorPreview.css { 'background-color': "##{ @$input.val() }" }
+
+  _validateInputValue: ->
+    if (/^(?:[0-9a-f]{3}){1,2}$/i).test(@$input.val())
+      @hideErrorMessage()
+    else
+      @showErrorMessage('Invalid hex value')
+
+  initialize: ->
+    @_addColorPreview()
+    @_updateColorPreview()
+
+    @$input.on 'change keyup',  (e) =>
+      @hideErrorMessage()
+      @_validateInputValue()
+      @_updateColorPreview()
+
+    @config.onInitialize?(this)
+
+
+_chrFormInputs['color'] = InputColor
+
+
+
+
+

data/app/assets/javascripts/chr/form/_inputFile.coffee

@@ -0,0 +1,82 @@
+# -----------------------------------------------------------------------------
+# INPUT FILE
+# -----------------------------------------------------------------------------
+class @InputFile extends InputString
+  _addInput: ->
+    @$el.addClass 'empty'
+    if @filename
+      @$link =$ "<a href='#{ @value.url }' target='_blank' title='#{ @filename }'>#{ @filename }</a>"
+      @$el.append @$link
+      @$el.removeClass 'empty'
+
+    @$input =$ "<input type='file' name='#{ @name }' id='#{ @name }' />"
+    @$el.append @$input
+
+  _addRemoveCheckbox: ->
+    # NOTE: this is Rails (CarrierWave) approach to remove files, might not be
+    #       generic, so we should consider to move it to store.
+    if @filename
+      removeInputName = @removeName()
+
+      @$removeLabel =$ "<label for='#{ removeInputName }'>Remove</label>"
+      @$link.after @$removeLabel
+
+      @$hiddenRemoveInput =$ "<input type='hidden' name='#{ removeInputName }' value='false'>"
+      @$removeInput       =$ "<input type='checkbox' name='#{ removeInputName }' id='#{ removeInputName }' value='true'>"
+
+      @$link.after @$removeInput
+      @$link.after @$hiddenRemoveInput
+
+  constructor: (@name, @value, @config, @object) ->
+    @$el =$ "<div class='input-#{ @config.type } input-#{ @config.klass } #{ @config.klassName }'>"
+
+    # NOTE: carrierwave filename workaround
+    @filename = null
+    if @value.url
+      @filename = _last(@value.url.split('/'))
+      if @filename == '_old_' then @filename = null
+
+    @_addLabel()
+    @_addInput()
+    @_addRemoveCheckbox()
+
+    return this
+
+  removeName: -> @name.reverse().replace('[', '[remove_'.reverse()).reverse()
+
+  updateValue: (@value) ->
+    # TODO: this method required to enable version switch for objects history
+
+
+_chrFormInputs['file'] = InputFile
+
+# -----------------------------------------------------------------------------
+# INPUT FILE IMAGE
+# -----------------------------------------------------------------------------
+class @InputFileImage extends InputFile
+  _addInput: ->
+    @$el.addClass 'empty'
+    if @filename
+      @$link =$ "<a href='#{ @value.url }' target='_blank' title='#{ @filename }'>#{ @filename }</a>"
+      @$el.append @$link
+
+      thumbnailImageUrl = @value.url
+      thumbnailImage = @value[@config.thumbnailFieldName]
+
+      if thumbnailImage
+        thumbnailImageUrl = thumbnailImage.url
+
+      @$thumb =$ "<img src='#{ thumbnailImageUrl }' />"
+      @$el.append @$thumb
+
+      @$el.removeClass 'empty'
+
+    @$input =$ "<input type='file' name='#{ @name }' id='#{ @name }' />"
+    @$el.append @$input
+
+
+_chrFormInputs['image'] = InputFileImage
+
+
+
+

data/app/assets/javascripts/chr/form/_inputHidden.coffee

@@ -0,0 +1,41 @@
+# -----------------------------------------------------------------------------
+# INPUT HIDDEN
+# -----------------------------------------------------------------------------
+class @InputHidden
+  constructor: (@name, @value, @config, @object) ->
+    @$el = $("<input type='hidden' name='#{ @name }' value='#{ @_valueSafe() }' id='#{ @name }' />")
+
+    return this
+
+  _valueSafe: ->
+    if typeof(@value) == 'object'
+      JSON.stringify(@value)
+    else
+      _escapeHtml(@value)
+
+  #
+  # PUBLIC
+  #
+
+  initialize: ->
+    @config.onInitialize?(this)
+
+  updateValue: (@value) ->
+    @$el.val(@_valueSafe())
+
+  hash: (hash={}) ->
+    hash[@config.klassName] = @$el.val()
+    return hash
+
+  showErrorMessage: (message) ->
+    ;
+
+  hideErrorMessage: ->
+    ;
+
+
+_chrFormInputs['hidden'] = InputHidden
+
+
+
+

data/app/assets/javascripts/chr/form/_inputList.coffee

@@ -0,0 +1,142 @@
+# -----------------------------------------------------------------------------
+# INPUT LIST
+# Allows to create/delete/reorder list items connected to dynamic or static
+# collection. Value should be an array of objects.
+#
+# Dependencies:
+#  - jquery.typeahead
+#  - slip
+# -----------------------------------------------------------------------------
+class @InputList extends InputString
+  _updateInputValue: ->
+    ids = []
+    @$items.children('li').each (i, el)->
+      ids.push $(el).attr('data-id')
+    value = ids.join(',')
+    @$input.val(value)
+
+  _removeItem: ($el) ->
+    id = $el.attr('data-id')
+    delete @objects[id]
+
+    $el.parent().remove()
+    @_updateInputValue()
+
+  _addItem: (o) ->
+    id = o['_id']
+
+    @objects[id] = o
+
+    if @config.itemTemplate
+      item = @config.itemTemplate(o)
+    else
+      item = o[@config.titleFieldName]
+
+    listItem =$ """<li data-id='#{ id }'>
+                     <span class='icon-reorder' data-container-class='#{ @reorderContainerClass }'></span>
+                     #{ item }
+                     <a href='#' class='action_remove'>Remove</a>
+                   </li>"""
+    @$items.append listItem
+    @_updateInputValue()
+
+  _addItems: ->
+    @reorderContainerClass = @config.klassName
+    @objects = {}
+    @$items  =$ "<ul class='#{ @reorderContainerClass }'></ul>"
+
+    for o in @value
+      @_addItem(o)
+
+    @typeaheadInput.before @$items
+
+  _addInput: ->
+    # hidden input that stores ids
+    # NOTE: we use __LIST__ prefix to identify ARRAY input type and
+    #       process it's value while form submission.
+    name = if @config.namePrefix then "#{@config.namePrefix}[__LIST__#{@config.target}]" else "[__LIST__#{@config.target}]"
+
+    @$input =$ "<input type='hidden' name='#{ name }' value='' />"
+    @$el.append @$input
+
+    # NOTE: other options might be added here (static collection)
+    if @config.typeahead
+      # typeahead input for adding new items
+      placeholder = @config.typeahead.placeholder
+      @typeaheadInput =$ "<input type='text' placeholder='#{ placeholder }' />"
+      @$el.append @typeaheadInput
+
+    @_addItems()
+    @_updateInputValue()
+
+  #
+  # PUBLIC
+  #
+
+  initialize: ->
+    # typeahead
+    if @config.typeahead
+      limit = @config.typeahead.limit || 5
+      dataSource = new Bloodhound
+        datumTokenizer: Bloodhound.tokenizers.obj.whitespace(@config.titleFieldName)
+        queryTokenizer: Bloodhound.tokenizers.whitespace
+        remote: @config.typeahead.url
+        limit:  limit
+
+      dataSource.initialize()
+
+      @typeaheadInput.typeahead({
+        hint:       false
+        highlight:  true
+      }, {
+        name:       @config.klassName,
+        displayKey: @config.titleFieldName,
+        source:     dataSource.ttAdapter()
+      })
+
+      @typeaheadInput.on 'typeahead:selected', (e, object, dataset) =>
+        @_addItem(object)
+        @typeaheadInput.typeahead('val', '')
+
+    # events
+    @$items.on 'click', '.action_remove', (e) =>
+      e.preventDefault()
+      if confirm('Are you sure?')
+        @_removeItem($(e.currentTarget))
+
+    # reorder
+    list = @$items.get(0)
+    new Slip(list)
+
+    list.addEventListener 'slip:beforeswipe', (e) -> e.preventDefault()
+
+    list.addEventListener 'slip:beforewait', ((e) ->
+      if $(e.target).hasClass("icon-reorder") then e.preventDefault()
+    ), false
+
+    list.addEventListener 'slip:beforereorder', ((e) ->
+      if not $(e.target).hasClass("icon-reorder") then e.preventDefault()
+    ), false
+
+    list.addEventListener 'slip:reorder', ((e) =>
+      e.target.parentNode.insertBefore(e.target, e.detail.insertBefore)
+      @_updateInputValue()
+      return false
+    ), false
+
+    @config.onInitialize?(this)
+
+  # TODO: add support
+  updateValue: (@value) ->
+
+  hash: (hash={}) ->
+    hash[@config.klassName] = []
+    ids                     = @$input.val().split(',')
+    hash[@config.klassName].push(@objects[id]) for id in ids
+    return hash
+
+_chrFormInputs['list'] = InputList
+
+
+
+

data/app/assets/javascripts/chr/form/_inputSelect.coffee

@@ -0,0 +1,59 @@
+# -----------------------------------------------------------------------------
+# INPUT SELECT
+# -----------------------------------------------------------------------------
+class @InputSelect extends InputString
+  _createEl: ->
+    @$el =$ "<div class='input-#{ @config.type } input-#{ @config.klass } #{ @config.klassName }'>"
+
+  _addOption: (title, value) ->
+    selected = if @value == value then 'selected' else ''
+    $option =$ """<option value='#{ value }' #{ selected }>#{ title }</option>"""
+    @$input.append $option
+
+  _addListOptions: ->
+    data = @config.optionsList
+    for o in data
+      @_addOption(o, o)
+
+  _addHashOptions: ->
+    data = @config.optionsHash
+    for value, title of data
+      @_addOption(title, value)
+
+  _addCollectionOptions: ->
+    data       = @config.collection.data
+    valueField = @config.collection.valueField
+    titleField = @config.collection.titleField
+
+    for o in data
+      title    = o[titleField]
+      value    = o[valueField]
+      @_addOption(title, value)
+
+  _addOptions: ->
+    if @config.collection
+      @_addCollectionOptions()
+    else if @config.optionsList
+      @_addListOptions()
+    else if @config.optionsHash
+      @_addHashOptions()
+
+  _addInput: ->
+    @$input =$ """<select name='#{ @name }' id='#{ @name }'></select>"""
+    @$el.append @$input
+
+    if @config.optionsHashFieldName
+      @value = String(@value)
+      if @object
+        @config.optionsHash = @object[@config.optionsHashFieldName]
+      else
+        @config.optionsHash = { '': '--' }
+
+    @_addOptions()
+
+
+_chrFormInputs['select'] = InputSelect
+
+
+
+

data/app/assets/javascripts/chr/form/_inputString.coffee

@@ -0,0 +1,87 @@
+# -----------------------------------------------------------------------------
+# INPUT STRING
+# -----------------------------------------------------------------------------
+class @InputString
+  constructor: (@name, @value, @config, @object) ->
+    @_createEl()
+    @_addLabel()
+    @_addInput()
+    @_addPlaceholder()
+
+    return this
+
+  _createEl: ->
+    @$el =$ "<label for='#{ @name }' class='input-#{ @config.type } input-#{ @config.klass } #{ @config.klassName }'>"
+
+  _addLabel: ->
+    if @config.klass in [ 'inline', 'stacked' ]
+      @$label =$ "<span class='label'>#{ @config.label }</span>"
+      @$el.append @$label
+
+      @$errorMessage =$ "<span class='error-message'></span>"
+      @$label.append @$errorMessage
+
+  _addInput: ->
+    @$input =$ "<input type='text' name='#{ @name }' value='#{ @_valueSafe() }' id='#{ @name }' />"
+    @$el.append @$input
+
+    if @config.options and $.isArray(@config.options)
+      data = new Bloodhound
+        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value')
+        queryTokenizer: Bloodhound.tokenizers.whitespace
+        local:          $.map @config.options, (opt) -> { value: opt }
+
+      data.initialize()
+
+      @$input.typeahead({
+        hint:      true
+        highlight: true
+        minLength: 1
+      },
+      {
+        name:       'options'
+        displayKey: 'value'
+        source:     data.ttAdapter()
+      })
+
+  _valueSafe: ->
+    if typeof(@value) == 'object'
+      JSON.stringify(@value)
+    else
+      _escapeHtml(@value)
+
+  _addPlaceholder: ->
+    if @config.klass in [ 'placeholder', 'stacked' ]
+      @$input.attr 'placeholder', @config.label
+
+    if @config.placeholder
+      @$input.attr 'placeholder', @config.placeholder
+
+  #
+  # PUBLIC
+  #
+
+  initialize: ->
+    @config.onInitialize?(this)
+
+  hash: (hash={}) ->
+    hash[@config.klassName] = @$input.val()
+    return hash
+
+  updateValue: (@value) ->
+    @$input.val(@value)
+
+  showErrorMessage: (message) ->
+    @$el.addClass 'error'
+    @$errorMessage.html(message)
+
+  hideErrorMessage: ->
+    @$el.removeClass 'error'
+    @$errorMessage.html('')
+
+
+_chrFormInputs['string'] = InputString
+
+
+
+