52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
import { Optional, ToolBoxElement } from './ToolBoxElement';
|
|
import SvgImage, { Icon } from '../ui/SvgImage';
|
|
|
|
type Icons = {
|
|
on?: Icon;
|
|
off: Icon;
|
|
};
|
|
|
|
export class ToolBoxCheckbox extends ToolBoxElement<HTMLInputElement> {
|
|
private readonly input: HTMLInputElement;
|
|
private readonly label: HTMLLabelElement;
|
|
private readonly imageOn?: Element;
|
|
private readonly imageOff: Element;
|
|
constructor(title: string, icons: Icons | Icon, opt_id?: string, optional?: Optional) {
|
|
super(title, optional);
|
|
const input = document.createElement('input');
|
|
input.type = 'checkbox';
|
|
const label = document.createElement('label');
|
|
label.title = title;
|
|
label.classList.add('control-button');
|
|
let iconOff: Icon;
|
|
let iconOn: Icon | undefined;
|
|
if (typeof icons !== 'number') {
|
|
iconOff = icons.off;
|
|
iconOn = icons.on;
|
|
} else {
|
|
iconOff = icons;
|
|
}
|
|
this.imageOff = SvgImage.create(iconOff);
|
|
this.imageOff.classList.add('image', 'image-off');
|
|
label.appendChild(this.imageOff);
|
|
if (iconOn) {
|
|
this.imageOn = SvgImage.create(iconOn);
|
|
this.imageOn.classList.add('image', 'image-on');
|
|
label.appendChild(this.imageOn);
|
|
input.classList.add('two-images');
|
|
}
|
|
const id = opt_id || title.toLowerCase().replace(' ', '_');
|
|
label.htmlFor = input.id = `input_${id}`;
|
|
this.input = input;
|
|
this.label = label;
|
|
}
|
|
|
|
public getElement(): HTMLInputElement {
|
|
return this.input;
|
|
}
|
|
|
|
public getAllElements(): HTMLElement[] {
|
|
return [this.input, this.label];
|
|
}
|
|
}
|