fleetio_spark 0.2.27 → 0.2.28

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fc42c14c4aab7798c8153757249be9c4fface8724b422471b15328148947c462
-  data.tar.gz: 86980573ee2acb25dcb635a107f790b65fed14b13c2703ca5a5931ebf5c52d42
+  metadata.gz: 6ae67716c57e2a7d14b83575192dbb948f5aee51a653a3ec07a79fa54ec1bd54
+  data.tar.gz: b995d27caef6905dc0b8030d16097438ac1883118097f222d57f7a033d715c85
 SHA512:
-  metadata.gz: 26f10ccefbd2422364eea1f1ca80cf81883b20067e3f33a8edae10a824aae1c2fed58a6cb521ceaf77402c50e91f7c2b878394411f8dc4802a8f68e1b80db1f4
-  data.tar.gz: 883b263a816346b45b7ee7b03b04910aed1cdacaccf9ef14e2830e1627391f1ed9b2afe91b6fc7dd01bd7376d221538b4fc60c71129ebf295dd83ee877c04812
+  metadata.gz: b593cd1e85c41b3ee0f4fa67154036c93419cc5e2c4d59fcdbbef22da2220c68738e665c94dd1b261b713b0186e6cd792d5f2970b5c57f3376464c356488cc2d
+  data.tar.gz: 655489cb5b0716f7fb5debc574cb6a0efb816972dbc7e5a3b0b76621d08611c2284a9289fb505594b6200194ecb5d5b7657f1ce02ef3c5520ddc26130e6a1b6a

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

@@ -0,0 +1,74 @@
+var toolbox  = require('@spark-engine/toolbox'),
+    Event    = require('@spark-engine/event')
+
+function navigateMenu(event) {
+  var link,
+      activeEl = document.activeElement
+
+  if(Event.key.isPressed('down')) {
+    if (activeEl.tagName.match(/select|button/i) || activeEl.closest('[aria-hidden="true"]')) { return }
+    // Prevent page scrolling as a result of keypress
+    event.preventDefault()
+    event.stopImmediatePropagation()
+    link = getNextLink()
+
+  } else if(Event.key.isPressed('up')) {
+    // Prevent page scrolling as a result of keypress
+    if (activeEl.tagName.match(/select|button/i)) { return }
+    event.preventDefault()
+    event.stopImmediatePropagation()
+    link = getPreviousLink()
+  } else {
+    link = false
+  }
+
+  // Only focus if there is a next or previous link to move to
+  // At top or bottom of a list there is no "next" or "previous"
+  if (link) link.focus()
+
+}
+
+// Find the next focusable link
+function getNextLink() {
+  var items = links(),
+      pos = items.indexOf(document.activeElement)
+
+  // No active element: return first element
+  if (pos == -1) return items[ 0 ]
+
+  // Last element focused, return nothing (no next element)
+  else if (pos == items.length) return
+
+  // return next focusable link
+  else return items[ pos + 1 ]
+}
+
+// Find the previous focusable link
+function getPreviousLink (el) {
+  var items = links(),
+      pos = items.indexOf(document.activeElement)
+
+  // No previous element to select
+  if (pos == -1 || pos == 0) return
+
+  // return previous focusable link
+  else return items[ pos - 1 ]
+}
+
+// Return all links in current modal
+function links() {
+  var menu = document.activeElement.closest('[role="menu"]')
+  return Array.prototype.filter.call(menu.querySelectorAll('a'), function(a) {
+    return a.offsetParent != null
+  })
+}
+
+function setup () {
+  Event.ready(function() {
+    Event.on(document, 'keydown', 'nav[role="menu"]', navigateMenu)
+  })
+}
+
+module.exports = {
+  setup: setup
+}

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

@@ -12,7 +12,7 @@ var style        = '<style id="modal-toggle-style">body[data-active-modal] * { p
 
 // types of modals
 // Menu - trigger toggles, clicking outside closes
-// Panel - trigger opens, but does not close, clicking outside closes
+// Panel - trigger opens, but does not close, clicking outside (or esc) closes
 // Dialog - trigger opens, clicking outside is ignored, must be closed by clicking a close button or the escape key
 
 
@@ -50,6 +50,7 @@ var Modal = {
     el.dataset.modalId = modal.id
     // Hide modal by default
     el.classList.add('hidden')
+    el.setAttribute('hidden', true)
     el.setAttribute('aria-hidden', true)
     el.setAttribute('aria-modal', true)
 
@@ -78,6 +79,7 @@ var Modal = {
       document.body.classList.add('modal-active')
       document.body.dataset.modal = el.id || ''
 
+      el.removeAttribute('hidden')
       el.classList.remove('hidden')
       el.setAttribute('aria-hidden', false)
 
@@ -118,6 +120,7 @@ var Modal = {
 
       el.classList.remove('modal-is-closing')
       el.classList.add('hidden')
+      el.setAttribute('hidden', true)
       el.setAttribute('aria-hidden', true)
 
       // Set state on modal triggers
@@ -184,12 +187,8 @@ function open (modal) {
 function activeClick (event) {
   var modal = activeModal()
 
-  // Did the click happen in side the modal, or in a modal safe control?
-  var modalClick = event.target.closest('[data-modal-id="'+modal.id+'"]')
-  var panelClick = modal.panel && event.target.closest('[data-for-modal="'+modal.id+'"]')
-
   // Stop the click if it happened outside the modal or panel control
-  if (!modalClick && !panelClick) {
+  if (!isWithinModal(event.target)) {
     event.stopImmediatePropagation()
     event.preventDefault()
 
@@ -197,6 +196,27 @@ function activeClick (event) {
   }
 }
 
+function focused(event) {
+  var modal = activeModal()
+
+  // If a modal panel, close when focus occurs outside.
+  if (document.activeElement && !isWithinModal(document.activeElement)) {
+    event.stopImmediatePropagation()
+    if (modal.panel) modal.close()
+    else event.preventDefault()
+  }
+}
+
+function isWithinModal(el) {
+  var modal = activeModal(),
+      // Did the click happen in side the modal
+      modalClick = el.closest('[data-modal-id="'+modal.id+'"]'),
+      // Or in a modal safe control?
+      panelClick = modal.panel && !!el.closest('[data-for-modal="'+modal.id+'"]')
+
+  return modalClick || panelClick
+}
+
 // Use the stack position to determine the current modal
 function activeModal () {
   return Stack[ Stack.length - 1 ]
@@ -276,7 +296,7 @@ function triggerEvent (event) {
   if (el.tagName == 'INPUT') {
 
     // Don't open when input is focused
-    //if (event.type == 'focusin' && el.value == '') return
+    // if (event.type == 'focusin' && el.value == '') return
 
     // Do not trigger open if input event clears input value
     if (event.type == 'input' && el.value == '') return
@@ -304,11 +324,11 @@ function keyPress (event) {
     return close()
   }
 
-  if (activeModal().modal && Event.key.isPressed("tab") && !Event.key.shift) {
+  if (activeModal() && Event.key.isPressed("tab") && !Event.key.shift) {
     focusNext(event)
   }
 
-  // 
+  /* 
   if (activeModal().panel || activeModal().menu) {
     var link
 
@@ -331,70 +351,20 @@ function keyPress (event) {
     // At top or bottom of a list there is no "next" or "previous"
     if (link) link.focus()
 
-  }
+  }*/
 }
 
 function focusNext(event) {
   var modalEl     = activeModal().el,
-      focusable   = modalEl.querySelectorAll('input:not([type=hidden]), textarea, select, button'),
+      focusable   = modalEl.querySelectorAll('input:not([type=hidden]), textarea, select, button, [tabindex]:not([tabindex="-1"])'),
+      focusable   = Array.prototype.filter.call(focusable, function(el) {
+        return !el.closest('[hidden], [aria-hidden="true"]')
+      }),
       first       = focusable[0],
       last        = focusable[focusable.length - 1],
       focused     = document.activeElement
 
   // If focused on the last focusable element, tab to the first element.
-  if (focused == last && !Event.key.shift) {
-    if (event){ event.preventDefault() }
-    first.focus()
-  }
-
-  if (focused == first && Event.key.shift) {
-    if (event){ event.preventDefault() }
-    last.focus()
-  }
-
-  // Focus on the first element if the focused element is not a child of the modal
-  if (!focused || !toolbox.childOf(focused, modalEl)) {
-    first.focus()
-  }
-}
-
-// Find the next focusable link
-function getNextLink (el) {
-  var items = links()
-  var pos = activePosition()
-
-  // No active element: return first element
-  if (pos == -1) return items[ 0 ]
-
-  // Last element focused, return nothing (no next element)
-  else if (pos == items.length) return
-
-  // return next focusable link
-  else return items[ pos + 1 ]
-}
-
-// Find the previous focusable link
-function getPreviousLink (el) {
-  var items = links()
-  var pos = activePosition()
-
-  // No previous element to select
-  if (pos == -1 || pos == 0) return
-
-  // return previous focusable link
-  else return items[ pos - 1 ]
-}
-
-// Search links in the current modal for an active (focused) element
-function activePosition () {
-  return links().indexOf(document.activeElement)
-}
-
-// Return all links in current modal
-function links () {
-  return toolbox.slice(activeModal().el.querySelectorAll('a')).filter(function(a) {
-    return !a.closest('[aria-hidden="true"]')
-  })
 }
 
 function setup () {
@@ -403,6 +373,9 @@ function setup () {
 
     // Check all body clicks to see if they should be permitted
     Event.on(document, 'click', 'body.modal-active', activeClick, { useCapture: true }) 
+    
+    // Focus outisde of modal (if a panel) should close modal
+    Event.on(document, 'focus', '.modal-active', focused, { useCapture: true })
 
     // Trigger modals on input events (like a search results panel that waits until typing to show)
     Event.on(document, 'input', 'input[data-for-modal], [data-for-modal] input', Event.debounce(triggerEvent, 50, { leading: true }))
@@ -419,7 +392,6 @@ function setup () {
 
 module.exports = {
   new: Modal.new,
-  links: links,
   setup: setup,
   modals: Modals,
   init: init,

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

@@ -12,6 +12,12 @@ Event.keyOn('/', function(event){
   }
 })
 
+function autoClose(event) {
+  if (!document.activeElement.closest('#search_modal')) {
+    modal.get('#search-results').close()
+  }
+}
+
 function setup() {
   var q           = document.querySelector('[name=q]'),
       filter      = document.querySelector('#search_model')
@@ -35,6 +41,10 @@ function setup() {
     } else if (focusEl == q && Event.key.isPressed("esc")) {
       q.value = ''
       Event.fire(q, 'input')
+    } else if (Event.key.isPressed("down")) {
+      if (document.activeElement && document.activeElement.tagName.match(/select|button/i)) { return }
+      var result = searchStack.currentPanel().querySelector('[role=menu] a')
+      if (result) result.focus()
     }
   }
 
@@ -56,6 +66,7 @@ function setup() {
 
   searchModal.on('open', function() {
     Event.on(document, 'keydown', keyWatcher)
+    Event.on(document, 'blur', autoClose)
   })
 
   // Reset stack when modal is closed and query is clear
@@ -69,6 +80,7 @@ function setup() {
     searchPanel.classList.remove('search-in-progress')
 
     Event.off(document, 'keydown', keyWatcher)
+    Event.off(document, 'blur', autoClose)
   })
 }
 

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

@@ -95,17 +95,16 @@ var Stack = {
 
         stack.updateWatchers()
 
-        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()
-          
+        // When going forward remove focus from elements in the previous panel
+        //if (direction == 'forward') {
+          //if (toolbox.childOf(document.activeElement, stack.root)) {
+            //document.activeElement.blur()
+            //if (navigated) {
+              //var navEl = el.querySelector('[data-stack-nav]')
+              //if (navEl) navEl.focus()
+            //}
           //}
-
-        } 
+        //} 
 
         // When reversing, focus on the previously focused element
         if (direction == 'reverse' && stack.focus.length > 0) {
@@ -215,23 +214,25 @@ var Stack = {
   }
 }
 
-function showEl (el) {
+function showEl(el) {
+  el.removeAttribute('hidden')
   el.setAttribute('aria-hidden', false)
 }
 
-function isEmpty (el) {
+function isEmpty(el) {
   return el.childElementCount == 0
 }
 
-function hideEl (el) {
+function hideEl(el) {
   el.setAttribute('aria-hidden', true)
+  el.setAttribute('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(el.closest('[data-stack="root"]'))
@@ -239,10 +240,23 @@ function navClick (event) {
 
   if (panel == 'next') stack.next()
   else if (panel == 'back') stack.back()
-  else if (stack.findPanel(panel)) stack.show(panel)
-  else return
+  else if (stack.findPanel(panel)) {
+    stack.show(panel, true)
+  }
+}
 
-  //event.preventDefault()
+function navKey(event) {
+  var panel = event.currentTarget.closest('[data-stack="root"]').querySelector('[data-stack-index][aria-hidden="false"]')
+  if (!panel) { return }
+
+  if (Event.key.isPressed("left")) {
+    var back = panel.querySelector('[data-stack-nav].nav-back')
+    if (back) Event.fire(back, 'click')
+  }
+  if (Event.key.isPressed("right")) {
+    var next = panel.querySelector('[data-stack-nav].nav-next')
+    if (next) Event.fire(next, 'click')
+  }
 }
 
 function prevPanel (event) {
@@ -258,7 +272,10 @@ function setup () {
 
   // 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.ready(function() {
+    Event.on(document, 'click', '[data-stack="root"] [data-stack-nav]', navClick)
+    Event.on(document, 'keydown', '[data-stack-index]', navKey)
+  })
 }
 
 function getStack (search) {

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

@@ -24,18 +24,27 @@ function setCookie (node) {
 }
 
 function click (event) {
-  var target   = event.currentTarget,
-      parent   = target.parentElement,
-      expanded = parent.getAttribute('aria-expanded')
+  toggleNode(event.currentTarget)
+}
+
+function toggleNode(target) {
+  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')
+  toggleExpansion(parent, expanded != 'true')
+  select(target)
 
   setCookie(parent)
 }
 
+function toggleExpansion(el, expanded) {
+  el.setAttribute('aria-expanded', expanded)
+  setupItemTabIndex(el)
+}
+
 // Sets tree nav state based off of cookies
 function restoreNav () {
   toolbox.each(document.querySelectorAll('[data-tree]'), function(tree) {
@@ -44,22 +53,117 @@ function restoreNav () {
       var data = cookie.get(key)
 
       Object.keys(data).forEach(function(node) {
-        var nodeEl = tree.querySelector('[data-node='+node+']')
+        var nodeEl = tree.querySelector('[data-node='+node+']'),
+            expanded = data[node] == 'true'
         // Use cookies to expand.
-        if (nodeEl && data[node] == 'true') nodeEl.setAttribute('aria-expanded', data[node])
+        if (nodeEl)  {
+          nodeEl.setAttribute('aria-expanded', expanded)
+          toggleExpansion(nodeEl, expanded)
+        }
       })
     }
   })
 }
 
+function navigateTree(event) {
+  var item = document.activeElement
+  if (!item) return
+
+  var tree = item.closest('[role="tree"]')
+  if (!tree) return
+
+  var trigger = item.matches('.tree-trigger')
+
+  if (trigger) {
+    var expanded = item.parentElement.getAttribute('aria-expanded') != 'false'
+
+    if (Event.key.isPressed('space')) {
+      toggleNode(item)
+      event.preventDefault()
+    }
+
+    if (Event.key.isPressed('right')) {
+      event.preventDefault()
+      if (expanded) return select(getNextItem(tree, item))
+      else return toggleNode(item)
+    }
+
+    if (Event.key.isPressed('left')) {
+      event.preventDefault()
+      if (expanded) return toggleNode(item)
+      else return select(getUpwardItem(tree, item))
+    }
+  }
+
+  if (Event.key.isPressed('down')) {
+    event.preventDefault()
+    select(getNextItem(tree, item))
+  }
+
+  if (Event.key.isPressed('left')) {
+    event.preventDefault()
+    select(getUpwardItem(tree, item))
+  }
+
+  else if (Event.key.isPressed('up')) {
+    event.preventDefault()
+    select(getPreviousItem(tree, item))
+  }
+}
+
+function select(el) {
+  if (!el) return
+  el.focus()
+}
+
+function getNextItem(tree, item) {
+  items = getSelectableItems(tree)
+  return items[ items.indexOf(item) + 1]
+}
+
+function getPreviousItem(tree, item) {
+  items = getSelectableItems(tree)
+  return items[ items.indexOf(item) - 1]
+}
+
+function getUpwardItem(tree, item) {
+  var upward = item.parentElement.closest('[aria-expanded]')
+  if (upward) return upward.querySelector('.tree-trigger')
+}
+
+function getSelectableItems(tree) {
+  return Array.prototype.filter.call(tree.querySelectorAll('[tabindex]'), function(el) {
+    return !el.closest('[aria-expanded="false"] [role="group"]')
+  })
+}
+
+// Remove hidden items from the tabindex
+function setupItemTabIndex(tree) {
+  toolbox.each(tree.querySelectorAll('a'), function(el) {
+    if (el.closest('[aria-expanded="false"] [role="group"]')) {
+      el.setAttribute('tabindex', -1)
+    } else {
+      el.setAttribute('tabindex', 0)
+    }
+  })
+}
+
+
 function setup() {
   Event.ready(function() {
 
     // The first child of a node is the trigger
-    Event.on(document, 'click', '[aria-expanded] > *:first-child', click)
+    Event.on(document, 'click', '.tree-trigger', click)
+    Event.on(document, 'keydown', '[role="tree"]', navigateTree)
 
     // Set states according to cookies
-    //restoreNav()
+    // restoreNav()
+  })
+
+  Event.change(function() {
+    toolbox.each(document.querySelectorAll('[role="tree"]'), function(el) {
+      setupItemTabIndex(el)
+    })
   })
 }