初始化

src/app/toolbox/ToolBoxCheckbox.ts

@@ -0,0 +1,51 @@
+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];
+    }
+}