| <!-- The <paramset-sk> custom element declaration. |
| |
| The paramset-sk element displays a paramset and generates events |
| as the params and labels are clicked. |
| |
| Attributes: |
| clickable - If true then keys and values look like they are clickable |
| i.e. via color, text-decoration, and cursor. If clickable is false |
| then this element won't generate the events listed below, and the |
| keys and values are not styled to look clickable. Setting both |
| clickable and clickable-values is unsupported. |
| |
| clickable-values - If true then only the values are clickable. Setting |
| both clickable and clickable-values is unsupported. |
| |
| Events: |
| paramset-key-click - Generated when the key for a paramset is clicked. |
| The name of the key will be sent in e.detail.key. The value of |
| e.detail.ctrl is true if the control key was pressed when clicking. |
| |
| { |
| key: "arch", |
| ctrl: false, |
| } |
| |
| paramset-key-value-click - Generated when one value for a paramset is clicked. |
| The name of the key will be sent in e.detail.key, the value in |
| e.detail.value. The value of e.detail.ctrl is true if the control key |
| was pressed when clicking. |
| |
| { |
| key: "arch", |
| value: "x86", |
| ctrl: false, |
| } |
| |
| Methods: |
| setParamSets([p1, p2, ...], [title1, title2, ...]) - p1 and p2 are param sets. |
| title1 and title2 are strings to use as the title of the columns. |
| The titles are optional and no title will be displayed if they are not supplied. |
| |
| setHighlight(params) - Highlights all the values that match the given params. |
| |
| clearHighlight() - Removes any highlighting. |
| |
| Styles: |
| --paramset-highlight-color - Sets the color of the values when highlighted. |
| |
| --paramset-clickable-color - Sets the color of the keys and values when |
| they are clickable. |
| --> |
| <dom-module id="paramset-sk"> |
| <style type="text/css" media="screen"> |
| td, |
| th { |
| padding: 0.1em; |
| } |
| |
| th { |
| text-align: left; |
| } |
| |
| div { |
| display: inline-block; |
| padding: 0.2em; |
| } |
| |
| .clickable th, |
| .clickable div { |
| cursor: pointer; |
| color: var(--paramset-clickable-color, #1f78b4); |
| } |
| |
| .clickable th:hover, |
| .clickable div:hover { |
| text-decoration: underline; |
| } |
| |
| .clickable-values div { |
| cursor: pointer; |
| color: var(--paramset-clickable-color, #1f78b4); |
| } |
| |
| .clickable-values div.highlight { |
| color: var(--paramset-highlight-color, #FF7F00); |
| animation-duration: 100ms; |
| animation-name: flash; |
| animation-timing-function: linear; |
| } |
| |
| .clickable-values div:hover { |
| text-decoration: underline; |
| } |
| |
| :host { |
| display: block; |
| } |
| |
| .clickable .highlight, |
| .highlight { |
| color: var(--paramset-highlight-color, #FF7F00); |
| animation-duration: 200ms; |
| animation-name: flash; |
| animation-timing-function: ease-in-out; |
| } |
| |
| @keyframes flash { |
| from { |
| background-color: white; |
| } |
| to { |
| background-color: #FDBF6F; |
| } |
| } |
| |
| tr:nth-child(even) { |
| background-color: #eee; |
| } |
| </style> |
| <template> |
| <table id="table" class$="{{_computeClass(clickable,clickableValues)}}"> |
| <tbody><tr> |
| <th></th> |
| <template is="dom-repeat" items="{{_titles}}" as="t"> |
| <th>{{t}}</th> |
| </template> |
| </tr> |
| <template is="dom-repeat" items="{{_sortedKeys}}" as="key"> |
| <tr> |
| <th data-key$="{{key}}">{{key}}</th> |
| <template is="dom-repeat" items="{{_paramsets}}" as="paramset"> |
| <td> |
| <template is="dom-repeat" items="{{_computeItems(paramset, key)}}" as="value"> |
| <div data-key$="{{key}}" data-value$="{{value}}">{{value}}</div> |
| </template> |
| </td> |
| </template> |
| </tr> |
| </template> |
| </tbody></table> |
| </template> |
| <script> |
| Polymer({ |
| is: 'paramset-sk', |
| |
| properties: { |
| clickable: { |
| type: Boolean, |
| value: false, |
| reflectToAttribute: true, |
| }, |
| clickableValues: { |
| type: Boolean, |
| value: false, |
| reflectToAttribute: true, |
| }, |
| }, |
| |
| ready: function () { |
| this._titles = []; |
| this._paramsets = []; |
| this._sortedKeys = []; |
| this.$.table.addEventListener('click', this._clickHandler.bind(this)); |
| }, |
| |
| setParamSets: function (paramsets, titles) { |
| this._paramsets = paramsets; |
| // Fix up titles if missing. |
| if (!titles) { |
| titles = []; |
| for (var i = paramsets.length - 1; i >= 0; i--) { |
| titles.push(''); |
| } |
| } |
| this._titles = titles; |
| // Compute a rolled up set of all parameter keys across all paramsets. |
| var allKeys = {}; |
| paramsets.forEach(function (p) { |
| var keys = Object.keys(p); |
| keys.forEach(function (key) { |
| allKeys[key] = true; |
| }); |
| }); |
| this._sortedKeys = Object.keys(allKeys); |
| this._sortedKeys.sort(); |
| }, |
| |
| setHighlight: function (params) { |
| $$('div', this).forEach(function (ele) { |
| var key = ele.dataset.key; |
| ele.classList.toggle('highlight', key && params[key] == ele.dataset.value); |
| }); |
| }, |
| |
| clearHighlight: function () { |
| $$('div', this).forEach(function (ele) { |
| ele.classList.remove('highlight'); |
| }); |
| }, |
| |
| _clickHandler: function (e) { |
| if (!this.clickable && !this.clickableValues) { |
| return; |
| } |
| var t = e.target; |
| if (!t.dataset.key) { |
| return; |
| } |
| if (t.nodeName == 'TH') { |
| if (!this.clickable) { |
| return; |
| } |
| var detail = { |
| key: t.dataset.key, |
| ctrl: e.ctrlKey |
| }; |
| this.dispatchEvent(new CustomEvent('paramset-key-click', { |
| detail: detail, |
| bubbles: true |
| })); |
| } else if (t.nodeName == 'DIV') { |
| var detail = { |
| key: t.dataset.key, |
| value: t.dataset.value, |
| ctrl: e.ctrlKey |
| }; |
| this.dispatchEvent(new CustomEvent('paramset-key-value-click', { |
| detail: detail, |
| bubbles: true |
| })); |
| } |
| }, |
| |
| _computeClass: function (clickable, clickableValues) { |
| if (clickableValues) { |
| return 'clickable-values'; |
| } else if (clickable) { |
| return 'clickable'; |
| } else { |
| return ''; |
| } |
| }, |
| |
| _computeItems: function (paramset, key) { |
| return paramset[key]; |
| } |
| }); |
| </script> |
| </dom-module> |