69 lines
1.7 KiB
JavaScript
69 lines
1.7 KiB
JavaScript
import { randomID } from '../../util/helpers.js';
|
|
import { Box } from './box.js';
|
|
|
|
const updateValuesOnEventTypes = ['keyup', 'mouseup'];
|
|
|
|
export class FormElement extends Box {
|
|
constructor(name, parentEl, opts) {
|
|
super(name, parentEl, opts);
|
|
this.id = opts.id ?? name;
|
|
const { cb } = opts;
|
|
if (cb) {
|
|
updateValuesOnEventTypes.forEach((eventType) => this.el.addEventListener(eventType, () => {
|
|
cb(this);
|
|
}));
|
|
cb(this, { initializing: true });
|
|
}
|
|
}
|
|
}
|
|
|
|
export class Button extends FormElement {
|
|
constructor(name, parentEl, opts) {
|
|
super(name, parentEl, opts);
|
|
this.button = document.createElement('button');
|
|
this.button.setAttribute('type', 'button');
|
|
this.button.innerHTML = name;
|
|
this.el.appendChild(this.button);
|
|
}
|
|
}
|
|
|
|
export class TextField extends FormElement {
|
|
constructor(name, parentEl, opts) {
|
|
super(name, parentEl, opts);
|
|
this.label = document.createElement('label');
|
|
this.label.innerHTML = name;
|
|
this.input = document.createElement('input');
|
|
this.label.appendChild(this.input);
|
|
this.el.appendChild(this.label);
|
|
}
|
|
|
|
get value() {
|
|
return this.input?.value || null;
|
|
}
|
|
}
|
|
|
|
export class TextArea extends FormElement { }
|
|
|
|
export class Form {
|
|
constructor(document, opts = {}) {
|
|
this.document = document;
|
|
this.items = [];
|
|
this.id = opts.id ?? `form_${randomID()}`;
|
|
}
|
|
|
|
button(opts) {
|
|
this.items.push(new Button(opts.name, this.document.el, opts));
|
|
return this;
|
|
}
|
|
|
|
textField(opts) {
|
|
this.items.push(new TextField(opts.name, this.document.el, opts));
|
|
return this;
|
|
}
|
|
|
|
textArea(opts) {
|
|
this.items.push(new TextArea(opts.name, this.document.el, opts));
|
|
return this;
|
|
}
|
|
}
|