chr 0.1.0

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

@@ -0,0 +1,23 @@
+# -----------------------------------------------------------------------------
+# INPUT TEXT
+# Dependencies:
+#  - jquery.textaread_autosize.js (https://github.com/javierjulio/textarea-autosize)
+#  - bugfix: https://github.com/javierjulio/textarea-autosize/issues/8#issuecomment-67300688
+# -----------------------------------------------------------------------------
+class @InputText extends InputString
+  _addInput: ->
+    @$input =$ "<textarea class='autosize' name='#{ @name }' id='#{ @name }' rows=1>#{ @_valueSafe() }</textarea>"
+    @$el.append @$input
+
+  initialize: ->
+    # TODO: refactor a bit plugin code so there is no blink while jumping from object to object
+    @$input.textareaAutoSize()
+
+    @config.onInitialize?(this)
+
+
+_chrFormInputs['text'] = InputText
+
+
+
+

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

@@ -0,0 +1,164 @@
+# -----------------------------------------------------------------------------
+# NESTED FORM
+# -----------------------------------------------------------------------------
+class @NestedForm
+  constructor: (@name, @nestedObjects, @config, @object) ->
+    @forms = []
+
+    @config.namePrefix  ||= name
+    @config.removeButton  = true
+    @config.formSchema.id = { type: 'hidden' }
+    @reorderContainerClass = "nested-forms-#{@config.klassName}"
+
+    if @config.sortBy
+      @config.formSchema[@config.sortBy] = { type: 'hidden' }
+      if @nestedObjects
+        # NOTE: 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])
+        # NOTE: normalizes nested objects positions
+        (o[@config.sortBy] = parseInt(i) + 1) for i, o of @nestedObjects
+
+    @$el =$ "<div class='input-stacked nested-forms #{ @config.klassName }'>"
+
+    @_addLabel()
+    @_addForms()
+    @_addFormsReorder()
+    @_addNewButton()
+
+    return this
+
+  _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
+
+  _addForms: ->
+    @$forms =$ "<ul>"
+    @$el.append @$forms
+
+    # if not default value which means no objects
+    if @nestedObjects != ''
+      for i, object of @nestedObjects
+        namePrefix = "#{ @config.namePrefix }[#{ i }]"
+        @forms.push @_renderForm(object, namePrefix, @config)
+
+  _renderForm: (object, namePrefix, config) ->
+    formConfig = $.extend {}, config,
+      namePrefix: namePrefix
+      rootEl:     "<li>"
+
+    form = new Form(object, formConfig)
+    @$forms.append form.$el
+
+    return form
+
+  _addFormsReorder: ->
+    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) =>
+        # NOTE: 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 = @_findFormByTarget(e.target)
+        if targetForm
+          # NOTE: 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    = @_findFormByTarget($targetForm.prev().get(0))
+          nextForm    = @_findFormByTarget($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
+
+      @_addFormReorderButton(form) for form in @forms
+
+  _addFormReorderButton: (form) ->
+    form.$el.append("""<div class='icon-reorder' data-container-class='#{@reorderContainerClass}'></div>""").addClass('reorderable')
+
+  _findFormByTarget: (el) ->
+    if el
+      for form in @forms
+        if form.$el.get(0) == el then return form
+    return null
+
+  _addNewButton: ->
+    label = @config.newButtonLabel || "Add"
+    @$newButton =$ """<a href='#' class='nested-form-new'>#{ label }</a>"""
+    @$el.append @$newButton
+    @$newButton.on 'click', (e) => e.preventDefault() ; @addNewForm()
+
+  #
+  # PUBLIC
+  #
+
+  addNewForm: (object=null) ->
+    namePrefix    = "#{ @config.namePrefix }[#{ Date.now() }]"
+    newFormConfig = $.extend({}, @config)
+
+    delete newFormConfig.formSchema.id
+
+    form = @_renderForm(object, namePrefix, newFormConfig)
+    form.initializePlugins()
+
+    if @config.sortBy
+      @_addFormReorderButton(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
+
+  initialize: ->
+    for nestedForm in @forms
+      nestedForm.initializePlugins()
+    @config.onInitialize?(this)
+
+  showErrorMessage: (message) ->
+    @$el.addClass 'error'
+    @$errorMessage.html(message)
+
+  hideErrorMessage: ->
+    @$el.removeClass 'error'
+    @$errorMessage.html('')
+
+  updateValue: (@value) ->
+    # TODO: update
+
+  hash: (hash={})->
+    hash[@config.klassName] = []
+    for form in @forms
+      hash[@config.klassName].push form.hash()
+    return hash
+
+_chrFormInputs['form'] = NestedForm
+
+
+
+

data/app/assets/javascripts/chr/store/_store.coffee

@@ -0,0 +1,104 @@
+# -----------------------------------------------------------------------------
+# OBJECT STORE
+# -----------------------------------------------------------------------------
+class @ObjectStore
+  constructor: (@config={}) ->
+    @_initializeDatabase()
+
+  _fetchData: ->
+    @_data = @config.data
+
+  _initializeDatabase: ->
+    @_fetchData()
+
+  get: ->
+    @_data
+
+  _updateDataObject: (value, callback) ->
+    callback?($.extend(@_data, value))
+
+  update: (id, value, callback) ->
+    @_updateDataObject(value, callback)
+
+
+# -----------------------------------------------------------------------------
+# ARRAY STORE
+# -----------------------------------------------------------------------------
+class @ArrayStore
+  _sortData: ->
+    # http://stackoverflow.com/questions/9796764/how-do-i-sort-an-array-with-coffeescript
+    if @sortBy
+      fieldName = @sortBy
+      direction = if @sortReverse then 1 else -1
+
+      sortBy = (key, a, b, dir) ->
+        if a[key] > b[key] then return -1*dir
+        if a[key] < b[key] then return +1*dir
+        return 0
+
+      @_data = @_data.sort (a, b) -> sortBy(fieldName, a, b, direction)
+
+  _mapData: ->
+    ( @_map[o._id] = o for o in @_data )
+
+  _addDataObject: (object, callback)->
+    @_map[object._id] = object
+    @_data.push(object)
+    @_sortData()
+    position = @_getDataObjectPosition(object._id)
+    $(this).trigger('object_added', { object: object, position: position, callback: callback })
+
+  _resetData: ->
+    for id, o of @_map
+      $(this).trigger('object_removed', { object_id: id })
+    @_map  = {}
+    @_data = []
+
+  _removeDataObject: (id) ->
+    position = @_getDataObjectPosition(id)
+    if position >= 0
+      delete @_data[position]
+    delete @_map[id]
+    $(this).trigger('object_removed', { object_id: id })
+
+  _updateDataObject: (id, value, callback) ->
+    object = $.extend(@get(id), value)
+    @_sortData()
+    position = @_getDataObjectPosition(id)
+    $(this).trigger('object_changed', { object: object, position: position, callback: callback })
+
+  _getDataObjectPosition: (id) ->
+    ids = []
+    for o in @_data
+      if o then ids.push(o._id)
+    $.inArray id, ids
+
+  constructor: (@config={}) ->
+    @_map  = {}
+    @_data = []
+    @_initializeDatabase()
+
+  _initializeDatabase: ->
+
+  off: (eventType) ->
+    if eventType then $(this).off(eventType) else $(this).off()
+
+  on: (eventType, callback) -> # event types: object_added, object_changed, object_removed
+    $(this).on eventType, (e, data) -> callback(e, data)
+    # NOTE: this called once when list subscribes to store updates
+    if eventType == 'object_added' then @_fetchData()
+
+  _fetchData: ->
+    if @config.data
+      @_addDataObject(o) for o in @config.data
+
+  get: (id) -> @_map[id]
+
+  update: (id, value, callback) ->
+    @_updateDataObject(id, value, callback)
+
+  push: (value, callback) ->
+    @_addDataObject($.extend({ _id: Date.now() }, value), callback)
+
+  remove: (id) ->
+    @_removeDataObject(id)

data/app/assets/javascripts/chr/store/_storeRails.coffee

@@ -0,0 +1,167 @@
+# -----------------------------------------------------------------------------
+# RAILS OBJECT STORE IMPLEMENTATION
+# -----------------------------------------------------------------------------
+class @RailsObjectStore extends ObjectStore
+  # _initializeDatabase: ->
+  #   @database = new Firebase("https://#{ @config.dbName }.firebaseio.com/")
+  #   @dataRef  = @database.child(@config.path)
+  #   @_fetchData()
+
+  # _fetchData: ->
+  #   @dataRef.once 'value', (dataSnapshot) =>
+  #     @_data = dataSnapshot.val() ? {}
+
+  # update: (id, value, callback) ->
+  #   @dataRef.set value, => @_updateDataObject(value, callback)
+
+
+# -----------------------------------------------------------------------------
+# RAILS ARRAY/COLLECTION STORE IMPLEMENTATION
+# -----------------------------------------------------------------------------
+class @RailsArrayStore extends ArrayStore
+  _initializeDatabase: ->
+    @resetData     = false
+    @searchable    = @config.searchable  ? false
+    @pagination    = @config.pagination  ? true
+    @reorderable   = @config.reorderable ? false
+    @dataFetchLock = false
+    @pagesCounter  = 0
+    @searchQuery   = ''
+
+    # if reorderable we need to set proper config for sorting
+    if @reorderable
+      @sortBy      = @reorderable.positionFieldName
+      @sortReverse = @reorderable.sortReverse || false
+
+    # bootstraped data provided
+    if @config.data
+      @pagesCounter = 1
+
+  _addDataObjectToTheTop: (object, callback) ->
+    @_map[object._id] = object
+    @_data.unshift(object)
+    position = 0
+    $(this).trigger('object_added', { object: object, position: position, callback: callback })
+
+  _wrapRailsObject: (object) ->
+    # NOTE: generate form data object
+    data = new FormData()
+    for attr_name, attr_value of object
+      # NOTE: special case for LIST inputs, values separated with comma
+      if attr_name.indexOf('[__LIST__') > -1
+        attr_name = attr_name.replace('__LIST__', '')
+        values    = attr_value.split(',')
+        for value in values
+          data.append("#{ @config.resource }#{ attr_name }[]", value)
+      else
+        # NOTE: special case for FILE inputs
+        if attr_name.startsWith('__FILE__')
+          attr_name = attr_name.replace('__FILE__', '')
+
+        data.append("#{ @config.resource }#{ attr_name }", attr_value)
+    return data
+
+  _urlWithParams: (url) ->
+    if @config.urlParams
+      extraParamString = $.param(@config.urlParams)
+      if url.indexOf('?') > 0
+        url = "#{ url }&#{ extraParamString }"
+      else
+        url = "#{ url }?#{ extraParamString }"
+    return url
+
+  _delete: (id, success) ->
+    @dataFetchLock = true
+    $.ajax
+      type:     'DELETE'
+      url:      @_urlWithParams("#{ @config.path }/#{ id }.json")
+      success: (data, textStatus, jqXHR) =>
+        @dataFetchLock = false
+        success?(data)
+
+  _post: (object, success, error) ->
+    @dataFetchLock = true
+    $.ajax
+      type:        'POST'
+      url:         @_urlWithParams("#{ @config.path }.json")
+      data:        @_wrapRailsObject(object)
+      processData: false
+      contentType: false
+      success: (data, textStatus, jqXHR) =>
+        @dataFetchLock = false
+        success?(data)
+      error: (jqXHR, textStatus, errorThrown ) =>
+        @dataFetchLock = false
+        error?(jqXHR.responseJSON)
+
+  _put: (id, object, success, error) ->
+    @dataFetchLock = true
+    $.ajax
+      type:        'PUT'
+      url:         @_urlWithParams("#{ @config.path }/#{ id }.json")
+      data:        @_wrapRailsObject(object)
+      processData: false
+      contentType: false
+      success: (data, textStatus, jqXHR) =>
+        @dataFetchLock = false
+        success?(data)
+      error: (jqXHR, textStatus, errorThrown ) =>
+        @dataFetchLock = false
+        error?(jqXHR.responseJSON)
+
+  _get: (params, success) ->
+    @dataFetchLock = true
+    $.get @_urlWithParams("#{ @config.path }.json"), params, (data) =>
+      if data.length > 0
+        @pagesCounter = @pagesCounter + 1
+        for o in data
+          @_addDataObject(o)
+
+      @dataFetchLock = false
+      success?()
+      $(this).trigger('objects_added')
+
+  #
+  # PUBLIC
+  #
+
+  fetchNextPage: (callback) ->
+    params = {}
+    if @pagination
+      params.page    = @pagesCounter + 1
+      params.perPage = _itemsPerPageRequest
+    if @searchQuery.length > 0
+      params.search = @searchQuery
+    @_get(params)
+
+  search: (@searchQuery, callback) ->
+    @pagesCounter = 0
+    @_resetData()
+    @fetchNextPage(callback)
+
+  reset: (callback) ->
+    @searchQuery  = ''
+    @pagesCounter = 0
+    @_resetData()
+    @fetchNextPage(callback)
+
+  update: (id, object, callbacks) ->
+    @_put id, object, ((data) =>
+      @_updateDataObject(id, data, callbacks.onSuccess)
+    ), callbacks.onError
+
+  push: (object, callbacks) ->
+    @_post object, ((data) =>
+      if @config.sortBy
+        @_addDataObject(data, callbacks.onSuccess)
+      else
+        @_addDataObjectToTheTop(data, callbacks.onSuccess)
+    ), callbacks.onError
+
+  remove: (id) ->
+    @_delete id, (data) =>
+      @_removeDataObject(id)
+
+
+
+