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-query-params</title>
15
16  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
17  <link rel="import" href="../iron-query-params.html">
18  <link rel="import" href="../../paper-styles/classes/typography.html">
19  <link rel="import" href="../../iron-flex-layout/classes/iron-flex-layout.html">
20  <link rel="import" href="../../paper-input/paper-input.html">
21  <link rel="stylesheet" href="../../paper-styles/demo.css">
22</head>
23<body>
24
25  <dom-module id='iron-query-params-demo'>
26    <template>
27      <style>
28        div.inputs {
29          margin-bottom: 15px;
30        }
31        label {
32          display: inline-block;
33          width: 100px;
34        }
35        span.seconds {
36        }
37        [layout] {
38          @apply(--layout);
39        }
40        [layout][horizontal] {
41          @apply(--layout-horizontal);
42        }
43        [layout][horizontal] > div {
44          padding: 20px;
45          max-width: 500px;
46        }
47        [layout][vertical] {
48          @apply(--layout-vertical);
49        }
50        [layout][flex] {
51          @apply(--layout-flex);
52        }
53        h3 {
54          padding: 0;
55          margin: 0;
56        }
57      </style>
58      <iron-query-params
59          params-string='{{paramString}}' params-object='{{params}}'>
60      </iron-query-params>
61
62      <div layout horizontal>
63        <div layout vertical flex class='inputs'>
64          <paper-input label='params as string'
65                       value='{{paramString}}' always-float-label>
66          </paper-input>
67          <paper-input label='params as object' value='{{paramsString}}'
68                       invalid='{{paramsInvalid}}'
69                       error-message='Should be legal JSON'
70                       always-float-label>
71          </paper-input>
72        </div>
73      </div>
74    </template>
75    <script>
76      window.addEventListener('WebComponentsReady', function() {
77        Polymer({
78          is: 'iron-query-params-demo',
79          properties: {
80            paramsString: {
81              observer: 'paramsStringChanged'
82            },
83            params: {
84              observer: 'paramsChanged'
85            },
86            paramsInvalid: {
87              value: false,
88            },
89          },
90          paramsStringChanged: function() {
91            if (this.ignore) {
92              return;
93            }
94            this.ignore = true;
95            try {
96              this.params = JSON.parse(this.paramsString);
97              this.paramsInvalid = false;
98            } catch(_) {
99              this.paramsInvalid = true;
100            }
101            this.ignore = false;
102          },
103          paramsChanged: function() {
104            if (this.ignore) {
105              return;
106            }
107            this.ignore = true;
108            this.paramsString = JSON.stringify(this.params);
109            this.paramsInvalid = false;
110            this.ignore = false;
111          }
112        });
113      });
114    </script>
115  </dom-module>
116
117  <iron-query-params-demo></iron-query-params-demo>
118</body>
119</html>
120