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-pages/iron-pages.html"> 13<link rel="import" href="../../app-location.html"> 14<link rel="import" href="../../app-route.html"> 15<link rel="import" href="./flickr-search-page.html"> 16<link rel="import" href="./flickr-image-page.html"> 17 18 19<dom-module id="flickr-search-demo"> 20 <template> 21 <style> 22 a { 23 text-decoration: none; 24 color: inherit; 25 } 26 a:hover { 27 text-decoration: underline; 28 } 29 </style> 30 <app-location route="{{route}}" use-hash-as-path></app-location> 31 <app-route route="{{route}}" pattern="/:page" data="{{data}}"> 32 </app-route> 33 <app-route route="{{route}}" pattern="/search" tail="{{searchRoute}}"> 34 </app-route> 35 <app-route route="{{route}}" pattern="/image" tail="{{imageRoute}}"> 36 </app-route> 37 38 <h1><a href="#/search/">Public Domain Image Search</a></h1> 39 40 <iron-pages attr-for-selected="id" selected="{{data.page}}" 41 selected-attribute="selected"> 42 <flickr-search-page id="search" api-key="{{apiKey}}" 43 route="{{searchRoute}}"> 44 </flickr-search-page> 45 <flickr-image-page id="image" api-key="{{apiKey}}" route="{{imageRoute}}"> 46 </flickr-image-page> 47 </iron-pages> 48 </template> 49 <script> 50 Polymer({ 51 is: 'flickr-search-demo', 52 properties: { 53 apiKey: { 54 type: String, 55 value: '5358d9830b6865a13d251e5e1acb4c30' 56 } 57 }, 58 59 attached: function() { 60 if (this.route.path === '') { 61 this.set('route.path', '/search/'); 62 } 63 } 64 }); 65 </script> 66</dom-module> 67