chr 0.2.1 → 0.2.4

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

@@ -1,39 +1,50 @@
 # -----------------------------------------------------------------------------
-# FORM
-# Generates form based on provided configuration schema.
-# If schema is not provided generates default form based on object keys.
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
 # -----------------------------------------------------------------------------
 
-@_chrFormInputs ?= {}
+# -----------------------------------------------------------------------------
+# FORM
+# -----------------------------------------------------------------------------
+# Generates form based on provided configuration schema. If schema is not
+# provided generates default form based on object keys. This uses Rails
+# conventions for managing names for attributes, arrays, hashs and nested
+# objects.
+#
+# -----------------------------------------------------------------------------
 
 class @Form
   constructor: (@object, @config) ->
     @groups    = []
     @inputs    = {}
     @$el       = $(@config.rootEl || '<form>')
-    @schema    = @_getSchema()
+    @schema    = @_get_schema()
     @isRemoved = false
 
-    @_buildSchema(@schema, @$el)
-    @_addNestedFormRemoveButton()
+    @_build_schema(@schema, @$el)
+    @_add_nested_form_remove_button()
 
-  #
-  # SCHEMA
-  #
 
-  _getSchema: ->
+  # PRIVATE ===============================================
+
+  _get_schema: ->
     schema = @config.formSchema
     if @object
-      schema ?= @_generateDefaultSchema()
+      schema ?= @_generate_default_schema()
     return schema
 
-  _generateDefaultSchema: ->
+
+  _generate_default_schema: ->
     schema = {}
     for key, value of @object
-      schema[key] = @_generateDefaultInputConfig(key, value)
+      schema[key] = @_generate_default_input_config(key, value)
     return schema
 
-  _generateDefaultInputConfig: (fieldName, value) ->
+
+  _generate_default_input_config: (fieldName, value) ->
     config = {}
 
     if fieldName[0] == '_'
@@ -52,28 +63,29 @@ class @Form
 
     return config
 
-  #
-  # INPUTS
-  #
 
-  _buildSchema: (schema, $el) ->
+  # INPUTS ================================================
+
+  _build_schema: (schema, $el) ->
     for fieldName, config of schema
       if config.type == 'group'
-        group = @_generateInputsGroup(fieldName, config)
+        group = @_generate_inputs_group(fieldName, config)
         $el.append group.$el
       else
-        input = @_generateInput(fieldName, config)
+        input = @_generate_input(fieldName, config)
         $el.append input.$el
 
-  _generateInputsGroup: (klassName, groupConfig) ->
+
+  _generate_inputs_group: (klassName, groupConfig) ->
     $group =$ """<div class='group #{ klassName }' />"""
     if groupConfig.inputs
-      @_buildSchema(groupConfig.inputs, $group)
+      @_build_schema(groupConfig.inputs, $group)
     group = { $el: $group, klassName: klassName, onInitialize: groupConfig.onInitialize }
     @groups.push group
     return group
 
-  _generateInput: (fieldName, inputConfig) ->
+
+  _generate_input: (fieldName, inputConfig) ->
     if @object
       value = @object[fieldName]
     else
@@ -82,49 +94,45 @@ class @Form
     value ?= ''
 
     inputName = inputConfig.name || fieldName
-    input     = @_renderInput(inputName, inputConfig, value)
+    input     = @_render_input(inputName, inputConfig, value)
     @inputs[fieldName] = input
     return input
 
-  _renderInput: (name, config, value) ->
+
+  _render_input: (name, config, value) ->
     inputConfig = $.extend {}, config
 
-    inputConfig.label    ?= @_titleizeLabel(name)
+    inputConfig.label    ?= name.titleize()
     inputConfig.type     ?= 'string'
     inputConfig.klass    ?= 'stacked'
     inputConfig.klassName = name
 
-    inputClass  = _chrFormInputs[inputConfig.type]
-    inputClass ?= _chrFormInputs['string']
+    inputClass  = chr.formInputs[inputConfig.type]
+    inputClass ?= chr.formInputs['string']
 
     inputName = if @config.namePrefix then "#{ @config.namePrefix }[#{ name }]" else "[#{ name }]"
 
     # add prefix for nested form inputs
     if inputConfig.type == 'form'
-      inputConfig.namePrefix = inputName.replace("[#{ name }]", "[#{name}_attributes]")
+      inputConfig.namePrefix = inputName.replace("[#{ name }]", "[#{ name }_attributes]")
     else
       inputConfig.namePrefix = @config.namePrefix
 
     return new inputClass(inputName, value, inputConfig, @object)
 
-  _titleizeLabel: (value) ->
-    value.titleize().replace('Id', 'ID')
 
-  #
-  # NESTED
-  #
+  # NESTED ================================================
 
-  _addNestedFormRemoveButton: ->
+  _add_nested_form_remove_button: ->
     if @config.removeButton
-      # add special hidden input to the form
+      # add hidden input to the form
       fieldName          = '_destroy'
-      input              = @_renderInput(fieldName, { type: 'hidden' }, false)
+      input              = @_render_input(fieldName, { type: 'hidden' }, false)
       @inputs[fieldName] = input
       @$el.append input.$el
-      # add button
+      # remove button
       @$removeButton =$ """<a href='#' class='nested-form-delete'>Delete</a>"""
       @$el.append @$removeButton
-      # handle click event
       @$removeButton.on 'click', (e) =>
         e.preventDefault()
         if confirm('Are you sure?')
@@ -133,6 +141,7 @@ class @Form
           @isRemoved = true
           @config.onRemove?(this)
 
+
   _forms: ->
     forms = [ @ ]
     addNestedForms = (form) ->
@@ -144,39 +153,41 @@ class @Form
 
     return forms
 
-  #
-  # PUBLIC
-  #
+
+  # PUBLIC ================================================
 
   destroy: ->
+    group.destroy?() for group in @groups
+    input.destroy?() for name, input of @inputs
     @$el.remove()
 
+
   serialize: (obj={}) ->
-    # NOTE: this serializes everything except file inputs
+    # serialize everything except file inputs
     obj[input.name] = input.value for input in @$el.serializeArray()
 
     for form in @_forms()
-      # NOTE: serialize file inputs for all forms (root and nested)
+      # serialize file inputs for all forms (including nested)
       for name, input of form.inputs
         if input.config.type == 'file' or input.config.type == 'image'
           file = input.$input.get()[0].files[0]
           obj["__FILE__#{ input.name }"] = file
-          # NOTE: when no file uploaded and no file selected, send
-          #       remove flag so carrierwave does not catch _old_ value
-          if not file and not input.filename then obj[input.removeName()] = 'true'
+          if input.isEmpty() then obj[input.removeName()] = 'true'
 
-      # NOTE: remove fields with ignoreOnSubmission
+      # remove fields with ignoreOnSubmission
       for name, input of form.inputs
         if input.config.ignoreOnSubmission
           delete obj[name]
 
     return obj
 
+
   hash: (hash={}) ->
     for name, input of @inputs
       input.hash(hash)
     return hash
 
+
   initializePlugins: ->
     for group in @groups
       group.onInitialize?(@, group)
@@ -184,6 +195,7 @@ class @Form
     for name, input of @inputs
       input.initialize()
 
+
   showValidationErrors: (errors) ->
     @hideValidationErrors()
     for inputName, messages of errors
@@ -191,10 +203,12 @@ class @Form
       firstMessage = messages[0]
       input.showErrorMessage(firstMessage)
 
+
   hideValidationErrors: ->
     for inputName, input of @inputs
       input.hideErrorMessage()
 
+
   updateValues: (object) ->
     for name, value of object
       if @inputs[name]

data/app/assets/javascripts/chr/form/input-checkbox.coffee

@@ -1,69 +1,82 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
 # -----------------------------------------------------------------------------
 # INPUT CHECKBOX
 # -----------------------------------------------------------------------------
 class @InputCheckbox extends InputString
-  _safeValue: ->
+  constructor: (@name, @value, @config, @object) ->
+    @_create_el()
+    @_add_input()
+    @_add_label()
+
+    return this
+
+
+  # PRIVATE ===============================================
+
+  _create_el: ->
+    @$el =$ "<label for='#{ @name }' class='input-#{ @config.type } input-#{ @config.klass } #{ @config.klassName }'>"
+
+
+  _safe_value: ->
     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
+
+  _add_input: ->
+    # 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 '' } />"
+    @$input =$ "<input type='checkbox' id='#{ @name }' name='#{ @name }' value='true' #{ if @_safe_value() 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
+  # PUBLIC ================================================
 
   updateValue: (@value) ->
-    @$input.prop('checked', @_safeValue())
+    @$input.prop('checked', @_safe_value())
+
 
   hash: (hash={}) ->
     hash[@config.klassName] = @$input.prop('checked')
     return hash
 
-_chrFormInputs['checkbox'] = InputCheckbox
+
+chr.formInputs['checkbox'] = InputCheckbox
+
 
 # -----------------------------------------------------------------------------
 # INPUT CHECKBOX SWITCH
 # -----------------------------------------------------------------------------
 class @InputCheckboxSwitch extends InputCheckbox
-  _addInput: ->
+
+  # PRIVATE ===============================================
+
+  _add_input: ->
     @$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 '' } />"
+    @$input =$ "<input type='checkbox' id='#{ @name }' name='#{ @name }' value='true' #{ if @_safe_value() 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
+chr.formInputs['switch'] = InputCheckboxSwitch
 
 
 

data/app/assets/javascripts/chr/form/input-color.coffee

@@ -1,33 +1,51 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
 # -----------------------------------------------------------------------------
 # INPUT COLOR
 # -----------------------------------------------------------------------------
 class @InputColor extends InputString
-  _addColorPreview: ->
+
+  # PRIVATE ===============================================
+
+  _add_color_preview: ->
     @$colorPreview =$ "<div class='preview'>"
     @$el.append @$colorPreview
 
-  _updateColorPreview: ->
+
+  _update_color_preview: ->
     @$colorPreview.css { 'background-color': "##{ @$input.val() }" }
 
-  _validateInputValue: ->
+
+  _validate_input_value: ->
     if (/^(?:[0-9a-f]{3}){1,2}$/i).test(@$input.val())
       @hideErrorMessage()
     else
       @showErrorMessage('Invalid hex value')
 
+
+  # PUBLIC ================================================
+
   initialize: ->
-    @_addColorPreview()
-    @_updateColorPreview()
+    @$input.attr('placeholder', @config.placeholder || 'e.g. #eee')
+
+    @_add_color_preview()
+    @_update_color_preview()
 
     @$input.on 'change keyup',  (e) =>
       @hideErrorMessage()
-      @_validateInputValue()
-      @_updateColorPreview()
+      @_validate_input_value()
+      @_update_color_preview()
 
     @config.onInitialize?(this)
 
 
-_chrFormInputs['color'] = InputColor
+chr.formInputs['color'] = InputColor
 
 
 

data/app/assets/javascripts/chr/form/input-file.coffee

@@ -1,81 +1,116 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
 # -----------------------------------------------------------------------------
 # 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'
+  constructor: (@name, @value, @config, @object) ->
+    @_create_el()
 
-    @$input =$ "<input type='file' name='#{ @name }' id='#{ @name }' />"
+    @_add_label()
+    @_add_input()
+    @_update_state()
+
+    return this
+
+
+  # PRIVATE ===============================================
+
+  _create_el: ->
+    @$el =$ "<div class='input-#{ @config.type } input-#{ @config.klass } #{ @config.klassName }'>"
+
+
+  _add_input: ->
+    @$link =$ "<a href='#' target='_blank' title=''></a>"
+    @$el.append(@$link)
+
+    @$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()
+    @_add_remove_checkbox()
 
-      @$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'>"
+  _add_remove_checkbox: ->
+    removeInputName     = @removeName()
+    @$removeLabel       =$ "<label for='#{ removeInputName }'>Remove</label>"
+    @$hiddenRemoveInput =$ "<input type='hidden' name='#{ removeInputName }' value='false'>"
+    @$removeInput       =$ "<input type='checkbox' name='#{ removeInputName }' id='#{ removeInputName }' value='true'>"
+    @$link.after(@$removeLabel)
+    @$link.after(@$removeInput)
+    @$link.after(@$hiddenRemoveInput)
 
-      @$link.after @$removeInput
-      @$link.after @$hiddenRemoveInput
 
-  constructor: (@name, @value, @config, @object) ->
-    @$el =$ "<div class='input-#{ @config.type } input-#{ @config.klass } #{ @config.klassName }'>"
+  _update_inputs: ->
+    @$link.html(@filename).attr('title', @filename).attr('href', @value.url)
+
+
+  _update_state: (@filename=null) ->
+    @$input.val('')
+    @$removeInput.prop('checked', false)
 
-    # NOTE: carrierwave filename workaround
-    @filename = null
     if @value.url
       @filename = _last(@value.url.split('/'))
-      if @filename == '_old_' then @filename = null
+      if @filename == '_old_' then @filename = null # carrierwave filename workaround
+
+    if @filename
+      @$el.removeClass('empty')
+      @_update_inputs()
+    else
+      @$el.addClass('empty')
 
-    @_addLabel()
-    @_addInput()
-    @_addRemoveCheckbox()
 
-    return this
+  # PUBLIC ================================================
+
+  # when no file uploaded and no file selected, send remove flag so
+  # carrierwave does not catch _old_ value
+  isEmpty: ->
+    ( ! @$input.get()[0].files[0] && ! @filename )
+
 
-  removeName: -> @name.reverse().replace('[', '[remove_'.reverse()).reverse()
+  removeName: ->
+    @name.reverse().replace('[', '[remove_'.reverse()).reverse()
 
-  updateValue: (@value) ->
-    # TODO: this method required to enable version switch for objects history
 
+  updateValue: (@value, @object) ->
+    @_update_state()
+
+
+chr.formInputs['file'] = InputFile
 
-_chrFormInputs['file'] = InputFile
 
 # -----------------------------------------------------------------------------
 # INPUT FILE IMAGE
 # -----------------------------------------------------------------------------
+# Config options:
+#   thumbnail(object) - method that returns thumbnail for input
+# -----------------------------------------------------------------------------
 class @InputFileImage extends InputFile
-  _addInput: ->
-    @$el.addClass 'empty'
-    if @filename
-      @$link =$ "<a href='#{ @value.url }' target='_blank' title='#{ @filename }'>#{ @filename }</a>"
-      @$el.append @$link
+  _add_input: ->
+    @$link =$ "<a href='#' target='_blank' title=''></a>"
+    @$el.append @$link
 
-      thumbnailImageUrl = @value.url
-      thumbnailImage = @value[@config.thumbnailFieldName]
+    @$thumb =$ "<img src='' />"
+    @$el.append @$thumb
 
-      if thumbnailImage
-        thumbnailImageUrl = thumbnailImage.url
+    @$input =$ "<input type='file' name='#{ @name }' id='#{ @name }' />"
+    @$el.append @$input
 
-      @$thumb =$ "<img src='#{ thumbnailImageUrl }' />"
-      @$el.append @$thumb
+    @_add_remove_checkbox()
 
-      @$el.removeClass 'empty'
 
-    @$input =$ "<input type='file' name='#{ @name }' id='#{ @name }' />"
-    @$el.append @$input
+  _update_inputs: ->
+    @$link.html(@filename).attr('title', @filename).attr('href', @value.url)
+    image_thumb_url = if @config.thumbnail then @config.thumbnail(@object) else @value.url
+    @$thumb.attr('src', image_thumb_url).attr('alt', @filename)
 
 
-_chrFormInputs['image'] = InputFileImage
+chr.formInputs['image'] = InputFileImage