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 |