http://prochoicesafetygear.com/assets/template_editor/marker-eTi8iSW.js

1import {LitElement, html, css} from 'lit';
2
3/**
4 * @property {("zone"|"component"|"editable")} type
5 * @property {HTMLElement} target
6 * @property {boolean} visible
7 */
8export class Marker extends LitElement {
9    static properties = {
10        type: {},
11        target: {attribute: false},
12        visible: {attribute: false}
13    };
14
15    // noinspection CssUnresolvedCustomProperty,CssUnusedSymbol
16    static styles = css`
17        :host {
18            position: absolute;
19            top: 0;
20            left: 0;
21        }
22        .zone-editor-zone-marker
23        {
24            outline: 2px solid #aa0088;
25            outline-offset: 0;
26            position: absolute;
27            z-index: 10000;
28            border-radius: 0.25rem;
29        }
30        .zone-editor-zone-marker:after {
31            content: var(--marker-name, "Zone");
32            position: absolute;
33            top: 0;
34            left: 0;
35            background: #aa0088;
36            color: #fff;
37            padding: 0.2rem;
38            font-size: 0.8rem;
39            font-weight: bold;
40            border-radius: 0.25rem 0 0.25rem 0;
41        }
42
43        .zone-editor-component-marker
44        {
45            outline: 2px solid #00aa00;
46            outline-offset: -2px;
47            position: absolute;
48            z-index: 10001;
49            border-radius: 0.25rem;
50            cursor: pointer;
51        }
52        .zone-editor-component-marker:after {
53            content: var(--marker-name, "Component");
54            position: sticky;
55            top: 0;
56            left: 100%;
57            border-radius: 0 0.25rem 0 0.25rem;
58            background: #00aa00;
59            color: #fff;
60            padding: 0.2rem;
61            font-size: 0.8rem;
62            font-weight: bold;
63        }
64        .zone-editor-editable-marker
65        {
66            outline: 1px solid goldenrod;
67            outline-offset: -3px;
68            position: absolute;
69            z-index: 10002;
70            border-radius: 0.25rem;
71            background-color: #daa52022;
72            cursor: pointer;
73        }
74        .zone-editor-editable-marker:after {
75            content: var(--marker-name, 'edit');
76            position: absolute;
77            top: 50%;
78            left: 50%;
79            border-radius: 0.25rem;
80            background: #ca9510;
81            transform: translate(-50%, -50%);
82            color: #fff;
83            padding: 0.2rem;
84            font-size: 0.8rem;
85        }
86    `;
87
88    render() {
89        const scrollElm = document.documentElement;
90        const rect = this.target ? this.target.getBoundingClientRect() : {
91            top: 0, left: 0, width: 0, height: 0
92        };
93        const name = this.target ? this.target.getAttribute('data-marker-name')?.split('.').pop(): '';
94        const top = rect.top + scrollElm.scrollTop;
95        const left = rect.left + scrollElm.scrollLeft;
96        const width = rect.width;
97        const height = rect.height;
98        const display = this.visible ? 'block' : 'none';
99        return html`<div class="zone-editor-${this.type}-marker" style="top: ${top}px; left: ${left}px; width: ${width}px; height: ${height}px; display: ${display}; --marker-name: '${name}';"></div>`;
100    }
101}
102customElements.define('template-marker', Marker);