res/imp/query2-values-sk.html

<!-- The <query2-values-sk> custom element declaration.

  The right-hand side of the query2-sk element, the values for a single key
  in a query/paramset.

  Attributes:
    None.

  Events:
    query2-values-changed - Trigggered only when the selections have actually
      changed. The selection is available in e.detail.

  Methods:
    setOptions(options, selected) - The options and selected are arrays of
      strings, where options are all the available options, and selected are
      the current selections from that list.
-->

<link rel="stylesheet" href="/res/common/css/md.css">
<link rel="import" href="/res/imp/bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="/res/imp/bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="/res/imp/bower_components/paper-input/paper-input.html">
<link rel="import" href="/res/imp/bower_components/iron-selector/iron-selector.html">

<dom-module id="query2-values-sk">
  <style include="iron-flex iron-flex-alignment iron-positioning">
    input,
    select {
      margin: 0 1em;
    }

    paper-checkbox {
      --paper-checkbox-checked-color: #1F78B4;
      --paper-checkbox-checked-ink-color: #1F78B4;
      --paper-checkbox-unchecked-color: #1F78B4;
      --paper-checkbox-unchecked-ink-color: #1F78B4;
      margin: 0 1em 0.5em 1em;
    }

    .hidden {
      display: none;
    }

    iron-selector {
      cursor: pointer;
      border: solid 1px #A6CEE3;
      margin-top: 6px;
      max-height: 600px;
      overflow-y: auto;
    }

    iron-selector div {
      padding: 0.4em 1.2em;
      background-color: white;
      border: none;
      outline: none;
      line-height: 20px;
      vertical-align: middle;
    }

    iron-selector div:hover {
      background-color: #A6CEE3;
    }

    iron-selector div.iron-selected {
      background: #eee;
    }

    iron-selector div.iron-selected:hover {
      background: #1F78B4;
      color: white;
    }

    #values {
      margin: 12px;
    }

  </style>
  <template>
    <div class="vertical layout">
      <paper-checkbox
        id=invert
        on-change="_invertTap"
        title="Match items that aren't selected below.">Invert</paper-checkbox>
      <paper-checkbox
        id=regex
        on-tap="_regexTap"
        title="Match items via regular expression.">Regex</paper-checkbox>
      <input
      type="text"
      id="regexValue"
      class=hidden
      on-input="_selectionChange"
      />
      <iron-selector id=values size=10
        on-iron-select="_selectionChange"
        on-iron-deselect="_selectionChange"
        multi
        attr-for-selected=value
        >
        <template is="dom-repeat" items="[[_options]]">
          <div value="[[item]]">[[item]]</div>
        </template>
      </iron-selector>
    </div>
  </template>
</dom-module>

<script>
  Polymer({
    is: "query2-values-sk",

    properties: {
      _options: {
        type: Array,
        value: function() { return []; },
      },
    },

    ready: function() {
      // iron-selector triggers many spurious iron-selected events, so we need a way to know when to ignore
      // its events.
      this._work_around_iron_selector = false;
    },

    setOptions: function(options, selected) {
      selected = selected || [];
      // Use !! to force a boolean value, to work around: https://github.com/PolymerElements/paper-checkbox/issues/140
      this.$.invert.checked = !!(selected.length >= 1 && selected[0][0] === "!");
      this.$.regex.checked = !!(selected.length == 1 && selected[0][0] === "~");
      this.set('_options', options);
      this._work_around_iron_selector = true;
      Polymer.dom.flush();
      if (this.$.regex.checked) {
        this.$.regexValue.value = this._regexDisplayValue(selected);
      } else {
        this.$.values.selectedValues = this._removeAllInverts(selected);
      }
      this._work_around_iron_selector = false;
      this._toggleRegexDisplay();
    },

    // Toggles between displaying the text box for a regular expression and
    // the select box of the param values, depending on the regex checkbox
    // being checked.
    _toggleRegexDisplay: function() {
      if (this.$.regex.checked) {
        this.$.regexValue.classList.remove("hidden");
        this.$.values.classList.add("hidden");
      } else  {
        this.$.regexValue.classList.add("hidden");
        this.$.values.classList.remove("hidden");
      }
    },

    _invertTap: function() {
      this.$.regex.checked = false;
      this._toggleRegexDisplay();
      this._selectionChange();
    },

    _regexTap: function() {
      this.$.invert.checked = false;
      this._toggleRegexDisplay();
      this._selectionChange();
    },

    _removeAllInverts: function(values) {
      var ret = [];
      for (var i = 0; i < values.length; i++) {
        if (values[i][0] === "!") {
          ret.push(values[i].slice(1));
        } else {
          ret.push(values[i]);
        }
      }
      return ret;
    },

    _invertValues: function(values) {
      var ret = [];
      for (var i = 0; i < values.length; i++) {
        if (values[i][0] !== "!") {
          ret.push("!" + values[i]);
        } else {
          ret.push(values[i]);
        }
      }
      return ret;
    },

    _regexDisplayValue: function(arr) {
      if (arr && arr.length > 0) {
        return arr[0].slice(1);
      }
      return "";
    },

    _selectionChange: function(e) {
      if (this._work_around_iron_selector) {
        return
      }
      var selected = this.$.values.selectedValues || [];
      // Regex and Invert are mutually exclusive.
      if (this.$.regex.checked) {
        selected = ["~" + this.$.regexValue.value];
      } else if (this.$.invert.checked) {
        selected = this._invertValues(selected);
      }
      this.dispatchEvent(new CustomEvent('query2-values-changed', {
        detail: selected,
        bubbles: true,
      }));
    },
  });
</script>