| OLD | NEW | 
|---|
| (Empty) |  | 
|  | 1 <!doctype html> | 
|  | 2 <!-- | 
|  | 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 
|  | 4 This code may only be used under the BSD style license found at http://polymer.g
    ithub.io/LICENSE.txt | 
|  | 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | 
|  | 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
    BUTORS.txt | 
|  | 7 Code distributed by Google as part of the polymer project is also | 
|  | 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
    TS.txt | 
|  | 9 --> | 
|  | 10 <html> | 
|  | 11 <head> | 
|  | 12 | 
|  | 13   <title>iron-ajax</title> | 
|  | 14 | 
|  | 15   <script src="../../webcomponentsjs/webcomponents-lite.js"></script> | 
|  | 16   <link rel="import" href="../iron-ajax.html"> | 
|  | 17   <link rel="import" href="../../iron-image/iron-image.html"> | 
|  | 18   <link rel="import" href="../../paper-styles/demo-pages.html"> | 
|  | 19   <style> | 
|  | 20     iron-image { | 
|  | 21       background-color: lightgray; | 
|  | 22       margin: 1em; | 
|  | 23     } | 
|  | 24     .horizontal-section { | 
|  | 25       max-width: 300px; | 
|  | 26       margin-bottom: 24px; | 
|  | 27     } | 
|  | 28   </style> | 
|  | 29 </head> | 
|  | 30 <body unresolved> | 
|  | 31   <h1>Video Feed</h1> | 
|  | 32   <div class="horizontal-section-container"> | 
|  | 33     <template is="dom-bind" id="app"> | 
|  | 34       <iron-ajax auto | 
|  | 35           url="https://www.googleapis.com/youtube/v3/search" | 
|  | 36           params='{"part":"snippet", "q":"polymer", "key": "AIzaSyAuecFZ9xJXbGDk
    QYWBmYrtzOGJD-iDIgI", "type": "video"}' | 
|  | 37           handle-as="json" | 
|  | 38           last-response="{{ajaxResponse}}"></iron-ajax> | 
|  | 39 | 
|  | 40         <template is="dom-repeat" items="[[ajaxResponse.items]]"> | 
|  | 41           <div class="horizontal-section"> | 
|  | 42             <h2><a href="[[url(item.id.videoId)]]" target="_blank">[[item.snippe
    t.title]]</a></h2> | 
|  | 43             <iron-image src="[[item.snippet.thumbnails.high.url]]" width="256" h
    eight="256" sizing="cover" preload fade></iron-image> | 
|  | 44             <p>[[item.snippet.description]]</p> | 
|  | 45           </div> | 
|  | 46         </template> | 
|  | 47 | 
|  | 48     </template> | 
|  | 49   </div> | 
|  | 50 | 
|  | 51   <script> | 
|  | 52     var app = document.querySelector('#app'); | 
|  | 53 | 
|  | 54     app.url = function (videoId) { | 
|  | 55       return 'https://www.youtube.com/watch?v=' + videoId; | 
|  | 56     }; | 
|  | 57   </script> | 
|  | 58 </body> | 
|  | 59 </html> | 
| OLD | NEW | 
|---|