From aa8ed8512243c14d24ac9b418841f79dda96345b Mon Sep 17 00:00:00 2001 From: Sergio Eduardo Castro Ceballos <72516762+SergioCasCeb@users.noreply.github.com> Date: Wed, 1 May 2024 12:02:24 +0200 Subject: [PATCH] Modified the resizing code, to better explain how it works and what values are utilized --- packages/web/src/scripts/main.js | 78 +++++++++++++++++++++----------- 1 file changed, 51 insertions(+), 27 deletions(-) diff --git a/packages/web/src/scripts/main.js b/packages/web/src/scripts/main.js index 45ceb027..c207604f 100644 --- a/packages/web/src/scripts/main.js +++ b/packages/web/src/scripts/main.js @@ -55,6 +55,13 @@ const resizerX = document.querySelector(".vertical-divider") /*** Horizontal sizing section ***/ +//The limits for the menus width before it snaps into its final width (px) +const menuCollapseThreshold = 45; +const menuExpandThreshold = 65; +//The final expand and collapse widths of the menu element (px) +const menuCollapseFinal = 30; +const menuExpandFinal = 80; + /** * Mouse down event listener for the resizerX element which * then runs the onmousemoveX and the onmouseupX functions @@ -75,8 +82,8 @@ function onmousemoveX(e) { e.preventDefault() let clientX = e.clientX const deltaX = clientX - (resizerX.clientX || clientX) - const l = resizerX.previousElementSibling - const r = resizerX.nextElementSibling + const menuContainer = resizerX.previousElementSibling + const editorContainer = resizerX.nextElementSibling if (clientX > screen.width) { resizerX.clientX = screen.width @@ -87,24 +94,26 @@ function onmousemoveX(e) { else { resizerX.clientX = clientX - // LEFT + // LEFT (menu collapse) if (deltaX < 0) { - const w = Math.round(parseInt(getComputedStyle(l).width) + deltaX) - l.style.flex = `0 ${w < 45 ? 30 : w}px` - r.style.flex = "1 0" - if (w < 65) { + const elementWidth = Math.round(parseInt(getComputedStyle(menuContainer).width) + deltaX) + menuContainer.style.flex = `0 ${elementWidth < menuCollapseThreshold ? menuCollapseFinal : elementWidth}px` + editorContainer.style.flex = "1 0" + //Hide the buttons text when the menus width is less than 65px + if (elementWidth < menuExpandThreshold) { textIcon.forEach(text => { text.classList.add("hiddenH") }) } } - // RIGHT + // RIGHT (menu expand) if (deltaX > 0) { - const w = Math.round(parseInt(getComputedStyle(l).width) + deltaX) - l.style.flex = `0 ${w > 65 ? 80 : w}px` - r.style.flex = "1 0" - if (w > 65) { + const elementWidth = Math.round(parseInt(getComputedStyle(menuContainer).width) + deltaX) + menuContainer.style.flex = `0 ${elementWidth > menuExpandThreshold ? menuExpandFinal : elementWidth}px` + editorContainer.style.flex = "1 0" + //Show the buttons text when the menus width is bigger than 65px + if (elementWidth > menuExpandThreshold) { textIcon.forEach(text => { text.classList.remove("hiddenH") }) @@ -128,6 +137,13 @@ function onmouseupX(e) { /*** Vertical sizing section ***/ +//The limits for the consoles height before it snaps into its final height (px) +const consoleCollapseThreshold = 55; +const consoleExpandThreshold = 225; +//The final expand and collapse heights of the collapse element (px) +const consoleCollapseFinal = 43; +const consoleExpandFinal = 210; + /** * Mouse down event listener for the resizerY element which * then runs the onmousemoveY and the onmouseupY functions @@ -148,8 +164,8 @@ function onmousemoveY(e) { e.preventDefault() const clientY = e.clientY const deltaY = clientY - (resizerY.clientY || clientY) - const t = resizerY.previousElementSibling - const b = resizerY.nextElementSibling + const editorContainer = resizerY.previousElementSibling + const consoleContainer = resizerY.nextElementSibling if (clientY > screen.height) { resizerY.clientY = screen.height @@ -159,13 +175,15 @@ function onmousemoveY(e) { } else { resizerY.clientY = clientY - // DOWN + + // DOWN (Console collapse) if (deltaY > 0) { - const h = Math.round(parseInt(getComputedStyle(b).height) - deltaY) - b.style.flex = `0 ${h < 55 ? 43 : h}px` - t.style.flex = "1 0" + const consoleHeight = Math.round(parseInt(getComputedStyle(consoleContainer).height) - deltaY) + consoleContainer.style.flex = `0 ${consoleHeight < consoleCollapseThreshold ? consoleCollapseFinal : consoleHeight}px` + editorContainer.style.flex = "1 0" - if (h < 43) { + //If the console is fully collapse, then change the state of the console element, as well as changing to the expand arrows icon + if (consoleHeight < consoleCollapseFinal) { consoleElement.classList.remove("expanded") consoleElement.classList.add("collapsed") @@ -174,19 +192,24 @@ function onmousemoveY(e) { minMaxBtn.children[0].classList.remove("collapse-arrows") } - if (h < 445) { + //Show the buttons text only if there is enough space + if (consoleHeight < 445) { textIcon.forEach(text => { text.classList.remove("hiddenV") }) } } - // UP + + // UP (Console expand) + /*Note: Unlike the horizontal resizer, to decide how much the console should be able to expand the height of the editor is used rather than the console height. + This is to assure be responsiveness, since it is easier to know how small the editor can be in any screen size.*/ if (deltaY < 0) { - const h = Math.round(parseInt(getComputedStyle(t).height) + deltaY) - t.style.flex = `0 ${h < 225 ? 210 : h}px` - b.style.flex = "1 0" + const editorHeight = Math.round(parseInt(getComputedStyle(editorContainer).height) + deltaY) + editorContainer.style.flex = `0 ${editorHeight < consoleExpandThreshold ? consoleExpandFinal : editorHeight}px` + consoleContainer.style.flex = "1 0" - if (h > 714) { + //If the console is not fully collapse, update the console element state to expanded and show the collapse arrows icon + if (editorHeight > 714) { consoleElement.classList.remove("collapsed") consoleElement.classList.add("expanded") @@ -195,7 +218,8 @@ function onmousemoveY(e) { minMaxBtn.children[0].classList.add("collapse-arrows") } - if (h < 310) { + //Hide the buttons text when the editor width is less than 310px + if (editorHeight < 310) { textIcon.forEach(text => { text.classList.add("hiddenV") }) @@ -214,4 +238,4 @@ function onmouseupY(e) { document.removeEventListener("mousemove", onmousemoveY) document.removeEventListener("mouseup", onmouseupY) delete e.clientY -} +} \ No newline at end of file