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: [], |
| 60 reflect: true, |
| 61 }, |
| 62 }, |
| 63 |
| 64 addValue: function() { |
| 65 if (this.$.new.value && this.$.new.value != "") { |
| 66 this.values.push(this.$.new.value); |
| 67 } |
| 68 this.$.new.value = ""; |
| 69 this.fire("change"); |
| 70 }, |
| 71 |
| 72 deleteValue: function(e, detail, sender) { |
| 73 this.values.splice(sender.getAttribute("index"), 1); |
| 74 this.fire("change"); |
| 75 }, |
| 76 }); |
| 77 </script> |
| 78 </polymer-element> |
OLD | NEW |