eplace/src/pages/utils.js

/**
 * Global variables
 */
let [leftSize, rightSize] = [
    localStorage.getItem("leftSize") ?? 0,
    localStorage.getItem("rightSize") ?? 0,
];

const parentContainer = document.getElementById("container");

const leftContainer = document.getElementById("left-container");
const closeLeftButton = document.getElementById("close-left");
const rightContainer = document.getElementById("right-container");
const closeRightButton = document.getElementById("close-right");

const roomButton = document.getElementById("MenuButton");
const chatButton = document.getElementById("ChatButton");

leftContainer.classList.toggle("Hidden", !leftSize);

/**
 * Calculate the layout of the home page.
 *
 * Initialize the layout of the home page, the left and right sidebars, the
 * rest of the script adds event listeners to the elements in the layout so
 * that the layout follows the mouse cursor when clicked and dragged.
 *
 * @returns {void}
 **/
export const calculateLayout = () => {
    const parentContainerSize = `${4.5 - leftSize - rightSize}fr`;

    // left and right are reversed because of the grid layout
    parentContainer.style.gridTemplateColumns = `${leftSize}fr ${parentContainerSize} ${rightSize}fr`;
    leftContainer.style.opacity = leftSize;
    rightContainer.style.opacity = rightSize;
};

closeLeftButton.addEventListener("click", () => {
    leftSize = 1 - leftSize;
    localStorage.setItem("leftSize", leftSize);

    calculateLayout();
    setTimeout(
        () => {
            leftContainer.classList.toggle("Hidden", true);
        },
        leftSize ? 0 : 300,
    );
});

closeRightButton.addEventListener("click", () => {
    rightSize = 1 - rightSize;
    localStorage.setItem("rightSize", rightSize);

    calculateLayout();
    setTimeout(
        () => {
            rightContainer.classList.toggle("Hidden", true);
        },
        rightSize ? 0 : 300,
    );
});

roomButton.addEventListener("click", () => {
    leftSize = 1;
    localStorage.setItem("leftSize", leftSize);

    calculateLayout();
    setTimeout(() => {
        leftContainer.classList.toggle("Hidden", false);
    }, 300);
});

chatButton.addEventListener("click", () => {
    rightSize = 1;
    localStorage.setItem("rightSize", rightSize);

    calculateLayout();
    setTimeout(() => {
        rightContainer.classList.toggle("Hidden", false);
    }, 300);
});