fleetio_spark 0.2.17 → 0.2.18

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

@@ -1,12 +1,12 @@
-var toolbox  = require( 'compose-toolbox' ),
-    Event    = toolbox.event,
-    modal    = require( './_modal' ),
-    stack    = require( './_stack' )
+var toolbox  = require('@spark-engine/toolbox'),
+    Event    = require('@spark-engine/event'),
+    modal    = require('./_modal'),
+    stack    = require('./_stack')
 
 // Focus on search when `/` key is pressed
-Event.keyOn( '/', function(event){ 
+Event.keyOn('/', function(event){ 
   var q = document.querySelector('[name=q]')
-  if ( q && !toolbox.getClosest(event.target, '[contenteditable=true]') ) {
+  if (q && !event.target.closest('[contenteditable=true]')) {
     event.preventDefault()
     q.focus()
   }
@@ -15,62 +15,62 @@ Event.keyOn( '/', function(event){
 function setup() {
   var q           = document.querySelector('[name=q]'),
       filter      = document.querySelector('#search_model')
-      searchPanel = document.querySelector( '.search-panel' ),
-      searchStack = stack.get( '#search-stack' ),
-      searchModal = modal.get( '#search-results' )
+      searchPanel = document.querySelector('.search-panel'),
+      searchStack = stack.get('#search-stack'),
+      searchModal = modal.get('#search-results')
 
-  if ( !searchModal || !q ) return
+  if (!searchModal || !q) return
 
   // 1. Focus on query input when characters are typed
   // 2. Clear input when escape is pressed
-  function keyWatcher ( event ) {
+  function keyWatcher (event) {
     var focusEl = document.activeElement
 
     // If a letter, number, or backspace is pressed, focus on search input
-    if ( ( event.key.length === 1 || Event.key.isPressed("backspace") ) && focusEl != q && !focusEl.tagName.match(/select|button/i) ) {
+    if ((event.key.length === 1 || Event.key.isPressed("backspace")) && focusEl != q && !focusEl.tagName.match(/select|button/i)) {
       q.focus()
 
     // Restore default search input behavior
     // When foucsed, esc clears input
-    } else if ( focusEl == q && Event.key.isPressed( "esc" ) ) {
+    } else if (focusEl == q && Event.key.isPressed("esc")) {
       q.value = ''
-      Event.fire( q, 'input' )
+      Event.fire(q, 'input')
     }
   }
 
   // Scroll all navs back to top
   function resetScroll () {
-    toolbox.each( searchStack.root.querySelectorAll( 'nav' ), function (nav) {
+    toolbox.each(searchStack.root.querySelectorAll('nav'), function (nav) {
       nav.scrollTop = 0
     })
   }
   
   // Show first panel stack when query is cleared
-  Event.on( q, 'input', function ( event ) {
-    if ( q.value == '' ) {
-      searchStack.show( 0 )
+  Event.on(q, 'input', function (event) {
+    if (q.value == '') {
+      searchStack.show(0)
       searchPanel.classList.remove('search-in-progress')
       resetScroll()
     }
   })
 
-  searchModal.on( 'open', function() {
-    Event.on( document, 'keydown', keyWatcher )
+  searchModal.on('open', function() {
+    Event.on(document, 'keydown', keyWatcher)
   })
 
   // Reset stack when modal is closed and query is clear
-  searchModal.on( 'close', function() {
+  searchModal.on('close', function() {
     // Restore state of search panel
-    if ( q.value == '' ) {
+    if (q.value == '') {
       searchStack.reset()
       resetScroll()
     }
 
     searchPanel.classList.remove('search-in-progress')
 
-    Event.off( document, 'keydown', keyWatcher )
+    Event.off(document, 'keydown', keyWatcher)
   })
 }
 
 // Reset search results panel when query is cleared
-Event.ready( setup )
+Event.ready(setup)

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

@@ -1,14 +1,14 @@
-var toolbox      = require( 'compose-toolbox' ),
-    Event        = toolbox.event,
+var toolbox      = require('@spark-engine/toolbox'),
+    Event        = require('@spark-engine/event'),
     Stacks       = []
 
 var Stack = {
-  new: function( root ) {
+  new: function(root) {
 
-    if ( !isElement( root ) ) root = document.querySelector( 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
+    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
@@ -20,46 +20,46 @@ var Stack = {
       focus: [],
       current: null,
 
-      add: function ( panelEl, name ) {
+      add: function (panelEl, name) {
         panelEl.dataset.stackIndex = stack.panels.length
 
-        hideEl( panelEl )
+        hideEl(panelEl)
 
-        stack.panels.push( panelEl )
+        stack.panels.push(panelEl)
       },
 
       // Reset stack to first panel
       reset: function () {
         // Already reset? We're done.
-        if ( stack.current == 0 ) return
+        if (stack.current == 0) return
 
         // If hidden or first is empty, hide all
-        if ( stack.root.offsetParent == null ) {
+        if (stack.root.offsetParent == null) {
           stack.focus = [] // Clear focus stack
 
           // Hide and reset scroll on all panels
           stack.hidePanels()
 
           // Show first panel
-          if ( isEmpty( stack.panels[0] ) ) {
+          if (isEmpty(stack.panels[0])) {
             stack.current = null
           } else {
             stack.current = 0
           }
-          showEl( stack.panels[0] )
+          showEl(stack.panels[0])
           stack.updateWatchers()
         }
 
         // If not hidden, dismiss current panel and reset to first panel
-        else stack.show( 0 )
+        else stack.show(0)
       },
 
       // Show a specific panel, hiding all others
-      show: function ( name ) {
-        var panel = stack.findPanel( name )
-        if ( !panel ) return // This panel doesn't exist
+      show: function (name) {
+        var panel = stack.findPanel(name)
+        if (!panel) return // This panel doesn't exist
 
-        if ( isEmpty( panel ) ) {
+        if (isEmpty(panel)) {
           stack.current = null
           stack.hidePanels()
           stack.updateWatchers()
@@ -67,81 +67,81 @@ var Stack = {
         }
 
         var current = stack.currentPanel()
-        if ( !current ) return stack.enter( panel ) // the stack isn't currently active
+        if (!current) return stack.enter(panel) // the stack isn't currently active
 
         // If a panel isn't the current panel
-        if ( panel != current ) {
+        if (panel != current) {
           
           // Dismiss it with the callback load in the next panel
-          return stack.dismiss( stack.direction( panel ), function() { 
-            stack.enter( panel )
+          return stack.dismiss(stack.direction(panel), function() { 
+            stack.enter(panel)
           })
 
         }
       },
 
-      enter: function ( el ) {
-        var direction = stack.direction( el )
+      enter: function (el) {
+        var direction = stack.direction(el)
         el.dataset.direction = direction
-        stack.current = Number( el.dataset.stackIndex )
+        stack.current = Number(el.dataset.stackIndex)
 
-        Event.afterAnimation( el, function() {
+        Event.afterAnimation(el, function() {
           el.dataset.direction = ''
-          el.classList.remove( 'enter' )
-        }, 50 )
+          el.classList.remove('enter')
+        }, 50)
 
-        el.classList.add( 'enter' )
-        showEl( el )
+        el.classList.add('enter')
+        showEl(el)
 
         stack.updateWatchers()
 
-        if ( direction == 'forward' ) {
+        if (direction == 'forward') {
           // If the previous focused element was in the stack
-          //if ( toolbox.childOf( stack.lastFocus(), stack.root ) ) {
+          //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()
+            //var firstItem = el.querySelector('input:not([hidden]), textarea, select, a[tabindex]')
+            //if (firstItem) firstItem.focus()
           
           //}
 
         } 
 
         // When reversing, focus on the previously focused element
-        if ( direction == 'reverse' && stack.focus.length > 0 ) {
+        if (direction == 'reverse' && stack.focus.length > 0) {
           stack.focus.pop().focus()
         }      
       },
 
-      dismiss: function ( direction, callback ) {
+      dismiss: function (direction, callback) {
 
         var el = stack.currentPanel()
 
-        if ( direction == 'forward' )
-          stack.focus.push( document.activeElement )
+        if (direction == 'forward')
+          stack.focus.push(document.activeElement)
 
-        el.classList.remove( 'enter' )
-        el.classList.add( 'exit' )
+        el.classList.remove('enter')
+        el.classList.add('exit')
         el.dataset.direction = direction
 
-        Event.afterAnimation( el, function() {
+        Event.afterAnimation(el, function() {
           // Ensure panel is scrolled to top
-          if ( direction == 'reverse' ) el.scrollTop = 0
+          if (direction == 'reverse') el.scrollTop = 0
 
-          hideEl( el )
-          el.classList.remove( 'exit' )
+          hideEl(el)
+          el.classList.remove('exit')
           el.dataset.direction = ''
 
-          if ( typeof callback === 'function' ) callback()
+          if (typeof callback === 'function') callback()
 
-        }, 50 )
+        }, 50)
 
       },
 
       hidePanels: function() {
-        stack.panels.forEach( function( el ) { 
+        stack.panels.forEach(function(el) { 
           el.scrollTop = 0
-          hideEl( el )
+          hideEl(el)
         })
       },
 
@@ -150,130 +150,130 @@ var Stack = {
       },
 
       // Find a panel by name or index
-      findPanel: function ( name ) {
-        if ( isElement( name ) ) 
+      findPanel: function (name) {
+        if (isElement(name)) 
           return name 
         else 
-          return root.querySelector( '[data-stack="'+name+'"], [data-stack-index="'+name+'"]' )
+          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 ] )
+        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 ] )
+        stack.show(stack.panels[ stack.current + 1 ])
       },
 
-      direction: function( panel ) {
-        var index = stack.panelIndex( panel )
+      direction: function(panel) {
+        var index = stack.panelIndex(panel)
 
-        if ( index == stack.current || stack.current == null ) return 'none'
-        else return ( stack.current < index ) ? 'forward' : 'reverse'
+        if (index == stack.current || stack.current == null) return 'none'
+        else return (stack.current < index) ? 'forward' : 'reverse'
        
       },
 
-      currentPanel: function ( name ) {
-        if ( typeof stack.current == 'undefined' ) return
+      currentPanel: function (name) {
+        if (typeof stack.current == 'undefined') return
 
-        if ( name ) {
-          return stack.panels[ stack.current ] == stack.findPanel( name )
+        if (name) {
+          return stack.panels[ stack.current ] == stack.findPanel(name)
         }
         return stack.panels[ stack.current ]
       },
 
-      panelIndex: function ( panel ) {
-        return Number( panel.dataset.stackIndex )
+      panelIndex: function (panel) {
+        return Number(panel.dataset.stackIndex)
       },
 
       updateWatchers: function () {
-        toolbox.each( stack.watchers, function( el ) {
-          if ( stack.current == null )
-            el.removeAttribute( 'data-active-stack' )
+        toolbox.each(stack.watchers, function(el) {
+          if (stack.current == null)
+            el.removeAttribute('data-active-stack')
           else
             el.dataset.activeStack = stack.currentPanel().dataset.stack || stack.currentPanel().dataset.stackIndex
         })
       }
     }
 
-    toolbox.each( root.children, stack.add )
+    toolbox.each(root.children, stack.add)
 
-    if ( root.id ) stack.watchers = document.querySelectorAll('[data-watch-stack="#'+root.id+'"]')
+    if (root.id) stack.watchers = document.querySelectorAll('[data-watch-stack="#'+root.id+'"]')
 
     // Only show the first panel if it has content.
     // If it doesn't, assume async and manual panel showing.
-    if ( !isEmpty( stack.panels[0] ) ) stack.show(0)
+    if (!isEmpty(stack.panels[0])) stack.show(0)
 
     // Add a queryable stack id
     root.dataset.stackId = Stacks.length
 
-    Stacks.push( stack )
+    Stacks.push(stack)
 
     return stack
   }
 }
 
-function showEl ( el ) {
-  el.setAttribute( 'aria-hidden', false )
+function showEl (el) {
+  el.setAttribute('aria-hidden', false)
 }
 
-function isEmpty ( el ) {
+function isEmpty (el) {
   return el.childElementCount == 0
 }
 
-function hideEl ( el ) {
-  el.setAttribute( 'aria-hidden', true )
+function hideEl (el) {
+  el.setAttribute('aria-hidden', true)
 }
 
-function isElement ( item ) {
+function isElement (item) {
   return item.constructor.toString().search(/HTML.+Element/) > -1
 }
 
-function navClick ( event ) {
+function navClick (event) {
   var el = event.currentTarget
   var panel = el.dataset.stackNav
-  var stack = getStack( toolbox.getClosest( el, '[data-stack="root"]' ) )
-  if ( !stack ) return
+  var stack = getStack(el.closest('[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 )
+  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"]' ) )
+function prevPanel (event) {
+  var stack = getStack(event.target.closest('[data-stack="root"]'))
   stack.back()
   event.preventDefault()
 }
 
 function setup () {
-  Event.change( function() {
-    toolbox.each( document.querySelectorAll( '[data-stack="root"]'), Stack.new )
+  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 )
+  Event.on(document, 'click', '[data-stack="root"] [data-stack-nav]', navClick)
 }
 
-function getStack ( search ) {
+function getStack (search) {
 
-  if ( isElement( search ) ) {
-    if ( search.dataset.stackId ) return Stacks[ search.dataset.stackId ]
+  if (isElement(search)) {
+    if (search.dataset.stackId) return Stacks[ search.dataset.stackId ]
   }
 
-  if ( typeof search === 'string' ) {
+  if (typeof search === 'string') {
 
     // Well, let's hope it's a DOM selector
-    var stack = document.querySelector( search )
+    var stack = document.querySelector(search)
 
     // If it is woo hoo
-    if ( stack && stack.dataset.stackId ) {
+    if (stack && stack.dataset.stackId) {
       return Stacks[ stack.dataset.stackId ]
     }
   }