79 lines
1.8 KiB
JavaScript
79 lines
1.8 KiB
JavaScript
import { Base } from "./base.js";
|
|
|
|
export class Element extends Base {
|
|
elements = undefined;
|
|
id = undefined;
|
|
summary = () => "";
|
|
detail = () => "";
|
|
el = undefined;
|
|
classes = [];
|
|
|
|
constructor(elements, {
|
|
id, // ""
|
|
summary, // () => "div innerHTML"
|
|
detail, // () => "div innerHTML"
|
|
classes, // [""]
|
|
size, // { x, y }
|
|
position, // { x, y }
|
|
}) {
|
|
super();
|
|
this.elements = elements;
|
|
this.id = id;
|
|
this.summary = summary;
|
|
this.detail = detail;
|
|
|
|
// Create DOM element(s)
|
|
this.el = document.createElement("div");
|
|
this.el.id = id;
|
|
this.el.classList.add('element');
|
|
for (const className of (classes ?? [])) {
|
|
this.el.classList.add(className);
|
|
}
|
|
|
|
if (size) {
|
|
this.setSize(size);
|
|
}
|
|
if (position) {
|
|
this.setPosition(position);
|
|
}
|
|
if (summary) {
|
|
this.summaryEl = document.createElement("div");
|
|
this.summaryEl.classList.add("summary");
|
|
this.el.appendChild(this.summaryEl)
|
|
}
|
|
if (detail) {
|
|
this.detailEl = document.createElement("div");
|
|
this.detailEl.classList.add("detail");
|
|
this.el.appendChild(this.detailEl)
|
|
}
|
|
|
|
// Handle pointer down to initiate drag
|
|
this.el.addEventListener("pointerdown", (e) => {
|
|
e.preventDefault();
|
|
const { clientX: x, clientY: y } = e;
|
|
this.main.pointer.startDrag({ element: this, x, y });
|
|
});
|
|
}
|
|
|
|
setPosition({ x, y }) {
|
|
this.el.style.position = "absolute";
|
|
this.el.style.top = `${y}px`;
|
|
this.el.style.left = `${x}px`;
|
|
return this;
|
|
}
|
|
|
|
setSize({ x, y }) {
|
|
this.el.style.width = `${x}px`;
|
|
this.el.style.height = `${y}px`;
|
|
return this;
|
|
}
|
|
|
|
render() {
|
|
if (this.summary) {
|
|
this.summaryEl.innerHTML = this.summary();
|
|
}
|
|
if (this.detail) {
|
|
this.detailEl.innerHTML = this.detail();
|
|
}
|
|
}
|
|
} |