Reservationer/application/scripts/fullscreen.js

export class fullscreen {
    #node;
    
    constructor() {
        this.#node = null;
    }

    get visible() {
        return this.#node !== null;
    }

    _build_node() {
        throw new TypeError("This is virtual method!");
    }

    get #opacity() {
        if (!this.visible) {
            throw new TypeError("Can not change opacity of not existed.");
        }

        return Number(this.#node.style.opacity);
    }

    set #opacity(target) {
        if (!this.visible) {
            throw new TypeError("Can not change opacity of not existed.");
        }

        this.#node.style.opacity = String(target);
    }

    get_query(selector) {
        if (!this.visible) {
            throw new TypeError("Can not get item from not visible.");
        }

        return this.#node.querySelector(selector);
    }

    #prepare() {
        const container = document.createElement("div");
        
        container.classList.add("fullscreen-viewer");
        container.style.transition = "opacity 0.5s";
        container.appendChild(this._build_node());
    
        return container;
    }      

    hide() {
        if (!this.visible) {
            return;
        }

        this.#opacity = 0;

        setTimeout(() => {
            if (!this.visible) {
                return;
            }
                
            this.#node.remove();
            this.#node = null;
        }, 500);
    }   

    show() {
        if (this.visible) {
            return;
        }   
        
        this.#node = this.#prepare();
        this.#opacity = 0;

        document.querySelector("body").appendChild(this.#node);

        setTimeout(() => {
            this.#opacity = 1;
        }, 100);
    }
}