| <!-- |
| 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: |
| values - Array of Strings. The selected values. |
| clear - Boolean. If there should be a clear button as well. |
| |
| Methods: |
| setTarget(targetSelect) - Should be called to bind this to a select element. targetSelect should be a dom element. |
| |
| Events: |
| None. |
| --> |
| <dom-module id="select-status-sk"> |
| <template> |
| <button id="clear" on-click="clearSelections" hidden$="{{!clear}}">Clear</button> |
| </template> |
| |
| <script> |
| Polymer({ |
| is: 'select-status-sk', |
| |
| properties: { |
| clear: { |
| type: Boolean, |
| value: false, |
| }, |
| values: { |
| type: Array, |
| notify: true, |
| observer: "applySelection" |
| // no default value here to allow parent to supply the value from another binding. |
| }, |
| }, |
| |
| // 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("values", selected); |
| }, |
| |
| clearSelections: function() { |
| $$('option', this.select).forEach(function (elem) { |
| elem.selected = false; |
| }); |
| this._updateSelection(); |
| }, |
| |
| // target should be a select element, e.g. this.$.select, from the parent. It used to be a |
| // string, and in the attached() callback of select-status, we would look for $('#' + target) |
| // and save that as this.select. However, this does not work in most cases because the |
| // attached of the select was typically after the attached of the parent and the target |
| // select had not been stamped out yet. |
| setTarget: function(target) { |
| this.select = target; |
| this.applySelection(this.values); |
| this.select.addEventListener('change', this._updateSelection.bind(this)); |
| } |
| |
| }); |
| </script> |
| </dom-module> |