Merge pull request #81 from TimvdLippe/fix-404

Add 404 fallback selection to main iron-pages
Polymer · Oct 11, 2016 · 65a4b0f · 65a4b0f
2 parents c1c3e68 + cf345ba
commit 65a4b0f
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 14 deletions.
diff --git a/src/lazy-resources.html b/src/lazy-resources.html
@@ -24,6 +24,7 @@
 <!-- shop-list -->
 <!-- shop-detail -->
 <link rel="import" href="shop-network-warning.html">
+<link rel="import" href="shop-404-warning.html">
 
 <!-- shop-cart -->
 <link rel="import" href="shop-cart-item.html">

diff --git a/src/shop-404-warning.html b/src/shop-404-warning.html
@@ -0,0 +1,53 @@
+<!--
+@license
+Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
+<link rel="import" href="shop-button.html">
+<link rel="import" href="shop-icons.html">
+
+<dom-module id="shop-404-warning">
+  <template>
+    <style include="shop-button">
+
+      :host {
+        display: block;
+        text-align: center;
+        color: var(--app-secondary-color);
+      }
+
+      iron-icon {
+        display: inline-block;
+        width: 60px;
+        height: 60px;
+      }
+
+      h1 {
+        margin: 50px 0 50px 0;
+        font-weight: 300;
+      }
+
+    </style>
+
+    <div>
+      <iron-icon icon="error"></iron-icon>
+      <h1>Sorry, we couldn't find that page</h1>
+    </div>
+    <shop-button>
+      <a href="/">Go to the home page</a>
+    </shop-button>
+
+  </template>
+  <script>
+    Polymer({
+      is: 'shop-404-warning'
+    });
+  </script>
+</dom-module>
diff --git a/src/shop-app.html b/src/shop-app.html
@@ -300,7 +300,7 @@
       </app-drawer>
     </template>
 
-    <iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible">
+    <iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible" fallback-selection="404">
       <!-- home view -->
       <shop-home name="home" categories="[[categories]]"></shop-home>
       <!-- list view of items in a category -->
@@ -311,6 +311,8 @@
       <shop-cart name="cart" cart="[[cart]]" total="[[total]]"></shop-cart>
       <!-- checkout view -->
       <shop-checkout name="checkout" cart="[[cart]]" total="[[total]]" route="{{subroute}}"></shop-checkout>
+
+      <shop-404-warning name="404"></shop-404-warning>
     </iron-pages>
 
     <footer>
@@ -368,7 +370,8 @@
         'clear-cart': '_onClearCart',
         'change-section': '_onChangeSection',
         'announce': '_onAnnounce',
-        'dom-change': '_domChange'
+        'dom-change': '_domChange',
+        'show-invalid-url-warning': '_onFallbackSelectionTriggered'
       },
 
       created: function() {
@@ -403,11 +406,12 @@
             this._pageLoaded(Boolean(oldPage));
           // other routes are lazy loaded
           } else {
+            // When a load failed, it triggered a 404 which means we need to
+            // eagerly load the 404 page definition
+            var cb = this._pageLoaded.bind(this, Boolean(oldPage));
             this.importHref(
               this.resolveUrl('shop-' + page + '.html'),
-              function() {
-                this._pageLoaded(Boolean(oldPage));
-              }, null, true);
+              cb, cb, true);
           }
         }
       },
@@ -532,6 +536,10 @@
         }
       },
 
+      _onFallbackSelectionTriggered: function() {
+        this.page = '404';
+      },
+
       _computeShouldShowTabs: function(page, smallScreen) {
         return (page === 'home' || page === 'list' || page === 'detail') && !smallScreen;
       },

diff --git a/src/shop-category-data.html b/src/shop-category-data.html
@@ -83,7 +83,7 @@
             return c;
           }
         }
-        return null;
+        this.fire('show-invalid-url-warning');
       },
 
       _computeCategory: function(categoryName) {
@@ -101,6 +101,7 @@
             return item;
           }
         }
+        this.fire('show-invalid-url-warning');
       },
 
       _fetchItems: function(category, attempts) {

diff --git a/src/shop-icons.html b/src/shop-icons.html
@@ -18,5 +18,6 @@
 <g id="shopping-cart"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></g>
 <g id="close"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></g>
 <g id="perm-scan-wifi"><path d="M12 3C6.95 3 3.15 4.85 0 7.23L12 22 24 7.25C20.85 4.87 17.05 3 12 3zm1 13h-2v-6h2v6zm-2-8V6h2v2h-2z"/></g>
+<g id="error"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></g>
 </defs></svg>
 </iron-iconset-svg>
diff --git a/src/shop-list.html b/src/shop-list.html
@@ -56,7 +56,7 @@
         flex-basis: 33%;
         max-width: 33%;
       }
-      
+
       .grid a {
         display:block;
         text-decoration: none;
@@ -110,7 +110,7 @@ <h1>[[category.title]]</h1>
         </li>
       </template>
     </ul>
-    
+
     <!--
       shop-network-warning shows a warning message when the items can't be rendered due
       to network conditions.
@@ -172,13 +172,17 @@ <h1>[[category.title]]</h1>
 
       _categoryChanged: function(category, visible) {
         if (visible) {
-          this.debounce('change-section', function() {
-            // Notify the category and the page's title
-            this.fire('change-section', {
-              category: category.name,
-              title: category.title
+          if (!category) {
+            this.fire('show-invalid-url-warning');
+          } else {
+            this.debounce('change-section', function() {
+              // Notify the category and the page's title
+              this.fire('change-section', {
+                category: category.name,
+                title: category.title
+              });
             });
-          });
+          }
         }
       },