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";
        }
    }

    static hide_opacity_generator(time) {
        return (state, target) => {
            if (state) {
                target.style.display = "";

                setTimeout(() => {
                    target.style.opacity = "1";
                }, time);
            } else {
                target.style.opacity = "0";

                setTimeout(() => {
                    target.style.display = "none";
                }, time);
            }
        };
    }

    static hide_opacity(state, target) {
        if (state) {
            target.style.display = "";

            setTimeout(() => { target.style.opacity = "1"; }, 1);
        } else {
            target.style.opacity = "0";

            setTimeout(() => { target.style.display = "none"; }, 500);
        }
    }
}

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_dualbutton() {
        return new dualbutton_applet(
            this.#target,
            this.#maximalise,
            this.#minimalise,
            this.#animation
        );
    }

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

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

        return this.#build_dualbutton();
    }
}

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();
        }
    }
}

class dualbutton_applet extends applet {
    #open;
    #close;

    constructor(target, open, close, animation) {
        super();

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

        if (!dom_manager.is_element(close)) {
            throw "Closer must be an HTML element.";
        }

        if (!dom_manager.is_element(open)) {
            throw "Opener must be an HTML element.";
        }

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

        this.#open = open;
        this.#close = close;
        this._animation = animation;
        this._target = target;
        this._state = false;
        this.hide();
        this.#listen();
    }

    #listen() {
        this.#open.addEventListener("click", () => {
            this.show();
        });

        this.#close.addEventListener("click", () => {
            this.hide();
        });
    }
}

export { applet_builder, applet_animations };