cx-doxy/assets/applet.js

import { dom_manager, type_manager } from "./functions.js";

class applet_animations {
    static display(state, target) {
        if (state) {
            target.style.display = "block";
        } else {
            target.style.display = "none";
        }
    }

    static hide_left(state, target) {
        if (state) {
            target.style.left = "0";
        } else {
            target.style.left = -target.offsetWidth + "px";
        }
    }

    static hide_right(state, target) {
        if (state) {
            target.style.right = "0";
        } else {
            target.style.right = -target.offsetWidth + "px";
        }
    }
}

class applet_builder {
    #minimalise;
    #maximalise;
    #target;
    #animation;

    constructor() {
        this.#minimalise = undefined;
        this.#maximalise = undefined;
        this.#target = undefined;
        this.#animation = applet_animations.display;
    }

    set minimalise(target) {
        if (!dom_manager.is_element(target)) {
            throw "Minimalise button must be HTML element.";
        }

        this.#minimalise = target;
    }

    set maximalise(target) {
        if (!dom_manager.is_element(target)) {
            throw "Maximalise button must be HTML element.";
        }

        this.#maximalise = target;
    }

    set target(target) {
        if (!dom_manager.is_element(target)) {
            throw "Target must be HTML element.";
        }

        this.#target = target;
    }

    set animation(target) {
        if (!type_manager.is_function(target)) {
            throw "Animation must be an function.";
        }

        this.#animation = target;
    }

    get is_valid() {
        if (this.#minimalise === undefined) {
            return false;
        }

        if (this.#maximalise === undefined) {
            return false;
        }

        if (this.#target === undefined) {
            return false;
        }

        if (this.#animation === undefined) {
            return false;
        }

        return true;
    }

    get #is_swapable() {
        return this.#minimalise === this.#maximalise;
    }

    #build_swapable() {
        return new swapable_applet(
            this.#target, 
            this.#minimalise,
            this.#animation
        );
    }

    build() {
        if (!this.is_valid) {
            throw "Builder is not valid yes.";
        }

        if (this.#is_swapable) {
            return this.#build_swapable();
        }
    }
}

class applet {
    _target;
    _animation;
    _state;

    get _has_animation() {
        return this._animation !== undefined;
    }

    _run_animation() {
        this._animation(this._state, this._target);
    }

    show() {
        this._state = true;
        this._run_animation();
    }

    hide() {
        this._state = false;
        this._run_animation();
    }
}

class swapable_applet extends applet {
    #swaper;

    constructor(target, swaper, animation) {
        super();

        if (!dom_manager.is_element(target)) {
            throw "Target must be HTML element.";
        }

        if (!dom_manager.is_element(swaper)) {
            throw "Swaper must be HTML element.";
        }

        if (animation !== undefined && !type_manager.is_function(animation)) {
            throw "Animation must be undefined (disabled), or function.";
        }

        this._target = target;
        this.#swaper = swaper;
        this._animation = animation;
        this._state = false;

        this.hide();
        this.#listen();
    }

    #listen() {
        this.#swaper.addEventListener("click", () => { this.swap(); });
    }

    swap() {
        if (this._state) {
            this.hide();
        } else {
            this.show();
        }
    }
}

export { applet_builder, applet_animations };