1<!--
2@license
3Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9-->
10
11<link rel="import" href="../../../polymer/polymer.html">
12<link rel="import" href="../../../iron-ajax/iron-ajax.html">
13<link rel="import" href="../../../paper-spinner/paper-spinner.html">
14<link rel="import" href="../../app-route.html">
15
16<dom-module id="flickr-image-page">
17  <template>
18    <style>
19      paper-spinner {
20        display: block;
21      }
22      .tags span {
23        display: inline-block;
24        padding-right: 10px;
25        font-size: 110%;
26      }
27      .tags span::after {
28        content: ', ';
29      }
30      .tags span:last-of-type::after {
31        content: '';
32      }
33    </style>
34    <app-route route="{{route}}" pattern="/:farm/:server/:id/:secret" data="{{data}}">
35    </app-route>
36    <img src="{{_computeSrc(data)}}">
37    <iron-ajax auto url="https://www.flickr.com/services/rest/"
38               handle-as="json"
39               params="{{params}}"
40               last-response="{{metadata}}"
41               last-error="{{error}}"
42               loading="{{loading}}">
43    </iron-ajax>
44    <paper-spinner active="{{loading}}"></paper-spinner>
45    <div>
46      <h1>{{metadata.photo.title._content}}</h1>
47      <div class="tags">
48      <template is="dom-repeat" items="{{metadata.photo.tags.tag}}">
49        <span>{{item.raw}}</span>
50      </template>
51      </div>
52      <div>
53        <ul>
54          <template is="dom-repeat" items="{{metadata.photo.urls.url}}">
55            <li>
56              <a target="_blank" href="{{item._content}}">
57                {{item._content}}
58              </a>
59            </li>
60          </template>
61        </ul>
62      </div>
63    </div>
64  </template>
65  <script>
66    Polymer({
67      is: 'flickr-image-page',
68      properties: {
69        apiKey: {
70          type: String,
71        },
72
73        params: {
74          type: Object,
75          computed: '_computeParams(apiKey, data.id, data.secret)'
76        }
77
78      },
79      observers: [
80        '_clearOldMetadata(route.path)'
81      ],
82
83      _clearOldMetadata: function() {
84        this.metadata = null;
85      },
86
87      _computeParams: function(apiKey, id, secret) {
88        return {
89          method: 'flickr.photos.getInfo',
90          api_key: apiKey,
91          photo_id: id,
92          secret: secret,
93          format: 'json',
94          nojsoncallback: 1
95        };
96      },
97
98      _computeSrc: function(photo) {
99        if (!photo || !photo.farm) {
100          return '';
101        }
102        return 'https://farm' + photo.farm + '.staticflickr.com/' +
103            photo.server + '/' + photo.id + '_' + photo.secret + '.jpg';
104      }
105    });
106  </script>
107</dom-module>
108