res/imp/select-status-sk.html

<!--
  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>