chr 0.2.1 → 0.2.4

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

@@ -0,0 +1,65 @@
+
+# -----------------------------------------------------------------------------
+# LIST CONFIG
+# Methods for processing:
+#   - @config.items
+#   - @config.arrayStore
+#   - @config.objectStore
+# -----------------------------------------------------------------------------
+
+@listConfig =
+  # PRIVATE ===============================================
+
+  _process_config_items: ->
+    for slug, config of @config.items
+      object = { _id: slug, _title: config.title ? slug.titleize() }
+
+      # There might be some cases when we need this:
+      #if config.objectStore
+      #  $.extend(object, config.objectStore.get())
+
+      if config.items or config.arrayStore
+        @module.addNestedList(slug, config, this)
+
+      @_add_item("#/#{ @path }/#{ slug }", object, 0, config)
+      @configItemsCount += 1
+
+
+  _bind_config_array_store: ->
+    # item added
+    @config.arrayStore.on 'object_added', (e, data) =>
+      @_add_item("#/#{ @path }/view/#{ data.object._id }", data.object, data.position, @config)
+
+    if @config.objects
+      @config.arrayStore.addObjects(@config.objects)
+
+    # item updated
+    @config.arrayStore.on 'object_changed', (e, data) =>
+      item = @items[data.object._id]
+      if item then item.render() ; @_update_item_position(item, data.position)
+
+    # item removed
+    @config.arrayStore.on 'object_removed', (e, data) =>
+      item = @items[data.object_id]
+      if item then item.destroy() ; delete @items[data.object_id]
+
+    # items loaded
+    @config.arrayStore.on 'objects_added', (e, data) =>
+      @_hide_spinner()
+      @_set_active_item()
+
+    if @config.arrayStore.pagination
+      @_bind_pagination()
+
+    if @config.arrayStore.searchable
+      @_bind_search(this)
+
+    if @config.arrayStore.reorderable
+      @_bind_reorder(this)
+
+
+  _bind_config_object_store: ->
+
+
+
+

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

@@ -0,0 +1,27 @@
+# -----------------------------------------------------------------------------
+# LIST PAGINATION
+# todo:
+#  - trigger onScroll event only when scrolling down
+# -----------------------------------------------------------------------------
+
+@listPagination =
+  # PRIVATE ===============================================
+
+  _bind_pagination: ->
+    arrayStore = @config.arrayStore
+    @$items.scroll (e) =>
+      if ! arrayStore.dataFetchLock
+        # TODO: update this logic as it's not reliable when items has different height
+        $listChildren        = @$items.children()
+        listChildrenCount    = $listChildren.length
+        listFirstChildHeight = $listChildren.first().outerHeight()
+        listHeight           = listChildrenCount * listFirstChildHeight
+        viewHeight           = @$el.height()
+
+        if listHeight < (viewHeight + e.target.scrollTop + 100)
+          @_show_spinner()
+          arrayStore.load()
+
+
+
+

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

@@ -0,0 +1,75 @@
+# -----------------------------------------------------------------------------
+# LIST REORDER
+# -----------------------------------------------------------------------------
+#
+# Dependencies:
+#= require ../vendor/slip
+#
+# -----------------------------------------------------------------------------
+
+@listReorder =
+  # PRIVATE ===============================================
+
+  _bind_reorder: (listEl) ->
+    items      = listEl.items
+    list       = listEl.$items.get(0)
+    arrayStore = listEl.config.arrayStore
+
+    config = arrayStore.reorderable
+
+    # 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) =>
+      # 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,
+        # error handling
+        onSuccess: (object) => ;
+        onError: (errors) => ;
+
+      return false
+    ), false
+
+    $(list).addClass 'reorderable'
+
+
+
+

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

@@ -0,0 +1,41 @@
+# -----------------------------------------------------------------------------
+# LIST SEARCH
+# -----------------------------------------------------------------------------
+
+@listSearch =
+  # PRIVATE ===============================================
+
+  _bind_search: (listEl) ->
+    $input     = listEl.$search
+    arrayStore = listEl.config.arrayStore
+
+    search = (input) ->
+      query = $(input).val()
+      listEl._show_spinner()
+      arrayStore.search(query)
+
+    show = ->
+      listEl.$el.addClass 'list-search'
+      $input.find('input').focus()
+
+    cancel = ->
+      listEl.$el.removeClass 'list-search'
+      $input.find('input').val('')
+      listEl._show_spinner()
+      arrayStore.reset()
+
+    $input.show()
+
+    $input.on 'keyup', 'input', (e) =>
+      if e.keyCode == 27 # esc
+        return cancel()
+
+      if e.keyCode == 13 # enter
+        return search(e.target)
+
+    $input.on 'click', '.icon',   (e) => e.preventDefault() ; show()
+    $input.on 'click', '.cancel', (e) => e.preventDefault() ; cancel()
+
+
+
+

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

@@ -8,11 +8,25 @@
 
 # -----------------------------------------------------------------------------
 # MODULE
-#
-# configuration options:
+# -----------------------------------------------------------------------------
+# Config options:
 #   title                - title used for menu and root list header
 #   showNestedListsAside - show module root list on the left and all nested
 #                          lists on the right side for desktop
+#
+# Public methods:
+#   addNestedList (listName, config, parentList)
+#   showNestedList (listName, animate=false)
+#   hideNestedLists (exceptList)
+#   visibleNestedListShownWithParent ()
+#   showRootList()
+#   hideActiveList (animate=false)
+#   showView (object, config, title, animate=false)
+#   showViewByObjectId (objectId, config, title, animate=false)
+#   destroyView ()
+#   show ()
+#   hide (animate=false)
+#
 # -----------------------------------------------------------------------------
 class @Module
   constructor: (@chr, @name, @config) ->
@@ -34,7 +48,7 @@ class @Module
       @$el.addClass 'first-list-aside'
       # jump to first nested list on menu click
       firstNestedList = _firstNonEmptyValue(@nestedLists)
-      if ! _isMobile() && firstNestedList
+      if ! @chr.isMobile() && firstNestedList
         menuPath += "/#{ firstNestedList.name }"
 
     @chr.addMenuItem(menuPath, menuTitle)
@@ -42,6 +56,8 @@ class @Module
     @config.onModuleInit?(this)
 
 
+  # PRIVATE ===============================================
+
   # update list data if it's not visible, e.g. for update action we do not
   # update whole list, this method is called before active list is shown.
   _update_active_list_items: ->
@@ -55,10 +71,46 @@ class @Module
     currentList.path
 
 
+  # PUBLIC ================================================
+
   addNestedList: (listName, config, parentList) ->
     @nestedLists[listName] = new List(this, listName, config, parentList)
 
 
+  # shows one of nested lists, with or without animation
+  showNestedList: (listName, animate=false) ->
+    listToShow = @nestedLists[listName]
+
+    if listToShow.showWithParent
+      # list works as view, never becomes active
+      listToShow.updateItems()
+      listToShow.show animate, => @hideNestedLists(exceptList=listName)
+
+    else
+      @activeList = listToShow
+      @_update_active_list_items()
+      @activeList.show(animate)
+
+    # hide view
+    if animate and @view then @view.$el.fadeOut $.fx.speeds._default, => @destroyView()
+
+
+  hideNestedLists: (exceptList) ->
+    @activeList = @rootList
+    list.hide() for key, list of @nestedLists when key isnt exceptList
+
+
+  visibleNestedListShownWithParent: ->
+    for key, list of @nestedLists
+      if list.isVisible() && list.showWithParent then return list
+
+
+  showRootList: () ->
+    @destroyView()
+    while @activeList != @rootList
+      @hideActiveList(false)
+
+
   hideActiveList: (animate=false)->
     if animate then @activeList.$el.fadeOut() else @activeList.$el.hide()
     @activeList = @activeList.parentList
@@ -105,34 +157,5 @@ class @Module
       @$el.hide()
 
 
-  # shows one of nested lists, with or without animation
-  showNestedList: (listName, animate=false) ->
-    listToShow = @nestedLists[listName]
-
-    if listToShow.showWithParent
-      # list works as view, never becomes active
-      listToShow.updateItems()
-      listToShow.show animate, => @hideNestedLists(exceptList=listName)
-
-    else
-      @activeList = listToShow
-      @_update_active_list_items()
-      @activeList.show(animate)
-
-    # hide view
-    if animate and @view then @view.$el.fadeOut $.fx.speeds._default, => @destroyView()
-
-
-  hideNestedLists: (exceptList) ->
-    @activeList = @rootList
-    list.hide() for key, list of @nestedLists when key isnt exceptList
-
-
-  # returns visible nested list that acts as view
-  visibleNestedListShownWithParent: ->
-    for key, list of @nestedLists
-      if list.isVisible() && list.showWithParent then return list
-
-
 
 

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

@@ -1,5 +1,26 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
 # -----------------------------------------------------------------------------
 # UTILS
+# -----------------------------------------------------------------------------
+# Public methods:
+#   _last(array)
+#   _first(array)
+#   _firstNonEmptyValue(hash)
+#   _escapeHtml(string)
+#   String.titleize()
+#   String.reverse()
+#   String.startsWith(str)
+#   String.endsWith(str)
+#   String.plainText()
+#   include(class, hash)
+# -----------------------------------------------------------------------------
 
 # _last(array)
 @_last = (array) -> array[array.length - 1]
@@ -10,20 +31,17 @@
 # _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.titleize != 'function'
-  String.prototype.titleize = () -> return this.replace(/_/g, ' ').replace(/\b./g, ((m) -> m.toUpperCase()))
+  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.prototype.reverse = -> return this.split("").reverse().join("")
 
 # String.startsWith
 if typeof String.prototype.startsWith != 'function'
@@ -33,17 +51,20 @@ if typeof String.prototype.startsWith != 'function'
 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
+# String.plainText
+if typeof String.prototype.plainText != 'function'
+  String.prototype.plainText = () -> return $("<div>#{ this }</div>").text()
 
-# Check if running on mobile
-@_isMobile = -> $(window).width() < 760
 
 # -----------------------------------------------------------------------------
+# Mixins: http://arcturo.github.io/library/coffeescript/03_classes.html
+# -----------------------------------------------------------------------------
+@extend = (obj, mixin) ->
+  obj[name] = method for name, method of mixin
+  return obj
+
+@include = (klass, mixin) ->
+  extend(klass.prototype, mixin)
 
 
 

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

@@ -9,11 +9,15 @@
 # -----------------------------------------------------------------------------
 # VIEW
 #
-# configuration options:
-#   formSchema    - form schema for object, autogenerated if missing
-#   disableDelete - do not add delete button below the form
-#   disableSave   - do not add save button in header
-#   fullsizeView  — use fullsize layout in desktop mode
+# config options:
+#   formClass        - custom form class to be used
+#   formSchema       - form schema for object, autogenerated if missing
+#   disableDelete    - do not add delete button below the form
+#   disableSave      - do not add save button in header
+#   fullsizeView     — use fullsize layout in desktop mode
+#   onViewShow       - on show callback
+#   onShowAnimation  - animation method to be used on show
+#   onCloseAnimation - animation method to be used on close
 #
 # public methods:
 #   show(animate, callback)
@@ -24,151 +28,120 @@ class @View
   constructor: (@module, @config, @closePath, @object, @title) ->
     @store = @config.arrayStore ? @config.objectStore
 
-    @$el =$ "<section class='view #{ @module.name }'>"
-    @$el.hide()
+    @$el =$ "<section class='view #{ @module.name }' style='display:none;'>"
 
+    # fullsize
     if @config.fullsizeView
       @$el.addClass 'fullsize'
 
+    # animations
+    @onShowAnimation   = @config.onShowAnimation
+    @onCloseAnimation  = @config.onCloseAnimation
+    @onShowAnimation  ?= (callback) => @$el.fadeIn  $.fx.speeds._default, -> callback()
+    @onCloseAnimation ?= (callback) => @$el.fadeOut $.fx.speeds._default, -> callback()
+
     # header
     @$header =$ "<header></header>"
-    @$el.append @$header
-
     @$title  =$ "<div class='title'></div>"
     @$header.append @$title
+    @$el.append @$header
+    @_set_title()
 
-    # close button
+    # close
     @$closeBtn =$ "<a href='#/#{ @closePath }' class='close silent'>Close</a>"
-    @$closeBtn.on 'click', (e) => @_on_close(e)
+    @$closeBtn.on 'click', (e) => @_close(e)
     @$header.append @$closeBtn
 
-    # save button
+    # save
     unless @config.disableSave
       @$saveBtn =$ "<a href='#' class='save'>Save</a>"
-      @$saveBtn.on 'click', (e) => @_on_save(e)
+      @$saveBtn.on 'click', (e) => @_save(e)
       @$header.append @$saveBtn
 
-    @_render()
-
+    # form
+    @form = new (@config.formClass ? Form)(@object, @config)
+    @$el.append @form.$el
+    @_add_form_delete_button()
 
-  _render: ->
-    @_update_title()
-    @_render_form()
 
+  # PRIVATE ===============================================
 
-  _update_title: ->
+  _set_title: (reset=false) ->
+    if reset && @config.arrayStore then @title = null
     title  = @title
     title ?= @object[@config.itemTitleField] if @config.itemTitleField
     title ?= _firstNonEmptyValue(@object)
+    @$title.html(title.plainText())
 
-    if title == "" then title = "No Title"
-
-    # remove html tags from title to do not break layout
-    titleText = $("<div>#{ title }</div>").text()
-    @$title.html(titleText)
 
-
-  _render_form: ->
-    @form?.destroy()
-    @form = new Form(@object, @config)
-
-    # delete button
-    unless @config.disableDelete or @config.objectStore or @_is_new()
+  _add_form_delete_button: ->
+    unless @config.disableDelete or @config.objectStore or (! @object)
       @$deleteBtn =$ "<a href='#' class='delete'>Delete</a>"
-      @$deleteBtn.on 'click', (e) => @_on_delete(e)
+      @$deleteBtn.on 'click', (e) => @_delete(e)
       @form.$el.append @$deleteBtn
 
-    @$el.append @form.$el
-
-
-  _update_object: (value) ->
-    @_start_saving()
-    @store.update @object._id, value,
-      onSuccess: (@object) =>
-        # 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()
-        @_initialize_form_plugins()
-        @form.$el.scrollTop(formScrollPosition)
-
-        @_stop_saving()
 
-      onError: (errors) =>
-        @_validation_errors('Changes were not saved.', errors)
-        @_stop_saving()
+  _save_success: ->
+    @$el.removeClass('view-saving')
+    @_set_title(true)
+    @form.updateValues(@object)
 
 
-  _create_object: (value) ->
-    @_start_saving()
-    # refactor this to subscribe to list event: item_added
-    @store.push value,
-      onSuccess: (object) =>
-        # we need to know when list item is added
-        location.hash = "#/#{ @closePath }/view/#{ object._id }"
-      onError: (errors) =>
-        @_validation_errors('Item were not created.', errors)
-        @_stop_saving()
-
-  _start_saving: ->
-    @$el.addClass('view-saving')
-
-
-  _stop_saving: ->
-    setTimeout ( => @$el.removeClass('view-saving') ), 250
-
-
-  _initialize_form_plugins: ->
-    @form.initializePlugins()
-    @config.onViewShow?(@)
-
-
-  _validation_errors: (message, errors) ->
+  _save_error: (message, validationErrors) ->
+    @$el.removeClass('view-saving')
     chr.showError(message)
-    @form.showValidationErrors(errors)
-
+    @form.showValidationErrors(validationErrors)
 
-  _is_new: ->
-    ! @object
 
+  # EVENTS ================================================
 
-  _on_close: (e) ->
-    @$el.fadeOut $.fx.speeds._default, => @destroy()
+  _close: (e) ->
+    @onCloseAnimation(=> @destroy())
 
 
-  _on_save: (e) ->
+  _save: (e) ->
     e.preventDefault()
+    @$el.addClass('view-saving')
+
     serializedFormObj = @form.serialize()
 
     if @object
-      @_update_object(serializedFormObj)
+      @store.update @object._id, serializedFormObj,
+        onSuccess: (@object) => @_save_success()
+        onError:   (errors)  => @_save_error('Changes were not saved.', errors)
     else
-      @_create_object(serializedFormObj)
+      @store.push serializedFormObj,
+        onSuccess: (@object) =>
+          @_save_success()
+          @_add_form_delete_button()
+          chr.updateHash("#/#{ @closePath }/view/#{ @object._id }", true)
+        onError: (errors) => @_save_error('Item were not created.', errors)
 
 
-  _on_delete: (e) ->
+  _delete: (e) ->
     e.preventDefault()
     if confirm("Are you sure?")
-      @store.remove(@object._id)
-      @$el.fadeOut $.fx.speeds._default, =>
-        window._skipHashchange = true
-        location.hash = "#/#{ @closePath }"
-        @destroy()
+      @store.remove @object._id,
+        onSuccess: => @onCloseAnimation( => chr.updateHash("#/#{ @closePath }", true) ; @destroy() )
+        onError:   -> chr.showError('Can\'t delete object.')
+
 
+  # PUBLIC ================================================
 
   show: (animate, callback) ->
+    after_show = =>
+      callback?()
+      @form.initializePlugins()
+      @config.onViewShow?(@)
+
     if animate
-      @$el.fadeIn($.fx.speeds._default, =>
-        @_initialize_form_plugins()
-        callback?())
+      @onShowAnimation(=> after_show())
     else
-      @$el.show 0, => @_initialize_form_plugins() ; callback?()
+      @$el.show(0, => after_show())
 
 
   destroy: ->
-    @form?.destroy()
+    @form.destroy()
     @$el.remove()