1<!doctype html> 2<!-- 3@license 4Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 5This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 6The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 7The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 8Code distributed by Google as part of the polymer project is also 9subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 10--> 11<html> 12<head> 13 14 <title>iron-location</title> 15 16 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 17 <link rel="import" href="../../polymer/polymer.html"> 18 <link rel="import" href="../iron-location.html"> 19 <link rel="import" href="../../paper-styles/typography.html"> 20 <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html"> 21 <link rel="import" href="../../paper-input/paper-input.html"> 22 <link rel="import" href="../../paper-slider/paper-slider.html"> 23 <link rel="import" href="../../iron-demo-helpers/url-bar.html"> 24 <link rel="stylesheet" href="../../paper-styles/demo.css"> 25</head> 26<body> 27 <url-bar></url-bar> 28 29 <dom-module id="iron-location-demo"> 30 <template> 31 <style> 32 div.inputs { 33 margin-bottom: 15px; 34 } 35 label { 36 display: inline-block; 37 width: 100px; 38 } 39 40 h3 { 41 padding: 0; 42 margin: 0; 43 } 44 45 .inputs, .history_entries { 46 @apply(--layout-vertical); 47 @apply(--layout-flex); 48 padding: 20px; 49 max-width: 500px; 50 } 51 52 .container { 53 @apply(--layout-horizontal); 54 } 55 </style> 56 <iron-location path="{{path}}" hash="{{hash}}" query="{{query}}" 57 dwell-time="{{dwellTime}}"> 58 </iron-location> 59 60 <div class="container"> 61 <div class="inputs"> 62 <h3>URL</h3> 63 <paper-input label="path" value="{{path}}" always-float-label> 64 </paper-input> 65 <paper-input label="hash" value="{{hash}}" always-float-label> 66 </paper-input> 67 <paper-input label='query' value='{{query}}' always-float-label> 68 </paper-input> 69 </div> 70 <div class="history_entries"> 71 <h3>Dwell Time</h3> 72 <p> 73 iron-location won't add extraneous entries to the browser's history 74 when changes come in quick succession. 75 </p> 76 <p> 77 A new history entry will only be added if iron-location stays in 78 the same state longer than dwellTime. 79 </p> 80 <div> 81 <label>History added: </label> 82 {{historyElementsAdded}} entries 83 </div> 84 <div> 85 <label>Dwell time:</label> 86 {{inSeconds(dwellTime)}}s 87 </div> 88 <paper-slider min="-1" max="5000" value="2000" step="100" 89 immediate-value="{{dwellTime}}"> 90 </paper-slider> 91 </div> 92 </div> 93 </template> 94 <script> 95 window.addEventListener('WebComponentsReady', function() { 96 Polymer({ 97 is: 'iron-location-demo', 98 properties: { 99 historyElementsAdded: { 100 type: Number 101 } 102 }, 103 observers: [ 104 'checkHistorySize(path, hash, query, startingHistoryLength)' 105 ], 106 ready: function() { 107 this.startingHistoryLength = window.history.length; 108 }, 109 checkHistorySize: function() { 110 this.historyElementsAdded = 111 window.history.length - this.startingHistoryLength; 112 }, 113 inSeconds: function(dwellTime) { 114 if (dwellTime === -1) { 115 return -1; 116 } 117 return (Math.round(dwellTime / 100) / 10) 118 } 119 }); 120 }); 121 </script> 122 </dom-module> 123 124 <iron-location-demo></iron-location-demo> 125</body> 126</html> 127