chr 0.2.8 → 0.3.5

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

@@ -12,8 +12,11 @@
 # Allows to create/delete/reorder list items connected to dynamic or static
 # collection. Value should be an array of objects.
 #
+# All items should be unique for now.
+#
 # Dependencies:
 #= require ./input-list_reorder
+#= require ./input-list_typeahead
 #
 # -----------------------------------------------------------------------------
 
@@ -22,31 +25,40 @@ class @InputList extends InputString
   # 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}]"
+    # @TODO: check if we can use @config.name instead of @config.target
+    # @config.target ?= @config.klassName
+
+    # 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
 
+    # list holder for items
+    @reorderContainerClass = @config.klassName
+    @$items =$ "<ul class='#{ @reorderContainerClass }'></ul>"
+    @$el.append @$items
+
     # 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()
+    @_create_typeahead_el(@config.typeahead.placeholder)
+
+    @_render_items()
     @_update_input_value()
 
 
   _update_input_value: ->
     ids = []
-    @$items.children('li').each (i, el)->
-      ids.push $(el).attr('data-id')
+    @$items.children('li').each (i, el) -> ids.push $(el).attr('data-id')
+
+    # @TODO: we need a better separator here, comma is too generic
+    #        it's used cause most cases list of IDs concidered to be here,
+    #        we might make this a @config setting.
     value = ids.join(',')
+
     @$input.val(value)
+    @$input.trigger('change')
 
 
   _remove_item: ($el) ->
@@ -57,62 +69,54 @@ class @InputList extends InputString
     @_update_input_value()
 
 
-  _add_item: (o) ->
-    id = o['_id']
+  _ordered_ids: ->
+    ids = @$input.val().split(',')
+    if ids[0] == '' then ids = []
+    return ids
+
+
+  _render_items: ->
+    @$items.html('')
+    @objects = {}
+
+    for o in @value
+      @_render_item(o)
 
-    @objects[id] = o
+
+  _render_item: (o) ->
+    @_add_object(o)
 
     if @config.itemTemplate
       item = @config.itemTemplate(o)
     else
       item = o[@config.titleFieldName]
 
-    listItem =$ """<li data-id='#{ id }'>
+    listItem =$ """<li data-id='#{ o._id }'>
                      <span class='icon-reorder' data-container-class='#{ @reorderContainerClass }'></span>
                      #{ item }
                      <a href='#' class='action_remove'>Remove</a>
                    </li>"""
-    @$items.append listItem
+    @$items.append(listItem)
     @_update_input_value()
 
 
-  _add_items: ->
-    @reorderContainerClass = @config.klassName
-    @objects = {}
-    @$items  =$ "<ul class='#{ @reorderContainerClass }'></ul>"
+  _add_object: (o) ->
+    @_normalize_object(o)
+    @objects[o._id] = o
 
-    for o in @value
-      @_add_item(o)
 
-    @typeaheadInput.before @$items
+  _normalize_object: (o) ->
+    o._id ?= o.id
+    if ! o._id then console.log("::: list item is missing an 'id' or '_id' :::")
 
 
   # PUBLIC ================================================
 
   initialize: ->
+    @config.beforeInitialize?(this)
+
     # 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) =>
-        @_add_item(object)
-        @typeaheadInput.typeahead('val', '')
+    @_bind_typeahead()
 
     # remove
     @$items.on 'click', '.action_remove', (e) =>
@@ -124,19 +128,23 @@ class @InputList extends InputString
     @config.onInitialize?(this)
 
 
+  updateValue: (@value) ->
+    @_render_items()
+
+
   hash: (hash={}) ->
-    hash[@config.klassName] = []
-    ids                     = @$input.val().split(',')
-    hash[@config.klassName].push(@objects[id]) for id in ids
-    return hash
+    hash[@config.target] = @$input.val()
+    ordered_objects = []
 
+    for id in @_ordered_ids()
+      ordered_objects.push(@objects[id])
 
-  updateValue: (@value) ->
-    @$items.html('')
-    @_add_item(o) for o in @value
+    hash[@config.klassName] = ordered_objects
+    return hash
 
 
 include(InputList, inputListReorder)
+include(InputList, inputListTypeahead)
 
 
 chr.formInputs['list'] = InputList

data/app/assets/javascripts/{chr/form → form}/input-list_reorder.coffee

@@ -11,7 +11,9 @@
 # -----------------------------------------------------------------------------
 
 @inputListReorder =
+
   # PRIVATE ===============================================
+
   _bind_reorder: ->
     list = @$items.get(0)
     new Slip(list)

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

@@ -0,0 +1,55 @@
+# -----------------------------------------------------------------------------
+# 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 TYPEAHEAD
+# -----------------------------------------------------------------------------
+
+@inputListTypeahead =
+
+  # PRIVATE ===============================================
+
+  _create_typeahead_el: (placeholder) ->
+    # typeahead input for adding new items
+    @typeaheadInput =$ "<input type='text' placeholder='#{ placeholder }' />"
+    @$el.append @typeaheadInput
+
+
+  _bind_typeahead: ->
+    limit = @config.typeahead.limit || 5
+    dataSource = new Bloodhound
+      datumTokenizer: Bloodhound.tokenizers.obj.whitespace(@config.titleFieldName)
+      queryTokenizer: Bloodhound.tokenizers.whitespace
+      remote:
+        url:    @config.typeahead.url
+        # exclude objects that are already in the list
+        filter: (parsedResponse) =>
+          data = []
+          for o in parsedResponse
+            @_normalize_object(o) ; if ! @objects[o._id] then data.push(o)
+          return data
+      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) =>
+      @_render_item(object)
+      @typeaheadInput.typeahead('val', '')
+
+
+
+

data/app/assets/javascripts/{chr/form → form}/input-password.coffee

@@ -15,6 +15,7 @@ class @InputPassword extends InputString
 
   _add_input: ->
     @$input =$ "<input type='password' name='#{ @name }' value='#{ @value }' />"
+    @$input.on 'keyup', (e) => @$input.trigger('change')
     @$el.append @$input
 
 

data/app/assets/javascripts/{chr/form → form}/input-select.coffee

@@ -9,23 +9,23 @@
 # -----------------------------------------------------------------------------
 # INPUT SELECT
 # -----------------------------------------------------------------------------
-# Todo:
-#   - add empty value option
-#   - an option to pull data from store
-# -----------------------------------------------------------------------------
 
 class @InputSelect extends InputString
 
   # PRIVATE ===============================================
 
   _create_el: ->
-    @$el =$ "<div class='input-#{ @config.type } input-#{ @config.klass } #{ @config.klassName }'>"
+    @$el =$ "<div class='input-#{ @config.type } input-#{ @config.klass } input-#{ @config.klassName }'>"
 
 
   _add_input: ->
-    @$input =$ """<select name='#{ @name }' id='#{ @name }'></select>"""
+    @$input =$ """<select name='#{ @name }'></select>"""
     @$el.append @$input
 
+    @_add_options()
+
+
+  _add_options: ->
     if @config.optionsHashFieldName
       @value = String(@value)
       if @object
@@ -33,10 +33,6 @@ class @InputSelect extends InputString
       else
         @config.optionsHash = { '': '--' }
 
-    @_add_options()
-
-
-  _add_options: ->
     if @config.collection
       @_add_collection_options()
 
@@ -74,7 +70,10 @@ class @InputSelect extends InputString
 
   # PUBLIC ================================================
 
-  updateValue: (@value) ->
+  updateValue: (@value, @object) ->
+    @$input.html('')
+    @_add_options()
+
     @$input.val(@value).prop('selected', true)
 
 

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

@@ -0,0 +1,33 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# INPUT SELECT 2
+# -----------------------------------------------------------------------------
+#
+# Dependencies:
+#= require vendor/select2
+#
+# -----------------------------------------------------------------------------
+
+class @InputSelect2 extends InputSelect
+  initialize: ->
+    @config.beforeInitialize?(this)
+
+    # https://select2.github.io/options.html
+    options = @config.pluginOptions || {}
+    @$input.select2(options)
+
+    @config.onInitialize?(this)
+
+
+chr.formInputs['select2'] = InputSelect2
+
+
+
+

data/app/assets/javascripts/{chr/form → form}/input-string.coffee

@@ -20,7 +20,7 @@
 #   hideErrorMessage()        - hide error message
 #
 # Dependencies:
-#= require ../vendor/jquery.typeahead
+#= require vendor/jquery.typeahead
 #
 # -----------------------------------------------------------------------------
 class @InputString
@@ -29,6 +29,9 @@ class @InputString
     @_add_label()
     @_add_input()
     @_add_placeholder()
+    @_add_disabled()
+    @_add_required()
+    @_add_limit()
 
     return this
 
@@ -43,7 +46,7 @@ class @InputString
 
 
   _create_el: ->
-    @$el =$ "<label for='#{ @name }' class='input-#{ @config.type } input-#{ @config.klass } #{ @config.klassName }'>"
+    @$el =$ "<label for='#{ @name }' class='input-#{ @config.type } input-#{ @config.klass } input-#{ @config.klassName }'>"
 
 
   _add_label: ->
@@ -55,8 +58,11 @@ class @InputString
 
   _add_input: ->
     @$input =$ "<input type='text' name='#{ @name }' value='#{ @_safe_value() }' />"
+    # trigger change event on keyup so value is cached while typing
+    @$input.on 'keyup', (e) => @$input.trigger('change')
     @$el.append @$input
 
+
     if @config.options and $.isArray(@config.options)
       data = new Bloodhound
         datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value')
@@ -85,6 +91,43 @@ class @InputString
       @$input.attr 'placeholder', @config.placeholder
 
 
+  _add_disabled: ->
+    if @config.disabled
+      @$input.prop('disabled', true)
+      @$el.addClass('input-disabled')
+
+
+  _add_required: ->
+    if @config.required
+      @$el.addClass('input-required')
+
+
+  _add_limit: ->
+    if @config.limit
+      @$charCounter =$ "<span class='input-character-counter'></span>"
+      @$errorMessage.before @$charCounter
+      @$input.on 'keyup', =>
+        @_update_character_counter()
+      @_update_character_counter()
+
+
+  _update_character_counter: ->
+    characters = @$input.val().length
+    left       = @config.limit - characters
+
+    if left >= 0
+      @$charCounter.html("(#{ left } left)")
+
+    else
+      @$charCounter.html("(#{ left })")
+
+
+    if characters > @config.limit
+      @$charCounter.addClass('exceeds')
+    else
+      @$charCounter.removeClass('exceeds')
+
+
   # PUBLIC ================================================
 
   initialize: ->

data/app/assets/javascripts/{chr/form → form}/input-text.coffee

@@ -11,8 +11,8 @@
 # -----------------------------------------------------------------------------
 #
 # Dependencies:
-#= require ../vendor/jquery.scrollparent
-#= require ../vendor/jquery.textarea_autosize
+#= require vendor/jquery.scrollparent
+#= require vendor/jquery.textarea_autosize
 #
 # -----------------------------------------------------------------------------
 class @InputText extends InputString
@@ -21,13 +21,16 @@ class @InputText extends InputString
 
   _add_input: ->
     @$input =$ "<textarea class='autosize' name='#{ @name }' rows=1>#{ @_safe_value() }</textarea>"
+    # trigger change event on keyup so value is cached while typing
+    @$input.on 'keyup', (e) => @$input.trigger('change')
     @$el.append @$input
 
 
   # PUBLIC ================================================
 
   initialize: ->
-    # TODO: refactor a bit plugin code so there is no blink while jumping from object to object
+    @config.beforeInitialize?(this)
+
     @$input.textareaAutoSize()
 
     @config.onInitialize?(this)