Merge pull request w3c#110 from jeonghee27/non-standard-api

Make some non-standard APIs

Author: Jihye Hong

demo/index.html

@@ -46,7 +46,9 @@
     function polyfilEnableChanged() {
        let polyfilEnableSwitch = document.getElementById('polyfill-enable-switch');
        let polyfilStateDiv = document.getElementById('polyfill-state');
-       window.spatnavPolyfillOff = !polyfilEnableSwitch.checked;
+
+       // toggle spatialNavigation
+       window.__spatialNavigation__.setKeyMode(window.__spatialNavigation__.getKeyMode()==='NONE'? '':'NONE');
 
       if(polyfilEnableSwitch.checked) {
         polyfilStateDiv.classList.remove('deactivate');

polyfill/spatnav-heuristic.js

@@ -11,7 +11,7 @@
 (function () {
 
   // Indicates global variables for spatnav (starting position)
-  let spatNavManager = {
+  const spatNavManager = {
     startingPosition: null,
     useStandardName: true,
   };
@@ -32,6 +32,7 @@
 
   const ARROW_KEY_CODE = {37: 'left', 38: 'up', 39: 'right', 40: 'down'};
   const TAB_KEY_CODE = 9;
+  let spatialNaviagtionKeyMode = 'ARROW';
 
   function focusNavigationHeuristics() {
 
@@ -53,11 +54,21 @@
     * If arrow key pressed, get the next focusing element and send it to focusing controller
     */
     window.addEventListener('keydown', function(e) {
-      const spatnavPolyfillOff = window.spatnavPolyfillOff || (parent && parent.spatnavPolyfillOff);
-      if (!spatnavPolyfillOff && !e.defaultPrevented) {
+      const currentKeyMode = (parent && parent.__spatialNavigation__.getKeyMode()) || window.__spatialNavigation__.getKeyMode() ;
+      const eventTarget = document.activeElement;
+      const dir = ARROW_KEY_CODE[e.keyCode];
+
+      if (e.keyCode === TAB_KEY_CODE)
+        spatNavManager.startingPosition = null;
+
+      if(!currentKeyMode ||
+          (currentKeyMode === 'NONE') ||
+          ((currentKeyMode === 'SHIFTARROW') && !e.shiftKey) ||
+          ((currentKeyMode === 'ARROW') && e.shiftKey))
+        return;
+
+      if (!e.defaultPrevented) {
         let focusNavigableArrowKey = {'left': true, 'up': true, 'right': true, 'down': true};
-        const eventTarget = document.activeElement;
-        const dir = ARROW_KEY_CODE[e.keyCode];
 
         // Edge case (text input, area) : Don't move focus, just navigate cursor in text area
         if ((eventTarget.nodeName === 'INPUT') || eventTarget.nodeName === 'TEXTAREA')
@@ -70,9 +81,6 @@
           spatNavManager.startingPosition = null;
         }
       }
-
-      if (e.keyCode === TAB_KEY_CODE)
-        spatNavManager.startingPosition = null;
     });
 
     /**
@@ -278,28 +286,24 @@
   }
 
   /**
-  * Find the best candidate among focusable candidates within the container from the element
-  * reference: https://wicg.github.io/spatial-navigation/#js-api
+  * Find the candidates among focusable candidates within the container from the element
   * @function for Element
   * @param {SpatialNavigationDirection} direction
   * @param {sequence<Node>} candidates
   * @param {<Node>} container
   * @returns {<Node>} the best candidate
   **/
-  function spatNavSearch (dir, candidates, container) {
-    // Let container be the nearest ancestor of eventTarget that is a spatnav container.
-    let targetElement = this;
-    let bestCandidate = null;
-
+  function spatNavCandidates (element, dir, candidates, container) {
+    let targetElement = element;
     // If the container is unknown, get the closest container from the element
-    container = container || this.getSpatnavContainer();
+    container = container || targetElement.getSpatnavContainer();
 
     // If the candidates is unknown, find candidates
     // 5-1
-    if(!candidates || candidates.length < 0) {
-      if((isContainer(this) || this.nodeName === 'BODY') && !(this.nodeName === 'INPUT')) {
-        if (this.nodeName === 'IFRAME')
-          targetElement = this.contentDocument.body;
+    if(!candidates || candidates.length <= 0) {
+      if((isContainer(targetElement) || targetElement.nodeName === 'BODY') && !(targetElement.nodeName === 'INPUT')) {
+        if (targetElement.nodeName === 'IFRAME')
+          targetElement = targetElement.contentDocument.body;
 
         candidates = targetElement.focusableAreas();
       }
@@ -310,6 +314,24 @@
     else {
       candidates = filteredCandidates(targetElement, candidates, dir, container);
     }
+    return candidates;
+  }
+
+  /**
+  * Find the best candidate among focusable candidates within the container from the element
+  * reference: https://wicg.github.io/spatial-navigation/#js-api
+  * @function for Element
+  * @param {SpatialNavigationDirection} direction
+  * @param {sequence<Node>} candidates
+  * @param {<Node>} container
+  * @returns {<Node>} the best candidate
+  **/
+  function spatNavSearch (dir, candidates, container) {
+    // Let container be the nearest ancestor of eventTarget that is a spatnav container.
+    const targetElement = this;
+    let bestCandidate = null;
+
+    candidates = spatNavCandidates(targetElement, dir, candidates, container);
 
     // Find the best candidate
     // 5
@@ -556,7 +578,7 @@
   }
 
   function isCSSSpatNavContain(el) {
-    return (readCssVar(el, 'spatial-navigation-contain') == 'contain') ? true : false;
+    return readCssVar(el, 'spatial-navigation-contain') == 'contain';
   }
 
   /**
@@ -984,7 +1006,7 @@
   * @returns {Number} euclidian distance between two elements
   **/
   function getEntryAndExitPoints(dir = 'down', rect1, rect2) {
-    let points = {entryPoint:[0,0], exitPoint:[0,0]};
+    const points = {entryPoint:[0,0], exitPoint:[0,0]};
 
     // Set direction
     switch (dir) {
@@ -1127,4 +1149,169 @@
     focusNavigationHeuristics();
   });
 
-})(window, document);
+
+  function addNonStandardAPI() {
+    function canScroll(container, dir) {
+      return (isScrollable(container, dir) && !isScrollBoundary(container, dir)) ||
+             (!container.parentElement && !isHTMLScrollBoundary(container, dir));
+    }
+
+
+    function findTarget(findCandidate, element, dir) {
+      let eventTarget = element;
+      let bestNextTarget = null;
+
+      // 4
+      if (eventTarget === document || eventTarget === document.documentElement) {
+        eventTarget = document.body || document.documentElement;
+      }
+
+      // 5
+      // At this point, spatNavSearch can be applied.
+      // If startingPoint is either a scroll container or the document,
+      // find the best candidate within startingPoint
+      if ((isContainer(eventTarget) || eventTarget.nodeName === 'BODY') && !(eventTarget.nodeName === 'INPUT')) {
+        if (eventTarget.nodeName === 'IFRAME')
+          eventTarget = eventTarget.contentDocument.body;
+
+        const candidates = eventTarget.focusableAreas();
+
+        // 5-2
+        if (Array.isArray(candidates) && candidates.length > 0) {
+          if(findCandidate) {
+            return spatNavCandidates(eventTarget, dir);
+          } else {
+            bestNextTarget = eventTarget.spatNavSearch(dir);
+            return bestNextTarget;
+          }
+        }
+        if (canScroll(eventTarget, dir)) {
+          if(findCandidate) {
+            return [];
+          } else {
+            bestNextTarget = eventTarget;
+            return bestNextTarget;
+          }
+        }
+      }
+
+      // 6
+      // Let container be the nearest ancestor of eventTarget
+      let container = eventTarget.getSpatnavContainer();
+      let parentContainer = container.getSpatnavContainer();
+
+      // When the container is the viewport of a browsing context
+      if (!parentContainer) {
+        parentContainer = window.document.documentElement;
+        // The container is IFRAME, so parentContainer will be retargeted to the document of the parent window
+        if ( window.location !== window.parent.location ) {
+          parentContainer = window.parent.document.documentElement;
+        }
+      }
+
+      // 7
+      while (parentContainer) {
+        const candidates = filteredCandidates(eventTarget, container.focusableAreas(), dir, container);
+
+        if (Array.isArray(candidates) && candidates.length > 0) {
+          bestNextTarget = eventTarget.spatNavSearch(dir, candidates, container);
+          if (bestNextTarget) {
+            if(findCandidate) {
+              return spatNavCandidates(eventTarget, dir, candidates, container);
+            } else {
+              return bestNextTarget;
+            }
+          }
+        }
+
+        // If there isn't any candidate and the best candidate among candidate:
+        // 1) Scroll or 2) Find candidates of the ancestor container
+        // 8 - if
+        else if (canScroll(container, dir)) {
+          if(findCandidate) {
+            return [];
+          } else {
+            bestNextTarget = eventTarget;
+            return bestNextTarget;
+          }
+        } else if (container === document || container === document.documentElement) {
+          container = window.document.documentElement;
+
+          // The page is in an iframe
+          if ( window.location !== window.parent.location ) {
+
+            // eventTarget needs to be reset because the position of the element in the IFRAME
+            // is unuseful when the focus moves out of the iframe
+            eventTarget = window.frameElement;
+            container = window.parent.document.documentElement;
+          }
+          else if(findCandidate) {
+            return [];
+          } else {
+            return null;
+          }
+
+          parentContainer = container.getSpatnavContainer();
+        }
+        else {
+          // avoiding when spatnav container with tabindex=-1
+          if (isFocusable(container)) {
+            eventTarget = container;
+          }
+
+          container = parentContainer;
+          parentContainer = container.getSpatnavContainer();
+        }
+      }
+
+      if (!parentContainer && container) {
+        // Getting out from the current spatnav container
+        const candidates = filteredCandidates(eventTarget, container.focusableAreas(), dir, container);
+
+        // 9
+        if (Array.isArray(candidates) && candidates.length > 0) {
+          bestNextTarget = eventTarget.spatNavSearch(dir, candidates, container);
+
+          if (bestNextTarget) {
+            if(findCandidate) {
+              return spatNavCandidates(eventTarget, dir, candidates, container);
+            } else {
+              return bestNextTarget;
+            }
+          }
+        }
+      }
+
+      if (canScroll(container, dir)) {
+        bestNextTarget = eventTarget;
+        return bestNextTarget;
+      }
+    }
+
+    window.__spatialNavigation__ = {
+      isContainer: isContainer,
+      findCandidates: findTarget.bind(null, true),
+      findNextTarget: findTarget.bind(null, false),
+      getDistanceFromTarget: (element, candidateElement, dir) => {
+        if ((isContainer(element) || element.nodeName === 'BODY') && !(element.nodeName === 'INPUT')) {
+          if (element.focusableAreas().includes(candidateElement)) {
+            return getInnerDistance(element.getBoundingClientRect(), candidateElement.getBoundingClientRect(), dir);
+          }
+        }
+        return getDistance(element.getBoundingClientRect(), candidateElement.getBoundingClientRect(), dir);
+      },
+
+      setKeyMode : (option) => {
+        if(['SHIFTARROW', 'ARROW', 'NONE'].includes(option)) {
+          spatialNaviagtionKeyMode = option;
+        } else {
+          spatialNaviagtionKeyMode = 'ARROW';
+        }
+      },
+
+      getKeyMode : () => spatialNaviagtionKeyMode
+    };
+  }
+  addNonStandardAPI();
+
+})(window, document);