| <!-- The <op-sk> custom element declaration. |
| |
| Attributes: |
| op - A deserialized JSON object that describes the operation. |
| |
| Presumes ops are structured as below, where the "details" will |
| change based on the name of the opertion. |
| |
| { |
| details: { |
| visible: true, |
| command: "line", |
| ..., |
| } |
| _zoom: "1:4", |
| _index: 1, |
| _depth: 1, |
| } |
| |
| selected - True if this op has been selected. |
| |
| index - The index of this command. |
| |
| prefix - An array of icons and their color to display |
| before the command name. The look like: |
| |
| { |
| icon: "icons:image", |
| color: "green", |
| count: 2, |
| } |
| |
| The count is the run-length encoding, ie. the number |
| of repetitions of that operation that appear. |
| |
| Events: |
| op-toggled - This event is sent when a paper-checkbox is toggled. |
| The checked status and index of the op are returned in e.detail. |
| |
| { |
| checked: false, |
| index: 102, |
| } |
| |
| op-zoom - This event is sent when the zoom button is clicked. |
| The range to zoom to is returned in the detail as a filter |
| string. |
| |
| "2:7" |
| |
| Methods: |
| None. |
| --> |
| |
| <link rel=import href="/res/imp/bower_components/paper-checkbox/paper-checkbox.html"> |
| <link rel=import href="/res/imp/bower_components/iron-icon/iron-icon.html"> |
| <link rel=import href="/res/imp/bower_components/iron-icons/image-icons.html"> |
| <link rel=import href="/res/imp/bower_components/iron-icons/iron-icons.html"> |
| <link rel=import href="/res/common/imp/details-summary.html"> |
| <dom-module id="op-sk"> |
| <style type="text/css" media="screen"> |
| details-sk { |
| display: block; |
| } |
| |
| .zoom { |
| display: none; |
| font-size: 12px; |
| padding: 0; |
| margin: 0 1em; |
| } |
| |
| :host:hover .zoom { |
| display: inline-block; |
| } |
| |
| :host:hover details-sk { |
| background-color: #eeffee; |
| } |
| |
| details-sk[selected] { |
| background: #eee; |
| } |
| |
| pre { |
| margin-left: 3em; |
| } |
| |
| iron-icon { |
| opacity: 0.7; |
| margin-left: -8px; |
| } |
| |
| details-sk div { |
| margin-left: 2em; |
| } |
| |
| summary-sk { |
| display: block; |
| margin-left: 2.5em; |
| margin-top: -2.5em; |
| } |
| |
| .gpuOpID { |
| float: right; |
| background: #1B9E77; |
| color: white; |
| border-radius: 5px; |
| padding: 0.2em 0.4em; |
| margin-right: 0.5em; |
| margin-top: -0.05em; |
| } |
| |
| .count { |
| margin-left: -0.7em; |
| font-weight: bold; |
| top: 0.5em; |
| position: relative; |
| } |
| |
| </style> |
| <template> |
| <details-sk selected$="{{ selected }}"> |
| <summary-sk id=summary><paper-checkbox id=toggle checked$="{{ op.details.visible }}" on-tap="_check"></paper-checkbox> |
| <template is="dom-repeat" items="{{ prefix }}"> |
| <iron-icon icon="{{ item.icon }}" style$="color: {{ item.color }};"> </iron-icon> |
| <template is="dom-if" if="{{ _gt1(item.count) }}"> |
| <span class=count>{{ item.count }}</span> |
| </template> |
| </template> |
| <span>{{ op.details.command }}</span> |
| <template is="dom-if" if="{{ op._zoom }}"> |
| <button class=zoom on-tap=_zoom>Zoom</button> |
| </template> |
| <code>{{op.details.shortDesc }}</code> |
| <template is="dom-repeat" items="{{ _fixList(op.details.auditTrail.Ops) }}" as=gpuOp> |
| <span class=gpuOpID style$="background: {{ _bgColor(gpuOp.OpListID) }}">{{ _smartNumber(gpuOp.OpListID) }}</span> |
| </template> |
| </summary-sk> |
| <div> |
| <strong>Index: </strong> <span id=index>{{ index }}</span> |
| </div> |
| <pre> |
| {{ _display(op) }} |
| </pre> |
| </details-sk> |
| </template> |
| </dom-module> |
| |
| <script> |
| (function () { |
| var colors = [ |
| "#1B9E77", |
| "#D95F02", |
| "#7570B3", |
| "#E7298A", |
| "#66A61E", |
| "#E6AB02", |
| "#A6761D", |
| "#666666" |
| ]; |
| |
| Polymer({ |
| is: "op-sk", |
| |
| properties: { |
| op: { |
| type: Object, |
| value: function() { return {}; }, |
| reflectToAttribute: false, |
| }, |
| selected: { |
| type: Boolean, |
| value: false, |
| reflectToAttribute: false, |
| }, |
| index: { |
| type: Number, |
| value: 0, |
| reflectToAttribute: true, |
| }, |
| prefix: { |
| type: Array, |
| value: function() { return []; }, |
| reflectToAttribute: false, |
| }, |
| }, |
| |
| _display: function(op) { |
| return JSON.stringify(op.details, null, 2); |
| }, |
| |
| _check: function(e) { |
| var detail = { |
| checked: this.$.toggle.checked, |
| index: this.index, |
| }; |
| this.dispatchEvent(new CustomEvent('op-toggled', { detail: detail, bubbles: true })); |
| e.stopPropagation(); |
| }, |
| |
| _smartNumber: function(index) { |
| if (index == -1) { |
| return "..."; |
| } else { |
| return index; |
| } |
| }, |
| |
| _bgColor: function(index) { |
| if (index == -1) { |
| return "black"; |
| } else { |
| return colors[index % colors.length]; |
| } |
| }, |
| |
| _fixList: function(list) { |
| if (!list) { |
| return |
| } |
| var ret = list.slice(); |
| ret.reverse(); |
| if (ret.length > 4) { |
| ret = [ret[0], ret[1], { OpListID: -1 }, ret[ret.length-2], ret[ret.length-1]]; |
| } |
| return ret; |
| }, |
| |
| _gt1: function(n) { |
| return n > 1; |
| }, |
| |
| _zoom: function(e) { |
| this.dispatchEvent(new CustomEvent('op-zoom', { detail: this.op._zoom, bubbles: true })); |
| e.stopPropagation(); |
| }, |
| |
| }); |
| })(); |
| </script> |