DCSOlympus/client/src/controls/slider.ts

export class Slider {
    #container: HTMLElement | null;
    #callback: CallableFunction;
    #slider: HTMLInputElement | null = null;
    #valueText: HTMLElement | null = null;
    #minValue: number;
    #maxValue: number;
    #increment: number;
    #minValueDiv: HTMLElement | null = null;
    #maxValueDiv: HTMLElement | null = null;
    #unit: string;
    #display: string = "";
    #dragged: boolean = false;
    #value: number = 0;

    constructor(ID: string, minValue: number, maxValue: number, unit: string, callback: CallableFunction) {
        this.#container = document.getElementById(ID);
        this.#callback = callback;
        this.#minValue = minValue;
        this.#maxValue = maxValue;
        this.#increment = 1;
        this.#unit = unit;
        if (this.#container != null) {
            this.#display = this.#container.style.display;
            this.#slider = <HTMLInputElement>this.#container.querySelector("input");
            if (this.#slider != null) {
                this.#slider.addEventListener("input", (e: any) => this.#onInput());
                this.#slider.addEventListener("mousedown", (e: any) => this.#onStart());
                this.#slider.addEventListener("mouseup", (e: any) => this.#onFinalize());
            }
            this.#valueText = <HTMLElement>this.#container.querySelector("#value");
        }
    }

    show() {
        if (this.#container != null)
            this.#container.style.display = this.#display;
    }

    hide() {
        if (this.#container != null)
            this.#container.style.display = 'none';
    }

    setActive(newActive: boolean) {
        if (this.#container && !this.#dragged) {
            this.#container.classList.toggle("active", newActive);
            if (!newActive && this.#valueText != null)
                this.#valueText.innerText = "Mixed values";
        }
    }

    setMinMax(newMinValue: number, newMaxValue: number) {
        this.#minValue = newMinValue;
        this.#maxValue = newMaxValue;
        this.#updateMax();
    }

    setIncrement(newIncrement: number) {
        this.#increment = newIncrement;
        this.#updateMax();
    }

    setValue(newValue: number) {
        // Disable value setting if the user is dragging the element
        if (!this.#dragged) {
            this.#value = newValue;
            if (this.#slider != null)
                this.#slider.value = String((newValue - this.#minValue) / (this.#maxValue - this.#minValue) * parseFloat(this.#slider.max));
            this.#onValue()
        }
    }

    getValue() {
        return this.#value;
    }

    getDragged() {
        return this.#dragged;
    }

    #updateMax() {
        var oldValue = this.getValue();
        if (this.#slider != null)
            this.#slider.max = String((this.#maxValue - this.#minValue) / this.#increment);
        this.setValue(oldValue);
    }

    #onValue() {
        if (this.#valueText != null && this.#slider != null)
            this.#valueText.innerText = this.#minValue + Math.round(parseFloat(this.#slider.value) / parseFloat(this.#slider.max) * (this.#maxValue - this.#minValue)) + this.#unit
        this.setActive(true);
    }

    #onInput() {
        this.#onValue();
    }

    #onStart() {
        this.#dragged = true;
    }

    #onFinalize() {
        this.#dragged = false;
        if (this.#slider != null) {
            this.#value = this.#minValue + parseFloat(this.#slider.value) / parseFloat(this.#slider.max) * (this.#maxValue - this.#minValue);
            this.#callback(this.getValue());
        }
    }
}