Provides an option for finding candidates that contain elements outside of viewport.

Add FocusableAreaOptions parameter for findNextTarget() and findCandidates().
When the current focus is out of viewport because of scrolling, the next candidates may can be elements which is out of screen also.

Author: jeonghee27

polyfill/README.md

@@ -138,7 +138,7 @@ NOTE: The APIs below are non-standard and experimental features of the spatial n
   * Parameter
     * element : Required. 
       - Any element.
-* <code>findCandidates (element, dir)</code> :
+* <code>findCandidates (element, dir, option)</code> :
   * Searchs all valid candidates for a certain direction.
   * Returns a list of elements.
   * Parameter
@@ -147,7 +147,11 @@ NOTE: The APIs below are non-standard and experimental features of the spatial n
     * dir : Required. 
        - The direction to find candidates.
        - It should be one of <code>['up', 'down', 'left', 'right']</code>.
-* <code>findNextTarget (element, dir)</code> :
+    * option : Optional.
+      - Default value is <code>{'mode': 'visible'}</code>.
+      - The FocusableAreasOptions to find candidates.
+      - It should be <code>{'mode': 'visible'}</code> or <code>{ mode: 'all' }</code>.
+* <code>findNextTarget (element, dir, option)</code> :
   * Indicates what is the best element to move the focus for a certain direction.
   * Returns the next target element. 
       - If there is no target for the direction, it returns <code>null</code>. 
@@ -158,6 +162,10 @@ NOTE: The APIs below are non-standard and experimental features of the spatial n
     * dir : Required. 
        - The direction to find candidates.
        - It should be one of <code>['up', 'down', 'left', 'right']</code>.
+    * option : Optional.
+      - Default value is <code>{'mode': 'visible'}</code>.
+      - The FocusableAreasOptions to find candidates.
+      - It should be <code>{'mode': 'visible'}</code> or <code>{ mode: 'all' }</code>.
 * <code>getDistanceFromTarget (element, candidateElement, dir)</code> :
   * Calculates the distance between the currently focused element and a certain candiate element.
   * Parameter

polyfill/spatnav-heuristic.js

@@ -1157,7 +1157,7 @@
     }
 
 
-    function findTarget(findCandidate, element, dir) {
+    function findTarget(findCandidate, element, dir, option) {
       let eventTarget = element;
       let bestNextTarget = null;
 
@@ -1174,14 +1174,14 @@
         if (eventTarget.nodeName === 'IFRAME')
           eventTarget = eventTarget.contentDocument.body;
 
-        const candidates = eventTarget.focusableAreas();
+        const candidates = eventTarget.focusableAreas(option);
 
         // 5-2
         if (Array.isArray(candidates) && candidates.length > 0) {
           if(findCandidate) {
-            return spatNavCandidates(eventTarget, dir);
+            return spatNavCandidates(eventTarget, dir, candidates);
           } else {
-            bestNextTarget = eventTarget.spatialNavigationSearch(dir);
+            bestNextTarget = eventTarget.spatialNavigationSearch(dir, candidates);
             return bestNextTarget;
           }
         }
@@ -1211,13 +1211,13 @@
 
       // 7
       while (parentContainer) {
-        const candidates = filteredCandidates(eventTarget, container.focusableAreas(), dir, container);
+        const candidates = filteredCandidates(eventTarget, container.focusableAreas(option), dir, container);
 
         if (Array.isArray(candidates) && candidates.length > 0) {
           bestNextTarget = eventTarget.spatialNavigationSearch(dir, candidates, container);
           if (bestNextTarget) {
             if(findCandidate) {
-              return spatNavCandidates(eventTarget, dir, candidates, container);
+              return candidates;
             } else {
               return bestNextTarget;
             }
@@ -1266,15 +1266,15 @@
 
       if (!parentContainer && container) {
         // Getting out from the current spatnav container
-        const candidates = filteredCandidates(eventTarget, container.focusableAreas(), dir, container);
+        const candidates = filteredCandidates(eventTarget, container.focusableAreas(option), dir, container);
 
         // 9
         if (Array.isArray(candidates) && candidates.length > 0) {
           bestNextTarget = eventTarget.spatialNavigationSearch(dir, candidates, container);
 
           if (bestNextTarget) {
             if(findCandidate) {
-              return spatNavCandidates(eventTarget, dir, candidates, container);
+              return candidates;
             } else {
               return bestNextTarget;
             }