From c9b6b9a5ca082fe7c1b6f58d7713f785a9eb6a5c Mon Sep 17 00:00:00 2001 From: Martial Simon Date: Mon, 15 Sep 2025 01:08:27 +0200 Subject: add: graphs et rushs --- rushs/eplace/src/pages/utils.js | 95 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 95 insertions(+) create mode 100644 rushs/eplace/src/pages/utils.js (limited to 'rushs/eplace/src/pages/utils.js') diff --git a/rushs/eplace/src/pages/utils.js b/rushs/eplace/src/pages/utils.js new file mode 100644 index 0000000..f8b1008 --- /dev/null +++ b/rushs/eplace/src/pages/utils.js @@ -0,0 +1,95 @@ +/** + * Global variables + */ +let [leftTimer, rightTimer] = [null, null]; +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"); + +leftContainer.classList.toggle("Hidden", !leftSize); + +/** + * Calculate the layout of the home page + */ +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, + ); +}); + +// If the mouse holds on the left side of the screen, open the left container +document.addEventListener("mousemove", (e) => { + if (e.clientX < 10) { + if (!leftTimer) { + leftTimer = setTimeout(() => { + leftSize = 1; + localStorage.setItem("leftSize", leftSize); + + calculateLayout(); + setTimeout(() => { + leftContainer.classList.toggle("Hidden", false); + }, 300); + }, 200); + } + } else { + clearTimeout(leftTimer); + leftTimer = null; + } +}); + +// If the mouse holds on the right side of the screen, open the right container +document.addEventListener("mousemove", (e) => { + if (e.clientX > window.innerWidth - 10) { + if (!rightTimer) { + rightTimer = setTimeout(() => { + rightSize = 1; + localStorage.setItem("rightSize", rightSize); + + calculateLayout(); + setTimeout(() => { + rightContainer.classList.toggle("Hidden", false); + }, 300); + }, 200); + } + } else { + clearTimeout(rightTimer); + rightTimer = null; + } +}); -- cgit v1.2.3