Merge pull request w3c#3 from WICG/master

merge from latest master
frivoal · Sep 18, 2018 · f22bf0b · f22bf0b
2 parents 8796856 + bf547e8
commit f22bf0b
Show file tree

Hide file tree

Showing 37 changed files with 1,357 additions and 905 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+blink_impl
+docs
+dist
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,12 @@
+.DS_Store
+.npmignore
+explainer.md
+implStatus.md
+index.bs
+index.html
+LICENSE.md
+blink_impl/
+docs/
+resources/
+tests/
+
diff --git a/README.md b/README.md
@@ -5,6 +5,7 @@ This is a repository for making the Web excellently embrace the spatial navigati
 * Read the [Explainer](explainer.md)
 * Read the [Spec](https://wicg.github.io/spatial-navigation/)
 * See the [Implementation Status](implStatus.md)
+* Play with the [Polyfill](polyfill/README.md)
 * Try the [Demo](https://wicg.github.io/spatial-navigation/demo/)
 * Give feedback on [issues](https://github.com/WICG/spatial-navigation/issues) or via [email](mailto://[email protected])
 

diff --git a/demo/LG Smart Bold.woff b/demo/LG Smart Bold.woff
diff --git a/demo/LG Smart Regular.woff b/demo/LG Smart Regular.woff
diff --git a/demo/blog/blog-utils.js b/demo/blog/blog-utils.js
@@ -3,11 +3,6 @@
 * Copyright 2018 LG Electronics Inc. All rights reserved.
 *
 */
-window.addEventListener("load", function() {
-  // load SpatNav polyfill
-  focusNavigationHeuristics();
-});
-
 function swapTabContents(evt, tabName) {
   // Declare all variables
   var i, tabcontent, tablink;

diff --git a/demo/blog/index.html b/demo/blog/index.html
@@ -12,7 +12,6 @@
   <link rel="stylesheet" href="blog-style.css">
   <script src="blog-utils.js"></script>
   <script src="../../polyfill/spatnav-heuristic.js"></script>
-  <script src="../../polyfill/spatnav-api.js"></script>
 </head>
 
 <body>
@@ -40,7 +39,7 @@
           <!-- 1st column starts -->
           <div class="gridcolumn mr-4">
             <div class="card mb-4" style="--spatial-navigation-contain: contain;">
-              <img tabindex="0" class="card-img-top" src="images/feed/1.jpg" style="height: 250px; width: 100%; display: block;">
+              <img tabindex="0" class="card-img-top" src="images/feed/1.jpg" style="width: 100%; display: block;">
               <div class="card-body">
                 <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                 <div class="d-flex justify-content-between align-items-center">
@@ -52,7 +51,7 @@
               </div>
             </div>
             <div class="card mb-4" style="--spatial-navigation-contain: contain;">
-              <img tabIndex="0" class="card-img-top" src="images/feed/2.jpg" style="height: 300px; width: 100%; display: block;">
+              <img tabIndex="0" class="card-img-top" src="images/feed/2.jpg" style="width: 100%; display: block;">
               <div class="card-body">
                 <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                 <div class="d-flex justify-content-between align-items-center">
@@ -64,7 +63,7 @@
               </div>
             </div>
             <div class="card mb-4" style="--spatial-navigation-contain: contain;">
-              <img tabIndex="0" class="card-img-top" src="images/feed/9.jpg" style="height: 250px; width: 100%; display: block;">
+              <img tabIndex="0" class="card-img-top" src="images/feed/9.jpg" style="width: 100%; display: block;">
               <div class="card-body">
                 <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                 <div class="d-flex justify-content-between align-items-center">
@@ -81,7 +80,7 @@
           <!-- 2st column starts -->
           <div class="gridcolumn mr-4">
             <div class="card mb-4"  style="--spatial-navigation-contain: contain;">
-              <img tabIndex="0" class="card-img-top" src="images/feed/3.jpg" style="height: 225px; width: 100%; display: block;">
+              <img tabIndex="0" class="card-img-top" src="images/feed/3.jpg" style="width: 100%; display: block;">
               <div class="card-body">
                 <p class="card-text">This is a wider card with supporting text below..</p>
                 <div class="d-flex justify-content-between align-items-center">
@@ -93,7 +92,7 @@
               </div>
             </div>
             <div class="card mb-4" style="--spatial-navigation-contain: contain;">
-              <img tabIndex="0" class="card-img-top" src="images/feed/4.jpg" style="height: 180px; width: 100%; display: block;">
+              <img tabIndex="0" class="card-img-top" src="images/feed/4.jpg" style="width: 100%; display: block;">
               <div class="card-body">
                 <p class="card-text">This is a wider card with supporting text.</p>
                 <div class="d-flex justify-content-between align-items-center">
@@ -105,7 +104,7 @@
               </div>
             </div>
             <div class="card mb-4" style="--spatial-navigation-contain: contain;">
-              <img tabIndex="0" class="card-img-top" src="images/feed/5.jpg" style="height: 225px; width: 100%; display: block;">
+              <img tabIndex="0" class="card-img-top" src="images/feed/5.jpg" style="width: 100%; display: block;">
               <div class="card-body">
                 <p class="card-text">This is a wider card with supporting text below..</p>
                 <div class="d-flex justify-content-between align-items-center">
@@ -117,7 +116,7 @@
               </div>
             </div>
             <div class="card mb-4" style="--spatial-navigation-contain: contain;">
-              <img tabIndex="0" class="card-img-top" src="images/feed/10.jpg" style="height: 400px; width: 100%; display: block;">
+              <img tabIndex="0" class="card-img-top" src="images/feed/10.jpg" style="width: 100%; display: block;">
               <div class="card-body">
                 <p class="card-text">This is a wider card with supporting text below..</p>
                 <div class="d-flex justify-content-between align-items-center">
@@ -134,7 +133,7 @@
           <!-- 3rd column starts -->
           <div class="gridcolumn mr-4">
             <div class="card mb-4" style="--spatial-navigation-contain: contain;">
-              <img tabIndex="0" class="card-img-top" src="images/feed/6.jpg" style="height: 220px; width: 100%; display: block;">
+              <img tabIndex="0" class="card-img-top" src="images/feed/6.jpg" style="width: 100%; display: block;">
               <div class="card-body">
                 <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                 <div class="d-flex justify-content-between align-items-center">
@@ -146,7 +145,7 @@
               </div>
             </div>
             <div class="card mb-4" style="--spatial-navigation-contain: contain;">
-              <img tabIndex="0" class="card-img-top" src="images/feed/7.jpg" style="height: 200px; width: 100%; display: block;">
+              <img tabIndex="0" class="card-img-top" src="images/feed/7.jpg" style="width: 100%; display: block;">
               <div class="card-body">
                 <p class="card-text">This is a wider card with supporting text below..</p>
                 <div class="d-flex justify-content-between align-items-center">
@@ -158,7 +157,7 @@
               </div>
             </div>
             <div class="card mb-4" style="--spatial-navigation-contain: contain;">
-              <img tabIndex="0" class="card-img-top" src="images/feed/8.jpg" style="height: 220px; width: 100%; display: block;">
+              <img tabIndex="0" class="card-img-top" src="images/feed/8.jpg" style="width: 100%; display: block;">
               <div class="card-body">
                 <p class="card-text">This is a wider card with supporting text below..</p>
                 <div class="d-flex justify-content-between align-items-center">
@@ -170,7 +169,7 @@
               </div>
             </div>
             <div class="card mb-4" style="--spatial-navigation-contain: contain;">
-              <img tabIndex="0" class="card-img-top" src="images/feed/11.jpg" style="height: 220px; width: 100%; display: block;">
+              <img tabIndex="0" class="card-img-top" src="images/feed/11.jpg" style="width: 100%; display: block;">
               <div class="card-body">
                 <p class="card-text">This is a wider card with supporting text below..</p>
                 <div class="d-flex justify-content-between align-items-center">
@@ -187,7 +186,7 @@
           <!-- 4th column starts -->
           <div class="gridcolumn mr-4">
             <div class="card mb-4" style="--spatial-navigation-contain: contain;">
-              <img tabIndex="0" class="card-img-top" src="images/feed/12.jpg" style="height: 300px; width: 100%; display: block;">
+              <img tabIndex="0" class="card-img-top" src="images/feed/12.jpg" style="width: 100%; display: block;">
               <div class="card-body">
                 <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                 <div class="d-flex justify-content-between align-items-center">
@@ -199,7 +198,7 @@
               </div>
             </div>
             <div class="card mb-4" style="--spatial-navigation-contain: contain;">
-              <img tabIndex="0" class="card-img-top" src="images/feed/13.jpg" style="height: 200px; width: 100%; display: block;">
+              <img tabIndex="0" class="card-img-top" src="images/feed/13.jpg" style="width: 100%; display: block;">
               <div class="card-body">
                 <p class="card-text">This is a wider card with supporting text below..</p>
                 <div class="d-flex justify-content-between align-items-center">
@@ -211,7 +210,7 @@
               </div>
             </div>
             <div class="card mb-4" style="--spatial-navigation-contain: contain;">
-              <img tabIndex="0" class="card-img-top" src="images/feed/14.jpg" style="height: 240px; width: 100%; display: block;">
+              <img tabIndex="0" class="card-img-top" src="images/feed/14.jpg" style="width: 100%; display: block;">
               <div class="card-body">
                 <p class="card-text">This is a wider card with supporting text below..</p>
                 <div class="d-flex justify-content-between align-items-center">
@@ -230,11 +229,11 @@
     </div>
     <!-- Feed Section end -->
 
-    <!-- Sample Section start -->
+    <!-- Sample Section start  -->
     <div id="sample" class="col-sm-9 tabcontent" style="display: none; --spatial-navigation-contain: contain;">
       <iframe class="sampleFrame" src="../index.html" tabindex="0" frameborder="0" style="overflow-y: scroll;"></iframe>
     </div>
-    <!-- Sample Section start -->
+    <!-- Sample Section end  -->
 
   </div>
 </body>

diff --git a/demo/blog/thumbnail.png b/demo/blog/thumbnail.png
diff --git a/demo/calendar/index.html b/demo/calendar/index.html
@@ -191,5 +191,5 @@
       </div>
     </div>
   </body>
-  <script type="text/javascript" src="spatial-focus-navigation.js"></script>
+  <script src="../../polyfill/spatnav-heuristic.js"></script>
 </html>