92 lines
2.4 KiB
TypeScript
92 lines
2.4 KiB
TypeScript
import { LitElement, html, css } from "lit";
|
|
import { customElement } from "lit/decorators/custom-element.js";
|
|
import { property } from "lit/decorators/property.js";
|
|
import { styleMap } from "lit/directives/style-map.js";
|
|
import { ref, createRef, Ref } from "lit/directives/ref.js";
|
|
|
|
@customElement("fridge-tile")
|
|
export class FridgeTile extends LitElement {
|
|
@property({ type: String })
|
|
word = "";
|
|
|
|
handle: Ref<HTMLDivElement> = createRef();
|
|
|
|
static get styles() {
|
|
return css`
|
|
:host {
|
|
display: block;
|
|
}
|
|
|
|
:host([data-dragging="idle"]) {
|
|
cursor: grab;
|
|
}
|
|
|
|
:host([data-dragging="dragging"]) {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.word {
|
|
font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif;
|
|
box-shadow: 0 0 0.375rem 0.125rem #aaa;
|
|
text-align: center;
|
|
border-radius: 10%;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
color: #444;
|
|
font-size: 0.9375rem;
|
|
padding: 0.1875rem 0.25rem 0.25rem 0.25rem;
|
|
position: relative;
|
|
background: white;
|
|
z-index: 100;
|
|
}
|
|
`;
|
|
}
|
|
|
|
get position() {
|
|
const { left, top } = this.getBoundingClientRect();
|
|
return [left, top];
|
|
}
|
|
|
|
get relativePosition() {
|
|
return [this.offsetLeft, this.offsetTop];
|
|
}
|
|
|
|
get size() {
|
|
const { width, height } = this.getBoundingClientRect();
|
|
return { width, height };
|
|
}
|
|
|
|
get tl() {
|
|
return this.relativePosition;
|
|
}
|
|
|
|
get tr() {
|
|
const [x, y] = this.relativePosition;
|
|
const { width } = this.size;
|
|
return [x + width, y];
|
|
}
|
|
|
|
get bl() {
|
|
const [x, y] = this.relativePosition;
|
|
const { height } = this.size;
|
|
return [x + height, y];
|
|
}
|
|
|
|
get br() {
|
|
const [x, y] = this.relativePosition;
|
|
const { width, height } = this.size;
|
|
return [x + width, y + height];
|
|
}
|
|
|
|
get points() {
|
|
return [this.tl, this.tr, this.bl, this.br];
|
|
}
|
|
|
|
render() {
|
|
const styles = {
|
|
width: `${this.word.length * 1.2}ch`,
|
|
};
|
|
return html`<div part="word ${ref(this.handle)} " style="${styleMap(styles)}" class="word">${this.word}</div>`;
|
|
}
|
|
}
|