Refactoring: port add-image-to-note to new element as well, remove obsolete classes, fix note creation

src/UI/Input/FileSelectorButton.ts

@@ -1,111 +0,0 @@
-import BaseUIElement from "../BaseUIElement"
-import { InputElement } from "./InputElement"
-import { UIEventSource } from "../../Logic/UIEventSource"
-
-/**
- * @deprecated
- */
-export default class FileSelectorButton extends InputElement<FileList> {
-    private static _nextid = 0
-    private readonly _value = new UIEventSource<FileList>(undefined)
-    private readonly _label: BaseUIElement
-    private readonly _acceptType: string
-    private readonly allowMultiple: boolean
-    private readonly _labelClasses: string
-
-    constructor(
-        label: BaseUIElement,
-        options?: {
-            acceptType: "image/*" | string
-            allowMultiple: true | boolean
-            labelClasses?: string
-        }
-    ) {
-        super()
-        this._label = label
-        this._acceptType = options?.acceptType ?? "image/*"
-        this._labelClasses = options?.labelClasses ?? ""
-        this.SetClass("block cursor-pointer")
-        label.SetClass("cursor-pointer")
-        this.allowMultiple = options?.allowMultiple ?? true
-    }
-
-    GetValue(): UIEventSource<FileList> {
-        return this._value
-    }
-
-    IsValid(t: FileList): boolean {
-        return true
-    }
-
-    protected InnerConstructElement(): HTMLElement {
-        const self = this
-        const el = document.createElement("form")
-        const label = document.createElement("label")
-        label.appendChild(this._label.ConstructElement())
-        label.classList.add(...this._labelClasses.split(" ").filter((t) => t !== ""))
-        el.appendChild(label)
-
-        const actualInputElement = document.createElement("input")
-        actualInputElement.style.cssText = "display:none"
-        actualInputElement.type = "file"
-        actualInputElement.accept = this._acceptType
-        actualInputElement.name = "picField"
-        actualInputElement.multiple = this.allowMultiple
-        actualInputElement.id = "fileselector" + FileSelectorButton._nextid
-        FileSelectorButton._nextid++
-
-        label.htmlFor = actualInputElement.id
-
-        actualInputElement.onchange = () => {
-            if (actualInputElement.files !== null) {
-                self._value.setData(actualInputElement.files)
-            }
-        }
-
-        el.addEventListener("submit", (e) => {
-            if (actualInputElement.files !== null) {
-                self._value.setData(actualInputElement.files)
-            }
-            actualInputElement.classList.remove("glowing-shadow")
-
-            e.preventDefault()
-        })
-
-        el.appendChild(actualInputElement)
-
-        function setDrawAttention(isOn: boolean) {
-            if (isOn) {
-                label.classList.add("glowing-shadow")
-            } else {
-                label.classList.remove("glowing-shadow")
-            }
-        }
-
-        el.addEventListener("dragover", (event) => {
-            event.stopPropagation()
-            event.preventDefault()
-            setDrawAttention(true)
-            // Style the drag-and-drop as a "copy file" operation.
-            event.dataTransfer.dropEffect = "copy"
-        })
-
-        window.document.addEventListener("dragenter", () => {
-            setDrawAttention(true)
-        })
-
-        window.document.addEventListener("dragend", () => {
-            setDrawAttention(false)
-        })
-
-        el.addEventListener("drop", (event) => {
-            event.stopPropagation()
-            event.preventDefault()
-            label.classList.remove("glowing-shadow")
-            const fileList = event.dataTransfer.files
-            this._value.setData(fileList)
-        })
-
-        return el
-    }
-}

src/UI/Input/Slider.ts

@@ -1,62 +0,0 @@
-import { InputElement } from "./InputElement"
-import { UIEventSource } from "../../Logic/UIEventSource"
-
-/**
- * @deprecated
- */
-export default class Slider extends InputElement<number> {
-    private readonly _value: UIEventSource<number>
-    private readonly min: number
-    private readonly max: number
-    private readonly step: number
-    private readonly vertical: boolean
-
-    /**
-     * Constructs a slider input element for natural numbers
-     * @param min: the minimum value that is allowed, inclusive
-     * @param max: the max value that is allowed, inclusive
-     * @param options: value: injectable value; step: the step size of the slider
-     */
-    constructor(
-        min: number,
-        max: number,
-        options?: {
-            value?: UIEventSource<number>
-            step?: 1 | number
-            vertical?: false | boolean
-        }
-    ) {
-        super()
-        this.max = max
-        this.min = min
-        this._value = options?.value ?? new UIEventSource<number>(min)
-        this.step = options?.step ?? 1
-        this.vertical = options?.vertical ?? false
-    }
-
-    GetValue(): UIEventSource<number> {
-        return this._value
-    }
-
-    protected InnerConstructElement(): HTMLElement {
-        const el = document.createElement("input")
-        el.type = "range"
-        el.min = "" + this.min
-        el.max = "" + this.max
-        el.step = "" + this.step
-        const valuestore = this._value
-        el.oninput = () => {
-            valuestore.setData(Number(el.value))
-        }
-        if (this.vertical) {
-            el.classList.add("vertical")
-            el.setAttribute("orient", "vertical") // firefox only workaround...
-        }
-        valuestore.addCallbackAndRunD((v) => (el.value = "" + valuestore.data))
-        return el
-    }
-
-    IsValid(t: number): boolean {
-        return Math.round(t) == t && t >= this.min && t <= this.max
-    }
-}