lanes 0.0.1

data/client/javascripts/view/SaveNotify.coffee

@@ -0,0 +1,30 @@
+
+class ModelSaver
+
+    constructor: ( @element, @options )->
+        @mask = new Lanes.View.TimedMask( @element, @options.message )
+        @mask.prefixActions( "Save" )
+        _.bindAll(this,'_onError','_onSuccess')
+
+    save: ->
+        @options.model.save({
+            success: this._onSuccess, error: this._onError
+        })
+
+    _onSuccess: (rec,resp,options)->
+        @mask.displaySuccess()
+        this._callback(true,resp)
+
+    _onError: (rec,resp,options)->
+        @mask.displayFailure(rec.lastServerMessage)
+        this._callback(false,resp)
+
+    _callback: (success,resp)->
+        @options.callback(success,resp,@options.model) if @options.callback
+
+
+Lanes.View.SaveNotify = ( view, options={} )->
+    el = if view.jquery then view else view.$el
+    _.defaults( options, { model: view.model, message: "Saving, Please Wait…"} )
+    ms = new ModelSaver(el, options)
+    ms.save()

data/client/javascripts/view/Screen.coffee

@@ -0,0 +1,30 @@
+Lanes.namespace( 'Screens' )
+
+class Lanes.View.Screen extends Lanes.View.Base
+
+    namespace: "Screens"
+
+    mixins:[
+        Lanes.View.mixins.ScreenChangeListener
+    ]
+
+    initializeChanges:->
+        @_changeListeners = {}
+        for keypath in ( @usingModels || ['model'] )
+            @_changeListeners[keypath] = new Lanes.View.ScreenChangeListener(this, keypath)
+
+    reset: Lanes.emptyFn
+
+    render: ->
+        previouslyRendered = this.rendered
+        Lanes.View.RenderContext.start(this)
+        # Lanes.re we cheat and skip ViewBase so it doesn't push to context
+        this.reset()
+        this.renderContextFree()
+        #Lanes.View.Base.__super__.render.apply(this, arguments)
+        this.renderAllSubviews() if previouslyRendered
+        Lanes.View.RenderContext.reset()
+        this
+
+    addButton: (config, align='left')->
+        this.$(".toolbar ." + align).append( Lanes.View.Helpers.button(config) )

data/client/javascripts/view/TimedHighlight.coffee

@@ -0,0 +1,38 @@
+Lanes.View.TimedHighlight = {
+
+    cssClass: 'highlighted'
+    displayLength: 2000
+    current: null,
+
+    cancelCurrent: ->
+        return unless @current
+        @current.el.removeClass(@cssClass)
+        clearTimeout(@current.timeout)
+        @current = null
+
+    setTimeout: (timeout)->
+        @current.timeout = _.delay( =>
+            @current.el.trigger("highlight-hide")
+            @cancelCurrent()
+        ,timeout)
+
+    move: (el)->
+        return unless @current
+        @current.el.removeClass(@cssClass)
+        @current.el = el
+        @current.el.addClass(@cssClass)
+
+    on: (view, timeout=@displayLength)->
+        view.$el.addClass(@cssClass)
+        @current = { el: view.$el }
+        @current.el.trigger("highlight-show")
+        this.setTimeout(timeout)
+
+    reset:(timeout)->
+        clearTimeout(@current.timeout)
+        this.setTimeout(timeout)
+
+    remove: ->
+        clearTimeout(@current.timeout)
+        @current = null
+}

data/client/javascripts/view/TimedMask.coffee

@@ -0,0 +1,65 @@
+class Lanes.View.TimedMask
+    stages:
+        pending:
+            msg: "Please Wait …"
+            icon: "loading-spinner"
+            color: 'darkGrey';
+        success:
+            msg: "Success!"
+            icon: "icon-thumbs-up"
+            color: 'blue'
+        failure:
+            msg: "Failed"
+            icon: "icon-warning"
+            color: 'darkRed'
+        timeout:
+            msg: "Timed Out …"
+            icon: "icon-busy"
+            color: 'firebrick'
+
+    failsafeTimeout: 25000
+    defaultTimeout:   2000
+
+    constructor: ( @element, options={} )->
+        _.bindAll(this,'destroy')
+        if _.isString( options )
+            @stages.pending.msg = options
+        else
+            _.defaults(this, options)
+        @element.overlay( @stages.pending )
+
+        @timeout = _.delay( =>
+            @_failSafeDestruct()
+        ,@failsafeTimeout)
+        this
+
+    prefixActions: (msg)->
+        stage.msg ="#{msg} #{stage.msg}" for stage in @stages
+
+    display: (success, msg)->
+        if success then this.displaySuccess(msg) else this.displayFailure(msg)
+
+    displaySuccess: ( msg = @stages.success.msg, opts={}  )->
+        this._display( msg, opts, 'success' )
+
+    displayFailure: ( msg = @stages.failure.msg, opts={} )->
+        this._display( msg, opts, 'failure' )
+
+    _display:(msg, opts, stage)->
+        this._sceduleDestruct( opts.timeOut )
+        opts = _.extend( _.clone(@stages[stage]), opts)
+        _.extend(opts, {msg:msg}) if msg
+        @element.overlay( opts )
+
+    _failSafeDestruct: ->
+        this._display( null, {timeOut: 5000}, 'timeout' )
+
+    _sceduleDestruct: (time=@defaultTimeout)->
+        clearTimeout(@timeout)
+        @timeout = _.delay( =>
+            @destroy()
+        ,time)
+
+    destroy: ->
+        @element.overlay(false)
+        clearTimeout(@timeout)

data/client/javascripts/view/_button.html

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

data/client/javascripts/view/_toolbar.html

@@ -0,0 +1,27 @@
+    <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>
+            </ul>
+
+        </div>
+    </nav>

data/client/javascripts/view/index.js

@@ -0,0 +1,10 @@
+//= require_self
+//= require_tree ./mixins
+//= require ./RenderContext
+//= require_tree .
+
+Lanes.namespace( 'View.mixins' );
+
+
+//= require ./ModelObserver
+//= require ./FormBindings

data/client/javascripts/view/mixins/ScreenChangeListener.coffee

@@ -0,0 +1,43 @@
+Lanes.View.mixins.ScreenChangeListener = {
+
+    model_events:
+        'remote-update': 'onChange'
+
+    events:
+        'show.bs.dropdown .changes-notification': 'onChangesShow'
+
+    session:
+        change_count: ['number', true, 0]
+
+    derived:
+        changes: deps:[], fn: ->
+            new Lanes.Data.ChangeSetCollection([],{ parent: this })
+        changes_visible: { deps: ['change_count'], fn:-> @change_count > 0 }
+
+    bindings:
+        'changes_visible': { selector: '.changes-notification', type: 'toggle' }
+        'change_count': [
+            { selector: '.changes-notification .title span',             type: 'text' }
+            { selector: '.changes-notification .dropdown-toggle .badge', type: 'text' }
+        ]
+
+    subviews:
+        changesDropDown:
+            hook: 'changes-display'
+            view: 'ModelUpdate'
+            collection: 'changes'
+
+    onChange: (model,change)->
+        @changes.add(change)
+        @change_count += 1
+
+    bindModel: (model)->
+        Lanes.View.Base.prototype.bindModel.call(this, model)
+        @changes.reset([])
+        @change_count = 0
+
+    onChangesShow: (ev)->
+        this.changes.invoke('updateTimeAgo')
+        this.$('.changes-notification .scroller').animate({ scrollTop: 0 })
+
+}

data/client/javascripts/view/model-update.html

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

data/client/javascripts/view/screen-definitions.js.erb

@@ -0,0 +1,7 @@
+<% Lanes::Screens::Group.each(self) do | spec | %>
+Lanes.Data.Screens.groups.add( <%= spec.to_json %> );
+<% end %>
+
+<% Lanes::Screens::Definition.each(self) do | spec | %>
+Lanes.Data.Screens.register( <%= spec.to_json %> );
+<% end %>

data/client/javascripts/workspace/ActiveScreensSwitcher.coffee

@@ -0,0 +1,117 @@
+class TabView extends Lanes.View.Base
+
+    template: "<li><a data-toggle='tab'></a><span class='close'>×</span></li>"
+
+    bindings:
+        'model.screen.title': { selector: 'a', type: 'text' }
+        'model.active': { type: 'booleanClass' }
+
+
+    events:
+        'click': 'onClick'
+
+    onClick: (ev)->
+        if ev.target.className == "close"
+            this.model.remove()
+        else
+            this.model.active = true
+
+
+TAB_PADDING = 0
+
+
+class Lanes.Workspace.ActiveScreenSwitcher extends Lanes.View.Base
+
+    templateName: 'workspace/screens-switcher'
+
+    key_scope: { name: 'nav', shortcut: '⌘+shift+t,ctrl+shift+t' }
+    key_bindings:
+        left:  'nextScreen'
+        right: 'prevScreen'
+
+    subviews:
+        tab_views:
+            container: '.nav-tabs'
+            collection: 'collection'
+            view: TabView
+
+    events:
+        'click .scroller-right': 'scrollRight'
+        'click .scroller-left' : 'scrollLeft'
+
+    nextScreen: -> this.collection.activateNext()
+    prevScreen: -> this.collection.activatePrev()
+
+    constructor: ->
+        super
+        _.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( Lanes.current_user, "change:isLoggedIn", this.closeScreens)
+
+
+    closeScreens: ->
+        @collection.remove(model) for model in this.collection.models
+
+    widthOfList: ->
+        itemsWidth = 0
+        itemsWidth += tab.scrollWidth for tab in this.$("li")
+        return itemsWidth
+
+    onActiveChange: (screen,active)->
+        return unless active
+        if view = this.tab_views._getViewByModel(screen)
+            this.scrollToTab( view.el )
+
+    tabDisplayRange: ->
+        start = this.tabs.position().left
+        width = this.wrapper.width()
+        end   = width + start
+        { start: start, end: end, width: width, used: this.widthOfList() }
+
+    scrollToTab: (li)->
+        offset = li.offsetLeft
+        width  = li.offsetWidth
+        td = this.tabDisplayRange()
+        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)
+        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)
+
+    resetShownControls: ->
+        td = this.tabDisplayRange()
+        if td.used < td.width
+            this.lScroll.removeClass('enabled') ; this.rScroll.removeClass('enabled')
+        else
+            this.lScroll.toggleClass( 'enabled', td.start < 0)
+            this.rScroll.toggleClass( 'enabled', !(td.used <= td.width-td.start) )
+
+    scrollLeft: ->
+        @rScroll.addClass('enabled')
+        td = this.tabDisplayRange()
+        scroll = _.min([Math.abs(td.start),td.width])
+        @tabs.animate( left: "+=" + scroll + "px" )
+        if td.start + scroll >= 0
+            @lScroll.removeClass('enabled')
+
+    scrollRight: ->
+        @lScroll.addClass('enabled')
+        td = this.tabDisplayRange()
+        scroll = _.min([td.used - (td.width-td.start), td.width])
+        @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

data/client/javascripts/workspace/Instance.es6

@@ -0,0 +1,60 @@
+Lanes.Workspace.create = function(selector, options, extension_data){
+    return new Lanes.Workspace.Instance(selector, options, extension_data);
+};
+
+Lanes.Workspace.Instance = class Instance {
+
+    constructor(selector, options, extension_data){
+        _.extend(this,options);
+
+        this.ui = new Lanes.View.InterfaceState({ 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.data().workspace = this;
+        this.ui.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() });
+        }, 250 ), this) );
+
+        this.root.addClass('lanes root');
+        this.root.tooltip({
+            viewport: '.lanes',
+            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!");
+        }
+        this.view = new view({parent: this, model: this.ui}).render();
+        this.ui.viewport = this.view.$el;
+
+        this.root.append( this.view.el );
+
+        Lanes.View.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/workspace/Layout.coffee

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

data/client/javascripts/workspace/LoginDialog.coffee

@@ -0,0 +1,33 @@
+class Lanes.View.LoginDialog extends Lanes.Component.ModalDialog
+
+    bodyTemplateName: 'workspace/login-dialog'
+    size: 'md'
+    title: 'Please sign in …'
+
+    events:
+        'click .btn-primary': 'onLogin'
+
+    buttons:
+        login: { label: 'Login', type: 'primary' }
+
+    initialize: (options)->
+        super
+        this.listenTo(Lanes.current_user, 'change:isLoggedIn', this.onUserChange)
+        this.onUserChange()
+
+    onUserChange: ->
+        this.toggleShown(!Lanes.current_user.isLoggedIn)
+
+    onLogin: (ev)->
+        msg = this.$('.alert').hide()
+        mask = new Lanes.View.TimedMask(this.$el, "Attempting Login …")
+        Lanes.Data.User.attemptLogin( this.query('#LoginField').value, this.query('#PasswordField').value, {
+            scope: this
+            success: ->
+                mask.displaySuccess("Login Success!")
+            error: (session,reply)->
+                msg.show().text(session.lastServerMessage )
+                mask.displayFailure(session.lastServerMessage)
+        })
+
+    onShown: -> this.query('.login').focus()

data/client/javascripts/workspace/Navbar.coffee

@@ -0,0 +1,44 @@
+class Lanes.Workspace.Navbar extends Lanes.View.Base
+
+    templateName: 'workspace/navbar'
+
+    events:
+        'click .screens-menu-toggle': 'switchMenu'
+        'click .navbar-toggle':  'showHideMenu'
+
+    subviews:
+        screens:
+            hook: 'screens-container'
+            view: 'Lanes.Workspace.ActiveScreenSwitcher'
+            model: 'model'
+
+    bindings:
+        'menu_shown_class': { type: 'class' }
+        'screen_menu_class': { type: 'class' }
+
+    derived:
+        menu_shown_class:
+            deps: ['model.screen_menu_shown']
+            fn: -> if @model.screen_menu_shown then 'screen-menu-visible' else 'screen-menu-hidden'
+        screen_menu_class:
+            deps: ['model.screen_menu_position']
+            fn: -> if @model.screen_menu_position == 'top' then 'with-screen-menu' else 'no-screen-menu'
+
+
+    initialize: ->
+        this.listenTo(@model,'change:screen_menu_position', this.moveScreensMenu )
+
+    onActiveChange: ->
+        this.$el.toggleClass('screens-menu-hidden',true)
+
+    moveScreensMenu: ->
+        if 'top' == @model.screen_menu_position
+            this.query('.menu-container').appendChild( @model.menu_view.el )
+
+    switchMenu: ->
+        @model.nextSidebarState()
+
+    showHideMenu: ->
+        @model.toggle('screen_menu_shown')
+
+    swallowMenu:(@menu)->

data/client/javascripts/workspace/Pages.coffee

@@ -0,0 +1,46 @@
+class Lanes.Workspace.Pages extends Lanes.View.Base
+
+    templateName: 'workspace/pages'
+
+    bindings:
+        'model.screen_menu_size': { type: 'class' }
+        'model.layout_size': { selector: '.page-content', type: 'class' }
+        'screen_menu_class': { type: 'class' }
+
+    derived:
+        screen_menu_class:
+            deps: ['model.screen_menu_position']
+            fn: -> if @model.screen_menu_position == 'side' then 'with-screen-menu' else 'no-screen-menu'
+
+
+    initialize: (options)->
+        this.listenTo( Lanes.Data.Screens.displaying, "change:active", this.onActiveChange )
+        this.listenTo( Lanes.Data.Screens.displaying, "remove",        this.onRemove )
+        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 )
+
+    onRemove: (sv)->
+        sv.view.remove()
+
+    onActiveChange: (screen,active)->
+        view = screen.view
+        view.parent = this
+        unless view.rendered
+            view.render()
+
+        if active
+            @screen.appendChild( view.el )
+        else
+            @screen.removeChild( view.el )