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