luca 0.9.4 → 0.9.6

data/src/containers/panel_toolbar.coffee

@@ -1,26 +1,95 @@
+panelToolbar = Luca.register        "Luca.components.PanelToolbar"
+# The Panel Toolbar is a collection of buttons and / or dropdowns
+# which are automatically created by BasicPanel classes, or can be
+# added to any other view component.
+panelToolbar.extends                "Luca.View"
+
+
+panelToolbar.defines
+  # @buttons is an array of button config objects
+  # button config accepts the following paramters:
+  #
+  # label       what should the button say
+  # eventId     what event should the button trigger
+  # dropdown    an array of arrays: [eventId, label]
+  # group       an array of button configs
+  # wrapper     a css class, in addition to btn-group
+  # icon        which icon do you want to use on this button?
+  # white       true or false: is it a white colored text?
+  # color       options are primary, info, success, warning, danger, inverse
+  buttons:[]
+
+  className: "luca-ui-toolbar btn-toolbar"
+
+  well: true
+
+  orientation: 'top'
+
+  autoBindEventHandlers: true
+
+  events:
+    "click a.btn, click .dropdown-menu li" : "clickHandler"
+
+  initialize: (@options={})->
+    @_super("initialize", @, arguments)
+
+    # if the toolbar consists of a single button group
+    # don't make the developer specify buttons = {buttons:[group:true, buttons:[...]]}
+    if @group is true and @buttons?.length >= 0
+      @buttons = [
+        group: true
+        buttons: @buttons
+      ]
+
+  # The Toolbar behaves by triggering events on the components which they
+  # belong to. Combined with Luca.View::setupHooks it is a clean way
+  # to organize actions
+  clickHandler: (e)->
+    me = my = $( e.target )
+    me = my = $( e.target ).parent() if me.is('i')
+
+    if @selectable is true
+      my.siblings().removeClass("is-selected")
+      me.addClass('is-selected')
+
+    return unless eventId = my.data('eventid')
+
+    hook = Luca.util.hook( eventId )
+
+    source = @parent || @
+    if _.isFunction( source[hook] )
+      source[ hook ].call(@, me, e)
+    else
+      source.trigger(eventId, me, e)
+
+  beforeRender:()->
+    @_super("beforeRender", @, arguments)
+
+    if @well is true
+      @$el.addClass 'well'
+
+    @$el.addClass 'btn-selectable' if @selectable is true
+    @$el.addClass "toolbar-#{ @orientation }"
+    @$el.addClass "pull-right" if @align is "right"
+    @$el.addClass "pull-left" if @align is "left"
+
+  render: ()->
+    @$el.empty()
+    @$el.append( element ) for element in prepareButtons(@buttons)
+    @
 
-# button config accepts the following paramters:
-#
-# label       what should the button say
-# eventId     what event should the button trigger
-# dropdown    an array of arrays: [eventId, label]
-# group       an array of button configs
-# wrapper     a css class, in addition to btn-group
-# icon        which icon do you want to use on this button?
-# white       true or false: is it a white colored text?
-# color       options are primary, info, success, warning, danger, inverse
 
 make = Backbone.View::make
 
 buildButton = (config, wrap=true)->
-  if config.ctype?
+  if config.ctype? or config.type?
     config.className ||= ""
     config.className += 'toolbar-component'
 
     object = Luca(config).render()
+
     if Luca.isBackboneView(object)
-      console.log "Adding toolbar component", object
-      return object.el
+      return object.$el
 
   if config.spacer
     return make "div", class: "spacer #{ config.spacer }"
@@ -29,8 +98,9 @@ buildButton = (config, wrap=true)->
     return make "div", {class: "toolbar-text"}, config.text
 
   wrapper = 'btn-group'
-  wrapper += " #{ config.wrapper }" if config.wrapper?
-  wrapper += " align-#{ config.align }" if config.align?
+  wrapper += "#{ config.wrapper }" if config.wrapper?
+  wrapper += "pull-#{ config.align } align-#{ config.align }" if config.align?
+  wrapper += 'btn-selectable' if config.selectable is true
 
   # if we're passed a group, then we need to just
   # wrap the contents of the buttons property in that group
@@ -57,6 +127,7 @@ buildButton = (config, wrap=true)->
       title: config.title || config.description
 
     buttonAttributes["class"] += " btn-#{ config.color }" if config.color?
+    buttonAttributes["class"] += " is-selected" if config.selected?
 
     if config.dropdown
       label = "#{ label } <span class='caret'></span>"
@@ -82,70 +153,5 @@ buildButton = (config, wrap=true)->
       # for buttons which are already part f a group
       buttonEl
 
-prepareButtons = (buttons, wrap=true)->
-  _( buttons ).map (button)->
-    buildButton(button, wrap)
-
-
-#### Panel Toolbar Component
-#
-# The Panel Toolbar is a collection of buttons and / or dropdowns
-# which are automatically created by BasicPanel classes, or can be
-# added to any other view component.
-_.def("Luca.containers.PanelToolbar").extends("Luca.View").with
-
-  className: "luca-ui-toolbar btn-toolbar"
-
-  # @buttons is an array of button config objects
-
-
-  buttons:[]
-
-  well: true
-
-  orientation: 'top'
-
-  autoBindEventHandlers: true
-
-  events:
-    "click a.btn, click .dropdown-menu li" : "clickHandler"
-
-  #autoBindEventHandlers: true
-
-  # The Toolbar behaves by triggering events on the components which they
-  # belong to. Combined with Luca.View::setupHooks it is a clean way
-  # to organize actions
-  clickHandler: (e)->
-    me = my = $( e.target )
-
-    if me.is('i')
-      me = my = $( e.target ).parent()
-
-    eventId = my.data('eventid')
-
-    return unless eventId?
-
-    hook = Luca.util.hook( eventId )
-
-    source = @parent || @
-    if _.isFunction( source[hook] )
-      source[ hook ].call(@, me, e)
-    else
-      source.trigger(eventId, me, e)
-
-  beforeRender:()->
-    @_super("beforeRender", @, arguments)
-
-    if @well is true
-      @$el.addClass 'well'
-
-    @$el.addClass "toolbar-#{ @orientation }"
-
-    @applyStyles( @styles ) if @styles?
-
-  render: ()->
-    @$el.empty()
-
-    elements = prepareButtons(@buttons)
-    _( elements ).each (element)=>
-      @$el.append( element )
+prepareButtons = (buttons=[], wrap=true)->
+  buildButton(button, wrap) for  button in buttons

data/src/containers/tab_view.coffee

@@ -42,17 +42,17 @@ _.def('Luca.containers.TabView').extends('Luca.containers.CardView').with
 
   afterRender: ()->
     Luca.containers.CardView::afterRender?.apply @, arguments
-    @registerEvent("click ##{ @cid }-tabs-selector li a", "select")
+    tabContainerId = @tabContainer().attr("id")
+    @registerEvent("click ##{ tabContainerId } li a", "select")
 
     if Luca.enableBootstrap and (@tab_position is "left" or @tab_position is "right")
       @tabContainerWrapper().addClass("span2")
       @tabContentWrapper().addClass("span9")
 
-
   createTabSelectors: ()->
     tabView = @
     @each (component,index)->
-      icon = "<i class='icon-#{ component.tabIcon }" if component.tabIcon
+      icon = "<i class='icon-#{ component.tabIcon }'></i>" if component.tabIcon
       link = "<a href='#'>#{ icon || ''} #{ component.title }</a>"
       selector = tabView.make("li",{class:"tab-selector","data-target":index}, link)
       tabView.tabContainer().append(selector)

data/src/containers/viewport.coffee

@@ -19,11 +19,17 @@ _.def('Luca.containers.Viewport').extend('Luca.containers.CardView').with
 
     @enableFullscreen() if @fullscreen is true
 
-  enableFluid: ()->
-    @$el.parent().addClass( @wrapperClass ) 
+  enableFluid: ()-> @enableWrapper()
 
-  disableFluid: ()->
-    @$el.parent().removeClass( @wrapperClass ) 
+  disableFluid: ()-> @disableWrapper()
+   
+  enableWrapper: ()->
+    if @wrapperClass?
+      @$el.parent().addClass( @wrapperClass ) 
+
+  disableWrapper: ()->
+    if @wrapperClass?
+      @$el.parent().removeClass( @wrapperClass ) 
 
   enableFullscreen: ()->
     $('html,body').addClass('luca-ui-fullscreen')

data/src/core/collection.coffee

@@ -1,8 +1,14 @@
-source = 'Backbone.Collection'
-source = 'Backbone.QueryCollection' if Backbone.QueryCollection?
+collection = Luca.define            'Luca.Collection'
 
-_.def("Luca.Collection").extends( source ).with
-  include: ['Luca.Events']
+if Backbone.QueryCollection?
+  collection.extends                'Backbone.QueryCollection'
+else
+  collection.extends                'Backbone.Collection'
+
+collection.includes                 'Luca.Events'
+
+collection.defines    
+  model: Luca.Model
   # cachedMethods refers to a list of methods on the collection
   # whose value gets cached once it is ran.  the collection then
   # binds to change, add, remove, and reset events and then expires
@@ -325,6 +331,7 @@ _.def("Luca.Collection").extends( source ).with
           collection.bind "change:#{dependency}", ()->
             collection.clearMethodCache(method: method)
 
+
   # make sure the querying interface from backbone.query is present
   # in the case backbone-query isn't loaded.  without it, it will
   # just return the models

data/src/core/container.coffee

@@ -1,90 +1,53 @@
-# The Component Container
-#
-# The Component Container is a nestable component
-# which are responsible for handling communication between multiple
-# nested views.
-#
-# One: Layout
-#
-# a container is responsible for laying out the nested views
-# and rendering them in a special DOM element
-doLayout = ()->
-  @trigger "before:layout", @
-  @prepareLayout()
-  @trigger "after:layout", @
-
-# and displaying those elements in a way that is
-# optimal for the desired user experience of that view
-# ( i.e seeing only one of them at a time, seeing them side by side )
-applyDOMConfig = (panel, panelIndex)->
-  style_declarations = []
-
-  style_declarations.push "height: #{ (if _.isNumber(panel.height) then panel.height + 'px' else panel.height ) }" if panel.height?
-  style_declarations.push "width: #{ (if _.isNumber(panel.width) then panel.width + 'px' else panel.width ) }" if panel.width?
-  style_declarations.push "float: #{ panel.float }" if panel.float
-
-  config =
-    class: panel?.classes || @componentClass
-    id: "#{ @cid }-#{ panelIndex }"
-    style: style_declarations.join(';')
-    "data-luca-owner" : @name || @cid
-
-  if @customizeContainerEl?
-   config = @customizeContainerEl( config, panel, panelIndex )
-
-  config
-
-# Two: Component Creation
-#
-# A container is responsible for creating and storing references to the nested
-# views that are required for its functioning.
-doComponents = ()->
-
-  @trigger "before:components", @, @components
-  @prepareComponents()
-  @createComponents()
-  @trigger "before:render:components", @, @components
-  @renderComponents()
-  @trigger "after:components", @, @components
+container = Luca.register         "Luca.core.Container"
 
+container.extends                 "Luca.components.Panel"
 
-# Containers are central to Luca.  They are what make it easy to structure
-# your application in a logical way and to specify much of the behavior of
-# complex / composite views at define time using JSON syntax combined with
-# the meta data contained in the Luca component registry.
-_.def('Luca.core.Container').extends('Luca.components.Panel').with
+container.triggers                "before:components",
+                                  "before:render:components",
+                                  "before:layout",
+                                  "after:components",
+                                  "after:layout",
+                                  "first:activation"
 
+container.defines                                  
   className: 'luca-ui-container'
 
   componentTag: 'div'
+
   componentClass: 'luca-ui-panel'
 
   isContainer: true
 
-  hooks:[
-    "before:components"
-    "before:render:components"
-    "before:layout"
-    "after:components"
-    "after:layout"
-    "first:activation"
-  ]
-
   rendered: false
 
   components: []
 
+  # @componentEvents provides declarative syntax for responding to events on
+  # the components in this container.  the format of the syntax is very similar
+  # to the other event binding helpers:
+  # 
+  #   component_accessor component:trigger
+  #
+  # where component_accessor is either the name of the role, or a method on the container
+  # which will find the component in question.
+  #
+  # myContainer = new Luca.core.Container
+  #   componentEvents:
+  #     "name component:trigger"    : "handler"
+  #     "role component:trigger"    : "handler"
+  #     "getter component:trigger"  : "handler"
+  #
+  componentEvents: {}
+
   initialize: (@options={})->
     _.extend @, @options
 
-    @setupHooks [
-      "before:components"
-      "before:render:components"
-      "before:layout"
-      "after:components"
-      "after:layout"
-      "first:activation"
-    ]
+    @setupHooks( Luca.core.Container::hooks )
+
+    # aliases for the components property
+    @components ||= @fields ||= @pages ||= @cards ||= @views
+
+    validateContainerConfiguration(@)
 
     Luca.View::initialize.apply @, arguments
 
@@ -183,6 +146,9 @@ _.def('Luca.core.Container').extends('Luca.components.Panel').with
     map = @componentIndex =
       name_index: {}
       cid_index: {}
+      role_index: {}
+
+    container   = @
 
     @components = _( @components ).map (object, index)=>
 
@@ -202,13 +168,12 @@ _.def('Luca.core.Container').extends('Luca.components.Panel').with
           else
             object.type = object.ctype = Luca.defaultComponentType
 
-        Luca.util.lazyComponent( object )
+        # if the container defines a @defaults property
+        # then we should make sure our child components inherit
+        # these values unless specifically defined
+        object = _.defaults(object, (container.defaults || {}))
 
-      # if you define a @getter property as a string on your component
-      # we will create a function with that name on this container that
-      # allows you to access this component
-      if _.isString( component.getter )
-        @[ component.getter ] = (()-> component) 
+        created = Luca.util.lazyComponent( object )
 
       # if we're using base backbone views, then they don't extend themselves
       # with their passed options, so this is a workaround to get them to
@@ -216,18 +181,12 @@ _.def('Luca.core.Container').extends('Luca.components.Panel').with
       if !component.container and component.options.container
         component.container = component.options.container
 
-      if map and component.cid?
-        map.cid_index[ component.cid ] = index
-
-      if map and component.name?
-        map.name_index[ component.name ] = index
+      indexComponent( component ).at(index).in( @componentIndex )
 
       component
 
     @componentsCreated = true
 
-    @registerComponentEvents() unless _.isEmpty(@componentEvents)
-
     map
 
   # Trigger the Rendering Pipeline process on all of the nested
@@ -271,32 +230,74 @@ _.def('Luca.core.Container').extends('Luca.components.Panel').with
         component.previously_activated = true
 
   #### Underscore Methods For Working with Components
+  _: ()-> _( @components )
+
   pluck: (attribute)-> 
-    _( @components ).pluck attribute
+    @_().pluck(attribute)
 
   invoke: (method)->
-    _( @components ).invoke method
+    @_().invoke(method)
 
-  map: (fn)->
-    _( @components ).map(fn)
-    
-  # event binding sugar for nested components
-  #
-  # you can define events like:
+  select: (fn)->
+    @_().select(fn)
 
-  # _.def("MyContainer").extends("Luca.View").with
-  #   componentEvents:
-  #     "component_name before:load" : "mySpecialHandler"
-  componentEvents: {}
+  detect: (fn)->
+    @_().detect(attribute)
+  
+  reject: (fn)->
+    @_().reject(fn)
+
+  map: (fn)->
+    @_().map(fn)
 
   registerComponentEvents: ()->
-    for listener, handler of @componentEvents
-      [componentName,trigger] = listener.split(' ')
-      component = @findComponentByName(componentName)
-      component?.bind trigger, @[handler]
+    container = @
+
+    for listener, handler of (@componentEvents||{})
+      [componentNameOrRole,eventId] = listener.split(' ')
+
+      unless _.isFunction( @[handler] )
+        console.log "Error registering component event", listener, componentNameOrRole, eventId
+        throw "Invalid component event definition #{ listener }. Specified handler is not a method on the container"
+
+      if componentNameOrRole is "*"
+        @eachComponent (component)=> component.on(eventId, @[handler], container)
+      else 
+        component = @findComponentForEventBinding( componentNameOrRole )
+
+        unless component? and Luca.isComponent(component)
+          console.log "Error registering component event", listener, componentNameOrRole, eventId
+          throw "Invalid component event definition: #{ componentNameOrRole }"
+
+        component?.bind eventId, @[handler], container
+
+
+  subContainers: ()->
+    @select (component)-> 
+      component.isContainer is true
+
+  roles: ()->
+    _( @allChildren() ).pluck('role')
+     
+  allChildren: ()->
+    children = @components
+    grandchildren = _( @subContainers() ).invoke('allChildren')
+    @_allChildren ||= _([children,grandchildren]).chain().compact().flatten().uniq().value()
+
+  findComponentForEventBinding: (nameRoleOrGetter, deep=false)->
+    @findComponentByName(nameRoleOrGetter, deep) || @findComponentByGetter( nameRoleOrGetter, deep ) || @findComponentByRole( nameRoleOrGetter, deep )
+
+  findComponentByGetter: (getter, deep=false)->
+    _( @allChildren() ).detect (component)->
+      component.getter is getter
+
+  findComponentByRole: (role,deep=false)->
+    _( @allChildren() ).detect (component)->
+      component.role is role
 
   findComponentByName: (name, deep=false)->
-    @findComponent(name, "name_index", deep)
+    _( @allChildren() ).detect (component)->
+      component.name is name
 
   findComponentById: (id, deep=false)->
     @findComponent(id, "cid_index", deep)
@@ -305,12 +306,14 @@ _.def('Luca.core.Container').extends('Luca.components.Panel').with
     @createComponents() unless @componentsCreated is true
 
     position = @componentIndex?[ haystack ][ needle ]
-    component = @components?[ position ]
+    component = @components[ position ]
 
     return component if component
 
     if deep is true
-      sub_container = _( @components ).detect (component)-> component?.findComponent?(needle, haystack, true)
+      sub_container = _( @components ).detect (component)-> 
+        component?.findComponent?(needle, haystack, true)
+
       sub_container?.findComponent?(needle, haystack, true)
 
   each: (fn)->
@@ -333,27 +336,24 @@ _.def('Luca.core.Container').extends('Luca.components.Panel').with
     return @components[ @activeItem ]
 
   componentElements: ()->
-    @$(">.#{ @componentClass }", @$bodyEl())
+    @$("[data-luca-parent='#{ @name || @cid }']")
 
   getComponent: (needle)->
     @components[ needle ]
 
-  rootComponent: ()->
-    console.log "Calling rootComponent will be deprecated.  use isRootComponent instead"
-    !@getParent?
-
   isRootComponent:()->
     !@getParent?
 
   getRootComponent: ()->
-    if @rootComponent() then @ else @getParent().getRootComponent()
+    if @isRootComponent() then @ else @getParent().getRootComponent()
     
-  selectByAttribute: (attribute, value, deep=false)->
+
+  selectByAttribute: (attribute, value=undefined, deep=false)->
     components = _( @components ).map (component)->
       matches = []
       test = component[ attribute ]
 
-      matches.push( component ) if test is value
+      matches.push( component ) if test is value or (not value? and test?)
 
       # recursively traverse our components
       matches.push component.selectByAttribute?(attribute, value, true) if deep is true
@@ -362,9 +362,6 @@ _.def('Luca.core.Container').extends('Luca.components.Panel').with
 
     _.flatten( components )
 
-  select: (attribute, value, deep=false)->
-    console.log "Container.select will be replaced by selectByAttribute in 1.0"
-    Luca.core.Container::selectByAttribute.apply(@, arguments)
 
 # This is the method by which a container injects the rendered child views
 # into the DOM.  It will get passed the container object, and the component
@@ -372,3 +369,82 @@ _.def('Luca.core.Container').extends('Luca.components.Panel').with
 Luca.core.Container.componentRenderer = (container, component)->
   attachMethod = $( component.container )[ component.attachWith || "append" ]
   attachMethod( component.render().el )
+
+
+#### Private Helpers
+
+doLayout = ()->
+  @trigger "before:layout", @
+  @prepareLayout()
+  @trigger "after:layout", @
+
+applyDOMConfig = (panel, panelIndex)->
+  style_declarations = []
+
+  style_declarations.push "height: #{ (if _.isNumber(panel.height) then panel.height + 'px' else panel.height ) }" if panel.height?
+  style_declarations.push "width: #{ (if _.isNumber(panel.width) then panel.width + 'px' else panel.width ) }" if panel.width?
+  style_declarations.push "float: #{ panel.float }" if panel.float
+
+  config =
+    class: panel?.classes || @componentClass
+    id: "#{ @cid }-#{ panelIndex }"
+    style: style_declarations.join(';')
+    "data-luca-parent" : @name || @cid
+
+  if @customizeContainerEl?
+   config = @customizeContainerEl( config, panel, panelIndex )
+
+  config
+
+
+
+createGetterMethods = ()->
+  container = @
+
+  childrenWithGetter = _( @allChildren() ).select (component)->
+    component.getter?
+
+  _( childrenWithGetter ).each (component)->
+    container[ component.getter ] ||= ()->
+      console.log "getter is being deprecated in favor of role" 
+      console.log component.getter, component, container
+      component
+
+createMethodsToGetComponentsByRole = ()->
+  container = @
+
+  childrenWithRole = _( @allChildren() ).select (component)->
+    component.role?
+
+  _( childrenWithRole ).each (component)->
+    getter = _.str.camelize( "get_" + component.role )
+    container[ getter ] ||= ()->
+      component
+
+doComponents = ()->
+  @trigger "before:components", @, @components
+  @prepareComponents()
+  @createComponents()
+  @trigger "before:render:components", @, @components
+  @renderComponents()
+  @trigger "after:components", @, @components
+  createGetterMethods.call(@)
+  createMethodsToGetComponentsByRole.call(@)  
+  @registerComponentEvents()
+
+validateContainerConfiguration = ()->
+  true
+
+
+# Private Helpers
+#
+# indexComponent( component ).at( index ).in( componentsInternalIndexMap )
+indexComponent = (component)->
+  at: (index)->
+    in: (map)->
+      if component.cid?
+        map.cid_index[ component.cid ] = index
+      if component.role?
+        map.role_index[ component.role ] = index
+      if component.name?
+        map.name_index[ component.name ] = index