1 files changed, 66 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/app-route/demo/data-loading-demo/flickr-search-demo.html b/catapult/third_party/polymer/components/app-route/demo/data-loading-demo/flickr-search-demo.html
new file mode 100644
index 00000000..b13fc7bf
--- /dev/null
+++ b/catapult/third_party/polymer/components/app-route/demo/data-loading-demo/flickr-search-demo.html
@@ -0,0 +1,66 @@
+<!--
+@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="../../../polymer/polymer.html">
+<link rel="import" href="../../../iron-pages/iron-pages.html">
+<link rel="import" href="../../app-location.html">
+<link rel="import" href="../../app-route.html">
+<link rel="import" href="./flickr-search-page.html">
+<link rel="import" href="./flickr-image-page.html">
+
+
+<dom-module id="flickr-search-demo">
+  <template>
+    <style>
+      a {
+        text-decoration: none;
+        color: inherit;
+      }
+      a:hover {
+        text-decoration: underline;
+      }
+    </style>
+    <app-location route="{{route}}" use-hash-as-path></app-location>
+    <app-route route="{{route}}" pattern="/:page" data="{{data}}">
+    </app-route>
+    <app-route route="{{route}}" pattern="/search" tail="{{searchRoute}}">
+    </app-route>
+    <app-route route="{{route}}" pattern="/image" tail="{{imageRoute}}">
+    </app-route>
+
+    <h1><a href="#/search/">Public Domain Image Search</a></h1>
+
+    <iron-pages attr-for-selected="id" selected="{{data.page}}"
+                selected-attribute="selected">
+      <flickr-search-page id="search" api-key="{{apiKey}}"
+                          route="{{searchRoute}}">
+      </flickr-search-page>
+      <flickr-image-page id="image" api-key="{{apiKey}}" route="{{imageRoute}}">
+      </flickr-image-page>
+    </iron-pages>
+  </template>
+  <script>
+    Polymer({
+      is: 'flickr-search-demo',
+      properties: {
+        apiKey: {
+          type: String,
+          value: '5358d9830b6865a13d251e5e1acb4c30'
+        }
+      },
+
+      attached: function() {
+        if (this.route.path === '') {
+          this.set('route.path', '/search/');
+        }
+      }
+    });
+  </script>
+</dom-module>