luca 0.8.599 → 0.9.0

data/src/containers/card_view.coffee

@@ -1,4 +1,4 @@
-_.component("Luca.containers.CardView").extends("Luca.core.Container").with
+_.def("Luca.containers.CardView").extends("Luca.core.Container").with
   componentType: 'card_view'
 
   className: 'luca-ui-card-view-wrapper'
@@ -12,32 +12,33 @@ _.component("Luca.containers.CardView").extends("Luca.core.Container").with
     'after:card:switch'
   ]
 
+  componentClass: 'luca-ui-card'
+  appendContainers: true
+
   initialize: (@options)->
     Luca.core.Container::initialize.apply @,arguments
     @setupHooks(@hooks)
 
-  componentClass: 'luca-ui-card'
-
-  beforeLayout: ()->
-    @cards = _(@components).map (card,cardIndex) =>
-      classes: @componentClass
-      style: "display:#{ (if cardIndex is @activeCard then 'block' else 'none' )}"
-      id: "#{ @cid }-#{ cardIndex }"
+  prepareComponents: ()->
+    Luca.core.Container::prepareComponents?.apply(@, arguments)
 
-  prepareLayout: ()->
-    @card_containers = _( @cards ).map (card, index)=>
-      @$el.append Luca.templates["containers/basic"](card)
-      $("##{ card.id }")
+    _( @components ).each (component,index)=>
+      if index is @activeCard
+        $( component.container ).show()
+      else
+        $( component.container ).hide()
 
-  prepareComponents: ()->
-    @components = _( @components ).map (object,index)=>
-      card = @cards[index]
-      object.container = "##{ card.id }"
-      object
+  activeComponentElement: ()->
+    @componentElements().eq( @activeCard )
 
   activeComponent: ()->
     @getComponent( @activeCard )
 
+  customizeContainerEl: (containerEl, panel, panelIndex)->
+    containerEl.style += if panelIndex is @activeCard then "display:block;" else "display:none;"
+
+    containerEl
+
   cycle: ()->
     nextIndex = if @activeCard < @components.length - 1 then @activeCard + 1 else 0
     @activate( nextIndex )
@@ -62,24 +63,22 @@ _.component("Luca.containers.CardView").extends("Luca.core.Container").with
       index = @indexOf(index)
       current = @getComponent( index )
 
-    return unless current
-
+    unless current
+      return
 
     unless silent
       @trigger "before:card:switch", previous, current
       previous?.trigger?.apply(previous,["before:deactivation", @, previous, current])
       current?.trigger?.apply(previous,["before:activation", @, previous, current])
 
-    _( @card_containers ).each (container)->
-      container.hide()
+    @componentElements().hide()
 
     unless current.previously_activated
       current.trigger "first:activation"
       current.previously_activated = true
 
-    $( current.container ).show()
-
     @activeCard = index
+    @activeComponentElement().show()
 
     unless silent
       @trigger "after:card:switch", previous, current

data/src/containers/column_view.coffee

@@ -1,4 +1,4 @@
-_.component('Luca.containers.ColumnView').extends('Luca.core.Container').with
+_.def('Luca.containers.ColumnView').extends('Luca.core.Container').with
   componentType: 'column_view'
 
   className: 'luca-ui-column-view'
@@ -31,11 +31,6 @@ _.component('Luca.containers.ColumnView').extends('Luca.core.Container').with
 
     @columnWidths = _( @columnWidths ).map (val)-> "#{ val }%"
 
-  beforeComponents: ()->
-    @debug "column_view before components"
-    _( @components ).each (component)->
-      component.ctype ||= "panel_view"
-
   beforeLayout: ()->
     @debug "column_view before layout"
 

data/src/containers/modal_view.coffee

@@ -1,83 +1,32 @@
-_.component('Luca.containers.ModalView').extends('Luca.core.Container').with
-  componentType: 'modal_view'
+_.def("Luca.ModalView").extends("Luca.View").with
 
-  className: 'luca-ui-modal-view'
+  closeOnEscape: true
 
-  components:[]
+  showOnInitialize: false
 
-  renderOnInitialize: true
+  backdrop: false
 
-  showOnRender: false
+  container: ()->
+    $('body')
 
-  hooks:[
-    'before:show',
-    'before:hide'
-  ]
+  toggle: ()->
+    @$el.modal('toggle')
 
-  defaultModalOptions:
-    minWidth: 375
-    maxWidth: 375
-    minHeight: 550
-    maxHeight: 550
-    opacity: 80
-    onOpen: (modal)->
-      @onOpen.apply @
-      @onModalOpen.apply modal, [modal, @]
-    onClose: (modal)->
-      @onClose.apply @
-      @onModalClose.apply modal, [modal, @]
-
-  modalOptions: {}
-
-  initialize: (@options={})->
-    Luca.core.Container::initialize.apply @,arguments
-    @setupHooks(@hooks)
-
-    _( @defaultModalOptions ).each (value,setting) => @modalOptions[ setting ] ||= value
-
-    @modalOptions.onOpen = _.bind( @modalOptions.onOpen, @)
-    @modalOptions.onClose = _.bind( @modalOptions.onClose, @)
-
-  # this will get called within the context of the modal view
-  onOpen: ()-> true
-
-  # this will get called within the context of the modal view
-  onClose: ()-> true
-
-  getModal: ()-> @modal
-
-  # this will be called within the context of the simple modal object
-  onModalOpen: (modal, view)->
-    view.modal = modal
+  show: ()->
+    @$el.modal('show')
 
-    modal.overlay.show()
-    modal.container.show()
-    modal.data.show()
+  hide: ()->
+    @$el.modal('hide')
 
-  # this will be called within the context of the simple modal object
-  onModalClose: (modal, view)->
-    $.modal.close()
+  render: ()->
+    @$el.addClass 'modal'
+    @$el.addClass 'fade' if @fade is true
 
-  prepareLayout: ()->
     $('body').append( @$el )
 
-  prepareComponents: ()->
-    @components = _(@components).map (object,index) =>
-      object.container =  @el
-      object
-
-  afterInitialize: ()->
-    @$el.hide()
-    @render() if @renderOnInitialize
-
-  afterRender: ()->
-    @show() if @showOnRender
+    @$el.modal
+      backdrop: @backdrop is true
+      keyboard: @closeOnEscape is true
+      show: @showOnInitialize is true
 
-  wrapper: ()-> $( @$el.parent() )
-
-  show: ()->
-    @trigger "before:show", @
-    @$el.modal( @modalOptions )
-
-  hide: ()->
-    @trigger "before:hide", @
+_.def("Luca.containers.ModalView").extends("Luca.ModalView").with()

data/src/containers/panel_toolbar.coffee

@@ -0,0 +1,156 @@
+
+# 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?
+    config.className ||= ""
+    config.className += 'toolbar-component'
+
+    object = Luca(config).render()
+    if Luca.isBackboneView(object)
+      console.log "Adding toolbar component", object
+      return object.el
+
+  if config.spacer
+    return make "div", class: "spacer #{ config.spacer }"
+
+  if config.text
+    return make "div", {class: "toolbar-text"}, config.text
+
+  wrapper = 'btn-group'
+  wrapper += " #{ config.wrapper }" if config.wrapper?
+  wrapper += " align-#{ config.align }" if config.align?
+
+  # if we're passed a group, then we need to just
+  # wrap the contents of the buttons property in that group
+  # skipping the btn-group wrapping that takes place for
+  # individual buttons
+  if config.group? and config.buttons?
+    buttons = prepareButtons( config.buttons, false )
+    return make "div", class: wrapper, buttons
+
+  # if it is a normal button, and not a button group
+  else
+    label = config.label ||= ""
+
+    config.eventId ||= _.string.dasherize( config.label.toLowerCase() )
+
+    if config.icon
+      label = " " if _.string.isBlank( label )
+      white = "icon-white" if config.white
+      label = "<i class='#{ white || "" } icon-#{ config.icon }' /> #{ label }"
+
+    buttonAttributes =
+      class: _.compact(["btn",config.classes,config.className]).join(" ")
+      "data-eventId" : config.eventId
+      title: config.title || config.description
+
+    buttonAttributes["class"] += " btn-#{ config.color }" if config.color?
+
+    if config.dropdown
+      label = "#{ label } <span class='caret'></span>"
+      buttonAttributes["class"] += " dropdown-toggle"
+      buttonAttributes["data-toggle"] = "dropdown"
+
+      dropdownItems = _(config.dropdown).map (dropdownItem)=>
+        link = make "a", {}, dropdownItem[1]
+        make "li", {"data-eventId": dropdownItem[0]}, link
+
+      dropdownEl = make "ul", {class:"dropdown-menu"}, dropdownItems
+
+    buttonEl = make "a", buttonAttributes, label
+
+    # needs to be wrapped for proper rendering, but not
+    # if it already is part of a group
+    autoWrapClass = "btn-group"
+    autoWrapClass += " align-#{ config.align }" if config.align?
+
+    if wrap is true
+      return make "div", {class: autoWrapClass}, [buttonEl,dropdownEl]
+    else
+      # 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 )
+
+  afterRender: ()->
+    @_super("afterRender", @, arguments)
+    #  @$('.toolbar-component label').remove()
+    #  @$('.toolbar-component').addClass('btn-group')

data/src/containers/panel_view.coffee

@@ -1,4 +1,4 @@
-_.component('Luca.containers.PanelView').extends('Luca.core.Container').with
+_.def('Luca.containers.PanelView').extends('Luca.core.Container').with
   className: 'luca-ui-panel'
 
   initialize: (@options={})->

data/src/containers/split_view.coffee

@@ -1,6 +1,4 @@
-_.component('Luca.containers.SplitView').extends('Luca.core.Container').with
-  layout: '100'
-
+_.def('Luca.containers.SplitView').extends('Luca.core.Container').with
   componentType: 'split_view'
 
   containerTemplate: 'containers/basic'

data/src/containers/tab_view.coffee

@@ -1,7 +1,4 @@
-_.component('Luca.containers.TabView').extends('Luca.containers.CardView').with
-
-  events:
-    "click ul.nav-tabs li" : "select"
+_.def('Luca.containers.TabView').extends('Luca.containers.CardView').with
 
   hooks:[
     "before:select"
@@ -16,9 +13,14 @@ _.component('Luca.containers.TabView').extends('Luca.containers.CardView').with
 
   tabVerticalOffset: '50px'
 
+  bodyTemplate: "containers/tab_view"
+  bodyEl: "div.tab-content"
+
   initialize: (@options={})->
     Luca.containers.CardView::initialize.apply @, arguments
+
     _.bindAll @, "select", "highlightSelectedTab"
+
     @setupHooks( @hooks )
 
     @bind "after:card:switch", @highlightSelectedTab
@@ -26,45 +28,43 @@ _.component('Luca.containers.TabView').extends('Luca.containers.CardView').with
   activeTabSelector: ()->
     @tabSelectors().eq( @activeCard || @activeTab || @activeItem )
 
-  prepareLayout: ()->
-    @card_containers = _( @cards ).map (card, index)=>
-      @$('.tab-content').append Luca.templates["containers/basic"](card)
-      $("##{ card.id }")
-
   beforeLayout: ()->
     @$el.addClass("tabs-#{ @tab_position }")
+    @activeTabSelector().addClass 'active'
 
-    if @tab_position is "below"
-      @$el.append Luca.templates["containers/tab_view"](@)
-      @$el.append Luca.templates["containers/tab_selector_container"](@)
-    else
-      @$el.append Luca.templates["containers/tab_selector_container"](@)
-      @$el.append Luca.templates["containers/tab_view"](@)
+    @createTabSelectors()
 
-    Luca.containers.CardView::beforeLayout.apply @, arguments
+    Luca.containers.CardView::beforeLayout?.apply @, arguments
 
-  beforeRender: ()->
-    Luca.containers.CardView::beforeRender?.apply @, arguments
-    @activeTabSelector().addClass('active')
+  afterRender: ()->
+    Luca.containers.CardView::afterRender?.apply @, arguments
+    @registerEvent("click ##{ @cid }-tabs-selector li a", "select")
+
+    if Luca.enableBootstrap and (@tab_position is "left" or @tab_position is "right")
+      @tabContainerWrapper().addClass("span2")
+      @tabContentWrapper().addClass("span9")
 
-    if Luca.enableBootstrap and @tab_position is "left" or @tab_position is "right"
-      @$el.addClass('grid-12')
-      @tabContainerWrapper().addClass('grid-3')
-      @tabContentWrapper().addClass('grid-9')
 
-      if @tabVerticalOffset
-        @tabContainerWrapper().css('padding-top', @tabVerticalOffset )
+  createTabSelectors: ()->
+    tabView = @
+    @each (component,index)->
+      selector = tabView.make("li",{class:"tab-selector","data-target":index}, "<a>#{ component.title }</a>")
+      tabView.tabContainer().append(selector)
 
   highlightSelectedTab: ()->
     @tabSelectors().removeClass('active')
     @activeTabSelector().addClass('active')
 
   select: (e)->
-    me = my = $( e.currentTarget )
+    me = my = $( e.target )
+
     @trigger "before:select", @
-    @activate my.data('target')
+    @activate my.parent().data('target')
     @trigger "after:select", @
 
+  componentElements: ()->
+    @$(">.tab-content >.#{ @componentClass }")
+
   tabContentWrapper: ()->
     $("##{ @cid }-tab-view-content")
 
@@ -72,7 +72,7 @@ _.component('Luca.containers.TabView').extends('Luca.containers.CardView').with
     $("##{ @cid }-tabs-selector")
 
   tabContainer: ()->
-    $("ul##{ @cid }-tabs-nav")
+    @$('ul.nav-tabs', @tabContainerWrapper() )
 
   tabSelectors: ()->
-    $( 'li.tab-selector', @tabContainer() )
+    @$( 'li.tab-selector', @tabContainer() )

data/src/containers/viewport.coffee

@@ -1,4 +1,4 @@
-_.component('Luca.containers.Viewport').extend('Luca.containers.CardView').with
+_.def('Luca.containers.Viewport').extend('Luca.containers.CardView').with
 
   activeItem: 0
 
@@ -6,10 +6,45 @@ _.component('Luca.containers.Viewport').extend('Luca.containers.CardView').with
 
   fullscreen: true
 
+  fluid: false
+
+  wrapperClass: 'row'
+
   initialize: (@options={})->
     Luca.core.Container::initialize.apply(@, arguments)
+
+    if Luca.enableBootstrap is true
+      @wrapperClass = "row-fluid" if @fluid is true
+      @$el.wrap("<div class='#{ @wrapperClass }' />").addClass('span12')
+
     $('html,body').addClass('luca-ui-fullscreen') if @fullscreen
 
-  render: ()->
-    @$el.addClass('luca-ui-viewport')
+  beforeRender: ()->
+    Luca.containers.CardView::beforeRender?.apply(@, arguments)
+
+    if Luca.enableBootstrap and @topNav and @fullscreen
+      $('body').css('padding','40px')
+
+    @renderTopNavigation() if @topNav?
+    @renderBottomNavigation() if @bottomNav?
+
+  renderTopNavigation: ()->
+    return unless @topNav?
+
+    if _.isString( @topNav )
+      @topNav = Luca.util.lazyComponent(@topNav)
+
+    if _.isObject( @topNav )
+      @topNav.ctype ||= @topNav.type || "nav_bar"
+      unless Luca.isBackboneView(@topNav)
+        @topNav = Luca.util.lazyComponent( @topNav )
+
+    @topNav.app = @
+
+    $('body').prepend( @topNav.render().el )
+
+
+  renderBottomNavigation: ()->
+
+