1<!DOCTYPE html>
2<!--
3Copyright 2016 The Chromium Authors. All rights reserved.
4Use of this source code is governed by a BSD-style license that can be
5found in the LICENSE file.
6-->
7
8<!--
9An element displaying basic information about a display item in a list view.
10-->
11<polymer-element name="tr-ui-e-chrome-cc-display-item-list-item">
12  <template>
13    <style>
14      :host {
15        border-bottom: 1px solid #555;
16        display: block;
17        font-size: 12px;
18        padding: 3px 5px;
19      }
20
21      :host(:hover) {
22        background-color: #f0f0f0;
23        cursor: pointer;
24      }
25
26      .header {
27        font-weight: bold;
28        margin: 2px 0;
29      }
30
31      .header > .extra {
32        background-color: #777;
33        border-radius: 4px;
34        color: white;
35        margin: 0 6px;
36        text-decoration: none;
37        padding: 2px 4px;
38      }
39
40      .raw-details {
41        white-space: pre-wrap;
42      }
43
44      .details > dl {
45        margin: 0;
46      }
47
48      :host(:not([selected])) .details {
49        display: none;
50      }
51    </style>
52    <div class="header">
53      {{name}}
54      <template if="{{richDetails && richDetails.skp64}}">
55        <a class="extra"
56           href="data:application/octet-stream;base64,{{richDetails.skp64}}"
57           download="drawing.skp" on-click="{{stopPropagation}}">SKP</a>
58      </template>
59    </div>
60    <div class="details">
61      <template if="{{rawDetails}}">
62        <div class="raw-details">{{rawDetails}}</div>
63      </template>
64      <template if="{{richDetails}}" bind="{{richDetails}}">
65        <dl>
66          <template if="{{cullRect}}" bind="{{cullRect}}">
67            <dt>Cull rect</dt>
68            <dd>{{x}},{{y}} {{width}}&times;{{height}}</dd>
69          </template>
70          <template if="{{visualRect}}" bind="{{visualRect}}">
71            <dt>Visual rect</dt>
72            <dd>{{x}},{{y}} {{width}}&times;{{height}}</dd>
73          </template>
74        </dl>
75      </template>
76    </div>
77  </template>
78  <script>
79    'use strict';
80    (function() {
81      // Extracts the "type" and "details" parts of the unstructured (plaintext)
82      // display item format, even if the details span multiple lines.
83      // For example, given "FooDisplayItem type=hello\nworld", produces
84      // "FooDisplayItem" as the first capture and "type=hello\nworld" as the
85      // second. Either capture could be the empty string, but this regex will
86      // still successfully match.
87      var DETAILS_SPLIT_REGEX = /^(\S*)\s*([\S\s]*)$/;
88
89      Polymer({
90        created: function() {
91          this.name = '';
92          this.rawDetails = '';
93          this.richDetails = undefined;
94          this.data_ = undefined;
95        },
96
97        get data() {
98          return this.data_;
99        },
100
101        set data(data) {
102          this.data_ = data;
103
104          if (!data) {
105            this.name = 'DATA MISSING';
106            this.rawDetails = '';
107            this.richDetails = undefined;
108          } else if (typeof data === 'string') {
109            var match = data.match(DETAILS_SPLIT_REGEX);
110            this.name = match[1];
111            this.rawDetails = match[2];
112            this.richDetails = undefined;
113          } else {
114            this.name = data.name;
115            this.rawDetails = '';
116            this.richDetails = data;
117          }
118        },
119
120        stopPropagation: function(e) { e.stopPropagation(); }
121      });
122    })();
123  </script>
124</polymer-element>
125