character 0.1.0 → 1.0.0

data/app/assets/javascripts/character/generic/layout.coffee

@@ -0,0 +1,40 @@
+#= require ./list
+
+#
+# Marionette.js Layout Documentation
+# https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.layout.md
+#
+@Character.Generic.Layout = Backbone.Marionette.LayoutView.extend
+  className: 'chr-layout'
+
+  template: -> "<div class='left'>
+                  <header id=list_header class='chr-list-header'></header>
+                  <div id=list_content class='chr-list'></div>
+                </div>
+                <div id=details class='right chr-logo'>
+                </div>"
+
+  regions:
+    list_header:  '#list_header'
+    list_content: '#list_content'
+    details:      '#details'
+
+  initialize: ->
+    @ListHeaderView = @options.module.ListHeaderView
+    @ListView       = @options.module.ListView
+    @collection     = @options.module.collection
+
+  onRender: ->
+    @header = new @ListHeaderView(@options)
+    @list   = new @ListView({ collection: @collection, module: @options.module })
+
+    @list_header.show(@header)
+    @list_content.show(@list)
+
+  closeDetails: ->
+    @list.unselectCurrentItem()
+    @details.reset()
+
+  updateListScope: (listScope, callback) ->
+    @header.update(listScope)
+    @collection.setScope(listScope).fetchPage(1, callback)

data/app/assets/javascripts/character/generic/list.coffee

@@ -0,0 +1,214 @@
+
+#
+# Marionette.js Item View Documentation
+# https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.itemview.md
+#
+@Character.Generic.ListHeaderView = Backbone.Marionette.ItemView.extend
+  template: -> "<aside id=list_search class=chr-list-search>
+                  <i class='chr-icon icon-search icon-flip'></i>
+                  <input type=search placeholder='Search...' />
+                  <a id=list_search_hide href='#'><i class='chr-icon icon-close'></i></a>
+                </aside>
+                <a id=list_search_show class=search title='Search' href='#'><i class='chr-icon icon-search'></i></a>
+                <a id=new class=new title='Create new item' href='#'><i class='chr-icon icon-plus'></i></a>
+                <div class=scope><span id=list_title class=title></span></div>"
+
+  ui:
+    title:         '#list_title'
+    search:        '#list_search'
+    searchInput:   '#list_search input'
+    searchShow:    '#list_search_show'
+    newAction:     '#new'
+
+  events:
+    'click #list_search_hide':  '_hideSearch'
+    'click #list_search_show':  '_showSearch'
+    'keyup #list_search input': '_onKeyup'
+    'click #list_title':        '_toggleScopesMenu'
+
+  _toggleScopesMenu: ->
+    if @ui.scopes
+      @ui.scopes.toggleClass 'show'
+
+  _onKeyup: (e) ->
+    if @searchTypeTimeout
+      clearTimeout(@searchTypeTimeout)
+
+    return @toggleSearchBar() if e.keyCode == 27
+
+    query = @ui.searchInput.val()
+
+    search = =>
+      @collection.setSearchQuery(query).fetchPage(1)
+
+    if e.keyCode == 13
+      search()
+    else
+      @searchTypeTimeout = setTimeout(search, 800)
+
+  _showSearch: ->
+    @ui.search.addClass('active')
+    @ui.searchInput.focus()
+    false
+
+  _hideSearch: ->
+    @ui.search.removeClass('active')
+    @ui.searchInput.val('')
+    @collection.setSearchQuery()
+    @collection.fetchPage(1)
+    false
+
+  _addScopesDropdown: ->
+    if @scopes and _(@scopes).keys().length > 0
+      if not @ui.scopes
+        @ui.scopes = $('<ul />')
+        @ui.scopes.append """<li><a href='#{ @path }'>#{ @options.listTitle }</a></li>"""
+
+        _.each @scopes, (scope, key) =>
+          @ui.scopes.append """<li><a href='#{ @path }/#{ scope.slug }'>#{ scope.title }</a></li>"""
+
+        @ui.title.after(@ui.scopes).addClass('dropdown')
+
+      @_setActiveScopeLink()
+      @_hideScopesDropdown()
+
+  _setActiveScopeLink: ->
+    currentScopeTitle = @ui.title.html()
+    @ui.scopes.find('a').each (i, el) ->
+      if $(el).html() == currentScopeTitle then $(el).addClass('active') else $(el).removeClass('active')
+
+  _hideScopesDropdown: ->
+    @ui.scopes.removeClass('show')
+
+  onRender: ->
+    @beforeOnRender?()
+
+    @collection = @options.module.collection
+    @scopes     = @options.listScopes
+    @path       = "#/#{ @options.moduleName }"
+
+    if not @options.newItems
+      @ui.newAction.hide()
+
+    if @options.listSearch
+      @ui.searchShow.show()
+    else
+      @ui.searchShow.hide()
+
+    @afterOnRender?()
+
+  onDestroy: ->
+    @beforeOnClose?()
+    @afterOnClose?()
+
+  update: (scopeSlug) ->
+    @beforeUpdate?()
+
+    title = @options.listTitle
+    path  = @path
+
+    if @scopes and scopeSlug
+      title = @scopes[scopeSlug].title
+      path += '/' + @scopes[scopeSlug].slug
+
+    @ui.title.html(title).parent().attr('href', path)
+
+    @ui.newAction.attr('href', path + "/new")
+
+    @_addScopesDropdown()
+
+    @afterUpdate?()
+
+
+#
+# Marionette.js Item View Documentation
+# https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.itemview.md
+#
+@Character.Generic.ListEmtpyView = Backbone.Marionette.ItemView.extend
+  tagName:   'li'
+  className: 'empty'
+  template: -> "No items found"
+
+
+#
+# Marionette.js Item View Documentation
+# https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.itemview.md
+#
+@Character.Generic.ListItemView = Backbone.Marionette.ItemView.extend
+  tagName:   'li'
+  className: 'chr-list-item'
+
+  template: (item) ->  """<a title='#{ item.__title }'>
+                            <img src='#{ item.__thumb }' class='thumbnail' />
+                            <div class='container'>
+                              <div class='title'>#{ item.__title }</div>
+                              <div class='meta'>#{ item.__meta }</div>
+                            </div>
+                          </a>"""
+
+  modelEvents:
+    'change':  'render'
+    'destroy': 'remove'
+
+  ui:
+    link: 'a'
+
+  onRender: ->
+    path = chr.currentPath
+
+    if @model.getThumb()
+      @$el.addClass('has-thumbnail')
+
+    @ui.link.attr('href', "#/#{ path }/edit/#{ @model.id }")
+
+    @$el.attr('data-id', @model.id)
+    @$el.attr('data-position', @model.getPosition())
+
+
+#
+# Marionette.js Collection View Documentation
+# https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.collectionview.md
+#
+@Character.Generic.ListView = Backbone.Marionette.CollectionView.extend
+  tagName: 'ul'
+
+  itemViewOptions: (model, index) ->
+    module: @options.module
+
+  initialize: ->
+    @childView  = @options.module.ListItemView
+    @emptyView = @options.module.ListEmtpyView
+
+    @listenTo(@collection, 'sort', @render, @)
+
+  loadMoreItems: ->
+    # NOTE: This still will request a new page every time if last item is last on last page
+    if @collection.size() == @collection.page * @collection.options.constantParams.pp
+      if not @loading_more_items_in_progress
+        @loading_more_items_in_progress = true
+        @collection.fetchNextPage =>
+          @loading_more_items_in_progress = false
+
+  onRender: ->
+    @$el.parent().scroll (e) =>
+      if e.target.offsetHeight + e.target.scrollTop + 272 > @$el.height()
+        @loadMoreItems()
+
+    if @selected_item_id
+      @selectItem(@selected_item_id)
+
+    if @collection.options.reorder
+      Character.Generic.Helpers.startReorder(@$el, @collection)
+
+  selectItem: (id) ->
+    @selected_item_id = id
+    @$el.find('li.active').removeClass('active')
+    @$el.find("li[data-id=#{ id }]").addClass('active')
+
+  unselectCurrentItem: ->
+    @selected_item_id = null
+    @$el.find('li.active').removeClass('active')
+
+  onDestroy: ->
+    if @collection.options.reorder
+      Character.Generic.Helpers.stopReorder(@$el)

data/app/assets/javascripts/character/generic/model.coffee

@@ -0,0 +1,135 @@
+
+#
+# Backbone.js Model Documentation
+# http://backbonejs.org/#Model
+#
+@Character.Generic.Model = Backbone.Model.extend
+  idAttribute: '_id'
+
+  urlRoot: ->
+    @collection.options.collectionUrl
+
+  getTitle: ->
+    @get(@collection.options.titleField || _(@attributes).keys()[0])
+
+  getMeta: ->
+    @get(@collection.options.metaField)  || ''
+
+  getThumb: ->
+    @get(@collection.options.thumbField)
+
+  getPosition: ->
+    @get('_position')
+
+  toJSON: (options={}) ->
+    # add helpers for list item template
+    object = _.clone(@attributes)
+
+    object['__title'] = @getTitle()
+    object['__meta']  = @getMeta()
+    object['__thumb'] = @getThumb() || '#'
+
+    return object
+
+
+#
+# Backbone.js Collection Documentation
+# http://backbonejs.org/#Collection
+#
+@Character.Generic.Collection = Backbone.Collection.extend
+  model: Character.Generic.Model
+
+  # Query parameters:
+  #
+  #   @page
+  #   @search_query
+  #   @order_by
+
+  # Sort options:
+  #
+  #   @sortField
+  #   @sortDirection
+
+  url: (params={}) ->
+    params.p = @page
+    params.q = @searchQuery
+    params.o = @orderBy
+    if @options.where
+      [name, value] = @options.where.split('=')
+      params["where__#{name}"] = value
+
+    _.extend(params, @filter)
+    _.extend(params, @options.constantParams)
+
+    _.compactObject(params)
+
+    @options.collectionUrl + "?" + $.param(params, true)
+
+
+  setSearchQuery: (@searchQuery) ->
+    return @
+
+
+  setScope: (slug) ->
+    @sortField     = null
+    @sortDirection = null
+    @orderBy       = null
+    @filter        = {}
+
+    scope = @options.scopes?[slug]
+
+    @orderBy = scope?.order_by || @options.orderBy
+
+    if @orderBy
+      [ @sortField, @sortDirection ] = @orderBy.split(':')
+
+    if scope
+      [name, value] = scope.where.split('=')
+      @filter["where__#{name}"] = value
+
+    return @
+
+
+  fetchPage: (@page, callback=false, reset=true, remove=true) ->
+    @fetch
+      reset: reset
+      remove: remove
+      success: (response) -> callback?(response)
+      error: (collection, response, options) -> chr.execute('error', response)
+
+
+  fetchNextPage: (callback) ->
+    after_fetch = (response) => callback?()
+    @fetchPage(@page + 1, after_fetch, false, false)
+
+
+  # reverse sorting for backbone collection
+  # http://stackoverflow.com/questions/5013819/reverse-sort-order-with-backbone-js
+
+
+  comparator: (m) ->
+    if @sortField
+      return m.get(@sortField)
+
+
+  sortBy: (iterator, context) ->
+    obj = @models
+    direction = @sortDirection
+
+    return _.pluck( _.map(obj, ( (value, index, list) ->
+      return {
+        value:    value
+        index:    index
+        criteria: iterator.call(context, value, index, list)
+      }
+    ) ).sort( ( (left, right) ->
+       # swap a and b for reverse sort
+       a = if direction is "asc" then left.criteria else right.criteria
+       b = if direction is "asc" then right.criteria else left.criteria
+
+       if a != b
+         if a > b or a is undefined then return 1
+         if a < b or b is undefined then return -1
+
+       return (if left.index < right.index then -1 else 1)
+    ) ), 'value' )

data/app/assets/javascripts/character/generic/module.coffee

@@ -0,0 +1,157 @@
+#= require_self
+#= require ./model
+#= require ./layout
+#= require ./details
+#= require_tree ./helpers
+
+@Character.Generic ||= {}
+@Character.Generic.Helpers ||= {}
+
+#
+# Marionette.js Router Documentation
+# https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.router.md
+#
+@Character.Generic.Router = Backbone.Marionette.AppRouter.extend
+  initialize: (options) ->
+    @appRoutes ||= {}
+    @appRoutes["#{ options.path }(/:listScope)/new"]      = "new"
+    @appRoutes["#{ options.path }(/:listScope)/edit/:id"] = "edit"
+    @appRoutes["#{ options.path }(/:listScope)"]          = "index"
+
+#
+# Marionette.js Controller Documentation
+# https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.controller.md
+#
+@Character.Generic.Controller = Backbone.Marionette.Controller.extend
+  initialize: ->
+    @module     = @options.module
+    @collection = @module.collection
+
+  index: (listScope, callback) ->
+    chr.execute('showModule', @module)
+    @module.layout.closeDetails()
+
+    path = @options.moduleName + ( if listScope then "/#{ listScope }" else '' )
+
+    if chr.currentPath != path
+      chr.currentPath = path
+      @module.layout.updateListScope(listScope, callback)
+    else
+      callback?()
+
+  new: (listScope) ->
+    @index(listScope)
+    detailsLayout = new @module.DetailsLayout
+      model:           no
+      collection:      @collection
+      objectName:      @options.objectName
+      module:          @module
+      formUrl:         "#{ chr.options.url }/#{ @options.modelName }/new"
+      fullscreen:      @options.fullscreen
+      editorOptions:   @options.editorOptions
+      redactorOptions: @options.redactorOptions
+    @module.layout.details.show(detailsLayout)
+
+  edit: (listScope, id) ->
+    @index(listScope, =>
+      @module.layout.list.selectItem(id)
+      doc = @collection.get(id)
+      detailsLayout = new @module.DetailsLayout
+        model:           doc
+        collection:      @collection
+        formUrl:         "#{ chr.options.url }/#{ @options.modelName }/#{ id }/edit"
+        deletable:       @options.deletable
+        module:          @module
+        fullscreen:      @options.fullscreen
+        editorOptions:   @options.editorOptions
+        redactorOptions: @options.redactorOptions
+      @module.layout.details.show(detailsLayout)
+    )
+
+#
+# Character Generic Module
+# Initialize function
+#
+chr.genericModule = (name, options={}) ->
+  options.menuTitle ?= name
+  options.menuIcon  ?= 'bolt'
+
+  options.listTitle        ?= _.pluralize(name)
+  options.listSearch       ?= false
+  options.listReorder      ?= false
+  options.listItemsPerPage ?= 25
+  options.listItem         ?= {}
+
+  options.newItems      ?= true
+  options.deletable     ?= true
+  options.fullscreen    ?= true
+
+  options.editorOptions   ?= {}
+  options.redactorOptions ?= {}
+
+  options.moduleName ?= _.underscored(_.pluralize(name))
+  options.objectName ?= name
+  options.modelName  ?= name
+
+  options.implementation ?= {}
+
+  # list scopes
+  if options.listScopes
+    if options.listScopes.default
+      listDefaultOrderBy = options.listScopes.default.orderBy
+      listDefaultWhere   = options.listScopes.default.where
+      delete options.listScopes['default']
+
+    _(options.listScopes).each (scope, slug) ->
+      scope.title ||= scope.title || _(slug).titleize()
+      scope.slug  ||= slug
+
+  # when reorder, consider of using _position field with desc sorting
+  if options.listReorder
+    listDefaultOrderBy = '_position:desc'
+
+  listDefaultOrderBy ?= options.listDefaultOrderBy
+  listDefaultWhere   ?= options.listDefaultWhere
+
+  # include model fields
+  imf = options.includeModelFields || []
+
+  # list item template
+  #  - options.listItem.titleField
+  #  - options.listItem.metaField
+  #  - options.listItem.thumbField
+  imf.push( options.listItem.titleField ) if options.listItem.titleField
+  imf.push( options.listItem.metaField )  if options.listItem.metaField
+  imf.push( options.listItem.thumbField ) if options.listItem.thumbField
+
+  options.includeModelFields = _.uniq(_.compact(imf))
+
+
+  chr.module options.moduleName, (module) ->
+
+    module = _(module).extend(Character.Generic, options.implementation)
+
+    module.on 'start', ->
+
+      @collection = new @Collection()
+      @collection.options =
+        where:            listDefaultWhere
+        orderBy:          listDefaultOrderBy
+        collectionUrl:    options.collectionUrl || "#{ chr.options.url }/#{ options.modelName }"
+        scopes:           options.listScopes
+        reorder:          options.listReorder
+        search:           options.listSearch
+        titleField:       options.listItem.titleField
+        metaField:        options.listItem.metaField
+        thumbField:       options.listItem.thumbField
+        constantParams:
+          f:              options.includeModelFields.join(',')
+          pp:             options.listItemsPerPage
+
+      options.module = module
+
+      @controller = new @Controller(options)
+      @layout     = new @Layout(options)
+      @router     = new @Router({ path: options.moduleName, controller: @controller })
+
+      chr.execute('addMenuItem', options.moduleName, options.menuIcon, options.menuTitle)