<!doctype html>
<!--
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-page-url</title>

  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="../../polymer/polymer.html">
  <link rel="import" href="../iron-page-url.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="stylesheet" href="../../paper-styles/demo.css">
</head>
<body>

  <dom-module id="iron-page-url-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-page-url path="{{path}}" hash="{{hash}}" query="{{query}}"
                     dwell-time="{{dwellTime}}">
      </iron-page-url>

      <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-page-url won't add extraneous entries to the browser's history
            when changes come in quick successino.
          </p>
          <p>
            A new history entry will only be added if iron-query-url 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>
      Polymer({
        is: 'iron-page-url-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-page-url-demo></iron-page-url-demo>
</body>
</html>
