fleetio_spark 0.1.0

data/app/assets/javascripts/spark/_search.js

@@ -0,0 +1,79 @@
+var toolbox  = require( 'compose-toolbox' ),
+    Event    = toolbox.event,
+    modal    = require( './_modal' ),
+    stack    = require( './_stack' )
+
+// Focus on search when `/` key is pressed
+Event.keyOn( '/', function(event){ 
+  var q = document.querySelector('[name=q]')
+  if ( q ) {
+    event.preventDefault()
+    q.focus()
+  }
+})
+
+// Reset search results panel when query is cleared
+Event.ready( function() {
+  var searchStack = stack.get( '#search-stack' )
+  var q = document.querySelector('[name=q]')
+  var searchModal = modal.get( '#search-results' )
+
+  if ( !searchModal || !q ) return
+
+  function keyWatcher ( event ) {
+    var focusEl = document.activeElement
+
+    // If a letter, number, or backspace is pressed focus on search input
+    if ( focusEl != q && event.key.length === 1 || Event.key.isPressed("backspace") ) {
+      q.focus()
+
+    // Restore default search input behavior
+    // When foucsed, esc clears input
+    } else if ( focusEl == q && Event.key.isPressed( "esc" ) ) {
+      q.value = ''
+    }
+  }
+
+  // Scroll all navs back to top
+  function resetScroll () {
+    toolbox.each( searchStack.root.querySelectorAll( 'nav' ), function (nav) {
+      nav.scrollTop = 0
+    })
+  }
+
+  searchModal.on( 'open', function() {
+    Event.on( document, 'keydown', keyWatcher )
+  })
+
+  // Reset stack when modal is closed and query is clear
+  searchModal.on( 'close', function() {
+    // Restore state of search panel
+    if ( document.querySelector( 'input[name=q]' ).value == '' ) {
+      searchStack.reset()
+      resetScroll()
+    }
+
+    Event.off( document, 'keydown', keyWatcher )
+  })
+
+  // Show first panel stack when query is cleared
+  Event.on( document, 'input', '[name=q]', Event.debounce( function ( event ) {
+    if ( event.currentTarget.value == '' ) {
+      searchStack.show( 0 )
+      resetScroll()
+    }
+  }, 50 ))
+
+  // Wire up clear search input behavior
+  Event.on( document, 'click', '.clear-search', function( event ) {
+    var button = event.currentTarget
+    event.preventDefault()
+    event.stopImmediatePropagation()
+
+    var searchInput = toolbox.getClosest( button, 'label' ).querySelector( '.input-container input' )
+    searchInput.value = ''
+    Event.fire( searchInput, 'input' )
+
+    searchInput.focus()
+  }, { useCapture: true })
+})

data/app/assets/javascripts/spark/_sidebar.js

@@ -0,0 +1,13 @@
+var toolbox     = require( 'compose-toolbox' ),
+    cookie      = require( './_cookie' ),
+    Event       = toolbox.event
+
+Event.ready( function() {
+  Event.on( document, 'click', '.sidebar-nav-toggle', function( event ) {
+    document.body.classList.toggle( 'hide-sidebar' )
+
+    var visible = !document.body.classList.contains( 'hide-sidebar' )
+    cookie.update( 'sidebar-nav', { sidebar: visible } )
+  })
+  if ( cookie.get( 'sidebar-nav' ).sidebar === false ) document.body.classList.add( 'hide-sidebar' )
+})

data/app/assets/javascripts/spark/_stack.js

@@ -0,0 +1,248 @@
+var toolbox      = require( 'compose-toolbox' ),
+    Event        = toolbox.event,
+    Stacks       = []
+
+var Stack = {
+  new: function( root ) {
+
+    if ( !isElement( root ) ) root = document.querySelector( root )
+
+    // Don't add a new stack if no element found or if stack already exists
+    if ( !isElement( root ) || root.dataset.stackId ) return
+
+    // Set up stack by searching DOM node under it.
+    // The first child found will be set up as a default
+    // After that each child will be added as a stack push
+
+    var stack = {
+      root: root,
+      current: 0,
+      panels: [],
+      focus: [],
+
+      add: function ( panelEl, name ) {
+        panelEl.dataset.stackIndex = stack.panels.length
+
+        // Hide all panels but the first panel
+        if ( stack.panels.length == 0 ) { 
+          showEl( panelEl )
+        } else { 
+          hideEl( panelEl )
+        }
+
+        stack.panels.push( panelEl )
+      },
+
+      // Reset stack to first panel
+      reset: function () {
+
+        // Already reset? We're done.
+        if ( stack.current == 0 ) return
+
+        // If hidden, manually reset all
+        if ( stack.root.offsetParent == null ) {
+          stack.focus = [] // Clear focus stack
+
+          // Hide and reset scroll on all panels
+          stack.panels.forEach( function( el ) { 
+            el.scrollTop = 0
+            hideEl( el )
+          })
+
+          // Show first panel
+          stack.current = 0
+          showEl( stack.panels[0] )
+        }
+
+        // If not hidden, dismiss current panel and reset to first panel
+        else stack.show( 0 )
+      },
+
+      // Show a specific panel, hiding all others
+      show: function ( name ) {
+        var panel = stack.findPanel( name )
+
+        // If a panel isn't the current panel
+        // dismiss it before going to the requested panel
+        if ( panel && panel != stack.currentPanel() ) {
+          
+          // Dismiss the current panel and with the callback load in the next panel
+          return stack.dismiss( stack.direction( panel ), function() { 
+            stack.enter( panel )
+          })
+
+        }
+      },
+
+      enter: function ( el ) {
+        var direction = stack.direction( el )
+        el.dataset.direction = direction
+        stack.current = Number( el.dataset.stackIndex )
+
+        Event.afterAnimation( el, function() {
+          el.dataset.direction = ''
+          el.classList.remove( 'enter' )
+        }, 50 )
+
+        el.classList.add( 'enter' )
+        showEl( el )
+
+        if ( direction == 'forward' ) {
+          // If the previous focused element was in the stack
+          //if ( toolbox.childOf( stack.lastFocus(), stack.root ) ) {
+
+            // focus on the first input
+            //var firstItem = el.querySelector( 'input:not([hidden]), textarea, select, a[tabindex]' )
+            //if ( firstItem ) firstItem.focus()
+          
+          //}
+
+        // Focus on the previous focused element
+        } else if ( direction == 'reverse' && stack.focus.length > 0 ) {
+          stack.focus.pop().focus()
+        }      
+      },
+
+      dismiss: function ( direction, callback ) {
+
+        var el = stack.currentPanel()
+
+        if ( direction == 'forward' )
+          stack.focus.push( document.activeElement )
+
+        el.classList.remove( 'enter' )
+        el.classList.add( 'exit' )
+        el.dataset.direction = direction
+
+        Event.afterAnimation( el, function() {
+          // Ensure panel is scrolled to top
+          if ( direction == 'reverse' ) el.scrollTop = 0
+
+          hideEl( el )
+          el.classList.remove( 'exit' )
+          el.dataset.direction = ''
+
+          if ( typeof callback === 'function' ) callback()
+
+        }, 50 )
+
+      },
+
+      lastFocus: function() {
+        return stack.focus[ stack.focus.length -1 ] 
+      },
+
+      // Find a panel by name or index
+      findPanel: function ( name ) {
+        if ( isElement( name ) ) 
+          return name 
+        else 
+          return root.querySelector( '[data-stack="'+name+'"], [data-stack-index="'+name+'"]' )
+      },
+
+      // Walk backwards in the stack, showing the panel previous to the current panel
+      back: function () {
+        stack.show( stack.panels[ stack.current - 1 ] )
+      },
+
+      // add aria-hidden=false to the first hidden element
+      next: function () {
+        stack.show( stack.panels[ stack.current + 1 ] )
+      },
+
+      direction: function( panel ) {
+        var index = stack.panelIndex( panel )
+
+        if ( index == stack.current ) return 'none'
+        else return ( stack.current < index ) ? 'forward' : 'reverse'
+       
+      },
+
+      currentPanel: function ( name ) {
+        if ( name ) {
+          return stack.panels[ stack.current ] == stack.findPanel( name )
+        }
+        return stack.panels[ stack.current ]
+      },
+
+      panelIndex: function ( panel ) {
+        return Number( panel.dataset.stackIndex )
+      }
+    }
+
+    // Add a queryable stack id
+    root.dataset.stackId = Stacks.length
+
+    Stacks.push( stack )
+    toolbox.each( root.children, stack.add )
+
+    return stack
+  }
+}
+
+function showEl ( el ) {
+  el.setAttribute( 'aria-hidden', false )
+}
+
+function hideEl ( el ) {
+  el.setAttribute( 'aria-hidden', true )
+}
+
+function isElement ( item ) {
+  return item.constructor.toString().search(/HTML.+Element/) > -1
+}
+
+function navClick ( event ) {
+  var el = event.currentTarget
+  var panel = el.dataset.stackNav
+  var stack = getStack( toolbox.getClosest( el, '[data-stack="root"]' ) )
+  if ( !stack ) return
+
+  if ( panel == 'next' ) stack.next()
+  else if ( panel == 'back' ) stack.back()
+  else if ( stack.findPanel( panel ) ) stack.show( panel )
+  else return
+
+  //event.preventDefault()
+}
+
+function prevPanel ( event ) {
+  var stack = getStack( toolbox.getClosest( event.target, '[data-stack="root"]' ) )
+  stack.back()
+  event.preventDefault()
+}
+
+function setup () {
+  Event.change( function() {
+    toolbox.each( document.querySelectorAll( '[data-stack="root"]'), Stack.new )
+  })
+
+  // Localise clicks to a stack root
+  // Future: consider expanding this to allow controls to live anywhere and point to a stack
+  Event.on( document, 'click', '[data-stack="root"] [data-stack-nav]', navClick )
+}
+
+function getStack ( search ) {
+
+  if ( isElement( search ) ) {
+    if ( search.dataset.stackId ) return Stacks[ search.dataset.stackId ]
+  }
+
+  if ( typeof search === 'string' ) {
+
+    // Well, let's hope it's a DOM selector
+    var stack = document.querySelector( search )
+
+    // If it is woo hoo
+    if ( stack && stack.dataset.stackId ) {
+      return Stacks[ stack.dataset.stackId ]
+    }
+  }
+}
+
+module.exports = {
+  new: Stack.new,
+  setup: setup,
+  get: getStack,
+  stacks: Stacks
+}

data/app/assets/javascripts/spark/_tree.js

@@ -0,0 +1,68 @@
+// Purpose: Toggles expansion of tree nav and stores cookies to retain state
+//
+// Usage:
+// - Trees must have a [data-tree='tree-key']
+// - Nodes are named by [data-node='node-name']
+//
+// Cookies are stored as tree-key => { node-name: true }
+// node boolean matches aria-expanded state
+//
+
+var toolbox     = require( 'compose-toolbox' ),
+    cookie      = require( './_cookie' ),
+    Event       = toolbox.event
+
+function setCookie ( node ) {
+  if ( node.dataset.node ) {
+    var tree = toolbox.getClosest( node, '[data-tree]' )
+    if ( tree ) {
+      data = {}
+      data[ node.dataset.node ] = node.getAttribute( 'aria-expanded' ) == 'true'
+      cookie.update( tree.dataset.tree, data )
+    }
+  }
+}
+
+function click ( event ) {
+  var target   = event.currentTarget,
+      parent   = target.parentElement,
+      expanded = parent.getAttribute( 'aria-expanded' )
+
+  // Add a classname to indicate that it was manually triggered
+  // This allows for animating interactions, but not other attribute changes
+  parent.classList.add( 'triggered' )
+  parent.setAttribute( 'aria-expanded', expanded != 'true' )
+
+  setCookie( parent )
+}
+
+// Sets tree nav state based off of cookies
+function restoreNav () {
+  toolbox.each( document.querySelectorAll( '[data-tree]' ), function( tree ) {
+    var key = tree.dataset.tree
+    if ( key ) {
+      var data = cookie.get( key )
+
+      Object.keys( data ).forEach( function( node ) {
+        var nodeEl = tree.querySelector( '[data-node='+node+']' )
+        // Use cookies to expand.
+        if ( nodeEl && data[node] == 'true' ) nodeEl.setAttribute( 'aria-expanded', data[node] )
+      })
+    }
+  })
+}
+
+function setup() {
+  Event.ready( function() {
+
+    // The first child of a node is the trigger
+    Event.on( document, 'click', '[aria-expanded] > *:first-child', click )
+
+    // Set states according to cookies
+    //restoreNav()
+  })
+}
+
+module.exports = {
+  setup: setup
+}

data/app/assets/javascripts/spark/shims/_dataset.js

@@ -0,0 +1,241 @@
+/**
+ * Add dataset support to elements
+ * No globals, no overriding prototype with non-standard methods, 
+ *   handles CamelCase properly, attempts to use standard 
+ *   Object.defineProperty() (and Function bind()) methods, 
+ *   falls back to native implementation when existing
+ * Inspired by http://code.eligrey.com/html5/dataset/ 
+ *   (via https://github.com/adalgiso/html5-dataset/blob/master/html5-dataset.js )
+ * Depends on Function.bind and Object.defineProperty/Object.getOwnPropertyDescriptor (shims below)
+ * Licensed under the X11/MIT License
+*/
+
+// Inspired by https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind#Compatibility
+if (!Function.prototype.bind) {
+    Function.prototype.bind = function (oThis) {
+        'use strict';
+        if (typeof this !== "function") {
+            // closest thing possible to the ECMAScript 5 internal IsCallable function
+            throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
+        }
+
+        var aArgs = Array.prototype.slice.call(arguments, 1),
+            fToBind = this,
+            FNOP = function () {},
+            fBound = function () {
+                return fToBind.apply(
+                    this instanceof FNOP && oThis ? this : oThis,
+                   aArgs.concat(Array.prototype.slice.call(arguments))
+               );
+            };
+
+        FNOP.prototype = this.prototype;
+        fBound.prototype = new FNOP();
+
+        return fBound;
+    };
+}
+
+/*
+ * Xccessors Standard: Cross-browser ECMAScript 5 accessors
+ * http://purl.eligrey.com/github/Xccessors
+ * 
+ * 2010-06-21
+ * 
+ * By Eli Grey, http://eligrey.com
+ * 
+ * A shim that partially implements Object.defineProperty,
+ * Object.getOwnPropertyDescriptor, and Object.defineProperties in browsers that have
+ * legacy __(define|lookup)[GS]etter__ support.
+ * 
+ * Licensed under the X11/MIT License
+ *   See LICENSE.md
+*/
+
+// Removed a few JSLint options as Notepad++ JSLint validator complaining and 
+//   made comply with JSLint; also moved 'use strict' inside function
+/*jslint white: true, undef: true, plusplus: true,
+  bitwise: true, regexp: true, newcap: true, maxlen: 90 */
+
+/*! @source http://purl.eligrey.com/github/Xccessors/blob/master/xccessors-standard.js*/
+
+(function () {
+    'use strict';
+    var ObjectProto = Object.prototype,
+    defineGetter = ObjectProto.__defineGetter__,
+    defineSetter = ObjectProto.__defineSetter__,
+    lookupGetter = ObjectProto.__lookupGetter__,
+    lookupSetter = ObjectProto.__lookupSetter__,
+    hasOwnProp = ObjectProto.hasOwnProperty;
+    
+    if (defineGetter && defineSetter && lookupGetter && lookupSetter) {
+
+        if (!Object.defineProperty) {
+            Object.defineProperty = function (obj, prop, descriptor) {
+                if (arguments.length < 3) { // all arguments required
+                    throw new TypeError("Arguments not optional");
+                }
+                
+                prop += ""; // convert prop to string
+
+                if (hasOwnProp.call(descriptor, "value")) {
+                    if (!lookupGetter.call(obj, prop) && !lookupSetter.call(obj, prop)) {
+                        // data property defined and no pre-existing accessors
+                        obj[prop] = descriptor.value;
+                    }
+
+                    if ((hasOwnProp.call(descriptor, "get") ||
+                         hasOwnProp.call(descriptor, "set"))) 
+                    {
+                        // descriptor has a value prop but accessor already exists
+                        throw new TypeError("Cannot specify an accessor and a value");
+                    }
+                }
+
+                // can't switch off these features in ECMAScript 3
+                // so throw a TypeError if any are false
+                if (!(descriptor.writable && descriptor.enumerable && 
+                    descriptor.configurable))
+                {
+                    throw new TypeError(
+                        "This implementation of Object.defineProperty does not support" +
+                        " false for configurable, enumerable, or writable."
+                    );
+                }
+                
+                if (descriptor.get) {
+                    defineGetter.call(obj, prop, descriptor.get);
+                }
+                if (descriptor.set) {
+                    defineSetter.call(obj, prop, descriptor.set);
+                }
+            
+                return obj;
+            };
+        }
+
+        if (!Object.getOwnPropertyDescriptor) {
+            Object.getOwnPropertyDescriptor = function (obj, prop) {
+                if (arguments.length < 2) { // all arguments required
+                    throw new TypeError("Arguments not optional.");
+                }
+                
+                prop += ""; // convert prop to string
+
+                var descriptor = {
+                    configurable: true,
+                    enumerable  : true,
+                    writable    : true
+                },
+                getter = lookupGetter.call(obj, prop),
+                setter = lookupSetter.call(obj, prop);
+
+                if (!hasOwnProp.call(obj, prop)) {
+                    // property doesn't exist or is inherited
+                    return descriptor;
+                }
+                if (!getter && !setter) { // not an accessor so return prop
+                    descriptor.value = obj[prop];
+                    return descriptor;
+                }
+
+                // there is an accessor, remove descriptor.writable;
+                // populate descriptor.get and descriptor.set (IE's behavior)
+                delete descriptor.writable;
+                descriptor.get = descriptor.set = undefined;
+                
+                if (getter) {
+                    descriptor.get = getter;
+                }
+                if (setter) {
+                    descriptor.set = setter;
+                }
+                
+                return descriptor;
+            };
+        }
+
+        if (!Object.defineProperties) {
+            Object.defineProperties = function (obj, props) {
+                var prop;
+                for (prop in props) {
+                    if (hasOwnProp.call(props, prop)) {
+                        Object.defineProperty(obj, prop, props[prop]);
+                    }
+                }
+            };
+        }
+    }
+}());
+
+// Begin dataset code
+
+if (!document.documentElement.dataset && 
+         // FF is empty while IE gives empty object
+        (!Object.getOwnPropertyDescriptor(Element.prototype, 'dataset')  ||
+        !Object.getOwnPropertyDescriptor(Element.prototype, 'dataset').get)
+    ) {
+    var propDescriptor = {
+        enumerable: true,
+        get: function () {
+            'use strict';
+            var i, 
+                that = this,
+                HTML5_DOMStringMap, 
+                attrVal, attrName, propName,
+                attribute,
+                attributes = this.attributes,
+                attsLength = attributes.length,
+                toUpperCase = function (n0) {
+                    return n0.charAt(1).toUpperCase();
+                },
+                getter = function () {
+                    return this;
+                },
+                setter = function (attrName, value) {
+                    return (typeof value !== 'undefined') ? 
+                        this.setAttribute(attrName, value) : 
+                        this.removeAttribute(attrName);
+                };
+            try { // Simulate DOMStringMap w/accessor support
+                // Test setting accessor on normal object
+                ({}).__defineGetter__('test', function () {});
+                HTML5_DOMStringMap = {};
+            }
+            catch (e1) { // Use a DOM object for IE8
+                HTML5_DOMStringMap = document.createElement('div');
+            }
+            for (i = 0; i < attsLength; i++) {
+                attribute = attributes[i];
+                // Fix: This test really should allow any XML Name without 
+                //         colons (and non-uppercase for XHTML)
+                if (attribute && attribute.name && 
+                    (/^data-\w[\w\-]*$/).test(attribute.name)) {
+                    attrVal = attribute.value;
+                    attrName = attribute.name;
+                    // Change to CamelCase
+                    propName = attrName.substr(5).replace(/-./g, toUpperCase);
+                    try {
+                        Object.defineProperty(HTML5_DOMStringMap, propName, {
+                            enumerable: this.enumerable,
+                            get: getter.bind(attrVal || ''),
+                            set: setter.bind(that, attrName)
+                        });
+                    }
+                    catch (e2) { // if accessors are not working
+                        HTML5_DOMStringMap[propName] = attrVal;
+                    }
+                }
+            }
+            return HTML5_DOMStringMap;
+        }
+    };
+    try {
+        // FF enumerates over element's dataset, but not 
+        //   Element.prototype.dataset; IE9 iterates over both
+        Object.defineProperty(Element.prototype, 'dataset', propDescriptor);
+    } catch (e) {
+        propDescriptor.enumerable = false; // IE8 does not allow setting to true
+        Object.defineProperty(Element.prototype, 'dataset', propDescriptor);
+    }
+}