65 lines
1.2 KiB
JavaScript
65 lines
1.2 KiB
JavaScript
|
/**
|
||
|
|
@license
|
||
|
|
Copyright (c) 2022 trading_peter
|
||
|
|
This program is available under Apache License Version 2.0
|
||
|
|
*/
|
||
|
|
|
||
|
|
import { LitElement, html, css } from 'lit';
|
||
|
|
|
||
|
|
class TpLcOut extends LitElement {
|
||
|
|
static get styles() {
|
||
|
|
return [
|
||
|
|
css`
|
||
|
|
:host {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.circle {
|
||
|
|
border-radius: 50px;
|
||
|
|
border: 3px solid green;
|
||
|
|
width: 10px;
|
||
|
|
height: 10px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.circle:hover,
|
||
|
|
:host([isDragging]) .circle {
|
||
|
|
background: green;
|
||
|
|
}
|
||
|
|
|
||
|
|
label {
|
||
|
|
margin-right: 5px;
|
||
|
|
}
|
||
|
|
`
|
||
|
|
];
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const { name } = this;
|
||
|
|
|
||
|
|
return html`
|
||
|
|
<label>${name}</label>
|
||
|
|
<div class="circle" @mousedown=${this.startDrag}></div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
|
||
|
|
static get properties() {
|
||
|
|
return {
|
||
|
|
name: { type: String },
|
||
|
|
isDragging: { type: Boolean, reflect: true },
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
startDrag(e) {
|
||
|
|
this.isDragging = true;
|
||
|
|
window.addEventListener('mouseup', () => {
|
||
|
|
this.isDragging = false;
|
||
|
|
}, { once: true });
|
||
|
|
|
||
|
|
this.dispatchEvent(new CustomEvent('start-drag', { detail: e, bubbles: true, composed: true }));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
window.customElements.define('tp-lc-out', TpLcOut);
|