chr 0.1.5 → 0.2.0

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

@@ -1,5 +1,18 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
 # -----------------------------------------------------------------------------
 # MODULE
+#
+# configuration 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
 # -----------------------------------------------------------------------------
 class @Module
   constructor: (@chr, @name, @config) ->
@@ -8,57 +21,79 @@ class @Module
     @$el = $("<section class='module #{ @name }' style='display: none;'>")
     @chr.$el.append @$el
 
+    # root list
+    @activeList = @rootList = new List(this, @name, @config)
+
+    # menu item + layout
     menuTitle  = @config.menuTitle ? @config.title
     menuTitle ?= @name.titleize()
-    @chr.addMenuItem(@name, menuTitle)
+    menuPath   = @name
 
-    @activeList = @rootList = new List(this, @name, @config)
+    # do not hide root list layout, nested lists are shown on aside
+    if @config.showNestedListsAside
+      @$el.addClass 'first-list-aside'
+      # jump to first nested list on menu click
+      firstNestedList = _firstNonEmptyValue(@nestedLists)
+      if ! _isMobile() && firstNestedList
+        menuPath += "/#{ firstNestedList.name }"
+
+    @chr.addMenuItem(menuPath, menuTitle)
 
+    @config.onModuleInit?(this)
 
-  _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.
+
+  # 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: ->
     if not @activeList.isVisible()
       @activeList.updateItems()
 
+
+  # returns path for the current list
+  _view_path: ->
+    currentList = @visibleNestedListShownWithParent() ? @activeList
+    currentList.path
+
+
   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)
+    newView = new View(this, config, @_view_path(), object, title)
     @chr.$el.append(newView.$el)
 
-    @selectActiveListItem(location.hash)
-
     newView.show animate, =>
       @destroyView()
       @view = newView
 
+
+  showViewByObjectId: (objectId, config, title, animate=false) ->
+    onSuccess = (object) => @showView(object, config, title, animate)
+    onError   = -> chr.showError("can\'t show view for requested object")
+
+    if objectId == ''
+      config.objectStore.loadObject({ onSuccess: onSuccess, onError: onError })
+    else
+      config.arrayStore.loadObject(objectId, { onSuccess: onSuccess, onError: onError })
+
+
   destroyView: ->
     @view?.destroy()
 
-  show: ->
-    @chr.selectMenuItem(@name)
-    @unselectActiveListItem()
 
-    @_updateActiveListItems()
+  show: ->
+    @_update_active_list_items()
     @$el.show()
     @activeList.show(false)
 
+
   hide: (animate=false) ->
-    @unselectActiveListItem()
     @hideNestedLists()
 
     if animate
@@ -69,29 +104,34 @@ class @Module
       @destroyView()
       @$el.hide()
 
+
+  # shows one of nested lists, with or without animation
   showNestedList: (listName, animate=false) ->
-    @selectActiveListItem(location.hash)
-    @activeList = @nestedLists[listName]
+    listToShow = @nestedLists[listName]
 
-    @_updateActiveListItems()
+    if listToShow.showWithParent
+      # list works as view, never becomes active
+      listToShow.updateItems()
+      listToShow.show animate, => @hideNestedLists(exceptList=listName)
 
-    @activeList.show(animate)
-    if animate and @view then @view.$el.fadeOut $.fx.speeds._default, => @destroyView()
+    else
+      @activeList = listToShow
+      @_update_active_list_items()
+      @activeList.show(animate)
 
-  hideNestedLists: ->
-    @activeList = @rootList
-    list.hide() for key, list of @nestedLists
+    # hide view
+    if animate and @view then @view.$el.fadeOut $.fx.speeds._default, => @destroyView()
 
-  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)
+  hideNestedLists: (exceptList) ->
+    @activeList = @rootList
+    list.hide() for key, list of @nestedLists when key isnt exceptList
 
-      console.log "object #{objectId} is not in the list"
 
+  # 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/view.coffee

@@ -1,109 +1,154 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
 # -----------------------------------------------------------------------------
 # 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
+#
+# public methods:
+#   show(animate, callback)
+#   destroy()
+#
 # -----------------------------------------------------------------------------
 class @View
-  _renderForm: ->
-    @form?.destroy()
-    @form = new Form(@object, @config)
+  constructor: (@module, @config, @closePath, @object, @title) ->
+    @store = @config.arrayStore ? @config.objectStore
 
-    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 =$ "<section class='view #{ @module.name }'>"
+    @$el.hide()
+
+    if @config.fullsizeView
+      @$el.addClass 'fullsize'
+
+    # header
+    @$header =$ "<header></header>"
+    @$el.append @$header
+
+    @$title  =$ "<div class='title'></div>"
+    @$header.append @$title
+
+    # close button
+    @$closeBtn =$ "<a href='#/#{ @closePath }' class='close silent'>Close</a>"
+    @$closeBtn.on 'click', (e) => @_on_close(e)
+    @$header.append @$closeBtn
+
+    # save button
+    unless @config.disableSave
+      @$saveBtn =$ "<a href='#' class='save'>Save</a>"
+      @$saveBtn.on 'click', (e) => @_on_save(e)
+      @$header.append @$saveBtn
+
+    @_render()
 
-    @$el.append @form.$el
 
   _render: ->
+    @_update_title()
+    @_render_form()
+
+
+  _update_title: ->
     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
+    # 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?(@)
+  _render_form: ->
+    @form?.destroy()
+    @form = new Form(@object, @config)
 
-  _updateObject: (value) ->
-    @$el.addClass('view-saving')
+    # delete button
+    unless @config.disableDelete or @config.objectStore or @_is_new()
+      @$deleteBtn =$ "<a href='#' class='delete'>Delete</a>"
+      @$deleteBtn.on 'click', (e) => @_on_delete(e)
+      @form.$el.append @$deleteBtn
+
+    @$el.append @form.$el
+
+
+  _update_object: (value) ->
+    @_start_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
+      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()
-        @_initializeFormPlugins()
+        @_initialize_form_plugins()
         @form.$el.scrollTop(formScrollPosition)
 
-        setTimeout ( => @$el.removeClass('view-saving') ), 250
+        @_stop_saving()
+
       onError: (errors) =>
-        @validationErrors(errors)
-        setTimeout ( => @$el.removeClass('view-saving') ), 250
+        @_validation_errors('Changes were not saved.', errors)
+        @_stop_saving()
 
-  _createObject: (value) ->
-    @$el.addClass('view-saving')
+
+  _create_object: (value) ->
+    @_start_saving()
+    # refactor this to subscribe to list event: item_added
     @store.push value,
       onSuccess: (object) =>
-        # NOTE: jump to the newely created item, added to the top of the list by default
+        # we need to know when list item is added
         location.hash = "#/#{ @closePath }/view/#{ object._id }"
       onError: (errors) =>
-        @validationErrors(errors)
-        setTimeout ( => @$el.removeClass('view-saving') ), 250
+        @_validation_errors('Item were not created.', errors)
+        @_stop_saving()
 
-  _isNew: -> not @object
+  _start_saving: ->
+    @$el.addClass('view-saving')
 
-  constructor: (@module, @config, @closePath, @object, @title) ->
-    @store = @config.arrayStore ? @config.objectStore
 
-    @$el =$ "<section class='view #{ @module.name }'>"
-    @$el.hide()
+  _stop_saving: ->
+    setTimeout ( => @$el.removeClass('view-saving') ), 250
 
-    @$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
+  _initialize_form_plugins: ->
+    @form.initializePlugins()
+    @config.onViewShow?(@)
 
-    unless @config.disableSave
-      @$saveBtn =$ "<a href='#' class='save'>Save</a>"
-      @$saveBtn.on 'click', (e) => @onSave(e)
-      @$header.append @$saveBtn
 
-    @$el.append @$header
+  _validation_errors: (message, errors) ->
+    chr.showError(message)
+    @form.showValidationErrors(errors)
 
-    @_render()
 
-  show: (animate, callback) ->
-    if animate
-      @$el.fadeIn($.fx.speeds._default, => @_initializeFormPlugins() ; callback?())
-    else
-      @$el.show 0, => @_initializeFormPlugins() ; callback?()
+  _is_new: ->
+    ! @object
 
-  destroy: ->
-    @form?.destroy()
-    @$el.remove()
 
-  onClose: (e) ->
-    @module.unselectActiveListItem()
+  _on_close: (e) ->
     @$el.fadeOut $.fx.speeds._default, => @destroy()
 
-  onSave: (e) ->
+
+  _on_save: (e) ->
     e.preventDefault()
     serializedFormObj = @form.serialize()
-    if @object then @_updateObject(serializedFormObj) else @_createObject(serializedFormObj)
 
-  onDelete: (e) ->
+    if @object
+      @_update_object(serializedFormObj)
+    else
+      @_create_object(serializedFormObj)
+
+
+  _on_delete: (e) ->
     e.preventDefault()
     if confirm("Are you sure?")
       @store.remove(@object._id)
@@ -112,8 +157,19 @@ class @View
         location.hash = "#/#{ @closePath }"
         @destroy()
 
-  validationErrors: (errors) ->
-    @form.showValidationErrors(errors)
+
+  show: (animate, callback) ->
+    if animate
+      @$el.fadeIn($.fx.speeds._default, =>
+        @_initialize_form_plugins()
+        callback?())
+    else
+      @$el.show 0, => @_initialize_form_plugins() ; callback?()
+
+
+  destroy: ->
+    @form?.destroy()
+    @$el.remove()
 
 
 

data/app/assets/javascripts/chr/store/{store.coffee → _array-store.coffee}

@@ -1,34 +1,3 @@
-# -----------------------------------------------------------------------------
-# Author: Alexander Kravets <alex@slatestudio.com>,
-#         Slate Studio (http://www.slatestudio.com)
-#
-# Coding Guide:
-#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
-# -----------------------------------------------------------------------------
-
-# -----------------------------------------------------------------------------
-# OBJECT STORE
-# -----------------------------------------------------------------------------
-class @ObjectStore
-  constructor: (@config={}) ->
-    @_initialize_database()
-
-  _update_data_object: (value, callback) ->
-    callback?($.extend(@_data, value))
-
-  _fetch_data: ->
-    @_data = @config.data
-
-  _initialize_database: ->
-    @_fetch_data()
-
-  get: ->
-    @_data
-
-  update: (id, value, callback) ->
-    @_update_data_object(value, callback)
-
-
 # -----------------------------------------------------------------------------
 # ARRAY STORE
 # javascript object storage implementation that stores/loads objects in memory,
@@ -38,26 +7,27 @@ class @ObjectStore
 #   - reordering
 #
 # configuration options:
-#   @config.data         — initial array of objects, default: []
-#   @config.sortBy       — objects field name which is used for sorting, does
-#                          not sort when parameter is not provided, default: nil
-#   @config.sortReverse  — reverse objects sorting (descending order),
-#                          default: false
-#   @config.newItemOnTop — add new item to the top of the list, default: true,
-#                          if @config.sortBy is not set, otherwise: false
-#   @config.reorderable  — list items reordering configuration hash, should
-#                          have two fields:
-#                            { positionFieldName: '',
-#                              sortReverse:       false }
+#   data         — initial array of objects, default: []
+#   sortBy       — objects field name which is used for sorting, does not sort
+#                  when parameter is not provided, default: nil
+#   sortReverse  — reverse objects sorting (descending order), default: false
+#   reorderable  — list items reordering configuration hash, should have two
+#                  fields: { positionFieldName: '', sortReverse: false }
 #
 # public methods:
 #   - on(eventType, callback)
+#        object_added
+#        object_changed
+#        object_removed
+#        objects_added
 #   - off(eventType)
 #   - get(id)
 #   - push(serializedFormObject, callbacks)
 #   - update(serializedFormObject, callbacks)
 #   - remove(id)
 #   - reset(callback)
+#   - addObjects(objects)
+#   - data()
 #
 # todo:
 #   - support for lists, files, nested objects
@@ -71,11 +41,6 @@ class @ArrayStore
     @sortReverse = @config.sortReverse ? false
     @reorderable = @config.reorderable ? false
 
-    if @sortBy == false
-      @newItemOnTop = @config.newItemOnTop ? true
-    else
-      @newItemOnTop = @config.newItemOnTop ? false
-
     @_initialize_reorderable()
     @_initialize_database()
 
@@ -97,15 +62,6 @@ class @ArrayStore
     ;
 
 
-  # add objects from @config.data,
-  # trigger 'objects_added' event
-  _fetch_data: ->
-    if @config.data
-      @_add_data_object(o) for o in @config.data
-
-    $(this).trigger('objects_added')
-
-
   # sort object in _data array based on sortBy and sortReverse parameters
   # implementatin details:
   #   http://stackoverflow.com/questions/9796764/how-do-i-sort-an-array-with-coffeescript
@@ -141,40 +97,33 @@ class @ArrayStore
 
   # normalize objects id, add object to _data and _map, sort objects,
   # trigger 'object_added' event
-  _add_data_object: (object, callback)->
-    object = @_normalize_object_id(object)
-
-    @_map[object._id] = object
-    @_data.push(object)
-
-    @_sort_data()
-    position = @_get_data_object_position(object._id)
-
-    $(this).trigger('object_added', { object: object, position: position, callback: callback })
-
-
-  # add object to the top of the _data neglecting ordering,
-  # trigger 'object_added' event
-  _add_data_object_on_top: (object, callback) ->
+  _add_data_object: (object) ->
     object = @_normalize_object_id(object)
 
-    @_map[object._id] = object
-    @_data.unshift(object)
+    # if object with same id already in the store, update it's parameters,
+    # otherwise add new object (this is used while pagination sync)
+    if ! @_map[object._id]
+      @_map[object._id] = object
+      @_data.push(object)
+      @_sort_data()
 
-    position = 0
+      position = @_get_data_object_position(object._id)
 
-    $(this).trigger('object_added', { object: object, position: position, callback: callback })
+      $(this).trigger('object_added', { object: object, position: position })
+    else
+      @_update_data_object(object.id, object)
 
 
   # get object by id, update it's attributes, sort objects,
   # trigger 'object_changed' event
-  _update_data_object: (id, value, callback) ->
+  _update_data_object: (id, value) ->
     object = $.extend(@get(id), value)
 
     @_sort_data()
+
     position = @_get_data_object_position(id)
 
-    $(this).trigger('object_changed', { object: object, position: position, callback: callback })
+    $(this).trigger('object_changed', { object: object, position: position })
 
 
   # delete object by id from _data and _map,
@@ -182,7 +131,7 @@ class @ArrayStore
   _remove_data_object: (id) ->
     position = @_get_data_object_position(id)
     if position >= 0
-      delete @_data[position]
+      @_data.splice(position, 1)
 
     delete @_map[id]
 
@@ -214,23 +163,14 @@ class @ArrayStore
     return object
 
 
-  # unsubscribe from store event, simple jQuery wrapper
-  off: (eventType) ->
-    if eventType then $(this).off(eventType) else $(this).off()
-
-
-  # subsribe to store event, subscribing to 'object_added' fetches data,
-  # available event types:
-  #  - object_added
-  #  - object_changed
-  #  - object_removed
-  #  - objects_added
+  # subsribe to store event
   on: (eventType, callback) ->
     $(this).on eventType, (e, data) -> callback(e, data)
 
-    #! make sure this run only for first subscribe
-    if eventType == 'object_added'
-      @_fetch_data()
+
+  # unsubscribe from store event, simple jQuery wrapper
+  off: (eventType) ->
+    if eventType then $(this).off(eventType) else $(this).off()
 
 
   # get object by id
@@ -239,36 +179,43 @@ class @ArrayStore
 
 
   # add new object
-  push: (serializedFormObject, callbacks) ->
+  push: (serializedFormObject, callbacks={}) ->
     object = @_parse_form_object(serializedFormObject)
+
+    # generate id for new object
     if ! object._id then object._id = Date.now()
 
-    if @newItemOnTop
-      @_add_data_object_on_top(object, callbacks.onSuccess)
-    else
-      @_add_data_object(object, callbacks.onSuccess)
+    @_add_data_object(object)
+    callbacks.onSuccess?()
 
 
   # update objects attributes
-  update: (id, serializedFormObject, callbacks) ->
+  update: (id, serializedFormObject, callbacks={}) ->
     object = @_parse_form_object(serializedFormObject)
-    @_update_data_object(id, object, callbacks.onSuccess)
+    @_update_data_object(id, object)
+    callbacks.onSuccess?()
 
 
   # delete object
-  remove: (id) ->
+  remove: (id, callbacks={}) ->
     @_remove_data_object(id)
+    callbacks.onSuccess?()
 
 
-  # reset all data and load it again
-  reset: (callback) ->
-    # do nothing here as data is stored in memory, this method
-    # resets database data, syncing latest changes
-    @_sort_data()
+  # do nothing for in memory data store
+  reset: ->
+    $(this).trigger('objects_added')
+
 
+  # add objects, this is a kind of workaround that helps to initialize
+  # store data without request
+  addObjects: (objects) ->
+    @_add_data_object(o) for o in objects
     $(this).trigger('objects_added')
-    callback?()
 
 
+  # returns stored objects array
+  data: ->
+    return @_data