luca 0.9.76 → 0.9.89

data/app/assets/javascripts/luca/components/grid_layout_view.coffee

@@ -0,0 +1,43 @@
+gridView = Luca.register    "Luca.components.GridLayoutView"
+gridView.extends            "Luca.CollectionView"
+
+gridView.publicConfiguration
+  # how many items do you wish to render per row?
+  # assuming a 12 column grid, each item will receive
+  # an equal amount of grid span/columns.
+  itemsPerRow: 3
+
+gridView.privateConfiguration
+  className: "grid-layout-view"
+  tagName: "div"
+  itemTagName: "div"
+
+gridView.privateMethods
+  # adds the bootstrap span class to each collection-item,
+  # where span class is equal to the 12 column grid / @itemsPerRow.
+  # for example, each item would receive a span4 class when @itemsPerRow = 3
+  attributesForItem: ()->
+    base = Luca.CollectionView::attributesForItem.apply(@, arguments)
+    @itemsPerRow = 3 unless _.isNumber(@itemsPerRow) and @itemsPerRow > 1
+    columns = parseInt(12 / @itemsPerRow)
+    base.class += " span#{ columns }"
+
+    base
+
+  # wraps every N number of rows, where N = @itemsPerRow
+  # in a row-fluid wrapper, and appends it to the view
+  renderModels: (models)->
+    index = 0
+    rowIndex = 0
+
+    rows = for model in models
+      row = @make("div", class:"row-fluid") if rowIndex++ is 0
+      $(row).append @makeItem(model,index++)
+      rowIndex = 0 if index > 0 and index % @itemsPerRow is 0
+      row
+
+    console.log "Appending rows", rows
+    for row in rows
+      @$append(row) 
+
+gridView.register()

data/app/assets/javascripts/luca/components/index.coffee

@@ -0,0 +1,7 @@
+#= require ./collection_view
+#= require ./simple_collection_view
+#= require ./grid_layout_view
+#= require ./table_view
+#= require ./multi_collection_view
+#= require ./table_view_scrollable
+#= require_tree .

data/app/assets/javascripts/luca/components/load_mask.coffee

@@ -0,0 +1,8 @@
+#_.def("Luca.components.LoadMask").extends("Luca.View").with
+loadMask = Luca.register  "Luca.components.LoadMask"
+
+loadMask.extends          "Luca.View"
+
+loadMask.defines
+  className: "luca-ui-load-mask"
+  bodyTemplate:"components/load_mask"

data/{src → app/assets/javascripts/luca}/components/multi_collection_view.coffee

@@ -27,66 +27,66 @@ multiView.extends           "Luca.containers.CardView"
 multiView.mixesIn           "QueryCollectionBindings", 
                             "LoadMaskable",
                             "Filterable",
-                            "Paginatable"
+                            "Paginatable",
+                            "Sortable"
 
 multiView.triggers          "before:refresh",
                             "after:refresh",
                             "refresh",
                             "empty:results"
 
-multiView.defines
-  version: 1
-
-  stateful: true
-
-  defaultState:
+multiView.private
+  stateful:
     activeView: 0
 
-  viewContainerClass: "luca-ui-multi-view-container"
-
   initialize: (@options={})->
     @components ||= @views
 
-    validateComponent( view ) for view in @components    
+    for view in @components    
+      Luca.components.MultiCollectionView.validateComponent( view ) 
 
     Luca.containers.CardView::initialize.apply(@, arguments) 
 
-    @on "refresh", @refresh, @
+    @on "data:refresh", @refresh, @
     @on "after:card:switch", @refresh, @
-    @on "after:components", propagateCollectionComponents, @
+    @on "after:components", Luca.components.MultiCollectionView.propagateCollectionComponents, @
 
   relayAfterRefresh: (models,query,options)->
     @trigger "after:refresh", models, query, options
 
   refresh: ()->
-    @activeComponent()?.trigger("refresh")
+    @activeComponent()?.refresh()
 
-propagateCollectionComponents = ()->
-  container = @
+multiView.classMethods
+  propagateCollectionComponents: ()->
+    container = @
 
-  # in the multi view will share the same
-  # collection, filter state, pagination options, etc
-  for component in @components
+    # in the multi view will share the same
+    # collection, filter state, pagination options, etc
+    for component in @components
 
-    component.on "after:refresh", (models,query,options)=> 
-      @debug "collection member after refresh"
-      @trigger("after:refresh",models,query,options)
+      component.on "after:refresh", (models,query,options)=> 
+        @debug "collection member after refresh"
+        @trigger("after:refresh",models,query,options)
 
-    _.extend component, 
-      collection: container.getCollection()
+      _.extend component, 
+        collection: container.getCollection() 
+        getQuery: _.bind(container.getQuery, container)
+        getQueryOptions: _.bind(container.getQueryOptions, container)
 
-      getQuery: ()->
-        container.getQuery.call(container)
+      if container.prepareQuery?
+        _.extend component,
+          prepareQuery: _.bind(container.prepareQuery, container)
 
-      getQueryOptions: ()->
-        container.getQueryOptions.call(container) 
+  validateComponent: (component)->
+    type = (component.type || component.ctype)
 
-validateComponent = (component)->
-  type = (component.type || component.ctype)
+    return if  type is "collection" or 
+               type is "collection_view" or
+               type is "table" or
+               type is "table_view" 
 
-  return if  type is "collection" or 
-             type is "collection_view" or
-             type is "table" or
-             type is "table_view" 
+    throw "The MultiCollectionView expects to contain multiple collection views" 
 
-  throw "The MultiCollectionView expects to contain multiple collection views" 
+multiView.defines
+  version: 3

data/app/assets/javascripts/luca/components/nav_bar.coffee

@@ -0,0 +1,80 @@
+# A Twitter Bootstrap compatible navigation bar.  The Luca.Application
+# and Luca.containers.Viewport class both have configuration options for
+# creating navbar components in the header and footer of the viewport.
+#
+# #### Example of an Application with a Navbar
+# ##### Component Definition
+#       # Navigation Component
+#       navBar = Luca.register  "App.views.TopNavigation"
+#       navBar.extends          "Luca.components.NavBar"
+#       navBar.defines
+#         brand: "My App"
+#         # for white on black
+#         inverse: true
+#
+# We are able to reference the component we just defined in the
+# configuration of the Application, simply by using it's 
+# type alias `top_navigation`
+#
+#       # Application Component
+#       app = Luca.register       "App.Application"
+#       app.extends               "Luca.Application"
+#       app.defines
+#         topNav: "top_navigation"
+#
+navBar = Luca.register "Luca.components.NavBar"
+navBar.extends         "Luca.View"
+
+navBar.publicConfiguration
+  # Specify whether the navbar is supposed to be fixed
+  # the way Twitter bootstrap navbar can be.
+  fixed: true
+
+  # Valid options are 'top', 'bottom'.  Only valid when `@fixed is true`
+  position: 'top'
+
+  # Specify whether the navbar should use the fluid grid. 
+  # Usually the same as your Viewport setting.
+  fluid: undefined
+
+  # What content do you want to show in the logo area of the
+  # standard bootstrap nav
+  brand: "Luca.js"
+
+  # Specifies an optional template to use for the navigation menu
+  # content.  Whatever you specify will be rendered inside of the 
+  # collapsible container inside of the standard bootstrap nav.
+  template: undefined
+
+navBar.privateConfiguration
+  className: 'navbar'
+  bodyTemplate: 'nav_bar'
+  bodyClassName: 'luca-ui-navbar-body'
+
+  beforeRender: ()->
+    @$el.addClass "navbar-fixed-#{ @position }" if @fixed
+    @$el.addClass "navbar-inverse" if @inverse is true
+
+    if @brand?
+      @$('.brand').attr('href', @homeLink || '#')
+      @$('.brand').html(@brand)
+
+    if @template
+      @navContainer().html Luca.template(@template, @)
+
+    if !!(@fluid || Luca.getApplication()?.fluid)
+      @content().addClass( Luca.config.fluidWrapperClass )
+    else
+      @content().addClass( Luca.config.wrapperClass )
+
+  render: ()->
+    @
+
+  navContainer: ()->
+    @$('.luca-ui-navbar-body .nav-collapse')
+
+  content: ()->
+    @$('.luca-ui-navbar-body').eq(0)
+
+
+navBar.register()

data/app/assets/javascripts/luca/components/page.coffee

@@ -0,0 +1,69 @@
+# The `Page` is a type of `Container` that has
+# all of its subcomponents visible at one time, 
+# and assigned to various `@regions` that exist
+# in the `@layout` template which provide its 
+# internal dom structure.
+#
+# #### Example Template (haml):
+#       .page.layout.row-fluid{"data-layout"=>"layouts/left_nav_grid"}
+#         .span3.region{"data-region"=>"left"}
+#         .span9.region{"data-region"=>"right"}
+#
+# ### Example Page Configuration
+#     page = new Luca.components.Page
+#       layout: "layouts/left_nav_grid"
+#       regions:
+#         left: 
+#           type: "navigation"
+#         right:
+#           type: "details"
+#
+page = Luca.register       "Luca.components.Page"
+page.extends               "Luca.Container"
+
+page.privateMethods
+  # `Page`s are typically instantiated by a `Luca.components.Controller`
+  initialize: (@options={})->
+    @assignComponentsToRegions()
+    @bodyTemplate = @options.layout || @layout
+    Luca.Container::initialize.apply(@, arguments)
+
+  # Takes the configuration specified in @regions
+  # and creates a components hash out of them.
+  assignComponentsToRegions: ()->
+    @components ||= []
+
+    assigned = for regionId, regionAssignment of @regions
+      if _.isString(regionAssignment) and componentClass = Luca.registry.lookup( regionAssignment )
+        regionAssignment = 
+          component: regionAssignment
+      else if _.isString(regionAssignment) and Luca.template(regionAssignment)
+        regionAssignment = 
+          bodyTemplate: regionAssignment
+
+      _.extend(regionAssignment, container: "[data-region='#{ regionId }']")
+
+    @components = assigned
+
+page.publicConfiguration
+  # The `@layout` property is the equivalent to specifying @bodyTemplate
+  # but more semantic.  A `@layout` template is expected to contain DOM 
+  # elements with a data attribute named `region` on it.  
+
+  layout: undefined
+  # The @regions property assigns containers ( by their type alias )
+  # to DOM elements identified as regions within a layout template.
+  #
+  # #### Example:
+  #     new Luca.components.Page
+  #       regions: 
+  #         left: "my_component"
+  #         right: 
+  #           type: "my_other_component"
+  #           role: "component_role"
+  #
+  #   This will render an instance of MyComponent to this
+  #   page's @$('[data-region-id="right"]') DOM element.
+  regions: {}
+
+page.register()

data/app/assets/javascripts/luca/components/page_controller.coffee

@@ -0,0 +1,3 @@
+pageController = Luca.register  "Luca.PageController"
+pageController.extends          "Luca.components.Controller"
+pageController.register()

data/{src → app/assets/javascripts/luca}/components/pagination_control.coffee

@@ -7,6 +7,9 @@ paginationControl.defines
 
   stateful: true
 
+  stateChangeEvents:
+    "numberOfPages" : "onPageCountChange"
+
   autoBindEventHandlers: true
 
   events:
@@ -14,25 +17,22 @@ paginationControl.defines
     "click a.next"              : "nextPage"
     "click a.prev"              : "previousPage"
 
-  afterInitialize: ()->
-    _.bindAll @, "updateWithPageCount"
-
-    @state?.on "change", (state, numberOfPages)=>
-      @updateWithPageCount( state.get('numberOfPages') )
+  onPageCountChange: ()->
+    @updateWithPageCount( @get('numberOfPages') )
 
   limit: ()->
-    parseInt (@state.get('limit') || @collection?.length)
+    parseInt (@get('limit') || @collection?.length)
 
   page: ()->
-    parseInt (@state.get('page') || 1)
+    parseInt (@get('page') || 1)
 
   nextPage: ()->
     return unless @nextEnabled()
-    @state.set('page', @page() + 1 )
+    @set('page', @page() + 1 )
 
   previousPage: ()->
     return unless @previousEnabled()
-    @state.set('page', @page() - 1 )
+    @set('page', @page() - 1 )
 
   selectPage: (e)->
     me = my = @$( e.target )
@@ -44,10 +44,10 @@ paginationControl.defines
     @setPage( my.data('page-number') )
 
   setPage: (page=1,options={})->
-    @state.set('page', page, options)
+    @set('page', page, options)
 
   setLimit: (limit=1,options={})->
-    @state.set('limit', limit, options)
+    @set('limit', limit, options)
 
   pageButtonContainer: ()->
     @$ '.group'
@@ -100,5 +100,5 @@ paginationControl.defines
     parseInt @collection?.length || 0
 
   itemsPerPage: (value, options={})->
-    @state.set("limit", value, options) if value?
-    parseInt @state.get("limit")
+    @set("limit", value, options) if value?
+    parseInt @get("limit")

data/{src → app/assets/javascripts/luca}/components/router.coffee

@@ -1,4 +1,7 @@
-_.def("Luca.Router").extends("Backbone.Router").with
+#_.def("Luca.Router").extends("Backbone.Router").with
+router = Luca.register  "Luca.Router"
+router.extends          "Backbone.Router"
+router.defines
   routes:
     "" : "default"
 

data/app/assets/javascripts/luca/components/simple_collection_view.coffee

@@ -0,0 +1,10 @@
+# The SimpleCollectionView class is a CollectionView without any of the
+# bells and whistles ( filtering, pagination, sorting, etc )
+simple = Luca.register    "Luca.components.SimpleCollectionView"
+simple.extends            "Luca.CollectionView"
+
+simple.defines
+  filterable: false
+  paginatable: false
+  sortable: false
+  loadMask: false

data/app/assets/javascripts/luca/components/table_view.coffee

@@ -0,0 +1,93 @@
+tableView = Luca.register     "Luca.components.TableView"
+tableView.extends             "Luca.CollectionView"
+
+tableView.publicConfiguration
+  widths: []
+  columns:[]
+  emptyText: "There are no results to display"
+
+tableView.privateConfiguration
+  additionalClassNames: "table"
+  tagName: "table"
+  bodyTemplate: "table_view"
+  bodyTagName: "tbody"
+  bodyClassName: "table-body"
+  stateful: true
+  itemTagName: "tr"
+  observeChanges: true
+
+tableView.privateMethods
+
+  lastColumn: ()->
+    @columns[ @columns.length - 1 ]
+
+  eachColumn: (fn, scope=@)->
+    index = 0
+    for col in @columns  
+      fn.call(scope, col, index++, @)
+
+  itemRenderer: (item, model)->
+    Luca.components.TableView.rowRenderer.call(@, item, model)
+
+  initialize: (@options={})->
+    Luca.components.CollectionView::initialize.apply(@, arguments)
+
+    index = 0
+    @columns = for column in @columns
+      if width = @widths[ index ]
+        column.width = width
+
+      if _.isString(column)
+        column = reader: column
+
+      if !column.header?
+        column.header = _.str.titleize(_.str.humanize(column.reader))
+
+      index++
+      column
+
+    @defer ()=> 
+      Luca.components.TableView.renderHeader.call(@, @columns, @$('thead') )
+    .until("after:render")
+
+tableView.classMethods
+  renderHeader : (columns, targetElement)->
+    index = 0
+
+    @$( targetElement ).append("<tr></tr>")
+
+    for column in columns
+      attrs = "data-col-index": index++
+
+      if column.sortable
+        attrs.class = "sortable-toggle"
+        attrs["data-sortable-sort-by"] = column.sortBy || column.sortable
+        attrs["data-sortable-order"] = column.order
+
+      content = column.header 
+      content = "<a class='link'>#{ column.header }</a>" if column.sortable
+
+      @$(targetElement).find('tr').append( Backbone.View::make "th", attrs, content )
+
+
+    index = 0
+
+    for column in columns when column.width?
+      th = @$("th[data-col-index='#{ index++ }']",targetElement)
+      th.css('width', column.width)
+
+
+  rowRenderer: (item, model, index)->
+    colIndex = 0
+    for columnConfig in @columns
+      Luca.components.TableView.renderColumn.call(@, columnConfig, item, model, colIndex++) 
+
+  renderColumn : (column, item, model, index)->
+    cellValue = model.read( column.reader )
+
+    if _.isFunction( column.renderer )
+      cellValue = column.renderer.call @, cellValue, model, column 
+
+    Backbone.View::make("td", {"data-col-index":index}, cellValue)
+
+tableView.register()