systrace/catapult/third_party/polymer/components/app-route/demo/data-loading-demo/flickr-search-demo.html

<!--
@license
Copyright (c) 2016 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
-->

<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../iron-pages/iron-pages.html">
<link rel="import" href="../../app-location.html">
<link rel="import" href="../../app-route.html">
<link rel="import" href="./flickr-search-page.html">
<link rel="import" href="./flickr-image-page.html">


<dom-module id="flickr-search-demo">
  <template>
    <style>
      a {
        text-decoration: none;
        color: inherit;
      }
      a:hover {
        text-decoration: underline;
      }
    </style>
    <app-location route="{{route}}" use-hash-as-path></app-location>
    <app-route route="{{route}}" pattern="/:page" data="{{data}}">
    </app-route>
    <app-route route="{{route}}" pattern="/search" tail="{{searchRoute}}">
    </app-route>
    <app-route route="{{route}}" pattern="/image" tail="{{imageRoute}}">
    </app-route>

    <h1><a href="#/search/">Public Domain Image Search</a></h1>

    <iron-pages attr-for-selected="id" selected="{{data.page}}"
                selected-attribute="selected">
      <flickr-search-page id="search" api-key="{{apiKey}}"
                          route="{{searchRoute}}">
      </flickr-search-page>
      <flickr-image-page id="image" api-key="{{apiKey}}" route="{{imageRoute}}">
      </flickr-image-page>
    </iron-pages>
  </template>
  <script>
    Polymer({
      is: 'flickr-search-demo',
      properties: {
        apiKey: {
          type: String,
          value: '5358d9830b6865a13d251e5e1acb4c30'
        }
      },

      attached: function() {
        if (this.route.path === '') {
          this.set('route.path', '/search/');
        }
      }
    });
  </script>
</dom-module>