1 files changed, 103 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/app-route/demo/youtube-demo/youtube-search.html b/catapult/third_party/polymer/components/app-route/demo/youtube-demo/youtube-search.html
new file mode 100644
index 00000000..845c8655
--- /dev/null
+++ b/catapult/third_party/polymer/components/app-route/demo/youtube-demo/youtube-search.html
@@ -0,0 +1,103 @@
+<!--
+@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="../../../paper-input/paper-input.html">
+<link rel="import" href="../../../iron-ajax/iron-ajax.html">
+
+<link rel="import" href="../../app-route.html">
+
+<link rel="import" href="route-info.html">
+
+<dom-module id="youtube-search">
+  <template>
+    <style>
+      :host {
+        --primary-color: #fff;
+        --paper-input-container-color: #fff;
+        display: block;
+        position: relative;
+        padding: 1em;
+      }
+
+      route-info {
+        color: #fff;
+      }
+    </style>
+
+    <!-- This app-route consumes the route which was provided by the tail of
+    a app-route in the host of this element -->
+    <app-route route="{{route}}" pattern="/:searchQuery" data="{{data}}">
+    </app-route>
+
+    <paper-input label="Search Youtube" value="{{data.searchQuery}}"></paper-input>
+
+    <route-info route="[[route]]"></route-info>
+
+    <iron-ajax auto
+        id="youtubeSearch"
+        url="https://www.googleapis.com/youtube/v3/search"
+        params="{{params}}"
+        last-response="{{videoData}}">
+    </iron-ajax>
+  </template>
+
+  <script>
+    Polymer({
+      is: 'youtube-search',
+
+      properties: {
+        route: {
+          type: Object,
+          notify: true
+        },
+
+        data: {
+          type: Object
+        },
+
+        category: {
+          type: String,
+          notify: true,
+          observer: '_categoryChanged'
+        },
+
+        params: {
+          type: String,
+          computed: '_setParams(data.searchQuery)'
+        },
+
+        videoData: {
+          type: Object,
+          notify: true
+        }
+      },
+
+      observers: ['_pathChanged(route.path)'],
+
+      _pathChanged: function() {
+        this.async(function() {
+          if (!this.route.path) {
+            this.set('route.path', '/');
+          }
+        });
+      },
+
+      _setParams: function(category) {
+        return {
+          part: 'snippet',
+          q: this.data.searchQuery,
+          key: 'AIzaSyAuecFZ9xJXbGDkQYWBmYrtzOGJD-iDIgI',
+          type: 'video'
+        }
+      },
+
+    });
+  </script>
+</dom-module>