| <!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> |
