<!doctype html>
<!--
@license
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-location</title>

  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="../../polymer/polymer.html">
  <link rel="import" href="../iron-location.html">
  <link rel="import" href="../../paper-styles/typography.html">
  <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
  <link rel="import" href="../../paper-input/paper-input.html">
  <link rel="import" href="../../paper-slider/paper-slider.html">
  <link rel="import" href="../../iron-demo-helpers/url-bar.html">
  <link rel="stylesheet" href="../../paper-styles/demo.css">
</head>
<body>
  <url-bar></url-bar>

  <dom-module id="iron-location-demo">
    <template>
      <style>
        div.inputs {
          margin-bottom: 15px;
        }
        label {
          display: inline-block;
          width: 100px;
        }

        h3 {
          padding: 0;
          margin: 0;
        }

        .inputs, .history_entries {
          @apply(--layout-vertical);
          @apply(--layout-flex);
          padding: 20px;
          max-width: 500px;
        }

        .container {
          @apply(--layout-horizontal);
        }
      </style>
      <iron-location path="{{path}}" hash="{{hash}}" query="{{query}}"
                     dwell-time="{{dwellTime}}">
      </iron-location>

      <div class="container">
        <div class="inputs">
          <h3>URL</h3>
          <paper-input label="path" value="{{path}}" always-float-label>
          </paper-input>
          <paper-input label="hash" value="{{hash}}" always-float-label>
          </paper-input>
          <paper-input label='query' value='{{query}}' always-float-label>
          </paper-input>
        </div>
        <div class="history_entries">
          <h3>Dwell Time</h3>
          <p>
            iron-location won't add extraneous entries to the browser's history
            when changes come in quick succession.
          </p>
          <p>
            A new history entry will only be added if iron-location stays in
            the same state longer than dwellTime.
          </p>
          <div>
            <label>History added: </label>
            {{historyElementsAdded}} entries
          </div>
          <div>
            <label>Dwell time:</label>
            {{inSeconds(dwellTime)}}s
          </div>
          <paper-slider min="-1" max="5000" value="2000" step="100"
                        immediate-value="{{dwellTime}}">
          </paper-slider>
        </div>
      </div>
    </template>
    <script>
      window.addEventListener('WebComponentsReady', function() {
        Polymer({
          is: 'iron-location-demo',
          properties: {
            historyElementsAdded: {
              type: Number
            }
          },
          observers: [
            'checkHistorySize(path, hash, query, startingHistoryLength)'
          ],
          ready: function() {
            this.startingHistoryLength = window.history.length;
          },
          checkHistorySize: function() {
            this.historyElementsAdded =
                window.history.length - this.startingHistoryLength;
          },
          inSeconds: function(dwellTime) {
            if (dwellTime === -1) {
              return -1;
            }
            return (Math.round(dwellTime / 100) / 10)
          }
        });
      });
    </script>
  </dom-module>

  <iron-location-demo></iron-location-demo>
</body>
</html>
