lanes 0.1.2 → 0.1.5

data/client/lanes/views/Base.coffee

@@ -2,7 +2,7 @@ amp = Lanes.Vendor.Ampersand
 delegateEventSplitter = /^(\S+)\s*(.*)$/
 class ViewBase
 
-    @extended_properties = ['ui']
+    extendedProperties: ['ui','subviews']
 
     # Custom datatypes for views
     dataTypes:
@@ -81,7 +81,7 @@ class ViewBase
         if !this.pubSub? # if it's unset, not true/false; default to parent or true
             this.pubSub = if this.parent?.pubSub? then this.parent.pubSub else true
 
-        if @formBindings || @parent?.formBindings
+        if @formBindings || @useFormBindings || @parent?.formBindings
             @formBindings = new Lanes.Views.FormBindings(this, @formBindings)
 
         if @keyBindings
@@ -98,12 +98,12 @@ class ViewBase
 
     _substituteEventUI: ->
         return unless @ui
-        if @events
-            for selector in _.keys(@events)
+        if @domEvents
+            for selector in _.keys(@domEvents)
                 replaced_selector = this._normalizeUIString(selector,@ui)
                 if replaced_selector != selector
-                    @events[replaced_selector] = @events[selector]
-                    delete @events[selector]
+                    @domEvents[replaced_selector] = @domEvents[selector]
+                    delete @domEvents[selector]
         # TODO - also apply ui to binding keys
 
 
@@ -137,9 +137,9 @@ class ViewBase
         parent = this.el && this.el.parentNode;
         parent.replaceChild(newDom, this.el) if parent
         if newDom.nodeName == '#document-fragment'
-            throw new Error("View #{this.FILE.path} can only have one root element.")
+            throw new Error("View #{Lanes.u.path(this.FILE)} can only have one root element.")
         if newDom.nodeName == '#text'
-            throw new Error("View #{this.FILE.path} must have a root element.")
+            throw new Error("View #{Lanes.u.path(this.FILE)} must have a root element.")
         this.el = newDom;
         this.onRender?()
         return this;
@@ -153,19 +153,23 @@ class ViewBase
             _.result(this, name)
         else
             data ||= _.result(this,"#{name}Data")
-            path = _.result(this,'templatePrefix') + _.result(this, "#{name}Name")
+            template_name = _.result(this, "#{name}Name")
+            path = this.resultsFor('templatePrefix', template_name) + '/' + template_name
             Lanes.Templates.render(this, path, data)
-        throw new Error("#{this.FILE.path} failed to render #{name}") unless template
+        throw new Error("#{Lanes.u.path(this.FILE)} failed to render #{path || name}") unless template
         template
 
-    templateName: -> _.underscore( this.FILE.path )
+    templateName: -> _.dasherize(_.last(this.FILE.path))
 
-    templatePrefix: -> this.FILE.extensionName.toLowerCase() + "/views/"
+    templatePrefix: (template)->
+        if template == "empty-span"
+            "lanes/views"
+        else
+            Lanes.u.dirname(this.FILE)
 
     templateData: ->
         { model: @model?.toJSON?(), collection: @collection?.toJSON?() }
 
-
     FILE: FILE
 
     # Remove this view by taking the element out of the DOM, and removing any
@@ -187,7 +191,7 @@ class ViewBase
         this._unbindFromObject(@model, @modelEvents) if @model and @modelEvents
         this._unbindFromObject(@collection, @collectionEvents) if @collection and @collectionEvents
 
-        Lanes.Views.Keys.remove(this, @key_bindings, @key_scope) if @key_bindings
+        Lanes.Views.Keys.remove(this, @keyBindings, @keyScope) if @keyBindings
         this.trigger('remove', this);
         return this;
 
@@ -195,7 +199,7 @@ class ViewBase
     _onElementChange: (element, delegate) ->
         if changes = this.changedAttributes()
             Lanes.$(changes['el']).off('.delegateEvents' + this.cid) if changes['el']
-        this.bindEvents()
+        this.bindDomEvents()
         this._cacheUI()
         this._applyBindingsForKey();
 
@@ -213,10 +217,10 @@ class ViewBase
 
         # bind each of the selectors
         for key, selector of bindings
-            this.ui[key] = this.$(selector)
+            this.ui[key] = this.$el.filter(selector).add(this.$el.find(selector))
 
 
-    # Sets callbacks, where `this.events` is a hash of
+    # Sets callbacks, where `this.domEvents` is a hash of
     #
     # *{"event selector": "callback"}*
     #
@@ -231,15 +235,14 @@ class ViewBase
     # Omitting the selector binds the event to `this.el`.
     # This only works for delegate-able events: not `focus`, `blur`, and
     # not `change`, `submit`, and `reset` in Internet Explorer.
-    bindEvents: (events)->
-        return this if (!(events || (events = _.result(this, 'events'))))
-        this.unbindEvents();
+    bindDomEvents: (events)->
+        return this if (!(events || (events = _.result(this, 'domEvents'))))
+        this.unbindDomEvents();
         for key, method of events
             method = this[ method ] unless _.isFunction(method);
             continue unless method
             match = key.match( delegateEventSplitter )
             this.bindEvent(match[1], match[2], _.bind(method, this))
-
         return this;
 
     # Add a single event listener to the view's element (or a child element
@@ -251,7 +254,7 @@ class ViewBase
     # Clears all callbacks previously bound to the view with `delegateEvents`.
     # You usually don't need to use this, but may wish to if you have multiple
     # views attached to the same DOM element.
-    unbindEvents: ->
+    unbindDomEvents: ->
         this.$el.off('.delegateEvents' + this.cid) if this.el
         return this;
 
@@ -285,15 +288,21 @@ class ViewBase
     # helper to detect the class for a given subviev
     _subviewClass: (subview)->
         klass = if subview.component
-            Lanes.getPath(subview.component, Lanes.Components)
+            Lanes.u.findObject(subview.component, 'Components', this.FILE)
         else if subview.view
             if _.isString(subview.view)
-                Lanes.getPath(subview.view, this.FILE.namespace['Views'] )
+                Lanes.u.getPath(subview.view, this.subviewPrefix() )
             else
                 subview.view
         Lanes.warn( "Unable to obtain view for %o", subview) if ! klass
         klass
 
+    # ## subviewPrefix
+    # returns the namespace that the views should be in
+    # is needed so views can be specified by only thier name, rather than complete path
+    subviewPrefix: ->
+        Lanes.u.objectPath(this.FILE)
+
     # ## _parseSubview
     # helper for parsing out the subview declaration and registering
     # the `waitFor` if need be.
@@ -301,16 +310,20 @@ class ViewBase
         self = this;
         opts = {
             selector: subview.container || "[data-hook='#{subview.hook||name}']"
-            waitFor: subview.waitFor || '',
+            waitFor: subview.waitFor || subview.model || subview.collection || ''
             prepareView: subview.prepareView || (el,options)->
                 klass = self._subviewClass(subview)
                 if subview.collection
                     new Lanes.Vendor.Ampersand.CollectionView({
                         el: el, parent: self, viewOptions: options, view: klass,
-                        collection: _.getPath(this,subview.collection)
+                        collection: _.getPath(this, subview.collection)
                     })
                 else
-                    new klass(_.extend(options,{ el: el, parent: self }))
+                    options = _.extend(options,{ el: el, parent: self })
+                    for attr in ['model','data']
+                        if subview[attr]
+                            options[attr] = _.getPath(this, subview[attr])
+                    new klass(options)
 
         }
         action = ->
@@ -351,12 +364,14 @@ class ViewBase
     _onModelChange: ->
         for name, definition of this.subviews
             continue unless ( view = this[name] )
-            view.model = Lanes.getPath(definition.model, this) if definition.model
-            view.collection = Lanes.getPath(definition.collection, this) if definition.collection
+            view.model = Lanes.u.getPath(definition.model, this) if definition.model
+            view.collection = Lanes.u.getPath(definition.collection, this) if definition.collection
         prev = this.previous('model')
         return if prev == @model
         this._unbindFromObject(prev, @modelEvents) if prev
         this._bindToObject(@model, @modelEvents)
+        this.onModelChange?()
+        true
 
     _onCollectionChange: ->
         prev = this.previous('collection')
@@ -376,10 +391,6 @@ class ViewBase
 
     initializeKeyBindings: Lanes.emptyFn
 
-    # initializeFormBindings: ->
-    #     @_form_bindings = {}
-    #     for data, selector of @form_bindings
-    #         @_form_bindings[data] =
 
     setFieldsFromBindings: ->
         binding.setAllFields() for name, binding of @_form_bindings
@@ -400,6 +411,9 @@ class ViewBase
         view
 
     @extended: (klass)->
+        if klass::events && !klass::domEvents
+            klass::domEvents == klass::events
+            delete klass::events
         # perhaps we should merge 'events','bindings'?
 
 
@@ -409,5 +423,4 @@ class ViewBase
     @include Lanes.lib.results
 
 
-
 Lanes.Views.Base = Lanes.lib.MakeBaseClass( Lanes.Vendor.Ampersand.State, ViewBase )

data/client/lanes/views/FormBindings.coffee

@@ -9,14 +9,15 @@ class Lanes.Views.FormBindings
         this.rebindModel( @view, @view.model )
 
     onFieldChange: (ev)->
-        el = Lanes.$(ev.target);
-        name = el.attr('name');
-        m = @view.model;
-        return unless m.hasAttribute(name)
+        el = Lanes.$(ev.target)
+        name = el.attr('name')
+        return unless @view.model?.hasAttribute(name)
         val = el.val()
-        el[0]._is_setting=true; m.set( name, val ); delete el[0]._is_setting
-        msg = m.checkValid(name,val)
+        unless false == this.view.trigger("update:#{val}", val)
+            el[0].binding_is_setting=true; @view.model.setFromView(name, val); delete el[0].binding_is_setting
+        msg = @view.model.checkValid(name,val)
         this.setError( el, msg )
+        return true
 
     onAttributeUpdate: (model, opts={})->
         attributes = if opts.all then this.attributesFor(model) else model.changedAttributes()
@@ -25,7 +26,8 @@ class Lanes.Views.FormBindings
                 this.setError(Lanes.$(el),message) if el = this.getElement(name)
         for name, _val of attributes
             el = this.getElement(name)
-            this.setElValue(Lanes.$(el),model.get(name)) if el && ! el._is_setting
+            this.setElValue(Lanes.$(el),model.get(name)) if el && ! el.binding_is_setting
+        return true
 
     setElValue:  (el, value)->
         if el.attr('type')
@@ -40,7 +42,6 @@ class Lanes.Views.FormBindings
                     file
                 else
                     el.val(value)
-
         else if el.is('input') || el.is('select') || el.is('textarea')
             el.val(value ||  ( if value == 0 then '0' else '') )
         else
@@ -85,7 +86,7 @@ class Lanes.Views.FormBindings
         @cached_fields = null
         if @view.model
             this.setAllFields()
-        @view.$el.on("change", input_selector, this.onFieldChange )
+        @view.$el.on("change", input_selector, this.onFieldChange)
 
     rebindModel: (view, model)->
         this.clearErrors()

data/client/lanes/views/Helpers.coffee

@@ -22,15 +22,13 @@ impl = {
         result.HTMLSafe = true
         result
 
-
     field_options: (name, options)->
-        options.widths=[options.width] if options.width # convert singular widths into an array if present
-        {
-            widths: this.grid_widths(options.widths...)
-            title:  _.escape( options.label || _.titleize(name) )
-        }
+        options.widths = [options.width] if options.width
+        options.widths = this.grid_widths(options.widths) if options.widths
+        options.title  =  _.escape( options.label || _.titleize(name) )
+        options
 
-    grid_width:(widths, type='')->
+    grid_widths:(widths, type='')->
         last = widths[widths.length-1]
         widths.push(last) for i in [widths.length-1..4]
         ( "col-#{width}#{type}-#{widths[index]}" for index,width of ['xs','sm','md','lg'] ).join(' ')
@@ -53,24 +51,24 @@ Lanes.Views.Helpers = {
             impl.template('button', options )
 
     grid_offsets: (widths...)->
-        impl.grid_width(widths,'-offset')
+        impl.grid_widths(widths,'-offset')
 
     grid_widths: (widths...)->
-        impl.grid_width(widths);
+        impl.grid_widths(widths);
 
     text_field: (name,options={})->
         impl.field(name, options,
-            "<input type='text' name='#{name}'><span class='feedback'></span>"
+            "<input type='#{options.type || 'text'}' name='#{name}' value='#{options.value}'><span class='feedback'></span>"
             "<div class='ro-input update' name='#{name}'></div>"
         )
 
     subview: (name,options={})->
-        definition = Lanes.Views.RenderContext.view().subviews[name]
-        selector = if definition.hook
-            "data-hook='#{definition.hook}'"
-        else
-            "class='#{definition.selector}'"
-        impl.field( name, options, "<div #{selector}></div>" )
+        view = Lanes.Views.RenderContext.view()
+        definition = view.subviews[name]
+        if !definition
+            Lanes.warn("Subview #{name} not found on View #{Lanes.u.path(this.FILE)}")
+            return
+        impl.field( name, options, "<div data-hook='#{definition.hook||name}'></div>" )
 
 
 

data/client/lanes/views/ModelObserver.coffee

@@ -1,6 +1,6 @@
 class Lanes.Views.ModelObserver extends Lanes.Models.State
 
-    model_events: {}
+    modelEvents: {}
 
     constructor: (@view, @keypath='model')->
         super
@@ -9,14 +9,14 @@ class Lanes.Views.ModelObserver extends Lanes.Models.State
         this.rebindModel()
 
     getModel: ->
-        @cached_model ||= Lanes.getPath(@keypath, @view)
+        @cached_model ||= Lanes.u.getPath(@keypath, @view)
 
     unBindModel: (model)->
-        for event, fn of @model_events
+        for event, fn of @modelEvents
             model.off(event, this[fn], this )
 
     bindModel: (model)->
-        for event, fn of @model_events
+        for event, fn of @modelEvents
             model.on(event, this[fn], this )
 
     rebindModel: ->

data/client/lanes/views/ModelUpdate.coffee

@@ -1,8 +1,11 @@
 class Lanes.Views.ModelUpdate extends Lanes.Views.Base
 
-    template: 'view/model-update'
+    FILE: FILE
+
+    templateData: ->
+        { change: @model }
 
     bindings:
-        'model.name':{ selector: 'a', type: 'text' }
+        'model.name': { selector: 'a', type: 'text' }
         'model.icon': { selector: 'i', type: 'class' }
         'model.time_ago': '.ago'

data/client/lanes/views/PubSub.coffee

@@ -1,7 +1,7 @@
 # Responsible for adding and removing a view's model(s) from Models.PubSub
 class Lanes.Views.PubSub extends Lanes.Views.ModelObserver
 
-    model_events:
+    modelEvents:
         'remote-update': 'onChange'
 
     hideUpdate: (field)->

data/client/lanes/views/Viewport.coffee

@@ -1,88 +1,18 @@
-
-
-MENU_NARROW_WIDTH = 60
-MENU_WIDE_WIDTH   = 250
-NAVBAR_HEIGHT     = 50
-BREAKPOINTS = {
-    sm: 750
-    md: 970
-    lg: 1170
-}
-
 ALL_INSTANCES = []
 
-class Lanes.Views.Viewport extends Lanes.Models.BasicModel
+class Lanes.Views.Viewport extends Lanes.Models.State
+
+    session:
+        width:      'number'
+        height:     'number'
+        el:         'element'
+        selector:   'string'
+        root:       'element'
 
     constructor: ->
         super
         ALL_INSTANCES.push(this)
-
         this.on('change:root', =>
             @width = @root.width()
             @root.data()['ui']=@
         )
-        this.on('change:menu_view', =>
-            @trigger('change:screen_menu_position', @, @screen_menu_position )
-        )
-        this.on('change:menu_view', =>
-            @trigger('change:screen_menu_position', @, @screen_menu_position )
-        )
-        this.screen_menu_shown = false if this.tiny_screen
-
-    session:
-        screen_menu_preference: {
-            type: 'string',
-            values: [ 'menu-wide', 'menu-narrow', 'menu-hidden' ]
-        }
-        root:       'element'
-        menu_view:  'any'
-        el:         'element'
-        width:      'number'
-        height:     'number'
-        http_error: 'string'
-        selector:   'string'
-        instance:   'object'
-        screen_menu_shown: 'boolean'
-
-    derived:
-        menu_width:
-            deps: ['screen_menu_size'], fn: ->
-                switch this.screen_menu_size
-                    when 'menu-wide' then 240
-                    when 'menu-narrow' then 60
-                    else 0
-        layout_size:
-            deps: ['screens_width'], fn:->
-                switch
-                    when @screens_width < BREAKPOINTS.sm then 'tiny'
-                    when @screens_width < BREAKPOINTS.md then 'sm'
-                    when @screens_width < BREAKPOINTS.lg then 'md'
-                    else 'lg'
-        tiny_screen:
-            deps: ['layout_size'], fn:->
-                @layout_size == 'tiny'
-
-        screen_menu_position:
-            deps: ['width'], fn: ->
-                if this.width < BREAKPOINTS.sm + MENU_NARROW_WIDTH then 'top' else 'side'
-
-        screen_menu_size:
-            deps: ['width','screen_menu_preference'], fn: ->
-                return @screen_menu_preference if @screen_menu_preference
-                width = this.width
-                switch
-                    when width < BREAKPOINTS.sm + MENU_NARROW_WIDTH then 'menu-hidden'
-                    when width < BREAKPOINTS.lg + MENU_WIDE_WIDTH   then 'menu-narrow'
-                    else 'menu-wide'
-        screens_width:
-            deps: ['width','screen_menu_size'], fn: ->
-                @width - @menu_width
-
-        screens_height:
-            deps: ['height'], fn: ->
-                @height - NAVBAR_HEIGHT
-
-    nextSidebarState: ->
-        if ! @screen_menu_preference
-            @screen_menu_preference = @screen_menu_size
-        this.toggle('screen_menu_preference')

data/client/lanes/views/_button.html

@@ -1,3 +1,3 @@
-<button type="button" class="btn <%= @css %>">
+<button type="button" class="btn navbar-btn <%= @css %>">
     <i class="<%= @icon %>"><%= @text %></i>
 </button>

data/client/lanes/views/_toolbar.html

@@ -1,27 +1,23 @@
-    <nav class="toolbar">
-        <div class="container-fluid">
-            <div class="navbar-header navbar-left">
-                <% for button in @buttons: %>
-                <%= h.button(button) %>
-                <% end  %>
-            </div>
-
-            <ul class="nav top-menu navbar-right">
-                <li class="dropdown open changes-notification">
-                    <button class="btn dropdown-toggle" data-toggle="dropdown">
-                        <i class="icon-cloud"></i>
-                        <span class="badge bg-theme"></span>
-                    </button>
-                    <div class="dropdown-menu">
-                        <div class="arrow"></div>
-                        <h3 class="title">There have been <span></span> updates.</h3>
-                        <div class="scroller">
-                            <ul data-hook="changes-display" class="list-group changes">
-                            </ul>
-                        </div>
-                    </div>
-                </li>
+<nav class="navbar navbar-default">
+  <div class="container-fluid">
+    <div class="navbar-header">
+      <% for button in @buttons: %>
+      <%= h.button(button) %>
+      <% end  %>
+    </div>
+    <ul class="nav navbar-nav navbar-right changes-notification" >
+      <li class="dropdown">
+        <button class="btn navbar-btn dropdown-toggle" data-toggle="dropdown">
+          <i class="icon-cloud"></i>
+          <span class="badge bg-theme"></span>
+        </button>
+        <div class="dropdown-menu">
+          <div class="arrow"></div>
+          <h3 class="title">There have been <span></span> updates.</h3>
+          <div class="scroller">
+            <ul data-hook="changes-display" class="list-group changes">
             </ul>
-
+          </div>
         </div>
-    </nav>
+  </div><!-- /.container-fluid -->
+</nav>

data/client/lanes/views/model-update.html

@@ -1,10 +1,12 @@
 <li class="update">
-    <span class="name"  data-toggle="tooltip" data-placement="top" data-tooltip-message="<%= this.by.email %>">
-        <%= this.by.name %>
+    <% if @change.by: %>
+    <span class="name"  data-toggle="tooltip" data-placement="top" data-tooltip-message="<%= @change.by.email %>">
+        <%= @change.by.name %>
     </span>
-    set <%= @record.api_path %>
-    <% for field in @displayed_fields: %>
-        <% change = @changeFor(field) %>
+    <% end %>
+    <%= @change.record.api_path() %>
+    <% for field in @change.displayed_fields: %>
+        <% change = @change.changeFor(field) %>
         <span data-toggle="tooltip" data-placement="top" data-tooltip-message="<%= change.from %> -> <%=change.to %>">
             <%= field %>
         </span>

data/client/lanes/workspace/ActiveScreensSwitcher.coffee

@@ -5,13 +5,10 @@ class TabView extends Lanes.Views.Base
     mixins:[
         Lanes.Workspace.WorkspaceView
     ]
-
     bindings:
         'model.screen.title': { selector: 'a', type: 'text' }
         'model.active': { type: 'booleanClass' }
-
-
-    events:
+    domEvents:
         'click': 'onClick'
 
     onClick: (ev)->
@@ -30,25 +27,22 @@ class Lanes.Workspace.ActiveScreenSwitcher extends Lanes.Views.Base
     mixins:[
         Lanes.Workspace.WorkspaceView
     ]
-
-    key_scope: { name: 'nav', shortcut: '⌘+shift+t,ctrl+shift+t' }
-    key_bindings:
+    keyScope: { name: 'nav', shortcut: '⌘+shift+t,ctrl+shift+t' }
+    keyBindings:
         left:  'nextScreen'
         right: 'prevScreen'
-
     subviews:
         tab_views:
             container: '.nav-tabs'
             collection: 'collection'
             view: TabView
-
     ui:
         lScroll: '.scroller-left'
         rScroll: '.scroller-right'
         wrapper: '.wrapper'
         tabs:    '.nav-tabs'
 
-    events:
+    domEvents:
         'click .scroller-right': 'scrollRight'
         'click .scroller-left' : 'scrollLeft'
 
@@ -58,14 +52,14 @@ class Lanes.Workspace.ActiveScreenSwitcher extends Lanes.Views.Base
     constructor: ->
         super
         _.bindAll(this, 'resetShownControls')
-        @collection = Lanes.Models.Screens.displaying
+        @collection = Lanes.Screens.Definitions.displaying
         this.listenTo( @collection, "change:active", this.onActiveChange )
         this.listenTo( this.viewport,  "change:width", this.resetShownControls )
         this.listenTo( Lanes.current_user, "change:isLoggedIn", this.closeScreens)
 
 
     closeScreens: ->
-        @collection.remove(model) for model in this.collection.models
+        @collection.reset()
 
     widthOfList: ->
         itemsWidth = 0

data/client/lanes/workspace/Extension.coffee

@@ -0,0 +1,3 @@
+class Lanes.Workspace.Extension extends Lanes.Extensions.Base
+
+    identifier: "lanes-workspace"

data/client/lanes/workspace/Layout.coffee

@@ -1,22 +1,26 @@
 class Lanes.Workspace.Layout extends Lanes.Views.Base
 
+    FILE: FILE
     templateName: 'layout'
+    templateData: ->
+        { ui: this.ui_state }
     mixins:[
         Lanes.Workspace.WorkspaceView
     ]
-    FILE: FILE
-
     subviews:
         navbar:
             hook: 'navbar-container'
-            view: 'Workspace.Navbar'
-
+            view: 'Navbar'
         pages:
             hook: 'page-container'
-            view: 'Workspace.Pages'
+            view: 'Pages'
+
+    session:
+        ui_state: 'state'
 
-    subviewOptions: -> { model: this.model }
+    subviewOptions: ->
+        { model: this.ui_state }
 
-    onRender: ->
-        @screens = new Lanes.Workspace.ScreensMenu({ parent: this, model: @model })
-        this.viewport.menu_view = @screens.render()
+    constructor: (options={})->
+        options.ui_state = new Lanes.Workspace.UIState( model: options.model, layout: this )
+        super