lanes 0.0.3 → 0.0.5

data/client/{javascripts → lanes}/workspace/ActiveScreensSwitcher.coffee

@@ -1,4 +1,4 @@
-class TabView extends Lanes.View.Base
+class TabView extends Lanes.Views.Base
 
     template: "<li><a data-toggle='tab'></a><span class='close'>×</span></li>"
 
@@ -20,9 +20,9 @@ class TabView extends Lanes.View.Base
 TAB_PADDING = 0
 
 
-class Lanes.Workspace.ActiveScreenSwitcher extends Lanes.View.Base
+class Lanes.Workspace.ActiveScreenSwitcher extends Lanes.Views.Base
 
-    templateName: 'workspace/screens-switcher'
+    template: 'workspace/screens-switcher'
 
     key_scope: { name: 'nav', shortcut: '⌘+shift+t,ctrl+shift+t' }
     key_bindings:
@@ -35,6 +35,12 @@ class Lanes.Workspace.ActiveScreenSwitcher extends Lanes.View.Base
             collection: 'collection'
             view: TabView
 
+    ui:
+        lScroll: '.scroller-left'
+        rScroll: '.scroller-right'
+        wrapper: '.wrapper'
+        tabs:    '.nav-tabs'
+
     events:
         'click .scroller-right': 'scrollRight'
         'click .scroller-left' : 'scrollLeft'
@@ -47,7 +53,7 @@ class Lanes.Workspace.ActiveScreenSwitcher extends Lanes.View.Base
         _.bindAll(this, 'resetShownControls')
         @collection = Lanes.Data.Screens.displaying
         this.listenTo( @collection, "change:active", this.onActiveChange )
-        this.listenTo( this.ui,  "change:viewport_width", this.resetShownControls )
+        this.listenTo( this.viewport,  "change:width", this.resetShownControls )
         this.listenTo( Lanes.current_user, "change:isLoggedIn", this.closeScreens)
 
 
@@ -65,8 +71,8 @@ class Lanes.Workspace.ActiveScreenSwitcher extends Lanes.View.Base
             this.scrollToTab( view.el )
 
     tabDisplayRange: ->
-        start = this.tabs.position().left
-        width = this.wrapper.width()
+        start = this.ui.tabs.position().left
+        width = this.ui.wrapper.width()
         end   = width + start
         { start: start, end: end, width: width, used: this.widthOfList() }
 
@@ -77,41 +83,31 @@ class Lanes.Workspace.ActiveScreenSwitcher extends Lanes.View.Base
         diff = ( offset + td.start + width ) - td.width
         if diff > 0
             needs = if li.parentNode.lastElementChild == li then diff else width
-            @tabs.animate( left: "-=" + needs + "px", @resetShownControls)
+            this.ui.tabs.animate( left: "-=" + needs + "px", @resetShownControls)
         else if offset + td.start < 0
             needs = if li.parentNode.firstElementChild == li then Math.abs(td.start) else width
-            @tabs.animate( left: "+=" + needs + "px", @resetShownControls)
+            this.ui.tabs.animate( left: "+=" + needs + "px", @resetShownControls)
 
     resetShownControls: ->
         td = this.tabDisplayRange()
         if td.used < td.width
-            this.lScroll.removeClass('enabled') ; this.rScroll.removeClass('enabled')
+            this.ui.lScroll.removeClass('enabled') ; this.ui.rScroll.removeClass('enabled')
         else
-            this.lScroll.toggleClass( 'enabled', td.start < 0)
-            this.rScroll.toggleClass( 'enabled', !(td.used <= td.width-td.start) )
+            this.ui.lScroll.toggleClass( 'enabled', td.start < 0)
+            this.ui.rScroll.toggleClass( 'enabled', !(td.used <= td.width-td.start) )
 
     scrollLeft: ->
-        @rScroll.addClass('enabled')
+        this.ui.rScroll.addClass('enabled')
         td = this.tabDisplayRange()
         scroll = _.min([Math.abs(td.start),td.width])
-        @tabs.animate( left: "+=" + scroll + "px" )
+        this.ui.tabs.animate( left: "+=" + scroll + "px" )
         if td.start + scroll >= 0
-            @lScroll.removeClass('enabled')
+            this.ui.lScroll.removeClass('enabled')
 
     scrollRight: ->
-        @lScroll.addClass('enabled')
+        this.ui.lScroll.addClass('enabled')
         td = this.tabDisplayRange()
         scroll = _.min([td.used - (td.width-td.start), td.width])
-        @tabs.animate( left: "-=" + scroll + "px" )
+        this.ui.tabs.animate( left: "-=" + scroll + "px" )
         if Math.abs(td.start-scroll-td.width) >= td.used
-            @rScroll.removeClass('enabled')
-
-    render: ->
-        super
-        this.cacheJqElements({
-            lScroll: '.scroller-left'
-            rScroll: '.scroller-right'
-            wrapper: '.wrapper'
-            tabs:    '.nav-tabs'
-        })
-        this
+            this.ui.rScroll.removeClass('enabled')

data/client/{javascripts → lanes}/workspace/Instance.es6

@@ -7,29 +7,24 @@ Lanes.Workspace.Instance = class Instance {
     constructor(selector, options, extension_data){
         _.extend(this,options);
 
-        this.ui = new Lanes.View.InterfaceState({ selector: selector, instance: this });
+        this.viewport = new Lanes.Views.Viewport({ selector: selector, instance: this });
         Lanes.Data.Bootstrap.initialize({
             csrf: options.csrf_token,
             root: options.root_path,
             data: extension_data
         });
-        options.user_data = ( options.user_data || {} );
-        Lanes.current_user.setLoginData( options.user_data.user, options.user_data.access );
-
         Lanes.$(document).ready( ()=> {
             this.boot();
         });
     }
 
-
-
     boot(){
-        this.root = Lanes.$( this.ui.selector );
+        this.root = Lanes.$( this.viewport.selector );
         this.root.data().workspace = this;
-        this.ui.root = this.root;
+        this.viewport.root = this.root;
 
-        Lanes.lib.ResizeSensor(this.root[0],  _.bind( _.debounce( function(a,b,c){
-            this.ui.set({ viewport_width: this.root.width(), viewport_height: this.root.height() });
+        Lanes.lib.ResizeSensor(this.root[0],  _.bind( _.debounce( function(){
+            this.viewport.set({ width: this.root.width(), height: this.root.height() });
         }, 250 ), this) );
 
         this.root.addClass('lanes root');
@@ -38,23 +33,32 @@ Lanes.Workspace.Instance = class Instance {
             selector: '[data-tooltip-message]',
             title: function(){ return this.getAttribute('data-tooltip-message'); }
         });
-
         var view = Lanes.getPath(this.view);
-        if (!view){
-            Lanes.fatal(this.view + " doesn't exist!");
+        if (view){
+            this.displayInitialView(view);
+        } else {
+            var definition=Lanes.Data.Screens.all.findWhere({view: this.view});
+            if (definition){
+                definition.getScreen().then( (screen)=>{
+                    // break out of the promise so an errors during render get thrown properly
+                    _.defer( ()=>{ this.displayInitialView(screen); } );
+                }, (msg)=>{
+                    Lanes.fatal("Unable to load initial screen ${this.view}", msg);
+                });
+            } else {
+                Lanes.fatal(this.view + " doesn't exist!");
+            }
         }
-        this.view = new view({parent: this, model: this.ui}).render();
-        this.ui.viewport = this.view.$el;
+    }
+
+    displayInitialView(view){
+        this.view = new view({parent: this, model: this.viewport}).render();
+        this.viewport.el = this.view.$el;
 
         this.root.append( this.view.el );
 
-        Lanes.View.Keys.initialize();
+        Lanes.Views.Keys.initialize();
         Lanes.Data.PubSub.initialize();
         Lanes.Extensions.fireOnAvailable(this);
-
-        this.login_dialog = new Lanes.View.LoginDialog({ parent: this });
-
-        // var screen = Lanes.Data.Screens.all.findWhere({ id: 'user-maintenance' });
-        // screen.display();
     }
 };

data/client/{javascripts → lanes}/workspace/Layout.coffee

@@ -1,18 +1,19 @@
 
-class Lanes.Workspace.Layout extends Lanes.View.Base
+class Lanes.Workspace.Layout extends Lanes.Views.Base
 
-    templateName: 'workspace/layout'
+    template: 'workspace/layout'
 
     subviews:
         navbar:
             hook: 'navbar-container'
             view: 'Lanes.Workspace.Navbar'
-            model: 'model'
+
         pages:
             hook: 'page-container'
             view: 'Lanes.Workspace.Pages'
-            model: 'model'
+
+    subviewOptions: -> { model: this.model }
 
     onRender: ->
         @screens = new Lanes.Workspace.ScreensMenu({ parent: this, model: @model })
-        this.ui.menu_view = @screens.render()
+        this.viewport.menu_view = @screens.render()

data/client/{javascripts → lanes}/workspace/Navbar.coffee

@@ -1,6 +1,6 @@
-class Lanes.Workspace.Navbar extends Lanes.View.Base
+class Lanes.Workspace.Navbar extends Lanes.Views.Base
 
-    templateName: 'workspace/navbar'
+    template: 'workspace/navbar'
 
     events:
         'click .screens-menu-toggle': 'switchMenu'

data/client/{javascripts → lanes}/workspace/Pages.coffee

@@ -1,6 +1,6 @@
-class Lanes.Workspace.Pages extends Lanes.View.Base
+class Lanes.Workspace.Pages extends Lanes.Views.Base
 
-    templateName: 'workspace/pages'
+    template: 'workspace/pages'
 
     bindings:
         'model.screen_menu_size': { type: 'class' }
@@ -12,6 +12,9 @@ class Lanes.Workspace.Pages extends Lanes.View.Base
             deps: ['model.screen_menu_position']
             fn: -> if @model.screen_menu_position == 'side' then 'with-screen-menu' else 'no-screen-menu'
 
+    ui:
+        screen: '.screen'
+        screens_menu_container: '.screens-menu-container'
 
     initialize: (options)->
         this.listenTo( Lanes.Data.Screens.displaying, "change:active", this.onActiveChange )
@@ -19,17 +22,10 @@ class Lanes.Workspace.Pages extends Lanes.View.Base
         this.listenTo( @model,'change:screen_menu_position', this.moveScreensMenu )
         super
 
-    render: ->
-        super
-        this.cacheElements({
-            screen: '.screen'
-            screens_menu_container: '.screens-menu-container'
-        })
-        this
 
     moveScreensMenu: ->
-        return unless 'side' == @ui.screen_menu_position
-        this.screens_menu_container.appendChild( @ui.menu_view.el )
+        return unless 'side' == this.viewport.screen_menu_position
+        this.ui.screens_menu_container.append( this.viewport.menu_view.el )
 
     onRemove: (sv)->
         sv.view.remove()
@@ -41,6 +37,6 @@ class Lanes.Workspace.Pages extends Lanes.View.Base
             view.render()
 
         if active
-            @screen.appendChild( view.el )
+            this.ui.screen.append( view.el )
         else
-            @screen.removeChild( view.el )
+            view.$el.detach()

data/client/{javascripts → lanes}/workspace/ScreensMenu.coffee

@@ -1,4 +1,4 @@
-class ScreenList extends Lanes.View.Base
+class ScreenList extends Lanes.Views.Base
 
     template: "<li><a href='#'><span></span><i></i></a></li>"
 
@@ -6,14 +6,14 @@ class ScreenList extends Lanes.View.Base
         click: 'displayScreen'
 
     displayScreen: ->
-        this.model.display(this.ui)
+        this.model.display(this.viewport)
 
     bindings:
         'model.title':{ selector: 'span', type: 'text' }
         'model.icon': { selector: 'i', type: 'class' }
 
 
-class ScreenGroup extends Lanes.View.Base
+class ScreenGroup extends Lanes.Views.Base
 
     template: -> '<li class="group"><a href="#"><span></span><i></i></a><ul></ul></li>'
     events:
@@ -40,10 +40,10 @@ class ScreenGroup extends Lanes.View.Base
 
 
 
-class Lanes.Workspace.ScreensMenu extends Lanes.View.Base
+class Lanes.Workspace.ScreensMenu extends Lanes.Views.Base
 
     constructor: -> super
-    templateName: 'workspace/screens-menu'
+    template: 'workspace/screens-menu'
 
     subviews:
         navigation:
@@ -87,7 +87,7 @@ class Lanes.Workspace.ScreensMenu extends Lanes.View.Base
         focus = this.getKeyboardFocus()
         focus.trigger('click')
         if focus.hasClass("group")
-            Lanes.View.TimedHighlight.move( focus.find('ul li').first() )
+            Lanes.Views.TimedHighlight.move( focus.find('ul li').first() )
 
     onHighlightHide: (ev)->
         Lanes.$(ev.target).closest('.navigation .expand').removeClass("expand")
@@ -96,31 +96,31 @@ class Lanes.Workspace.ScreensMenu extends Lanes.View.Base
         current = this.getKeyboardFocus()
         focus = current.closest('.navigation .expand').removeClass("expand")
         return unless focus.length
-        Lanes.View.TimedHighlight.move( focus.first() )
+        Lanes.Views.TimedHighlight.move( focus.first() )
 
     expandMenu: ->
         focus = this.getKeyboardFocus()
         return unless focus.find('ul li').length
         focus.addClass('expand')
-        Lanes.View.TimedHighlight.move( focus.find('ul li').first() )
+        Lanes.Views.TimedHighlight.move( focus.find('ul li').first() )
 
     nextMenu: ->
         current = this.getKeyboardFocus()
         focus = current.next('li')
         focus = current.siblings('li:first') unless focus.length
         return unless focus.length
-        Lanes.View.TimedHighlight.move( focus.first() )
+        Lanes.Views.TimedHighlight.move( focus.first() )
 
     prevMenu: ->
         current = this.getKeyboardFocus()
         focus = current.prev('li')
         focus = current.siblings('li:last') unless focus.length
         return unless focus.length
-        Lanes.View.TimedHighlight.move( focus.first() )
+        Lanes.Views.TimedHighlight.move( focus.first() )
 
     getKeyboardFocus: ->
         focus = this.$('.highlighted')
         unless focus.length
             focus = this.$('.navigation li:first')
-            Lanes.View.TimedHighlight.move(focus)
+            Lanes.Views.TimedHighlight.move(focus)
         focus

data/client/{javascripts → lanes}/workspace/index.js

@@ -1,12 +1,14 @@
 //= require ../lib/noConflict
 //= require ../vendor/modern-stack
 //= require ../lib
-//= require_self
 //= require ../extension
 //= require ../data
 //= require ../plugins
-//= require ../view
-//= require ../component
+//= require ../views
+//= require ../screens
+//= require ../components/Base
+//= require ../components/enabled
+//= require ../extension/LateLoaded
+//= require_self
 //= require_tree .
-
-Lanes.namespace( 'Workspace' );
+Lanes.ns( 'Workspace' );

data/client/lanes/workspace.scss.erb

@@ -0,0 +1,21 @@
+@import "styles/fonts";
+@import "styles/vendor/bootstrap";
+
+.lanes {
+  padding: 0px;
+  margin: 0px;
+  background-color: $body-bg;
+  position: relative;
+  min-height: 10px; // needs height for resizing sensor to function
+<% Lanes::Components.enabled_with_dependencies(self) do | component | %>
+  @import "components/<%= component %>/<%= component %>";
+<% end %>
+  @import "styles/plugins/all";
+  @import "styles/layout";
+  @import "styles/tabs";
+  @import "styles/screens";
+  @import "styles/forms";
+  @import "styles/forms";
+  @import "styles/forms";
+  @import "styles/keybindings";
+}

data/client/lanes-workspace.scss.erb

@@ -0,0 +1,21 @@
+@import "styles/fonts";
+@import "styles/vendor/bootstrap";
+
+.lanes {
+  padding: 0px;
+  margin: 0px;
+  background-color: $body-bg;
+  position: relative;
+  min-height: 10px; // needs height for resizing sensor to function
+<% Lanes::Components.enabled_with_dependencies(self) do | component | %>
+  @import "components/<%= component %>/<%= component %>";
+<% end %>
+  @import "styles/plugins/all";
+  @import "styles/layout";
+  @import "styles/tabs";
+  @import "styles/screens";
+  @import "styles/forms";
+  @import "styles/forms";
+  @import "styles/forms";
+  @import "styles/keybindings";
+}

data/client/{stylesheets → styles}/fonts.scss

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'skr-icon';
-  src:url(font-path('fonts/icomoon.eot') + '?-7u8s0f');
-  src:url(font-path('fonts/icomoon.eot') + '?#iefix-7u8s0f') format('embedded-opentype'),
-  url(font-path('fonts/icomoon.woff') + '?-7u8s0f') format('woff'),
-  url(font-path('fonts/icomoon.ttf')  + '?-7u8s0f') format('truetype'),
-  url(font-path('fonts/icomoon.svg')  + '?-7u8s0f#icomoon') format('svg');
+  src:url(font-path('styles/fonts/icomoon.eot') + '?-7u8s0f');
+  src:url(font-path('styles/fonts/icomoon.eot') + '?#iefix-7u8s0f') format('embedded-opentype'),
+  url(font-path('styles/fonts/icomoon.woff') + '?-7u8s0f') format('woff'),
+  url(font-path('styles/fonts/icomoon.ttf')  + '?-7u8s0f') format('truetype'),
+  url(font-path('styles/fonts/icomoon.svg')  + '?-7u8s0f#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -30,7 +30,7 @@
                       @extend .font-icon-display;
                     }
 
-  @import "CSS:fonts/style";
+  @import "fonts/style";
 
   .icon-reset:before {
     @extend .icon-refresh:before;

data/client/{stylesheets → styles}/layout.scss

@@ -25,7 +25,7 @@
     height: 48px;
     width: 150px;
     margin: 2px;
-    background: url(asset_path('logo-sm.png')) no-repeat;
+    background: url(asset_path('images/logo-sm.png')) no-repeat;
   }
 
   .navbar-toggle, .screens-menu-toggle {

data/client/{stylesheets → styles}/plugins/overlay.scss

@@ -29,7 +29,7 @@
       font-size: 3.2rem;
       float: left;
       &.loading-spinner {
-        background:url(asset_path('ajax-loader.gif')) no-repeat;
+        background:url(image-path('images/ajax-loader.gif')) no-repeat;
         height: 32px;
         margin-top: 10px;
         width: 32px;

data/client/styles/vendor/bootstrap/_badges.scss

@@ -0,0 +1,63 @@
+//
+// Badges
+// --------------------------------------------------
+
+
+// Base class
+.badge {
+  display: inline-block;
+  min-width: 10px;
+  padding: 3px 7px;
+  font-size: $font-size-small;
+  font-weight: $badge-font-weight;
+  color: $badge-color;
+  line-height: $badge-line-height;
+  vertical-align: baseline;
+  white-space: nowrap;
+  text-align: center;
+  background-color: $badge-bg;
+  border-radius: $badge-border-radius;
+
+  // Empty badges collapse automatically (not available in IE8)
+  &:empty {
+    display: none;
+  }
+
+  // Quick fix for badges in buttons
+  .btn & {
+    position: relative;
+    top: -1px;
+  }
+  .btn-xs & {
+    top: 0;
+    padding: 1px 5px;
+  }
+
+  // [converter] extracted a& to a.badge
+
+  // Account for badges in navs
+  .list-group-item.active > &,
+  .nav-pills > .active > a > & {
+    color: $badge-active-color;
+    background-color: $badge-active-bg;
+  }
+  .list-group-item > & {
+    float: right;
+  }
+  .list-group-item > & + & {
+    margin-right: 5px;
+  }
+  .nav-pills > li > a > & {
+    margin-left: 3px;
+  }
+}
+
+// Hover state, but only for links
+a.badge {
+  &:hover,
+  &:focus {
+    color: $badge-link-hover-color;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}