| <!DOCTYPE html> |
| <!-- |
| Copyright 2016 The Chromium Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. |
| --> |
| |
| <!-- |
| An element displaying basic information about a display item in a list view. |
| --> |
| <dom-module id='tr-ui-e-chrome-cc-display-item-list-item'> |
| <template> |
| <style> |
| :host { |
| border-bottom: 1px solid #555; |
| display: block; |
| font-size: 12px; |
| padding: 3px 5px; |
| } |
| |
| :host(:hover) { |
| background-color: #f0f0f0; |
| cursor: pointer; |
| } |
| |
| .header { |
| font-weight: bold; |
| margin: 2px 0; |
| } |
| |
| .header > .extra { |
| background-color: #777; |
| border-radius: 4px; |
| color: white; |
| margin: 0 6px; |
| text-decoration: none; |
| padding: 2px 4px; |
| } |
| |
| .raw-details { |
| white-space: pre-wrap; |
| } |
| |
| .details > dl { |
| margin: 0; |
| } |
| |
| :host(:not([selected])) .details { |
| display: none; |
| } |
| </style> |
| <div class="header"> |
| {{name}} |
| <template is="dom-if" if="{{_computeIf(richDetails)}}"> |
| <a class="extra" href$="{{_computeHref(richDetails)}}" |
| download="drawing.skp" on-click="{{stopPropagation}}">SKP</a> |
| </template> |
| </div> |
| <div class="details"> |
| <template if="{{rawDetails}}"> |
| <div class="raw-details">{{rawDetails}}</div> |
| </template> |
| <template is="dom-if" if="{{richDetails}}" bind="{{richDetails}}"> |
| <dl> |
| <template is="dom-if" if="{{cullRect}}" bind="{{cullRect}}"> |
| <dt>Cull rect</dt> |
| <dd>{{x}},{{y}} {{width}}×{{height}}</dd> |
| </template> |
| <template is="dom-if" if="{{visualRect}}" bind="{{visualRect}}"> |
| <dt>Visual rect</dt> |
| <dd>{{x}},{{y}} {{width}}×{{height}}</dd> |
| </template> |
| </dl> |
| </template> |
| </div> |
| </template> |
| <script> |
| 'use strict'; |
| (function() { |
| // Extracts the "type" and "details" parts of the unstructured (plaintext) |
| // display item format, even if the details span multiple lines. |
| // For example, given "FooDisplayItem type=hello\nworld", produces |
| // "FooDisplayItem" as the first capture and "type=hello\nworld" as the |
| // second. Either capture could be the empty string, but this regex will |
| // still successfully match. |
| var DETAILS_SPLIT_REGEX = /^(\S*)\s*([\S\s]*)$/; |
| |
| Polymer({ |
| is: 'tr-ui-e-chrome-cc-display-item-list-item', |
| |
| created: function() { |
| // TODO(charliea): Why is setAttribute necessary here but not below? We |
| // should reach out to the Polymer team to figure out. |
| Polymer.dom(this).setAttribute('name', ''); |
| Polymer.dom(this).setAttribute('rawDetails', ''); |
| Polymer.dom(this).setAttribute('richDetails', undefined); |
| Polymer.dom(this).setAttribute('data_', undefined); |
| }, |
| |
| get data() { |
| return this.data_; |
| }, |
| |
| set data(data) { |
| this.data_ = data; |
| |
| if (!data) { |
| this.name = 'DATA MISSING'; |
| this.rawDetails = ''; |
| this.richDetails = undefined; |
| } else if (typeof data === 'string') { |
| var match = data.match(DETAILS_SPLIT_REGEX); |
| this.name = match[1]; |
| this.rawDetails = match[2]; |
| this.richDetails = undefined; |
| } else { |
| this.name = data.name; |
| this.rawDetails = ''; |
| this.richDetails = data; |
| } |
| }, |
| |
| stopPropagation: function(e) { |
| e.stopPropagation(); |
| }, |
| |
| _computeIf: function(richDetails) { |
| return richDetails && richDetails.skp64; |
| }, |
| |
| _computeHref: function(richDetails) { |
| return 'data:application/octet-stream;base64,' + richDetails.skp64; |
| } |
| }); |
| })(); |
| </script> |
