chr 0.2.8 → 0.3.5

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

@@ -9,6 +9,10 @@
 # -----------------------------------------------------------------------------
 # LIST ITEM
 # -----------------------------------------------------------------------------
+#
+# config options:
+#   onItemRender
+#
 # public methods:
 #   render()
 #   destroy()
@@ -16,89 +20,72 @@
 #
 # -----------------------------------------------------------------------------
 class @Item
-  constructor: (@module, @path, @object, @config) ->
-    @$el =$ """<a class='item' href='#{ @path }' data-id='#{ @object._id }' data-title=''></a>"""
-    @$el.on 'click', (e) => @_click(e)
+  constructor: (@module, @path, @object, @config, @type) ->
+    @$el =$ """<a class='item is-#{ @type }' href='#{ @path }' data-id='#{ @object._id }'></a>"""
     @render()
 
 
   # PRIVATE ===============================================
 
-  _is_folder: ->
-    # update this logic as it's not reliable
-    if @object._title then true else false
-
-
   _render_title: ->
-    title  = @object._title # nested list title predefined in config (or slug based)
-    title ?= @object[@config.itemTitleField] # based on config
-    title ?= _firstNonEmptyValue(@object) # auto-generated: first non empty value
+    title  = @object.__title__ # title for @config.items
+    title ?= @object[@config.itemTitleField]
+    title ?= @object['_list_item_title']
+    title ?= _firstNonEmptyValue(@object)
     title ?= "No Title"
     title  = title.plainText()
 
     @$title =$ "<div class='item-title'>#{ title }</div>"
     @$el.append(@$title)
-    @$el.attr('data-title', title)
 
 
   _render_subtitle: ->
+    subtitle = @object.__subtitle__ # subtitle for @config.items
+
     if @config.itemSubtitleField
-      subtitle   = @object[@config.itemSubtitleField]
-      if subtitle != ''
-        @$subtitle =$ "<div class='item-subtitle'>#{subtitle}</div>"
-        @$el.append(@$subtitle)
-        @$el.addClass 'has-subtitle'
+      subtitle ?= @object[@config.itemSubtitleField]
+
+    subtitle ?= @object['_list_item_subtitle']
+
+    if subtitle
+      @$subtitle =$ "<div class='item-subtitle'>#{ subtitle }</div>"
+      @$el.append(@$subtitle)
+      @$el.addClass 'has-subtitle'
 
 
   _render_thumbnail: ->
-    if @config.itemThumbnail
-      imageUrl = @config.itemThumbnail(@object)
-      # carrierwave fix, check if still required
-      if imageUrl != '' and not imageUrl.endsWith('_old_')
-        @$thumbnail =$ "<div class='item-thumbnail'><img src='#{imageUrl}' /></div>"
+    imageUrl  = @config.itemThumbnail?(@object)
+    imageUrl ?= @object[@config.itemThumbnail]
+    imageUrl ?= @object['_list_item_thumbnail']
+
+    if imageUrl
+      # RAILS carrierwave fix, check if still required
+      if not imageUrl.endsWith('_old_')
+        @$thumbnail =$ "<div class='item-thumbnail'><img src='#{ imageUrl }' /></div>"
         @$el.append(@$thumbnail)
         @$el.addClass 'has-thumbnail'
 
 
-  # EVENTS ================================================
-
-  _click: (e) ->
-    if @.$el.hasClass('active') then e.preventDefault() ; return
-
-    hash   = $(e.currentTarget).attr('href')
-    crumbs = hash.split('/')
-    title  = $(e.currentTarget).attr('data-title')
-    id     = $(e.currentTarget).attr('data-id')
-
-    chr.updateHash(hash, true)
-
-    # show view for a arrayStore item
-    if crumbs[crumbs.length - 2] == 'view'
-      return @module.showViewByObjectId(id, @config, title)
-    # show objectStore item view
-    if @config.objectStore
-      return @module.showViewByObjectId('', @config, title)
-    # show nested list
-    @module.showNestedList(_last(crumbs))
-
-
   # PUBLIC ================================================
 
   render: ->
-    @$el.html('').removeClass('item-folder has-subtitle has-thumbnail')
+    @$el.html('').removeClass('has-subtitle has-thumbnail')
+
     @_render_title()
+    @_render_subtitle()
 
-    if @_is_folder()
-      @$el.addClass('item-folder')
+    if @type == 'folder'
       @$el.append $("<div class='icon-folder'></div>")
-    else
-      @_render_subtitle()
+
+    if @type == 'object'
       @_render_thumbnail()
 
       if @config.arrayStore and @config.arrayStore.reorderable
         @$el.addClass('reorderable')
         @$el.append $("<div class='icon-reorder'></div>")
 
+    @config.onItemRender?(this)
+
 
   destroy: ->
     @$el.remove()

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

@@ -11,6 +11,8 @@
 # -----------------------------------------------------------------------------
 #
 # Configuration options:
+#   title              - list title
+#   subtitle           - list subtitle
 #   itemClass          - item class to be used instead of default one
 #   itemTitleField     - object attributes name for list item title
 #   itemSubtitleField  - object attributes name for list item subtitle
@@ -19,8 +21,11 @@
 #   onListInit         - callback on list is initialized
 #   onListShow         - callback on list is shown
 #   objects            - objects array to be added to the store on start
+#   showWithParent     - show list on a aside from parent
 #
 # Public methods:
+#   showSpinner()
+#   hideSpinner()
 #   hide()        - hide list
 #   show()        - show list
 #   updateItems() - update list items (sync through store with backend)
@@ -35,54 +40,47 @@
 # -----------------------------------------------------------------------------
 
 class @List
-  constructor: (@module, @name, @config, @parentList) ->
-    @configItemsCount = 0
-    @path           = @_path()
-    @items          = {}
-    @title          = @config.title      ? @name.titleize()
-    @itemClass      = @config.itemClass  ? Item
-
-    @showWithParent = false
-    if @parentList
-      @showWithParent = @parentList.config.showNestedListsAside || false
+  constructor: (@module, @path, @name, @config, @parentList) ->
+    @items     = {}
+    @title     = @config.title      ? @name.titleize()
+    @itemClass = @config.itemClass  ? Item
+
+    @_config_items_count = 0
 
-    @config.showListWithParent ? false
+    @showWithParent = @config.showWithParent ? false
 
-    @$el =$ "<div class='list #{ @name }'>"
+    @$el =$ "<div class='list #{ @name }' style='display:none;'>"
     @module.$el.append @$el
 
-    # hide all nested lists
-    if @parentList then @$el.hide()
+    if @showWithParent
+      @$el.addClass('list-aside')
 
     # items
     @$items =$ "<div class='items'>"
     @$el.append @$items
 
     # header
-    @$header =$ "<header></header>"
+    @$header =$ "<header class='header'></header>"
     @$el.append @$header
 
-    # back button
+    # back
     if @parentList
-      @$backBtn =$ "<a href='#/#{ @parentList.path }' class='back silent'></a>"
-      @$backBtn.on 'click', (e) => @_back(e)
+      @$backBtn =$ "<a href='#{ @parentList.path }' class='back'>Close</a>"
     else
-      @$backBtn =$ "<a href='#/' class='back'></a>"
+      @$backBtn =$ "<a href='#/' class='back'>Close</a>"
     @$header.prepend @$backBtn
 
     # spinner & title
     @$header.append "<div class='spinner'></div>"
     @$header.append "<span class='title'>#{ @title }</span>"
 
-    # new item button
+    # new item
     if not @config.disableNewItems and @config.formSchema
-      @$newBtn =$ "<a href='#/#{ @path }/new' class='new silent'></a>"
-      @$newBtn.on 'click', (e) => @_new(e)
+      @$newBtn =$ "<a href='#{ @path }/new' class='new'></a>"
       @$header.append @$newBtn
 
     if @config.items       then @_process_config_items()
     if @config.arrayStore  then @_bind_config_array_store()
-    if @config.objectStore then @_bind_config_object_store()
 
     @_bind_hashchange()
 
@@ -104,62 +102,22 @@ class @List
           return $(a).addClass('active')
 
 
-  _path: ->
-    crumbs = [] ; l = this
-    while l.parentList
-      crumbs.push(l.name) ; l = l.parentList
-    @module.name + ( if crumbs.length > 0 then '/' + crumbs.reverse().join('/') else '' )
-
-
-  _add_item: (path, object, position, config) ->
-    item = new @itemClass(@module, path, object, config)
-    @items[object._id] = item
-    @_update_item_position(item, position)
-
-
-  _update_item_position: (item, position) ->
-    position = @configItemsCount + position
-    if position == 0
-      @$items.prepend(item.$el)
-    else
-      @$items.append(item.$el.hide())
-      $(@$items.children()[position - 1]).after(item.$el.show())
-
+  # PUBLIC ================================================
 
-  _show_spinner: ->
+  showSpinner: ->
     @$el.addClass('show-spinner')
 
 
-  _hide_spinner: ->
+  hideSpinner: ->
     @$el.removeClass('show-spinner')
 
 
-  # EVENTS ================================================
-
-  _back: (e) ->
-    @module.chr.unsetActiveListItems()
-    @module.destroyView()
-
-    if @showWithParent
-      @hide()
-    else
-      @module.hideActiveList()
-
-
-  _new: (e) ->
-    chr.updateHash($(e.currentTarget).attr('href'), true)
-    @module.showView(null, @config, 'New')
-
-
-  # PUBLIC ================================================
-
   hide: ->
     @$el.hide()
 
 
   show: (callback) ->
     @$el.show 0, =>
-      @$items.scrollTop(0)
       @config.onListShow?(@)
       callback?()
 
@@ -167,14 +125,11 @@ class @List
   updateItems: ->
     if not @config.disableUpdateItems
       if @config.arrayStore
-        @_show_spinner()
+        @showSpinner()
+        @$items.scrollTop(0)
         @config.arrayStore.reset()
 
 
-  isVisible: ->
-    @$el.is(':visible')
-
-
 include(List, listConfig)
 include(List, listPagination)
 include(List, listReorder)

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

@@ -4,31 +4,49 @@
 # Methods for processing:
 #   - @config.items
 #   - @config.arrayStore
-#   - @config.objectStore
 # -----------------------------------------------------------------------------
 
 @listConfig =
   # PRIVATE ===============================================
 
+  _add_item: (path, object, position, config, type) ->
+    item = new @itemClass(@module, path, object, config, type)
+    @items[object._id] = item
+    @_update_item_position(item, position)
+
+
+  _update_item_position: (item, position) ->
+    # skip static items in the head of list
+    position = @_config_items_count + position
+    if position == 0
+      @$items.prepend(item.$el)
+    else
+      @$items.append(item.$el.hide())
+      $(@$items.children()[position - 1]).after(item.$el.show())
+
+
   _process_config_items: ->
     for slug, config of @config.items
-      object = { _id: slug, _title: config.title ? slug.titleize() }
+      object =
+        _id:          slug
+        __title__:    config.title    ? slug.titleize()
+        __subtitle__: config.subtitle ? false
 
-      # There might be some cases when we need this:
-      #if config.objectStore
-      #  $.extend(object, config.objectStore.get())
+      item_type = 'nested_object'
 
-      if config.items or config.arrayStore
+      if config.items || config.arrayStore
+        item_type = 'folder'
         @module.addNestedList(slug, config, this)
 
-      @_add_item("#/#{ @path }/#{ slug }", object, 0, config)
-      @configItemsCount += 1
+      @_add_item("#{ @path }/#{ slug }", object, 0, config, item_type)
+      @_config_items_count += 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)
+
+      @_add_item("#{ @path }/view/#{ data.object._id }", data.object, data.position, @config, 'object')
 
     if @config.objects
       @config.arrayStore.addObjects(@config.objects)
@@ -45,7 +63,7 @@
 
     # items loaded
     @config.arrayStore.on 'objects_added', (e, data) =>
-      @_hide_spinner()
+      @hideSpinner()
       @_set_active_item()
 
     if @config.arrayStore.pagination
@@ -58,8 +76,5 @@
       @_bind_reorder()
 
 
-  _bind_config_object_store: ->
-
-
 
 

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

@@ -3,32 +3,75 @@
 # -----------------------------------------------------------------------------
 
 @listPagination =
-
   # PRIVATE ===============================================
 
   _bind_pagination: ->
+    if chr.isMobile()
+      chr._bind_mobile_scroll()
+
+    else
+      @_bind_desktop_scroll()
+
+
+  _bind_desktop_scroll: ->
     @lastScrollTop = 0
+    $viewport      = @$el
 
     @$items.scroll (e) =>
+      scroll_top = @$items.scrollTop()
+
+      # trigger next page loading only when scrolling to bottom
+      if @lastScrollTop < scroll_top
+        chr._load_next_page($viewport, this, scroll_top)
+
+      @lastScrollTop = scroll_top
+
+
+chr._bind_mobile_scroll = ->
+  if ! @_mobile_scroll_binded
+    @lastScrollTop = 0
+    $viewport      = $(window)
+
+    $viewport.scroll (e) =>
+      if ! @module then return
+
+      if @module.view then return
+
+      scroll_top = $viewport.scrollTop()
+      @module.activeList.scrollCache = scroll_top
+
+      # TODO: updated this for iphone (test with no mouse on safari),
+      # scenario: list is loaded and do not fill the page size
+
       # trigger next page loading only when scrolling to bottom
-      if @lastScrollTop < e.target.scrollTop
-        if ! @config.arrayStore.dataFetchLock
+      if @lastScrollTop < scroll_top
+        chr._load_next_page($viewport, @module.activeList, scroll_top)
+
+      @lastScrollTop = scroll_top
+
+    @_mobile_scroll_binded = true
+
 
-          listViewHeight  = @$el.height()
-          listItemsHeight = 0
-          @$items.children().each -> listItemsHeight += $(this).height()
+chr._load_next_page = ($viewport, list, scroll_top) ->
+  $items = list.$items
+  store  = list.config.arrayStore
 
-          if listItemsHeight < (listViewHeight + e.target.scrollTop + 100)
+  if store.dataFetchLock then return
 
-            if ! @config.arrayStore.lastPageLoaded
+  if store.lastPageLoaded then return
 
-              @_show_spinner()
+  # check if scroll is near bottom of the $viewport
+  viewport_height   = $viewport.height()
+  list_items_height = 0
+  $items.children().each -> list_items_height += $(this).height()
 
-              @config.arrayStore.load false,
-                onSuccess: => ;
-                onError:   => chr.showAlert("Can't load next page, server error 500.")
+  if list_items_height - scroll_top - 100 > viewport_height
+    return
 
-      @lastScrollTop = e.target.scrollTop
+  list.showSpinner()
+  store.load false,
+    onSuccess: => ;
+    onError:   => chr.showAlert("Can't load next page, server error 500.")