luca 0.9.1 → 0.9.2

data/site/assets/sandbox.css

@@ -0,0 +1,14 @@
+#viewport {
+  line-height: 1.5;
+  color: #333; }
+  #viewport p {
+    font-size: 14px; }
+  #viewport #information .row.heading {
+    margin-top: 12px;
+    margin-bottom: 12px; }
+  #viewport #information .row h3 {
+    margin-bottom: 4px; }
+/*
+
+ */
+

data/site/assets/sandbox.js

@@ -0,0 +1,131 @@
+(function() {
+
+  window.Sandbox = {
+    views: {},
+    collections: {},
+    models: {}
+  };
+
+  Luca.registry.addNamespace('Sandbox.views');
+
+  Luca.Collection.namespace = Sandbox.collections;
+
+}).call(this);
+(function() {
+  Luca.templates || (Luca.templates = {});
+  Luca.templates["main"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<div class=\'hero-unit\'>\n  <h1>Want to build apps with Backbone?</h1>\n  <p>This is a collection of application design components that you should use to build your next large backbone.js application.</p>\n  <p>It combines the elegance and simplicity of backbone.js and bootstrap.css, with the experience of developers who have been building single page javascript apps since you were a baby.</p>\n  <a class=\'btn btn-large btn-primary\' href=\'#class_browser\'>\n    Download\n  </a>\n  <a class=\'btn btn-success btn-large\' href=\'#component_tester\'>\n    Build a component\n  </a>\n</div>\n<hr />\n<div id=\'information\'>\n  <div class=\'row heading\'>\n    <div class=\'span12\'>\n      <h2>Composite Application Architecture</h2>\n    </div>\n  </div>\n  <div class=\'row\'>\n    <div class=\'span4\'>\n      <h3>Component Driven Design</h3>\n      <p>Luca is a collection of common components needed to build large single page applications. Luca provides base classes for Model, View, and Collection classes which you can choose to extend where needed.  Luca also provides an extensive library of application building components and UI elements which you can piece together in a variety of ways to build responsive, and snappy single page apps.</p>\n    </div>\n    <div class=\'span4\'>\n      <h3>Backbone and Luca work together</h3>\n      <p>Luca is not a replacement for Backbone, it is a smart use of Backbone\'s core classes.  Large apps require layers of abstraction and patterns for communication between various components, Luca provides these for you.</p>\n      <p>Like Backbone, you only have to use what you need.</p>\n    </div>\n    <div class=\'span4\'>\n      <h3>Relies on good patterns</h3>\n      <p>We have extracted all of the common patterns and optimizations we have learned over the course of a year developing several large applications. Using Luca allows you to leverage the power of Backbone.js but only focus on what makes your app unique.</p>\n    </div>\n    <a href=\'https://github.com/datapimp/luca\'>\n      <img alt=\'Fork me on GitHub\' src=\'https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png\' style=\'position: absolute; top: 0; right: 0; border: 0; z-index:9000;\' />\n    </a>\n  </div>\n  <div class=\'row heading\'>\n    <div class=\'span12\'>\n      <h2>Develop Apps Faster</h2>\n    </div>\n  </div>\n  <div class=\'row\'>\n    <div class=\'span4\'>\n      <h3>Development Tools</h3>\n      <p>If you enable the Luca development tools, you have access to things like an in browser Coffeescript console, a CodeMirror based IDE to edit and test your components which live reloads javascript prototype changes and re-renders your components, so that you can experiment directly in the browser.</p>\n      <p>Live reloading of your code changes is also supported if you use the ruby gem and make changes in your favorite editor.</p>\n    </div>\n    <div class=\'span4\'>\n      <h3>Experimentation and Debugging</h3>\n      <p>The way the Luca framework was designed encourages us to define our apps mostly using JSON configuration, which then gets interpreted, and structural components and style rules are generated for us.  Events get binded, and things just work.</p>\n      <p>Because large parts of the application\'s code are just configuration strings, it is very easy to provide you with a suite of development tools that allow you to inspect what is going on behind the scenes and make changes directly in the environment if you want to experiment with some ideas.</p>\n    </div>\n    <div class=\'span4\'>\n      <h3>Not only for Ruby Developers</h3>\n      <p>Luca is just javascript and css, and will work with any server backend.</p>\n      <p>That being said, Luca was developed against Rails and Sinatra apps and comes with many development helpers which work in these environments.  The development environment and sandbox is a Sinatra app, but like everything else in the framework you can only use what you need.</p>\n    </div>\n  </div>\n</div>\n');}return __p.join('');};
+}).call(this);
+(function() {
+  Luca.templates || (Luca.templates = {});
+  Luca.templates["sandbox"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<h1>Hi</h1>\n');}return __p.join('');};
+}).call(this);
+(function() {
+  Luca.templates || (Luca.templates = {});
+  Luca.templates["sandbox/navigation"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<ul class=\'nav\'>\n  <li>\n    <a href=\'#\'>Intro</a>\n  </li>\n</ul>\n');}return __p.join('');};
+}).call(this);
+(function() {
+
+  _.def("Sandbox.views.TopNavigation")["extends"]("Luca.components.NavBar")["with"]({
+    brand: "Luca",
+    name: "top_navigation",
+    template: "sandbox/navigation"
+  });
+
+}).call(this);
+(function() {
+
+  Sandbox.Router = Luca.Router.extend({
+    routes: {
+      "": "default",
+      "class_browser": "class_browser",
+      "component_tester": "component_tester"
+    },
+    "default": function() {
+      return this.app.navigate_to("pages").navigate_to("main");
+    },
+    class_browser: function() {
+      return this.app.navigate_to("pages").navigate_to("class_browser");
+    },
+    component_tester: function() {
+      return this.app.navigate_to("pages").navigate_to("component_tester");
+    }
+  });
+
+}).call(this);
+(function() {
+
+  Sandbox.Application = Luca.Application.extend({
+    name: 'sandbox_application',
+    el: '#viewport',
+    fluid: true,
+    topNav: 'top_navigation',
+    useKeyRouter: true,
+    keyEvents: {
+      meta: {
+        forwardslash: "developmentConsole"
+      }
+    },
+    components: [
+      {
+        ctype: 'controller',
+        name: 'pages',
+        components: [
+          {
+            name: "main",
+            bodyTemplate: 'main'
+          }, {
+            name: "class_browser",
+            ctype: "class_browser"
+          }, {
+            name: "component_tester",
+            ctype: "component_tester"
+          }
+        ]
+      }
+    ],
+    initialize: function(options) {
+      this.options = options != null ? options : {};
+      Luca.Application.prototype.initialize.apply(this, arguments);
+      return this.router = new Sandbox.Router({
+        app: this
+      });
+    },
+    developmentConsole: function() {
+      var container;
+      this.developmentConsole = Luca("coffeescript-console", function() {
+        return new Luca.tools.DevelopmentConsole({
+          name: "coffeescript-console"
+        });
+      });
+      if (!this.consoleContainerAppended) {
+        container = this.make("div", {
+          id: "devtools-console-wrapper",
+          "class": "devtools-console-container modal",
+          style: "width:1000px"
+        }, this.developmentConsole.el);
+        $('body').append(container);
+        this.consoleContainerAppended = true;
+        this.developmentConsole.render();
+      }
+      return $('#devtools-console-wrapper').modal({
+        backdrop: false,
+        show: true
+      });
+    },
+    afterRender: function() {
+      return this._super("afterRender", this, arguments);
+    }
+  });
+
+  $((function() {
+    (window || global).SandboxApp = new Sandbox.Application();
+    SandboxApp.boot();
+    return prettyPrint();
+  })());
+
+}).call(this);
+(function() {
+
+
+
+}).call(this);

data/site/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <title>Luca. Container Framework For Backbone Views</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <link rel="stylesheet" href="assets/luca-ui-bootstrap.css">
+    <link rel="stylesheet" href="assets/luca-ui-development-tools.css">
+    <link rel="stylesheet" href="assets/sandbox.css">
+  </head>
+  <body>
+    <div id="viewport"></div>
+    <script src="assets/dependencies.js"></script>
+    <script src="assets/bootstrap.min.js"></script>
+    <script src="assets/luca-ui.min.js"></script>
+    <script src="assets/luca-ui-development-tools.min.js"></script>
+    <script src="assets/sandbox.js"></script>
+  </body>
+</html>

data/spec/core/collection_spec.coffee

@@ -44,7 +44,7 @@ describe "Method Caching", ->
 
 describe "Luca.Collection", ->
   it "should accept a name and collection manager", ->
-    mgr = new Luca.CollectionManager()
+    mgr = Luca.CollectionManager.get?('collection-spec') || new Luca.CollectionManager(name:"collection-spec")
     collection = new Luca.Collection([], name:"booya",manager:mgr)
     expect( collection.name ).toEqual("booya")
     expect( collection.manager ).toEqual(mgr)
@@ -170,16 +170,16 @@ describe "The onceLoaded helper", ->
 describe "Registering with the collection manager", ->
 
   it "should be able to find a default collection manager", ->
-    mgr = new Luca.CollectionManager()
+    mgr = Luca.CollectionManager.get() || new Luca.CollectionManager()
     expect( Luca.CollectionManager.get() ).toEqual(mgr)
 
   it "should automatically register with the manager if I specify a name", ->
-    mgr = new Luca.CollectionManager()
+    mgr = Luca.CollectionManager.get() || new Luca.CollectionManager()
     collection = new Luca.Collection([],name:"auto_register")
     expect( mgr.get("auto_register") ).toEqual(collection)
 
   it "should register with a specific manager", ->
-    window.other_manager = new Luca.CollectionManager()
+    window.other_manager = new Luca.CollectionManager(name:"other_manager")
 
     collection = new Luca.Collection [],
       name: "other_collection"
@@ -188,7 +188,7 @@ describe "Registering with the collection manager", ->
     expect( window.other_manager.get("other_collection") ).toEqual(collection)
 
   it "should find a collection manager by string", ->
-    window.find_mgr_by_string = new Luca.CollectionManager()
+    window.find_mgr_by_string = new Luca.CollectionManager(name:"find_by_string")
 
     collection = new Luca.Collection [],
       name: "biggie"
@@ -197,7 +197,7 @@ describe "Registering with the collection manager", ->
     expect( collection.manager ).toBeDefined()
 
   it "should not register with a collection manager if it is marked as private", ->
-    manager = new Luca.CollectionManager()
+    manager = new Luca.CollectionManager(name:"private")
 
     registerSpy = sinon.spy()
 

data/spec/core/view_spec.coffee

@@ -148,6 +148,7 @@ describe "The Collection Events API", ->
     name: "collectionEvents"
 
   beforeEach ()->
+    Luca.CollectionManager.destroyAll()
     @manager ||= new SampleManager()
     @collection = @manager.getOrCreate("sample")
 

data/spec/framework_spec.coffee

@@ -68,6 +68,13 @@ describe "The Luca Framework", ->
     expect( Luca.isBackboneModel(obj) ).toEqual true
     expect( Luca.isBackboneModel({}) ).toEqual false
 
+  it "should detect if a prototype is a luca view", ->
+    MyView = Luca.View.extend({})
+    expect( Luca.isViewPrototype(MyView) ).toEqual true
+
+  it "should detect if a prototype is a backbone view", ->
+    MyView = Backbone.View.extend()
+    expect( Luca.isViewPrototype(MyView) ).toEqual true
 
 describe "Luca Component Definition", ->
   beforeEach ->

data/spec/managers/collection_manager_spec.coffee

@@ -5,6 +5,7 @@ describe "The Collection Manager", ->
     url: "/models"
 
   beforeEach ()->
+    Luca.CollectionManager.destroyAll()
     @manager = new Luca.CollectionManager(name:"manager",collectionNamespace: App.collections)
 
   it "should be defined", ->
@@ -22,7 +23,7 @@ describe "The Collection Manager", ->
     expect( collection.url ).toEqual "/models"
 
 describe "Adding Collections", ->
-  manager = new Luca.CollectionManager
+  manager = Luca.CollectionManager.get?() || new Luca.CollectionManager(name:"blahblah") 
   first   = new Luca.Collection([],name:"added",prop:"val2")
   second  = new Luca.Collection([],name:"added",prop:"val1")
 

data/src/components/application.coffee

@@ -9,6 +9,8 @@ _.def('Luca.Application').extends('Luca.containers.Viewport').with
   # by default unless otherwise specified
   useCollectionManager: true
 
+  collectionManagerClass: "Luca.CollectionManager"
+
   # Luca plugin apps are apps which mount onto existing
   # luca apps, and will not have the behavior of a main
   # app which acts as a singleton
@@ -46,16 +48,18 @@ _.def('Luca.Application').extends('Luca.containers.Viewport').with
     ]
 
     if @useCollectionManager is true
+      @collectionManagerClass = Luca.util.resolve( @collectionManagerClass ) if _.isString( @collectionManagerClass )
+
       @collectionManager ||= Luca.CollectionManager.get?()
-      @collectionManager ||= new Luca.CollectionManager( @collectionManagerOptions||={} )
+      @collectionManager ||= new @collectionManagerClass( @collectionManagerOptions||={} )
 
-    @state = new Backbone.Model( @defaultState )
+    @state = new Luca.Model( @defaultState )
 
     # we will render when all of the various components
     # which handle our data dependencies determine that
     # we are ready
-    @bind "ready", ()=>
-      @render()
+    @defer(()=>@render()).until("ready")
+
     # the keyRouter allows us to specify
     # keyEvents on our application with an API very similar
     # to the DOM events API for Backbone.View

data/src/components/collection_view.coffee

@@ -22,7 +22,7 @@ _.def("Luca.components.CollectionView").extends("Luca.components.Panel").with
 
     _.bindAll @, "refresh"
 
-    unless @collection?
+    unless @collection? or @options.collection
       throw "Collection Views must specify a collection"
 
     unless @itemTemplate? || @itemRenderer? || @itemProperty?
@@ -30,6 +30,9 @@ _.def("Luca.components.CollectionView").extends("Luca.components.Panel").with
 
     Luca.components.Panel::initialize.apply(@, arguments)
 
+    if _.isString(@collection) and Luca.CollectionManager.get()
+      @collection = Luca.CollectionManager.get().get(@collection)
+
     if Luca.isBackboneCollection(@collection)
       @collection.bind "reset", @refresh
       @collection.bind "add", @refresh
@@ -46,7 +49,10 @@ _.def("Luca.components.CollectionView").extends("Luca.components.Panel").with
       content = @itemRenderer.call(@, item)
 
     if @itemProperty
-      content = if _.isFunction(@itemProperty) then @itemProperty() else (item.model.get(@itemProperty) || item.model[ @itemProperty ])
+      content = item.model.get(@itemProperty) || item.model[ @itemProperty ]
+      content = content() if _.isFunction(content)
+
+    content
 
   makeItem: (model, index)->
     item = if @prepareItem? then @prepareItem.call(@, model, index) else (model:model, index: index)

data/src/components/fields/checkbox_array.coffee

@@ -5,6 +5,8 @@ _.def('Luca.fields.CheckboxArray').extends('Luca.core.Field').with
 
   template: "fields/checkbox_array"
 
+  className: "luca-ui-checkbox-array"
+
   events:
     "click input" : "clickHandler"
 
@@ -57,7 +59,7 @@ _.def('Luca.fields.CheckboxArray').extends('Luca.core.Field').with
       label = model.get(@displayField)
       input_id = _.uniqueId("#{ @cid }_checkbox")
 
-      inputElement = make("input",type:"checkbox",name:@input_name,value:value,id: input_id)
+      inputElement = make("input",type:"checkbox",class:"array-checkbox",name:@input_name,value:value,id: input_id)
       element = make("label", {for:input_id}, inputElement)
 
       $( element ).append(" #{ label }")

data/src/components/form_view.coffee

@@ -1,3 +1,20 @@
+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'
+  ]
+
 _.def("Luca.components.FormView").extends('Luca.core.Container').with
 
   tagName: 'form'
@@ -29,7 +46,6 @@ _.def("Luca.components.FormView").extends('Luca.core.Container').with
   legend: ""
 
   bodyClassName: "form-view-body"
-  bodyTemplate: ["components/form_view"]
 
   initialize: (@options={})->
     @loadMask = Luca.enableBootstrap unless @loadMask?
@@ -44,23 +60,12 @@ _.def("Luca.components.FormView").extends('Luca.core.Container').with
 
     @applyStyleClasses()
 
-    if @toolbar is true and not (@bottomToolbar? or @topToolbar?)
-      @bottomToolbar =
-        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'
-        ]
+    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"
+
+  getDefaultToolbar: ()->
+    defaultToolbar
 
   applyStyleClasses: ()->
     if Luca.enableBootstrap
@@ -78,13 +83,13 @@ _.def("Luca.components.FormView").extends('Luca.core.Container').with
     @$el.addClass('form-inline') if @inlineForm
 
   resetHandler: (e)->
-    me = my = $( e.currentTarget )
+    me = my = $( e?.target )
     @trigger "before:reset", @
     @reset()
     @trigger "after:reset", @
 
   submitHandler: (e)->
-    me = my = $( e.currentTarget )
+    me = my = $( e?.target )
     @trigger "before:submit", @
     @trigger "enable:loadmask", @ if @loadMask is true
     @submit() if @hasModel()
@@ -228,4 +233,24 @@ _.def("Luca.components.FormView").extends('Luca.core.Container').with
     @current_model?.set( @getValues() )
 
   setLegend: (@legend)->
-    $('fieldset legend', @el).first().html(@legend)
+    $('fieldset legend', @el).first().html(@legend)
+
+  flash: (message)->
+    if @$('.toolbar-container.top').length > 0
+      @$('.toolbar-container.top').after(message)
+    else
+      @$bodyEl().prepend(message)
+
+  successFlashDelay: 1500
+
+  successMessage: (message)->
+    @$('.alert.alert-success').remove()
+    @flash Luca.template("components/form_alert", className:"alert alert-success", message: message)
+    _.delay ()=>
+      @$('.alert.alert-success').fadeOut()
+    , @successFlashDelay || 0
+
+  errorMessage: (message)->
+    @$('.alert.alert-error').remove()
+    @flash Luca.template("components/form_alert", className:"alert alert-error", message: message)
+

data/src/components/grid_view.coffee

@@ -67,12 +67,10 @@ _.def('Luca.components.GridView').extend('Luca.components.Panel').with
     @configure_collection(true)
 
     @collection.bind "before:fetch", ()=>
-      console.log "Triggering Enable Load Mask"
       @trigger "enable:loadmask" if @loadMask is true
 
     @collection.bind "reset", (collection) =>
       @refresh()
-      console.log "Triggering Disable LoadMask"
       @trigger "disable:loadmask" if @loadMask is true
       @trigger "after:collection:load", collection
 
@@ -84,9 +82,9 @@ _.def('Luca.components.GridView').extend('Luca.components.Panel').with
       try
         rowEl = @getRowEl( model.id || model.get('id') || model.cid )
         cells = @render_row(model, @collection.indexOf(model), cellsOnly: true )
-        $( rowEl ).html( cells )
+        $( rowEl ).html( cells.join(" ") )
       catch error
-        console.log "Error in change handler for GridView.collection", error, @, model, rowEl, cells
+        console.log "Error in change handler for GridView.collection", error, @, model
 
   beforeRender: ()->
     Luca.components.Panel::beforeRender?.apply(@, arguments)

data/src/components/nav_bar.coffee

@@ -1,15 +1,8 @@
 _.def("Luca.components.NavBar").extends("Luca.View").with
   fixed: true
-
   position: 'top'
-
   className: 'navbar'
-
-  initialize: (@options={})->
-    Luca.View::initialize.apply(@, arguments)
-
   brand: "Luca.js"
-
   bodyTemplate: 'nav_bar'
   bodyClassName: 'luca-ui-navbar-body'
 
@@ -19,6 +12,9 @@ _.def("Luca.components.NavBar").extends("Luca.View").with
     if @brand?
       @content().append("<a class='brand' href='#'>#{ @brand }</a>")
 
+    if @template
+      @content().append Luca.template(@template, @)
+
   render: ()->
     @
 

data/src/containers/tab_view.coffee

@@ -13,10 +13,14 @@ _.def('Luca.containers.TabView').extends('Luca.containers.CardView').with
 
   tabVerticalOffset: '50px'
 
+  navClass: "nav-tabs"
+
   bodyTemplate: "containers/tab_view"
   bodyEl: "div.tab-content"
 
   initialize: (@options={})->
+    @navClass = "nav-list"if @navStyle is "list"
+
     Luca.containers.CardView::initialize.apply @, arguments
 
     _.bindAll @, "select", "highlightSelectedTab"
@@ -48,14 +52,23 @@ _.def('Luca.containers.TabView').extends('Luca.containers.CardView').with
   createTabSelectors: ()->
     tabView = @
     @each (component,index)->
-      selector = tabView.make("li",{class:"tab-selector","data-target":index}, "<a>#{ component.title }</a>")
+      icon = "<i class='icon-#{ component.tabIcon }" 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)
 
+      if component.navHeading? and not tabView.navHeadings?[ component.navHeading ]
+        $( selector ).before( tabView.make('li',{class:"nav-header"}, component.navHeading))
+        tabView.navHeadings ||= {}
+        tabView.navHeadings[ component.navHeading ] = true
+
   highlightSelectedTab: ()->
     @tabSelectors().removeClass('active')
     @activeTabSelector().addClass('active')
 
   select: (e)->
+    e.preventDefault()
+
     me = my = $( e.target )
 
     @trigger "before:select", @
@@ -72,7 +85,7 @@ _.def('Luca.containers.TabView').extends('Luca.containers.CardView').with
     $("##{ @cid }-tabs-selector")
 
   tabContainer: ()->
-    @$('ul.nav-tabs', @tabContainerWrapper() )
+    @$("ul.#{ @navClass }", @tabContainerWrapper() )
 
   tabSelectors: ()->
     @$( 'li.tab-selector', @tabContainer() )

data/src/containers/viewport.coffee

@@ -11,23 +11,31 @@ _.def('Luca.containers.Viewport').extend('Luca.containers.CardView').with
   wrapperClass: 'row'
 
   initialize: (@options={})->
-    Luca.core.Container::initialize.apply(@, arguments)
+    _.extend @, @options
 
     if Luca.enableBootstrap is true
       @wrapperClass = "row-fluid" if @fluid is true
-      @$el.wrap("<div class='#{ @wrapperClass }' />").addClass('span12')
+      @$wrap( @wrapperClass )
+
+    Luca.core.Container::initialize.apply(@, arguments)
 
     $('html,body').addClass('luca-ui-fullscreen') if @fullscreen
 
   beforeRender: ()->
     Luca.containers.CardView::beforeRender?.apply(@, arguments)
 
-    if Luca.enableBootstrap and @topNav and @fullscreen
-      $('body').css('padding','40px')
+    #if Luca.enableBootstrap and @topNav and @fullscreen
+    #  $('body').css('padding','40px')
 
     @renderTopNavigation() if @topNav?
     @renderBottomNavigation() if @bottomNav?
 
+  afterRender: ()->
+    Luca.containers.CardView::after?.apply(@, arguments)
+
+    if Luca.enableBootstrap is true
+      @$el.children().wrap('<div class="container" />')
+        
   renderTopNavigation: ()->
     return unless @topNav?
 
@@ -45,6 +53,7 @@ _.def('Luca.containers.Viewport').extend('Luca.containers.CardView').with
 
 
   renderBottomNavigation: ()->
+    # IMPLEMENT