WebCompDev / COMPONENTS

Blame view

bower_components/iron-ajax/demo/index.html 2 KB
Edit Raw Normal View History
73bcce88   luigser   COMPONENTS 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
  <!doctype html>
  <!--
  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="../iron-ajax.html">
    <link rel="import" href="../../iron-image/iron-image.html">
a1a3bc73   Luigi Serra   graphs updates 
18
 
    <link rel="import" href="../../paper-styles/demo-pages.html">
73bcce88   luigser   COMPONENTS 
19
20
21
22
23
 
    <style>
      iron-image {
        background-color: lightgray;
        margin: 1em;
      }
a1a3bc73   Luigi Serra   graphs updates 
24
25
26
27
 
      .horizontal-section {
        max-width: 300px;
        margin-bottom: 24px;
      }
73bcce88   luigser   COMPONENTS 
28
29
 
    </style>
  </head>
a1a3bc73   Luigi Serra   graphs updates 
30
31
32
33
34
35
36
37
38
 
  <body unresolved>
    <h1>Video Feed</h1>
    <div class="horizontal-section-container">
      <template is="dom-bind" id="app">
        <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>
73bcce88   luigser   COMPONENTS 
39
a1a3bc73   Luigi Serra   graphs updates 
40
41
42
43
44
45
46
 
          <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>
73bcce88   luigser   COMPONENTS 
47
a1a3bc73   Luigi Serra   graphs updates 
48
49
 
      </template>
    </div>
73bcce88   luigser   COMPONENTS 
50
51
52
53
54
55
56
57
58
59
 
  
    <script>
      var app = document.querySelector('#app');
  
      app.url = function (videoId) {
        return 'https://www.youtube.com/watch?v=' + videoId;
      };
    </script>
  </body>
  </html>