Index: res/imp/9/select-status-sk.html |
diff --git a/res/imp/9/select-status-sk.html b/res/imp/9/select-status-sk.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..4c4d4a077e5a6579d03351b0c11861ee44deb11b |
--- /dev/null |
+++ b/res/imp/9/select-status-sk.html |
@@ -0,0 +1,94 @@ |
+<!-- |
+ The res/common/js/common.js file must be included before this file. |
+ |
+ This in an HTML Import-able file that contains the definition |
+ of the following elements: |
+ |
+ <select-status-sk> |
+ |
+ This element adds a clear button and a selected-values binding to a select element. |
+ |
+ To use this file import it: |
+ |
+ <link href="/res/imp/select-status-sk.html" rel="import" /> |
+ |
+ Usage: |
+ |
+ <select-status-sk></select-status-sk> |
+ |
+ Properties: |
+ target - String. The unique id of the select element that should be attached to. |
+ selected-values - Array of Strings. The selected values. |
+ no-button - Boolean. Suppress the clear button. |
+ |
+ Methods: |
+ None. |
+ |
+ Events: |
+ None. |
+--> |
+<dom-module id="select-status-sk"> |
+ <template> |
+ <button id="clear" on-click="clearSelections" hidden$="{{noButton}}">Clear</button> |
+ </template> |
+ |
+ <script> |
+ Polymer({ |
+ is: 'select-status-sk', |
+ |
+ properties: { |
+ noButton: { |
+ type: Boolean, |
+ value: false, |
+ }, |
+ target: { |
+ type: String, |
+ value: null, |
+ }, |
+ selectedValues: { |
+ type: Array, |
+ notify: true, |
+ observer: "applySelection" |
+ // no default value here to allow parent to supply the value from another binding. |
+ }, |
+ }, |
+ |
+ attached: function() { |
+ this.select = $$$('#' + this.target); |
+ this.select.addEventListener('change', this._updateSelection.bind(this)); |
+ }, |
+ |
+ // applySelection handles input from the parent element via the binding, |
+ // updating the select element to mirror the selection. |
+ applySelection: function(selection) { |
+ if (!selection) { |
+ return; |
+ } |
+ $$('option', this.select).forEach(function(option) { |
+ option.selected = (selection.indexOf(option.value) != -1); |
+ }, this); |
+ }, |
+ |
+ // _updateSelection handles input from the user on the select element. |
+ _updateSelection: function() { |
+ var selected = []; |
+ $$('option', this.select).forEach(function(option) { |
+ if (option.selected) { |
+ selected.push(option.value); |
+ } |
+ }, this); |
+ // This is just an array of values, so we don't need to use this.push/this.splice |
+ // In fact, such methods do not properly update the host. |
+ this.set("selectedValues", selected); |
+ }, |
+ |
+ clearSelections: function() { |
+ $$('option', this.select).forEach(function (elem) { |
+ elem.selected = false; |
+ }); |
+ this._updateSelection(); |
+ }, |
+ |
+ }); |
+ </script> |
+</dom-module> |