71 lines
1.8 KiB
JavaScript
71 lines
1.8 KiB
JavaScript
/**
|
|
Attributes:
|
|
@property {number} value
|
|
@property {number} stepSize
|
|
@property {number} largeStepSize
|
|
*/
|
|
class DotDungeonIncrementer extends HTMLElement {
|
|
|
|
#input;
|
|
|
|
constructor() {
|
|
super();
|
|
|
|
const sr = this.attachShadow({ mode: `open` });
|
|
const container = document.createElement(`div`);
|
|
|
|
const style = document.createElement(`link`);
|
|
style.href = `./systems/dotdungeon/.styles/components/incrementer.css`;
|
|
style.rel = `stylesheet`;
|
|
container.appendChild(style);
|
|
|
|
|
|
const input = document.createElement(`input`);
|
|
this.#input = input;
|
|
input.type = `number`;
|
|
input.value = this.getAttribute(`value`);
|
|
input.addEventListener(`change`, this.#updateValue.bind(this));
|
|
|
|
const increment = document.createElement(`button`);
|
|
increment.innerHTML = `+`;
|
|
increment.type = `button`;
|
|
increment.classList.value = `increment`;
|
|
increment.addEventListener(`click`, this.#increment.bind(this));
|
|
|
|
const decrement = document.createElement(`button`);
|
|
decrement.innerHTML = `-`;
|
|
decrement.type = `button`;
|
|
decrement.classList.value = `decrement`;
|
|
decrement.addEventListener(`click`, this.#decrement.bind(this));
|
|
|
|
|
|
// Construct the DOM
|
|
container.appendChild(decrement);
|
|
container.appendChild(input);
|
|
container.appendChild(increment);
|
|
sr.appendChild(container);
|
|
};
|
|
|
|
#updateValue() {
|
|
// TODO: Emit a change event for the new value, and check for cancellation
|
|
const event = new Event(`change`);
|
|
this.dispatchEvent(event);
|
|
};
|
|
|
|
#increment() {
|
|
console.log(`increment event`)
|
|
this.#input.value++;
|
|
this.#updateValue();
|
|
};
|
|
|
|
#decrement() {
|
|
console.log(`decrement event`)
|
|
this.#input.value--;
|
|
this.#updateValue();
|
|
};
|
|
};
|
|
|
|
|
|
if (!window.customElements.get(`dd-incrementer`)) {
|
|
window.customElements.define(`dd-incrementer`, DotDungeonIncrementer);
|
|
};
|