luca 0.9.7 → 0.9.8

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

@@ -1,54 +1,50 @@
+# The CollectionView handles rendering a set of models from a 
+# collection
 collectionView = Luca.register      "Luca.components.CollectionView"
-# The CollectionView facilitates the rendering of a Collection
-# of models into a group of many rendered templates
-# 
-# Example:
-#
-#   new Luca.components.CollectionView 
-#     itemTemplate: "template_name"
-#     collection:   "collection_class_name"
-#     pagination:
-#       page: 1
-#       limit: 15
-#     filterable:
-#       query:
-#         default: 'value'     
-#
-collectionView.extends            "Luca.components.Panel"
-
-collectionView.mixesIn          "LoadMaskable", 
-                                "Filterable", 
-                                "Paginatable"
 
-collectionView.triggers         "before:refresh",
-                                "after:refresh",
-                                "refresh",
-                                "empty:results"
+collectionView.extends            "Luca.Panel"
 
-collectionView.defines
-  tagName: "ol"
+collectionView.mixesIn            "QueryCollectionBindings", 
+                                  "LoadMaskable", 
+                                  "Filterable", 
+                                  "Paginatable",
+                                  "Sortable"
 
-  className: "luca-ui-collection-view"
+collectionView.triggers           "before:refresh",
+                                  "after:refresh",
+                                  "refresh",
+                                  "empty:results"
 
+# IDEA:
+# 
+# For validation of component configuration,
+# we could define a convention like:
+#
+# collectionView.validatesConfigurationWith
+#   requiresValidCollectionAt: "collection"
+#   requiresPresenceOf: 
+#     either: ["itemTemplate", "itemRenderer", "itemProperty"]
+#
+#
+collectionView.publicConfiguration
+  tagName: "ol"
   bodyClassName: "collection-ui-panel"
-
-  # A collection view can pass a model through to a template
-  itemTemplate: undefined
-
-  # A collection view can pass a model through a function which should return a string
-  itemRenderer: undefined
-
   itemTagName: 'li'
-
   itemClassName: 'collection-item'
+  itemTemplate: undefined
+  itemRenderer: undefined
+  itemProperty: undefined
 
-
+collectionView.defines
   initialize: (@options={})->
     _.extend(@, @options)
-
     _.bindAll @, "refresh"
 
-
+    # IDEA:
+    #
+    # This type of code could be moved into a re-usable concern
+    # which higher order components can mixin to make it easier
+    # to extend them, instantiate them, etc.
     unless @collection? or @options.collection
       console.log "Error on initialize of collection view", @
       throw "Collection Views must specify a collection"
@@ -66,30 +62,21 @@ collectionView.defines
       console.log "Missing Collection on #{ @name || @cid }", @, @collection
       throw "Collection Views must have a valid backbone collection"
 
-      @collection.on "before:fetch", ()=>
-        @trigger "enable:loadmask"
-        
-      @collection.bind "reset", ()=>
-        @refresh()
-        @trigger "disable:loadmask"
-
-      @collection.bind "remove", ()=>
-        @refresh()
+    @on "data:refresh", @refresh, @
 
-      @collection.bind "add", ()=>
-        @refresh()
+    @on "collection:reset", @refresh, @
+    @on "collection:remove", @refresh, @
+    @on "collection:add", @refresh, @
+    @on "collection:change", @refreshModel, @ if @observeChanges is true
 
-      if @observeChanges is true
-        @collection.on "change", @refreshModel, @
+    Luca.Panel::initialize.apply(@, arguments)
 
-    Luca.components.Panel::initialize.apply(@, arguments)
+    view = @
+    if @getCollection()?.length > 0
+      @on "after:render", ()->
+        view.refresh()
+        view.unbind "after:render", @
 
-    unless @autoRefreshOnModelsPresent is false
-      @defer ()=> 
-        @refresh() if @collection.length > 0
-      .until("after:render")
-
-    @on "refresh", @refresh, @
 
   attributesForItem: (item, model)->
     _.extend {}, class: @itemClassName, "data-index": item.index, "data-model-id": item.model.get('id')
@@ -118,47 +105,6 @@ collectionView.defines
       console.log "Error generating DOM element for CollectionView", @, model, index
       #no op
 
-  getCollection: ()->
-    @collection
-
-  loadModels: (models=[], options={})->
-    @getCollection()?.reset(models, options)
-
-  applyQuery: (query={},queryOptions={})->
-    @query = query
-    @queryOptions = queryOptions
-    @refresh()
-    @
-
-  # Private: returns the query that is applied to the underlying collection.
-  # accepts the same options as Luca.Collection.query's initial query option.
-  getQuery: ()-> 
-    query = @query ||= {}
-    for querySource in _( @querySources || [] ).compact()
-      query = _.extend(query, (querySource()||{}) ) 
-    query
-
-  # Private: returns the query that is applied to the underlying collection.
-  # accepts the same options as Luca.Collection.query's initial query option.
-  getQueryOptions: ()-> 
-    options = @queryOptions ||= {}
-
-    for optionSource in _( @optionsSources || [] ).compact()
-      options = _.extend(options, (optionSource()||{}) ) 
-
-    options
-
-  # Private: returns the models to be rendered.  If the underlying collection
-  # responds to @query() then it will use that interface. 
-  getModels: (query,options)->
-    if @collection?.query
-      query ||= @getQuery()
-      options ||= @getQueryOptions()
-      
-      @collection.query(query, options)
-    else
-      @collection.models
-
   locateItemElement: (id)->
     @$(".#{ @itemClassName }[data-model-id='#{ id }']")
 
@@ -195,11 +141,6 @@ collectionView.defines
     eventTrigger = _([domEvent,"#{ @itemTagName }.#{ @itemClassName }", selector]).compact().join(" ")
     Luca.View::registerEvent(eventTrigger,handler)
 
-  render: ()->
-    @refresh()
-    @$attach() if @$el.parent().length > 0 and @container?
-    @
-
 # Private Helpers
 
 

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

@@ -0,0 +1,99 @@
+controller = Luca.register        "Luca.components.Controller"
+controller.extends                "Luca.containers.CardView"
+
+controller.publicInterface
+  default: (callback)->
+    @navigate_to(@defaultPage || @defaultCard, callback)
+
+  activePage: ()-> 
+    @activeSection()
+
+  navigate_to: (section, callback)->
+    section ||= @defaultCard
+
+    @activate section, false, (activator, previous,current)=>
+      unless current.activatedByController is true
+        current.trigger("on:controller:activation")
+        current.activatedByController = true
+
+      @state.set(active_section: current.name )
+
+      if _.isFunction( callback )
+        callback.call(current)
+
+    # return the section we are navigating to
+    @find(section)
+
+controller.classMethods
+  controllerPath: ()->
+    component = @
+    
+    list = [component.name]
+    atBase = false
+
+    while component and not atBase
+      component = component.getParent?()
+      atBase = true if component?.role is "main_controller"
+      list.push( component.name ) if component? and not atBase
+
+    list.reverse()
+
+controller.afterDefinition ()->
+  Luca.View::hooks.push "on:controller:activation"
+
+controller.defines
+  additionalClassNames: 'luca-ui-controller'
+  activeAttribute: "active-section"
+  stateful: true
+
+  initialize: (@options)->
+    # let's phase out the 'card' terminology 
+    # and 'section' while we're at it.  page is the word.
+    @defaultCard ||= @defaultPage ||= @components[0]?.name || 0
+    @defaultPage ||= @defaultCard 
+
+    @defaultState ||= 
+      active_section: @defaultPage
+
+    Luca.containers.CardView::initialize.apply @, arguments
+
+    throw "Controllers must specify a defaultCard property and/or the first component must have a name" unless @defaultCard?
+
+    @_().each (component)->
+      component.controllerPath = Luca.components.Controller.controllerPath
+
+    @on "after:render", @default, @
+
+  each: (fn)->
+    _( @components ).each (component)=> fn.call(@,component)
+
+  activeSection: ()->
+    @get("active_section")
+
+  pageControllers: (deep=false)->
+    @controllers.apply(@, arguments)
+
+  controllers:(deep=false)->
+    @select (component)->
+      type = (component.type || component.ctype) 
+      type is "controller" or type is "page_controller"
+
+  availablePages: ()->
+    @availableSections.apply(@, arguments)    
+
+  availableSections: ()->
+    base = {}
+    base[ @name ] = @sectionNames()
+
+    _( @controllers() ).reduce (memo,controller)=>
+      memo[ controller.name ] = controller.sectionNames()  
+      memo
+    , base 
+
+  pageNames: ()->
+    @sectionNames()
+
+  sectionNames: (deep=false)->
+    @pluck('name')
+
+

data/{src/core/field.coffee → app/assets/javascripts/luca/components/fields/base.coffee}

@@ -71,7 +71,7 @@ field.defines
     Luca.View::initialize.apply(@, arguments)
 
   beforeRender: ()->
-    if Luca.enableBootstrap
+    if Luca.config.enableBoostrap
       @$el.addClass('control-group')
 
     @$el.addClass('required') if @required

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

@@ -13,6 +13,7 @@ buttonField.publicConfiguration
   white:        undefined
 
 buttonField.privateConfiguration
+  isButton: true
   template: "fields/button_field"
   events:
     "click input" : "click_handler"
@@ -41,5 +42,3 @@ buttonField.privateInterface
 
   setValue: ()-> true
 
-buttonField.defines
-  version: 1

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

@@ -21,10 +21,14 @@ selectField.defines
     _.extend @, Luca.concerns.Deferrable
     _.bindAll @, "change_handler", "populateOptions", "beforeFetch"
 
+    if _.isArray(@collection)
+      @collection = data: @collection
+      
     Luca.core.Field::initialize.apply @, arguments
 
     @input_id ||= _.uniqueId('field')
     @input_name ||= @name
+    @valueType ||= Luca.config.idAttributeType if @valueField is "id"
     @label ||= @name
     @retainValue = true if _.isUndefined @retainValue
 
@@ -35,12 +39,12 @@ selectField.defines
       @parseData()
 
     try
-      @configure_collection()
+      @configure_collection( @setAsDeferrable )
     catch e
       console.log "Error Configuring Collection", @, e.message
 
-    @collection.bind "before:fetch", @beforeFetch
-    @collection.bind "reset", @populateOptions
+    @collection?.bind "before:fetch", @beforeFetch
+    @collection?.bind "reset", @populateOptions
 
   # if the select field is configured with a data property
   # then parse that data into the proper format.  either
@@ -63,7 +67,7 @@ selectField.defines
     if @collection?.models?.length > 0
       @populateOptions()
     else
-      @collection.trigger("reset")
+      @collection?.trigger("reset")
 
   setValue: (value)->
     @currentValue = value

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

@@ -13,14 +13,15 @@ _.def('Luca.fields.TextAreaField').extends('Luca.core.Field').with
   initialize: (@options={})->
     _.bindAll @, "keydown_handler"
 
-    Luca.core.Field::initialize.apply @, arguments
-
     @input_id ||= _.uniqueId('field')
     @input_name ||= @name
     @label ||= @name
     @input_class ||= @class
     @input_value ||= ""
     @inputStyles ||= "height:#{ @height };width:#{ @width }"
+    @placeHolder ||= ""
+
+    Luca.core.Field::initialize.apply @, arguments
 
   setValue: (value)->
     $( @field() ).val(value)

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

@@ -24,9 +24,6 @@ textField.defines
     @label ||= @name
     @input_class ||= @class
     @input_value ||= @value || "" 
-
-    # TODO
-    # Placeholder?
     
     if @prepend
       @$el.addClass('input-prepend')
@@ -36,6 +33,8 @@ textField.defines
       @$el.addClass('input-append')
       @addOn = @append
 
+    @placeHolder ||= ""
+
     Luca.core.Field::initialize.apply @, arguments
 
   keyup_handler: (e)->

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

@@ -1,7 +1,14 @@
-#_.def("Luca.components.FormView").extends('Luca.core.Container').with
-
+# The FormView component is a special container which provides functionality
+# around the components inside which extend from the Luca.core.Field class.
+#
+# The FormView component integrates well with Luca.Models and can control
+# the attributes on that model, respond to validations, and submit changes
+# to an API. 
 formView = Luca.register        "Luca.components.FormView"
-formView.extends                "Luca.core.Container"
+
+formView.extends                "Luca.Container"
+
+formView.mixesIn                "LoadMaskable"
 
 formView.triggers               "before:submit",
                                 "before:reset",
@@ -18,46 +25,93 @@ formView.triggers               "before:submit",
                                 "after:submit:error"
 
 
-formView.defines
-  tagName: 'form'
 
-  className: 'luca-ui-form-view'
+formView.publicConfiguration
+  # should the label display above, or to the
+  # side of the fields
+  labelAlign: undefined
 
-  events:
-    "click .submit-button" : "submitHandler"
-    "click .reset-button" : "resetHandler"
+  # specifying this class gives you the ability
+  # to layout the nested fields accordingly.
+  fieldLayoutClass: undefined
 
+  # should this form have a legend?
+  legend: ""
+
+  # available options are true, false, "top", "bottom", or "both"
+  # the component configuration for the toolbar can be controlled
+  # by specifying a name of a property that contains a valid
+  # component reference ( either hash w/ type reference )
   toolbar: true
 
-  legend: ""
+  # the name of the property which contains the configuration
+  # for the buttons that will go in this toolbar.  Specify
+  # a string so it can be lazily evaluated at initialization.
+  toolbarConfig: undefined
 
-  bodyClassName: "form-view-body"
+  # the default toolbar definition that will be created if
+  # the form is configured to have a toolbar on it.  this value
+  # will be resolved at initialization, so pass a string identifying
+  # an object in memory.
+  defaultToolbar: "Luca.components.FormView.defaultToolbar"
+
+  # if this form will be submitting values to a RESTful API and you
+  # want to show a loading indicator or progress bar, configure the
+  # @loadMask property.
+  loadMask: true
+
+  # Applies the twitter bootstrap well class to this form.
+  # @$el.addClass('well') if @well
+  well: false 
+
+  # Applies the twitter bootstrap form-search class to this form.
+  # @$el.addClass('form-search') if @searchForm
+  searchForm: false
+
+  # Applies the twitter bootstrap horizontal form class to this form.
+  # @$el.addClass('form-horizontal') if @horizontalForm
+  horizontalForm: false
 
-  version: 1 
+  # Applies the twitter bootstrap inline form class to this form.
+  # @$el.addClass('form-inline') if @inlineForm
+  inlineForm: false
 
+  # if we should always include blank values
+  # regardless of how the field is configured
+  includeBlankValues: undefined
+
+formView.privateConfiguration
+  tagName: 'form'
+  stateful: true
+  events:
+    "click .submit-button" : "submitHandler"
+    "click .reset-button" : "resetHandler"
+
+  bodyClassName: "form-view-body"
+
+formView.privateMethods
   initialize: (@options={})->
-    @loadMask = Luca.enableBootstrap unless @loadMask?
+    @loadMask = Luca.config.enableBoostrap unless @loadMask?
 
-    Luca.core.Container::initialize.apply @, arguments
+    Luca.Container::initialize.apply @, arguments
 
     @components ||= @fields
 
     _.bindAll @, "submitHandler", "resetHandler", "renderToolbars"
-    @state ||= new Backbone.Model
 
     @setupHooks( @hooks )
 
     @applyStyleClasses()
 
-    if @toolbar isnt false and (not @topToolbar and not @bottomToolbar)
-      @topToolbar = @getDefaultToolbar() if @toolbar is "both" or @toolbar is "top"
-      @bottomToolbar = @getDefaultToolbar() unless @toolbar is "top"
+    Luca.components.FormView.setupToolbar.call(@)
+
 
   getDefaultToolbar: ()->
-    Luca.components.FormView.defaultFormViewToolbar
+    config = @toolbarConfig || @defaultToolbar
+    Luca.util.resolve( Luca.util.read(config) )
 
   applyStyleClasses: ()->
-    if Luca.enableBootstrap
+    if Luca.config.enableBoostrap
       @applyBootstrapStyleClasses()
 
     @$el.addClass( "label-align-#{ @labelAlign }") if @labelAlign
@@ -84,11 +138,12 @@ formView.defines
     @submit() if @hasModel()
 
   afterComponents: ()->
-    Luca.core.Container::afterComponents?.apply(@, arguments)
+    Luca.Container::afterComponents?.apply(@, arguments)
 
-    @eachField (field)=>
-      field.getForm = ()=> @
-      field.getModel = ()=> @currentModel()
+    form = @
+    @eachField (field)->
+      field.getForm = ()=> form 
+      field.getModel = ()=> form.currentModel()
 
   eachField: (iterator)->
     _( @getFields() ).map( iterator )
@@ -179,11 +234,13 @@ formView.defines
       valueIsBlank      = !!(_.str.isBlank( value ) || _.isUndefined( value ))
 
       allowBlankValues  = not options.reject_blank and not field.send_blanks
+      allowBlankValues = true if field.includeBlank is true or @includeBlankValues is true
+
 
       if options.debug
         console.log "#{ key } Options", options, "Value", value, "Value Is Blank?", valueIsBlank, "Allow Blanks?", allowBlankValues
 
-      if options.skip_buttons and field.ctype is "button_field"
+      if options.skip_buttons and field.isButton
         skip = true
       else
         if valueIsBlank and allowBlankValues is false
@@ -236,8 +293,8 @@ formView.defines
 
     @current_model
 
-  syncFormWithModel: ()->
-    @current_model?.set( @getValues() )
+  syncFormWithModel: (options)->
+    @current_model?.set( @getValues(), options )
 
   setLegend: (@legend)->
     $('fieldset legend', @el).first().html(@legend)
@@ -261,22 +318,32 @@ formView.defines
     @$('.alert.alert-error').remove()
     @flash Luca.template("components/form_alert", className:"alert alert-error", message: message)
 
+formView.classInterface
+  setupToolbar: ()->
+    if @toolbar isnt false and (not @topToolbar and not @bottomToolbar)
+      if @toolbar is "both" or @toolbar is "top"
+        @topToolbar = _.clone( @getDefaultToolbar() )
+
+      unless @toolbar is "top"
+        @bottomToolbar = _.clone( @getDefaultToolbar() )
+
+  defaultToolbar:
+    buttons:[
+      icon:"remove-sign"
+      label: "Reset"
+      eventId: "click:reset"
+      className:"reset-button"
+      align: 'right'
+    ,
+      icon:"ok-sign"
+      white: true
+      label: "Save Changes"
+      eventId: "click:submit"
+      color: "success"
+      className: 'submit-button'
+      align: 'right'
+    ]
 
-Luca.components.FormView.defaultFormViewToolbar =
-  buttons:[
-    icon:"remove-sign"
-    label: "Reset"
-    eventId: "click:reset"
-    className:"reset-button"
-    align: 'right'
-  ,
-    icon:"ok-sign"
-    white: true
-    label: "Save Changes"
-    eventId: "click:submit"
-    color: "success"
-    className: 'submit-button'
-    align: 'right'
-  ]
-
+formView.defines
+  version: 2
 

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

@@ -1,4 +1,4 @@
-_.def('Luca.components.GridView').extend('Luca.components.Panel').with
+_.def('Luca.components.GridView').extend('Luca.Panel').with
 
   bodyTemplate: "components/grid_view"
 
@@ -59,10 +59,10 @@ _.def('Luca.components.GridView').extend('Luca.components.Panel').with
     _.extend @, @options
     _.extend @, Luca.concerns.Deferrable
 
-    @loadMask = Luca.enableBootstrap unless @loadMask?
+    @loadMask = Luca.config.enableBoostrap unless @loadMask?
     @loadMaskEl ||= ".luca-ui-g-view-body" if @loadMask is true
 
-    Luca.components.Panel::initialize.apply(@, arguments)
+    Luca.Panel::initialize.apply(@, arguments)
 
     @configure_collection(true)
 
@@ -87,7 +87,7 @@ _.def('Luca.components.GridView').extend('Luca.components.Panel').with
         console.log "Error in change handler for GridView.collection", error, @, model
 
   beforeRender: ()->
-    Luca.components.Panel::beforeRender?.apply(@, arguments)
+    Luca.Panel::beforeRender?.apply(@, arguments)
 
     @trigger "before:grid:render", @
 
@@ -108,7 +108,7 @@ _.def('Luca.components.GridView').extend('Luca.components.Panel').with
     $(@container).append @$el
 
   afterRender: ()->
-    Luca.components.Panel::afterRender?.apply(@, arguments)
+    Luca.Panel::afterRender?.apply(@, arguments)
 
     @rendered = true
     @refresh()
@@ -120,7 +120,7 @@ _.def('Luca.components.GridView').extend('Luca.components.Panel').with
     _( @additionalWrapperClasses ).each (containerClass)=>
       @wrapper?.addClass( containerClass )
 
-    if Luca.enableBootstrap
+    if Luca.config.enableBoostrap
       @table.addClass('table')
 
     _( @tableStyle?.split(" ") ).each (style)=>

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"