• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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="../../../paper-spinner/paper-spinner.html">
13<link rel="import" href="../../../paper-input/paper-input.html">
14<link rel="import" href="../../app-route.html">
15
16<dom-module id="flickr-search-page">
17  <template>
18    <style>
19      paper-spinner {
20        display: block;
21      }
22      img {
23        max-width: 200px;
24        max-height: 200px;
25      }
26    </style>
27    <app-route pattern="/" route="{{route}}" query-params="{{queryParams}}"
28               active="{{active}}">
29    </app-route>
30    <paper-input autofocus label="Search the public domain on Flickr"
31                 value="{{queryParams.search}}">
32    </paper-input>
33
34    <iron-ajax auto url="https://www.flickr.com/services/rest/"
35               handle-as="json"
36               debounce-duration="300"
37               params="{{params}}"
38               last-response="{{response}}"
39               last-error="{{error}}"
40               loading="{{loading}}">
41    </iron-ajax>
42    <paper-spinner active="{{loading}}"></paper-spinner>
43    <template is="dom-repeat" items="{{response.photos.photo}}" as="photo">
44      <a href="{{_computeLink(photo)}}">
45        <img src="{{_computeSrc(photo)}}">
46      </a>
47    </template>
48    <template is="dom-if" if="{{error}}">
49      <span>{{error.statusCode}}</span> Error:
50      <pre>{{error.response}}</pre>
51    </template>
52  </template>
53  <script>
54    Polymer({
55      is: 'flickr-search-page',
56      properties: {
57        apiKey: {
58          type: String,
59        },
60
61        params: {
62          type: Object,
63          computed: '_computeParams(apiKey, queryParams.search)'
64        },
65      },
66
67      observers: [
68        '_clearOldSearchResults(queryParams.search)',
69        '_setDefaultSearch(active)'
70      ],
71
72      _clearOldSearchResults: function() {
73        this.response = null;
74      },
75
76      _computeParams: function(apiKey, search) {
77        return {
78          method: 'flickr.photos.search',
79          api_key: apiKey,
80          text: search,
81          license: '7,8',
82          format: 'json',
83          nojsoncallback: 1
84        };
85      },
86
87      _computeSrc: function(photo) {
88        if (!photo || !photo.farm) {
89          return '';
90        }
91        return 'https://farm' + photo.farm + '.staticflickr.com/' +
92            photo.server + '/' + photo.id + '_' + photo.secret + '.jpg';
93      },
94
95      _computeLink: function(photo) {
96        return window.location.pathname + '#/image/' + photo.farm + '/' +
97            photo.server + '/' + photo.id + '/' + photo.secret;
98      },
99
100      _setDefaultSearch: function(active) {
101        if (active && !this.queryParams.search) {
102          this.set('queryParams.search', 'spaceship')
103        }
104      }
105    })
106  </script>
107</dom-module>
108