| OLD | NEW |
| 1 <!-- | 1 <!-- |
| 2 Copyright 2014 The Chromium Authors. All rights reserved. | 2 Copyright 2014 The Chromium Authors. All rights reserved. |
| 3 Use of this source code is governed by a BSD-style license that can be | 3 Use of this source code is governed by a BSD-style license that can be |
| 4 found in the LICENSE file. | 4 found in the LICENSE file. |
| 5 --> | 5 --><html><head><dom-module id="ct-tree-select"> |
| 6 | |
| 7 <polymer-element name="ct-tree-select" attributes="tree treeList"> | |
| 8 <template> | 6 <template> |
| 9 <select id='treeSelect' on-change="{{ _updateTree }}" value="{{ tree }}"> | 7 <select id="treeSelect" on-change=" _updateTree " value="{{ tree ::input}}"> |
| 10 <template repeat="{{ s in treeList.trees }}"> | 8 <template is="dom-repeat" items="{{treeList.trees}}" as="s"> |
| 11 <option value="{{ s.name }}">{{ s.displayName }}</option> | 9 <option value="{{ s.name }}">{{ s.displayName }}</option> |
| 12 </template> | 10 </template> |
| 13 </select> | 11 </select> |
| 14 </template> | 12 </template> |
| 15 <script> | 13 <script> |
| 16 (function() { | 14 (function () { |
| 17 Polymer({ | 15 Polymer({ |
| 18 publish: { | 16 is: 'ct-tree-select', |
| 19 tree: { | 17 properties: { |
| 20 reflect: true, | 18 tree: { |
| 19 notify: true, |
| 20 observer: 'treeChanged', |
| 21 reflectToAttribute: true |
| 22 }, |
| 23 treeList: { notify: true } |
| 21 }, | 24 }, |
| 22 }, | 25 _updateTree: function (event) { |
| 23 | 26 this.asyncFire('navigate', { url: event.target.value }); |
| 24 _updateTree: function(event) { | 27 }, |
| 25 this.asyncFire('navigate', { | 28 treeChanged: function () { |
| 26 url: event.target.value | 29 if (!this.tree.length) |
| 27 }); | 30 return; |
| 28 }, | 31 // Enforce the tree list, so we don't show a blank select value. |
| 29 | 32 var option = this.$.treeSelect.querySelector('option[value="' + this.t
ree + '"]'); |
| 30 treeChanged: function() { | 33 if (!option) { |
| 31 if (!this.tree.length) | 34 // URL is incorrect. Replace with the root so we use the default tre
e. |
| 32 return; | 35 this.asyncFire('navigate', { |
| 33 | 36 url: '/', |
| 34 // Enforce the tree list, so we don't show a blank select value. | 37 replaceState: true |
| 35 var option = this.$.treeSelect.querySelector('option[value="' + this.tre
e + '"]'); | 38 }); |
| 36 if (!option) { | 39 } |
| 37 // URL is incorrect. Replace with the root so we use the default tree. | |
| 38 this.asyncFire('navigate', { | |
| 39 url: '/', | |
| 40 replaceState: true | |
| 41 }); | |
| 42 } | 40 } |
| 43 }, | 41 }); |
| 44 }); | 42 }()); |
| 45 })(); | |
| 46 </script> | 43 </script> |
| 47 </polymer-element> | 44 </dom-module> |
| OLD | NEW |