Chromium Code Reviews| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!-- | |
| 2 The common.js file must be included before this file. | |
| 3 | |
| 4 This in an HTML Import-able file that contains the definition | |
| 5 of the following elements: | |
| 6 | |
| 7 <input-list-sk> | |
| 8 | |
| 9 To use this file import it: | |
| 10 | |
| 11 <link href="/res/imp/input-list-sk.html" rel="import" /> | |
| 12 | |
| 13 Usage: | |
| 14 | |
| 15 <input-list-sk></input-list-sk> | |
| 16 | |
| 17 Properties: | |
| 18 values: array of strings; the values of the inputs. | |
| 19 --> | |
| 20 <polymer-element name="input-list-sk"> | |
| 21 <template> | |
| 22 <style> | |
| 23 #container { | |
| 24 margin: 5px; | |
| 25 padding: 10px; | |
| 26 border: 1px solid #eeeeee; | |
| 27 font-size: 12px; | |
| 28 } | |
| 29 h2 { | |
| 30 font-size: 16px; | |
| 31 } | |
| 32 core-icon-button /deep/ core-icon[role=img] { | |
| 33 width: 14px; | |
| 34 height: 14px; | |
| 35 } | |
| 36 .filter { | |
| 37 font-style: italic; | |
| 38 } | |
| 39 </style> | |
| 40 <div id="container" vertical layout> | |
| 41 <h2>{{heading}}</h2> | |
| 42 <template repeat="{{value, i in values}}"> | |
| 43 <div horizontal layout center> | |
| 44 <span class="filter" flex>{{value}}</span> | |
| 45 <core-icon-button icon="close" index="{{i}}" on-click="{{deleteValue}} "></core-icon-button> | |
| 46 </div> | |
| 47 </template> | |
| 48 <paper-input id="new" label="Enter a pattern" on-change="{{addValue}}"></p aper-input> | |
| 49 </div> | |
| 50 </template> | |
| 51 <script> | |
| 52 Polymer({ | |
| 53 publish: { | |
| 54 heading: { | |
| 55 value: null, | |
| 56 reflect: true, | |
| 57 }, | |
| 58 values: { | |
| 59 value: null, | |
|
jcgregorio
2015/04/02 14:43:14
Shouldn't this be "value: [],"
borenet
2015/04/02 14:57:21
Done.
| |
| 60 reflect: true, | |
| 61 }, | |
| 62 }, | |
| 63 | |
| 64 ready: function() { | |
| 65 if (!this.values) { | |
| 66 this.value = []; | |
|
jcgregorio
2015/04/02 14:43:14
this.value isn't used anywhere, was it supposed to
borenet
2015/04/02 14:57:21
Removed.
| |
| 67 } | |
| 68 }, | |
| 69 | |
| 70 addValue: function() { | |
| 71 if (this.$.new.value && this.$.new.value != "") { | |
| 72 this.values.push(this.$.new.value); | |
| 73 } | |
| 74 this.$.new.value = ""; | |
| 75 this.fire("change"); | |
| 76 }, | |
| 77 | |
| 78 deleteValue: function(e, detail, sender) { | |
| 79 this.values.splice(sender.getAttribute("index"), 1); | |
| 80 this.fire("change"); | |
| 81 }, | |
| 82 }); | |
| 83 </script> | |
| 84 </polymer-element> | |
| OLD | NEW |