OLD | NEW |
(Empty) | |
| 1 <!-- |
| 2 The res/common/js/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 <select-status-sk> |
| 8 |
| 9 This element adds a clear button and a selected-values binding to a select ele
ment. |
| 10 |
| 11 To use this file import it: |
| 12 |
| 13 <link href="/res/imp/select-status-sk.html" rel="import" /> |
| 14 |
| 15 Usage: |
| 16 |
| 17 <select-status-sk></select-status-sk> |
| 18 |
| 19 Properties: |
| 20 target - String. The unique id of the select element that should be attache
d to. |
| 21 selected-values - Array of Strings. The selected values. |
| 22 no-button - Boolean. Suppress the clear button. |
| 23 |
| 24 Methods: |
| 25 None. |
| 26 |
| 27 Events: |
| 28 None. |
| 29 --> |
| 30 <dom-module id="select-status-sk"> |
| 31 <template> |
| 32 <button id="clear" on-click="clearSelections" hidden$="{{noButton}}">Clear</
button> |
| 33 </template> |
| 34 |
| 35 <script> |
| 36 Polymer({ |
| 37 is: 'select-status-sk', |
| 38 |
| 39 properties: { |
| 40 noButton: { |
| 41 type: Boolean, |
| 42 value: false, |
| 43 }, |
| 44 target: { |
| 45 type: String, |
| 46 value: null, |
| 47 }, |
| 48 selectedValues: { |
| 49 type: Array, |
| 50 notify: true, |
| 51 observer: "applySelection" |
| 52 // no default value here to allow parent to supply the value from anot
her binding. |
| 53 }, |
| 54 }, |
| 55 |
| 56 attached: function() { |
| 57 this.select = $$$('#' + this.target); |
| 58 this.select.addEventListener('change', this._updateSelection.bind(this))
; |
| 59 }, |
| 60 |
| 61 // applySelection handles input from the parent element via the binding, |
| 62 // updating the select element to mirror the selection. |
| 63 applySelection: function(selection) { |
| 64 if (!selection) { |
| 65 return; |
| 66 } |
| 67 $$('option', this.select).forEach(function(option) { |
| 68 option.selected = (selection.indexOf(option.value) != -1); |
| 69 }, this); |
| 70 }, |
| 71 |
| 72 // _updateSelection handles input from the user on the select element. |
| 73 _updateSelection: function() { |
| 74 var selected = []; |
| 75 $$('option', this.select).forEach(function(option) { |
| 76 if (option.selected) { |
| 77 selected.push(option.value); |
| 78 } |
| 79 }, this); |
| 80 // This is just an array of values, so we don't need to use this.push/th
is.splice |
| 81 // In fact, such methods do not properly update the host. |
| 82 this.set("selectedValues", selected); |
| 83 }, |
| 84 |
| 85 clearSelections: function() { |
| 86 $$('option', this.select).forEach(function (elem) { |
| 87 elem.selected = false; |
| 88 }); |
| 89 this._updateSelection(); |
| 90 }, |
| 91 |
| 92 }); |
| 93 </script> |
| 94 </dom-module> |
OLD | NEW |