chr 0.1.0

data/app/assets/javascripts/chr/core/_listReorder.coffee

@@ -0,0 +1,70 @@
+# -----------------------------------------------------------------------------
+# LIST REORDER
+# -----------------------------------------------------------------------------
+# Dependencies:
+#  - slip
+# -----------------------------------------------------------------------------
+
+@_listBindReorder = (listEl) ->
+  items      = listEl.items
+  list       = listEl.$items.get(0)
+  arrayStore = listEl.config.arrayStore
+
+  config = arrayStore.reorderable
+
+  # NOTE: this is optimistic scenario when assumes that all positions are different
+  _getObjectNewPosition = (el) ->
+    $el =$ el
+
+    nextObjectId = $el.next().attr('data-id')
+    prevObjectId = $el.prev().attr('data-id')
+    nextObjectPosition = 0
+    prevObjectPosition = 0
+
+    if prevObjectId
+      prevObjectPosition = items[prevObjectId].position()
+
+    if nextObjectId
+      nextObjectPosition = items[nextObjectId].position()
+
+    if arrayStore.sortReverse
+      newPosition = nextObjectPosition + Math.abs(nextObjectPosition - prevObjectPosition) / 2.0
+    else
+      newPosition = prevObjectPosition + Math.abs(nextObjectPosition - prevObjectPosition) / 2.0
+
+    return newPosition
+
+  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: when `e.detail.insertBefore` is null, item put to the end of the list.
+    e.target.parentNode.insertBefore(e.target, e.detail.insertBefore)
+
+    objectPositionValue = _getObjectNewPosition(e.target)
+    objectId = $(e.target).attr('data-id')
+    value = {}
+    value["[#{arrayStore.sortBy}"] = objectPositionValue
+
+    arrayStore.update objectId, value,
+      # NOTE: error handling
+      onSuccess: (object) => ;
+      onError: (errors) => ;
+
+    return false
+  ), false
+
+  $(list).addClass 'reorderable'
+
+
+
+

data/app/assets/javascripts/chr/core/_listScroll.coffee

@@ -0,0 +1,23 @@
+# -----------------------------------------------------------------------------
+# LIST SCROLL
+# -----------------------------------------------------------------------------
+@_listBindScroll = (listEl) ->
+  $container = listEl.$el
+  $list      = listEl.$items
+  arrayStore = listEl.config.arrayStore
+
+  $list.scroll (e) =>
+    if not arrayStore.dataFetchLock
+      $listChildren        = $list.children()
+      listChildrenCount    = $listChildren.length
+      listFirstChildHeight = $listChildren.first().outerHeight()
+      listHeight           = listChildrenCount * listFirstChildHeight
+      viewHeight           = $container.height()
+
+      if listHeight < (viewHeight + e.target.scrollTop + 100)
+        listEl._loading -> arrayStore.fetchNextPage()
+
+
+
+
+

data/app/assets/javascripts/chr/core/_listSearch.coffee

@@ -0,0 +1,28 @@
+# -----------------------------------------------------------------------------
+# LIST SEARCH
+# -----------------------------------------------------------------------------
+@_listBindSearch = (listEl) ->
+  $input     = listEl.$search
+  arrayStore = listEl.config.arrayStore
+
+  $input.show()
+
+  $input.on 'keydown', 'input', (e) =>
+    if e.keyCode == 13
+      query = $(e.target).val()
+      listEl._loading -> arrayStore.search(query)
+
+  $input.on 'click', '.icon', (e) =>
+    e.preventDefault()
+    listEl.$el.addClass 'list-search'
+    $input.find('input').focus()
+
+  $input.on 'click', '.cancel', (e) =>
+    e.preventDefault()
+    listEl.$el.removeClass 'list-search'
+    $input.find('input').val('')
+    listEl._loading -> arrayStore.reset()
+
+
+
+

data/app/assets/javascripts/chr/core/_module.coffee

@@ -0,0 +1,98 @@
+# -----------------------------------------------------------------------------
+# MODULE
+# -----------------------------------------------------------------------------
+class @Module
+  constructor: (@chr, @name, @config) ->
+    @nestedLists = {}
+
+    @$el = $("<section class='module #{ @name }' style='display: none;'>")
+    @chr.$el.append @$el
+
+    menuTitle  = @config.menuTitle ? @config.title
+    menuTitle ?= @name.titleize()
+    @chr.addMenuItem(@name, menuTitle)
+
+    @activeList = @rootList = new List(this, @name, @config)
+
+
+  _updateActiveListItems: ->
+    # NOTE: update list data if it's not visible, e.g. for update action we do not
+    #       update whole list, this function should be called before active list got shown.
+    if not @activeList.isVisible()
+      @activeList.updateItems()
+
+  addNestedList: (listName, config, parentList) ->
+    @nestedLists[listName] = new List(this, listName, config, parentList)
+
+  selectActiveListItem: (href) ->
+    @unselectActiveListItem()
+    @activeList.selectItem(href)
+
+  unselectActiveListItem: ->
+    @activeList?.unselectItems()
+
+  hideActiveList: (animate=false)->
+    if animate then @activeList.$el.fadeOut() else @activeList.$el.hide()
+    @activeList = @activeList.parentList
+    @unselectActiveListItem()
+
+  showView: (object, config, title, animate=false) ->
+    newView = new View(this, config, @activeList.path, object, title)
+    @chr.$el.append(newView.$el)
+
+    @selectActiveListItem(location.hash)
+
+    newView.show animate, =>
+      @destroyView()
+      @view = newView
+
+  destroyView: ->
+    @view?.destroy()
+
+  show: ->
+    @chr.selectMenuItem(@name)
+    @unselectActiveListItem()
+
+    @_updateActiveListItems()
+    @$el.show()
+    @activeList.show(false)
+
+  hide: (animate=false) ->
+    @unselectActiveListItem()
+    @hideNestedLists()
+
+    if animate
+      # TODO: move animation to the view class
+      if @view then @view.$el.fadeOut $.fx.speeds._default, => @destroyView()
+      @$el.fadeOut()
+    else
+      @destroyView()
+      @$el.hide()
+
+  showNestedList: (listName, animate=false) ->
+    @selectActiveListItem(location.hash)
+    @activeList = @nestedLists[listName]
+
+    @_updateActiveListItems()
+
+    @activeList.show(animate)
+    if animate and @view then @view.$el.fadeOut $.fx.speeds._default, => @destroyView()
+
+  hideNestedLists: ->
+    @activeList = @rootList
+    list.hide() for key, list of @nestedLists
+
+  showViewWhenObjectsAreReady: (objectId, config) ->
+    object = config.arrayStore.get(objectId)
+    if object then return @showView(object, config)
+
+    $(config.arrayStore).one 'objects_added', (e, data) =>
+      object = config.arrayStore.get(objectId)
+      if object then return @showView(object, config)
+
+      console.log "object #{objectId} is not in the list"
+
+
+
+
+

data/app/assets/javascripts/chr/core/_utils.coffee

@@ -0,0 +1,50 @@
+# -----------------------------------------------------------------------------
+# UTILS
+
+# _last(array)
+@_last = (array) -> array[array.length - 1]
+
+# _first(array)
+@_first = (array) -> array[0]
+
+# _firstNonEmptyValue(hash)
+@_firstNonEmptyValue = (o) -> ((return v if k[0] != '_' and v and v != '') for k, v of o) ; return null
+
+# _stripHtml(string)
+@_stripHtml = (string) -> String(string).replace(/<\/?[^>]+(>|$)/g, "")
+
+# _escapeHtml(string)
+@_entityMap  = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': '&quot;', "'": '&#39;', "/": '&#x2F;' }
+@_escapeHtml = (string) -> String(string).replace /[&<>"'\/]/g, (s) -> _entityMap[s]
+
+# String.titleize
+if typeof String.prototype.startsWith != 'function'
+  String.prototype.titleize = () -> return this.replace(/_/g, ' ').replace(/\b./g, ((m) -> m.toUpperCase()))
+
+# String.reverse
+if typeof String.prototype.reverse != 'function'
+  String.prototype.reverse = (str) -> return this.split("").reverse().join("")
+
+# String.startsWith
+if typeof String.prototype.startsWith != 'function'
+  String.prototype.startsWith = (str) -> return this.slice(0, str.length) == str
+
+# String.endsWith
+if typeof String.prototype.endsWith != 'function'
+  String.prototype.endsWith = (str) -> return this.slice(this.length - str.length, this.length) == str
+
+# -----------------------------------------------------------------------------
+# HELPERS
+
+# Helps to figure out how many list items fits screen height
+@_itemsPerScreen      = -> itemHeight = 60 ; return Math.ceil($(window).height() / itemHeight)
+@_itemsPerPageRequest = _itemsPerScreen() * 2
+
+# Check if running on mobile
+@_isMobile = -> $(window).width() < 760
+
+# -----------------------------------------------------------------------------
+
+
+
+

data/app/assets/javascripts/chr/core/_view.coffee

@@ -0,0 +1,121 @@
+# -----------------------------------------------------------------------------
+# VIEW
+# -----------------------------------------------------------------------------
+class @View
+  _renderForm: ->
+    @form?.destroy()
+    @form = new Form(@object, @config)
+
+    unless @config.disableDelete or @config.objectStore or @_isNew()
+      @$deleteBtn =$ "<a href='#' class='delete'>Delete</a>"
+      @$deleteBtn.on 'click', (e) => @onDelete(e)
+      @form.$el.append @$deleteBtn
+
+    @$el.append @form.$el
+
+  _render: ->
+    title  = @title
+    title ?= @object[@config.itemTitleField] if @config.itemTitleField
+    title ?= _firstNonEmptyValue(@object)
+    if title == "" then title = "No Title"
+
+    # NOTE: remove html tags from title to do not break layout
+    titleText = $("<div>#{ title }</div>").text()
+    @$title.html(titleText)
+
+    @_renderForm()
+
+  _initializeFormPlugins: ->
+    # NOTE: we might need a callback here to workaround plugins blink issue, by setting
+    #       form opacity to 0 and then fading to 1 after plugins are ready.
+    @form.initializePlugins()
+    @config.onViewShow?(@)
+
+  _updateObject: (value) ->
+    @$el.addClass('view-saving')
+    @store.update @object._id, value,
+      onSuccess: (object) =>
+        # TODO: add a note here for this line, it's not obvious why it's here,
+        #       looks like some logic related to title update
+        if @config.arrayStore then @title = null
+
+        formScrollPosition = @form.$el.scrollTop()
+        @_render()
+        @_initializeFormPlugins()
+        @form.$el.scrollTop(formScrollPosition)
+
+        setTimeout ( => @$el.removeClass('view-saving') ), 250
+      onError: (errors) =>
+        @validationErrors(errors)
+        setTimeout ( => @$el.removeClass('view-saving') ), 250
+
+  _createObject: (value) ->
+    @$el.addClass('view-saving')
+    @store.push value,
+      onSuccess: (object) =>
+        # NOTE: jump to the newely created item, added to the top of the list by default
+        location.hash = "#/#{ @closePath }/view/#{ object._id }"
+      onError: (errors) =>
+        @validationErrors(errors)
+        setTimeout ( => @$el.removeClass('view-saving') ), 250
+
+  _isNew: -> not @object
+
+  constructor: (@module, @config, @closePath, @object, @title) ->
+    @store = @config.arrayStore ? @config.objectStore
+
+    @$el =$ "<section class='view #{ @module.name }'>"
+    @$el.hide()
+
+    @$header =$ "<header></header>"
+    @$title  =$ "<div class='title'></div>"
+    @$header.append @$title
+
+    @$closeBtn =$ "<a href='#/#{ @closePath }' class='close silent'>Close</a>"
+    @$closeBtn.on 'click', (e) => @onClose(e)
+    @$header.append @$closeBtn
+
+    unless @config.disableSave
+      @$saveBtn =$ "<a href='#' class='save'>Save</a>"
+      @$saveBtn.on 'click', (e) => @onSave(e)
+      @$header.append @$saveBtn
+
+    @$el.append @$header
+
+    @_render()
+
+  show: (animate, callback) ->
+    if animate
+      @$el.fadeIn($.fx.speeds._default, => @_initializeFormPlugins() ; callback?())
+    else
+      @$el.show 0, => @_initializeFormPlugins() ; callback?()
+
+  destroy: ->
+    @form?.destroy()
+    @$el.remove()
+
+  onClose: (e) ->
+    @module.unselectActiveListItem()
+    @$el.fadeOut $.fx.speeds._default, => @destroy()
+
+  onSave: (e) ->
+    e.preventDefault()
+    serializedObj = @form.serialize()
+    if @object then @_updateObject(serializedObj) else @_createObject(serializedObj)
+
+  onDelete: (e) ->
+    e.preventDefault()
+    if confirm("Are you sure?")
+      @store.remove(@object._id)
+      @$el.fadeOut $.fx.speeds._default, =>
+        window._skipHashchange = true
+        location.hash = "#/#{ @closePath }"
+        @destroy()
+
+  validationErrors: (errors) ->
+    @form.showValidationErrors(errors)
+
+
+
+
+

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

@@ -0,0 +1,205 @@
+# -----------------------------------------------------------------------------
+# FORM
+# Generates form based on provided configuration schema.
+# If schema is not provided generates default form based on object keys.
+# -----------------------------------------------------------------------------
+
+@_chrFormInputs ?= {}
+
+class @Form
+  constructor: (@object, @config) ->
+    @groups    = []
+    @inputs    = {}
+    @$el       = $(@config.rootEl || '<form>')
+    @schema    = @_getSchema()
+    @isRemoved = false
+
+    @_buildSchema(@schema, @$el)
+    @_addNestedFormRemoveButton()
+
+  #
+  # SCHEMA
+  #
+
+  _getSchema: ->
+    schema = @config.formSchema
+    if @object
+      schema ?= @_generateDefaultSchema()
+    return schema
+
+  _generateDefaultSchema: ->
+    schema = {}
+    for key, value of @object
+      schema[key] = @_generateDefaultInputConfig(key, value)
+    return schema
+
+  _generateDefaultInputConfig: (fieldName, value) ->
+    config = {}
+
+    if fieldName[0] == '_'
+      config.type = 'hidden'
+
+    else if value in [ true, false ]
+      config.type = 'checkbox'
+
+    else if value
+
+      if value.hasOwnProperty('url')
+        config.type = 'file'
+
+      else if value.length > 60
+        config.type = 'text'
+
+    return config
+
+  #
+  # INPUTS
+  #
+
+  _buildSchema: (schema, $el) ->
+    for fieldName, config of schema
+      if config.type == 'group'
+        group = @_generateInputsGroup(fieldName, config)
+        $el.append group.$el
+      else
+        input = @_generateInput(fieldName, config)
+        $el.append input.$el
+
+  _generateInputsGroup: (klassName, groupConfig) ->
+    $group =$ """<div class='group #{ klassName }' />"""
+    if groupConfig.inputs
+      @_buildSchema(groupConfig.inputs, $group)
+    group = { $el: $group, klassName: klassName, onInitialize: groupConfig.onInitialize }
+    @groups.push group
+    return group
+
+  _generateInput: (fieldName, inputConfig) ->
+    if @object
+      value = @object[fieldName]
+    else
+      value = inputConfig.default
+
+    value ?= ''
+
+    inputName = inputConfig.name || fieldName
+    input     = @_renderInput(inputName, inputConfig, value)
+    @inputs[fieldName] = input
+    return input
+
+  _renderInput: (name, config, value) ->
+    inputConfig = $.extend {}, config
+
+    inputConfig.label    ?= @_titleizeLabel(name)
+    inputConfig.type     ?= 'string'
+    inputConfig.klass    ?= 'stacked'
+    inputConfig.klassName = name
+
+    inputClass  = _chrFormInputs[inputConfig.type]
+    inputClass ?= _chrFormInputs['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]")
+    else
+      inputConfig.namePrefix = @config.namePrefix
+
+    return new inputClass(inputName, value, inputConfig, @object)
+
+  _titleizeLabel: (value) ->
+    value.titleize().replace('Id', 'ID')
+
+  #
+  # NESTED
+  #
+
+  _addNestedFormRemoveButton: ->
+    if @config.removeButton
+      # add special hidden input to the form
+      fieldName          = '_destroy'
+      input              = @_renderInput(fieldName, { type: 'hidden' }, false)
+      @inputs[fieldName] = input
+      @$el.append input.$el
+      # add 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?')
+          input.updateValue('true')
+          @$el.hide()
+          @isRemoved = true
+          @config.onRemove?(this)
+
+  _forms: ->
+    forms = [ @ ]
+    addNestedForms = (form) ->
+      for name, input of form.inputs
+        if input.config.type == 'form'
+          forms = forms.concat(input.forms)
+          addNestedForms(form) for form in input.forms
+    addNestedForms(@)
+
+    return forms
+
+  #
+  # PUBLIC
+  #
+
+  destroy: ->
+    @$el.remove()
+
+  serialize: (obj={}) ->
+    # NOTE: this serializes 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)
+      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'
+
+      # NOTE: 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)
+
+    for name, input of @inputs
+      input.initialize()
+
+  showValidationErrors: (errors) ->
+    @hideValidationErrors()
+    for inputName, messages of errors
+      input        = @inputs[inputName]
+      firstMessage = messages[0]
+      input.showErrorMessage(firstMessage)
+
+  hideValidationErrors: ->
+    for inputName, input of @inputs
+      input.hideErrorMessage()
+
+  updateValues: (object) ->
+    for name, value of object
+      if @inputs[name]
+        @inputs[name].updateValue(value, object)
+
+
+
+