1 files changed, 87 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/iron-ajax/demo/index.html b/catapult/third_party/polymer/components/iron-ajax/demo/index.html
new file mode 100644
index 00000000..02c37b59
--- /dev/null
+++ b/catapult/third_party/polymer/components/iron-ajax/demo/index.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 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
+-->
+<html>
+<head>
+
+  <title>iron-ajax</title>
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../polymer/polymer.html">
+  <link rel="import" href="../../promise-polyfill/promise-polyfill.html">
+  <link rel="import" href="../iron-ajax.html">
+  <link rel="import" href="../../iron-image/iron-image.html">
+</head>
+<body unresolved>
+  <h1>Video Feed</h1>
+  <dom-module id="iron-ajax-demo">
+    <template>
+      <style>
+        iron-image {
+          background-color: lightgray;
+          margin: 1em;
+        }
+        .horizontal-section-container {
+          display: flex;
+          display: -ms-flexbox;
+          display: -webkit-flex;
+          -ms-flex-pack: center;
+          -webkit-justify-content: center;
+          justify-content: center;
+          -ms-flex-wrap: wrap;
+          -webkit-flex-wrap: wrap;
+          flex-wrap: wrap;
+        }
+        .horizontal-section {
+          background-color: white;
+          padding: 24px;
+          margin-right: 24px;
+          min-width: 200px;
+          box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+                      0 1px 5px 0 rgba(0, 0, 0, 0.12),
+                      0 3px 1px -2px rgba(0, 0, 0, 0.2);
+          max-width: 300px;
+          margin-bottom: 24px;
+        }
+      </style>
+
+      <iron-ajax auto
+          url="https://www.googleapis.com/youtube/v3/search"
+          params='{"part":"snippet", "q":"polymer", "key": "AIzaSyAuecFZ9xJXbGDkQYWBmYrtzOGJD-iDIgI", "type": "video"}'
+          handle-as="json"
+          last-response="{{ajaxResponse}}"></iron-ajax>
+
+      <div class="horizontal-section-container">
+        <template is="dom-repeat" items="[[ajaxResponse.items]]">
+          <div class="horizontal-section">
+            <h2><a href="[[url(item.id.videoId)]]" target="_blank">[[item.snippet.title]]</a></h2>
+            <iron-image src="[[item.snippet.thumbnails.high.url]]" width="256" height="256" sizing="cover" preload fade></iron-image>
+            <p>[[item.snippet.description]]</p>
+          </div>
+        </template>
+      </div>
+    </template>
+
+    <script>
+      window.addEventListener('WebComponentsReady', function() {
+        Polymer({
+          is: 'iron-ajax-demo',
+
+          url: function(videoId) {
+            return 'https://www.youtube.com/watch?v=' + videoId;
+          }
+        });
+      })
+    </script>
+  </dom-module>
+
+  <iron-ajax-demo></iron-ajax-demo>
+</body>
+</html>