@striven-erp/striven-fullscreen/src/strivenfullscreen.js

Take any element and make it full screen

/*
@license/i
* Font Awesome Free 5.11.2 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/

const CLOSEBUTTON = {
    d: 'M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z',
    viewBox: '0 0 352 512'
}

export default class StrivenFullScreen {
    /**
     * Initializes StrivenFullScreen
     * @param {HTMLElement} el Elements to expand into full screen
     * @param {Object} options StrivenFullScreen options
     */
    constructor(el, options = {}) {
        const computedStyleToInlineStyle = require("computed-style-to-inline-style");
        computedStyleToInlineStyle(el, { recursive: true });

        this.content = el.cloneNode(true);
        this.config = options;

        this.html = document.querySelector('html');
        this.overflowProp = this.html.style.overflow;

        window.addEventListener('keydown', (e) => {
            if (e.key) {
                switch (e.key) {
                    case 'Escape':
                        this.collapse();
                        break;
                    default:
                        break;
                }
            } else {
                switch (e.keyCode) {
                    case 13:
                        this.collapse();
                        break;
                    default:
                        break;
                }
            }
        })
    }

    /**
     * Expand the content and expand the full screen mode
     */
    expand() {
        const bg = this.config.backgroundColor;
        this.container = document.createElement('div');
        this.container.setAttribute('style', `
            z-index: 10000;
            height: 100vh;
            width: 100vw;
            overflow-x: scroll;
            position: fixed;
            background-color: ${bg || 'rgba(0, 0, 0, .6)'};
            top: 0; right: 0; left: 0; bottom: 0;
        `);

        this.content.style.position = 'absolute';
        this.content.style.margin = '1rem';
        this.content.style.top = '0';
        this.content.style.bottom = '0';
        this.content.style.left = '0';
        this.content.style.right = '0';

        const closeButton = document.createElement('div');
        closeButton.innerHTML = this.constructSVG(CLOSEBUTTON).innerHTML;
        closeButton.setAttribute('style', `
            cursor: pointer;
            position: fixed;
            right: 5px;
            top: 10px;
            background-color: #fff;
            border: 1px solid #ddd;
            padding: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
        `)

        closeButton.onmouseenter = () => closeButton.style.backgroundColor = '#eee';
        closeButton.onmouseleave = () => closeButton.style.backgroundColor = '#fff';
 
        closeButton.onclick = () => this.collapse();

        this.html.style.overflow = 'hidden';

        this.container.append(this.content);
        this.container.append(closeButton);
        document.body.append(this.container);
    }

    /**
     * Collapse the full screen container
     */
    collapse() {
        if (this.container) {
            this.container.remove();
            this.container = null;
            this.resetOverflow();
        }
    }

    /**
     * Resets the documents overflow to its original property
     */
    resetOverflow() {
        this.html.style.overflow = this.overflowProp;
    }

    /**
     * Creates an svg given the viewbox and d property
     * @param {Object} svgData
     * @returns {HTMLElement} Returns the constructed svg 
     */
    constructSVG(svgData) {
        const { viewBox, d } = svgData;
        const fillColor = "#333";
        const xmlns = "http://www.w3.org/2000/svg";
        const height = "14";
        const width = "16";

        const icon = document.createElement('span');
        const svg = `<svg width="${width}" height="${height}" viewBox="${viewBox}" xmlns="${xmlns}">`;
        const path = `<path fill="${fillColor}" d="${d}"/>`;

        icon.innerHTML = `${svg}${path}</svg>`;

        return icon;
    }
}