chr 0.2.1 → 0.2.4

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

@@ -0,0 +1,162 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# INPUT "NESTED" FORM
+# -----------------------------------------------------------------------------
+# Name for this input comes from the Rails gem 'nested_forms'.
+#
+# Public methods:
+#   initialize()
+#   hash(hash)
+#   updateValue(@value)
+#   showErrorMessage(message)
+#   hideErrorMessage()
+#   addNewForm(object)
+#
+# Dependencies:
+#= require ./input-form_reorder
+#
+# -----------------------------------------------------------------------------
+
+class @InputForm
+  constructor: (@name, @nestedObjects, @config, @object) ->
+    @forms = []
+
+    @config.namePrefix   ||= name
+    @config.removeButton   = true
+    @config.formSchema._id = { type: 'hidden', name: 'id' }
+    @reorderContainerClass = "nested-forms-#{@config.klassName}"
+
+    @_create_el()
+
+    @_add_label()
+    @_add_forms()
+    @_add_new_button()
+
+    return this
+
+
+  # PRIVATE ===============================================
+
+  _create_el: ->
+    @$el =$ "<div class='input-stacked nested-forms #{ @config.klassName }'>"
+
+
+  _add_label: ->
+    @$label =$ "<span class='label'>#{ @config.label }</span>"
+    @$errorMessage =$ "<span class='error-message'></span>"
+    @$label.append(@$errorMessage)
+    @$el.append(@$label)
+
+
+  _add_forms: ->
+    @$forms =$ "<ul>"
+    @$label.after @$forms
+
+    # if not default value which means no objects
+    if @nestedObjects != ''
+      @_sort_nested_objects()
+
+      for i, object of @nestedObjects
+        namePrefix = "#{ @config.namePrefix }[#{ i }]"
+        @forms.push @_render_form(object, namePrefix, @config)
+
+      @_bind_forms_reorder()
+
+
+  _sort_nested_objects: ->
+    if @config.sortBy
+      @config.formSchema[@config.sortBy] = { type: 'hidden' }
+      if @nestedObjects
+        # this is not required but make things a bit easier on the backend
+        # as object don't have to be in a specific order.
+        @nestedObjects.sort (a, b) => parseFloat(a[@config.sortBy]) - parseFloat(b[@config.sortBy])
+        # normalizes nested objects positions
+        (o[@config.sortBy] = parseInt(i) + 1) for i, o of @nestedObjects
+
+
+  _render_form: (object, namePrefix, config) ->
+    formConfig = $.extend {}, config,
+      namePrefix: namePrefix
+      rootEl:     "<li>"
+
+    form = new Form(object, formConfig)
+    @$forms.append form.$el
+
+    return form
+
+
+  _add_new_button: ->
+    label = @config.newButtonLabel || "Add"
+    @$newButton =$ """<a href='#' class='nested-form-new'>#{ label }</a>"""
+    @$el.append @$newButton
+    @$newButton.on 'click', (e) => e.preventDefault() ; @addNewForm()
+
+
+  # PUBLIC ================================================
+
+  initialize: ->
+    for nestedForm in @forms
+      nestedForm.initializePlugins()
+    @config.onInitialize?(this)
+
+
+  hash: (hash={})->
+    hash[@config.klassName] = []
+    for form in @forms
+      hash[@config.klassName].push form.hash()
+    return hash
+
+
+  showErrorMessage: (message) ->
+    @$el.addClass 'error'
+    @$errorMessage.html(message)
+
+
+  hideErrorMessage: ->
+    @$el.removeClass 'error'
+    @$errorMessage.html('')
+
+
+  addNewForm: (object=null) ->
+    namePrefix    = "#{ @config.namePrefix }[#{ Date.now() }]"
+    newFormConfig = $.extend({}, @config)
+
+    delete newFormConfig.formSchema._id
+
+    form = @_render_form(object, namePrefix, newFormConfig)
+    form.initializePlugins()
+
+    if @config.sortBy
+      @_add_form_reorder_button(form)
+      prevForm = _last(@forms)
+      position = if prevForm then prevForm.inputs[@config.sortBy].value + 1 else 1
+      form.inputs[@config.sortBy].updateValue(position)
+
+    @forms.push(form)
+
+    @config.onNew?(form)
+
+    return form
+
+
+  updateValue: (@nestedObjects, @object) ->
+    @$forms.remove()
+    @forms = []
+    @_add_forms()
+
+
+include(InputForm, inputFormReorder)
+
+
+chr.formInputs['form'] = InputForm
+
+
+
+

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

@@ -0,0 +1,67 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# INPUT "NESTED" FORM REORDER
+# -----------------------------------------------------------------------------
+
+@inputFormReorder =
+  # PRIVATE ===============================================
+
+  _bind_forms_reorder: ->
+    if @config.sortBy
+      list = @$forms.addClass(@reorderContainerClass).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) =>
+        # this event called for all parent lists, add a check for context:
+        # process this event only if target form is in the @forms list.
+        targetForm = @_find_form_by_target(e.target)
+        if targetForm
+          # when `e.detail.insertBefore` is null, item put to the end of the list.
+          e.target.parentNode.insertBefore(e.target, e.detail.insertBefore)
+
+          $targetForm =$ e.target
+          prevForm    = @_find_form_by_target($targetForm.prev().get(0))
+          nextForm    = @_find_form_by_target($targetForm.next().get(0))
+
+          prevFormPosition      = if prevForm then prevForm.inputs[@config.sortBy].value else 0
+          nextFormPosition      = if nextForm then nextForm.inputs[@config.sortBy].value else 0
+          newTargetFormPosition = prevFormPosition + Math.abs(nextFormPosition - prevFormPosition) / 2.0
+
+          targetForm.inputs[@config.sortBy].updateValue(newTargetFormPosition)
+
+        return false
+      ), false
+
+      @_add_form_reorder_button(form) for form in @forms
+
+
+  _add_form_reorder_button: (form) ->
+    form.$el.append("""<div class='icon-reorder' data-container-class='#{@reorderContainerClass}'></div>""").addClass('reorderable')
+
+
+  _find_form_by_target: (el) ->
+    if el
+      for form in @forms
+        if form.$el.get(0) == el then return form
+    return null
+
+
+

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

@@ -1,40 +1,56 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
 # -----------------------------------------------------------------------------
 # INPUT HIDDEN
 # -----------------------------------------------------------------------------
 class @InputHidden
   constructor: (@name, @value, @config, @object) ->
-    @$el = $("<input type='hidden' name='#{ @name }' value='#{ @_valueSafe() }' id='#{ @name }' />")
+    @_create_el()
 
     return this
 
-  _valueSafe: ->
+
+  # PRIVATE ===============================================
+
+  _create_el: ->
+    @$el =$ "<input type='hidden' name='#{ @name }' value='#{ @_safe_value() }' />"
+
+
+  _safe_value: ->
     if typeof(@value) == 'object'
       JSON.stringify(@value)
     else
       _escapeHtml(@value)
 
-  #
-  # PUBLIC
-  #
+
+  # PUBLIC ================================================
 
   initialize: ->
     @config.onInitialize?(this)
 
+
   updateValue: (@value) ->
-    @$el.val(@_valueSafe())
+    @$el.val(@_safe_value())
+
 
   hash: (hash={}) ->
     hash[@config.klassName] = @$el.val()
     return hash
 
-  showErrorMessage: (message) ->
-    ;
 
-  hideErrorMessage: ->
-    ;
+  showErrorMessage: (message) -> ;
+
+
+  hideErrorMessage: -> ;
 
 
-_chrFormInputs['hidden'] = InputHidden
+chr.formInputs['hidden'] = InputHidden
 
 
 

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

@@ -1,28 +1,63 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
 # -----------------------------------------------------------------------------
 # 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
+#= require ./input-list_reorder
+#
 # -----------------------------------------------------------------------------
+
 class @InputList extends InputString
-  _updateInputValue: ->
+
+  # PRIVATE ===============================================
+
+  _add_input: ->
+    # hidden input that stores ids
+    # 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
+
+    # 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
+
+    @_add_items()
+    @_update_input_value()
+
+
+  _update_input_value: ->
     ids = []
     @$items.children('li').each (i, el)->
       ids.push $(el).attr('data-id')
     value = ids.join(',')
     @$input.val(value)
 
-  _removeItem: ($el) ->
+
+  _remove_item: ($el) ->
     id = $el.attr('data-id')
     delete @objects[id]
 
     $el.parent().remove()
-    @_updateInputValue()
+    @_update_input_value()
+
 
-  _addItem: (o) ->
+  _add_item: (o) ->
     id = o['_id']
 
     @objects[id] = o
@@ -38,40 +73,21 @@ class @InputList extends InputString
                      <a href='#' class='action_remove'>Remove</a>
                    </li>"""
     @$items.append listItem
-    @_updateInputValue()
+    @_update_input_value()
 
-  _addItems: ->
+
+  _add_items: ->
     @reorderContainerClass = @config.klassName
     @objects = {}
     @$items  =$ "<ul class='#{ @reorderContainerClass }'></ul>"
 
     for o in @value
-      @_addItem(o)
+      @_add_item(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
-  #
+  # PUBLIC ================================================
 
   initialize: ->
     # typeahead
@@ -95,39 +111,18 @@ class @InputList extends InputString
       })
 
       @typeaheadInput.on 'typeahead:selected', (e, object, dataset) =>
-        @_addItem(object)
+        @_add_item(object)
         @typeaheadInput.typeahead('val', '')
 
-    # events
+    # remove
     @$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()
+      if confirm('Are you sure?') then @_remove_item($(e.currentTarget))
 
-    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
+    @_bind_reorder()
 
     @config.onInitialize?(this)
 
-  # TODO: add support
-  updateValue: (@value) ->
 
   hash: (hash={}) ->
     hash[@config.klassName] = []
@@ -135,7 +130,16 @@ class @InputList extends InputString
     hash[@config.klassName].push(@objects[id]) for id in ids
     return hash
 
-_chrFormInputs['list'] = InputList
+
+  updateValue: (@value) ->
+    @$items.html('')
+    @_add_item(o) for o in @value
+
+
+include(InputList, inputListReorder)
+
+
+chr.formInputs['list'] = InputList