From bf27cbb641a9c7db55e0546e58b0257d8867ffeb Mon Sep 17 00:00:00 2001 From: Robin Scholtes Date: Tue, 15 Aug 2023 16:41:22 +1200 Subject: [PATCH] fuse desktop/mobile splitters into one function, update accordingly across files --- src/web/App.mjs | 94 +++++++++----------------------- src/web/Manager.mjs | 2 +- src/web/TODO.md | 1 + src/web/waiters/RecipeWaiter.mjs | 2 +- src/web/waiters/WindowWaiter.mjs | 9 +-- 5 files changed, 32 insertions(+), 76 deletions(-) diff --git a/src/web/App.mjs b/src/web/App.mjs index 8f6484c6..72973d9c 100755 --- a/src/web/App.mjs +++ b/src/web/App.mjs @@ -251,56 +251,40 @@ class App { if (this.isMobileView()) { this.setMobileUI(); } else { - this.setDesktopUI(false); + this.setDesktopUI(); } } /** - * Set desktop splitters + * Set splitter * - * @param {boolean} minimise + * We don't actually functionally use splitters on mobile, but we leverage the splitters + * to create our desired layout. This prevents some problems when resizing + * from mobile to desktop and vice versa and reduces code complexity */ - setDesktopSplitter(minimise) { + setSplitter() { if (this.columnSplitter) this.columnSplitter.destroy(); if (this.ioSplitter) this.ioSplitter.destroy(); + const isMobileView = this.isMobileView(); + this.columnSplitter = Split(["#operations", "#recipe", "#IO"], { - sizes: [20, 40, 40], - minSize: minimise ? [0, 0, 0] : [360, 330, 310], - gutterSize: 4, + sizes: isMobileView ? [100, 100, 100] : [20, 40, 40], + minSize: [360, 330, 310], + gutterSize: isMobileView ? 0 : 4, expandToMin: true, onDrag: debounce(() => { - this.adjustComponentSizes(); + if (!isMobileView) { + this.manager.input.calcMaxTabs(); + this.manager.output.calcMaxTabs(); + } }, 50, "dragSplitter", this, []) }); this.ioSplitter = Split(["#input", "#output"], { direction: "vertical", - gutterSize: 4, - minSize: minimise ? [0, 0] : [50, 50] - }); - } - - /** - * Set mobile layout - * - * We don't actually use splitters on mobile, but we leverage the splitters - * to create our desired layout. This prevents some problems when resizing - * from mobile to desktop and vice versa - */ - setMobileSplitter() { - if (this.columnSplitter) this.columnSplitter.destroy(); - if (this.ioSplitter) this.ioSplitter.destroy(); - - this.columnSplitter = Split(["#operations", "#recipe", "#IO"], { - sizes: [100, 100, 100], - gutterSize: 0, - expandToMin: true, - }); - - this.ioSplitter = Split(["#input", "#output"], { - direction: "vertical", - gutterSize: 0, + gutterSize: isMobileView ? 0 : 4, + minSize: [50, 50] }); } @@ -431,7 +415,6 @@ class App { updateFavourites(favourites, isExpanded = false) { this.saveFavourites(favourites); this.loadFavourites(); - this.buildFavouritesCategory(isExpanded); window.dispatchEvent(this.manager.favouritesupdate); @@ -440,8 +423,7 @@ class App { } /** - * (Re)render only the favourites category after adding - * an operation to favourites + * (Re)render only the favourites category after updating favourites * * @param {Boolean} isExpanded ( false by default ) */ @@ -579,7 +561,7 @@ class App { /** * Gets the current recipe configuration. * - * @returns {Object[]} + * @returns {Object[]} recipeConfig - The recipe configuration */ getRecipeConfig() { return this.manager.recipe.getConfig(); @@ -639,25 +621,6 @@ class App { } - /** - * Resets the splitter positions to default for desktop UI. - */ - resetLayout() { - this.columnSplitter.setSizes([20, 30, 50]); - this.ioSplitter.setSizes([50, 50]); - this.adjustComponentSizes(); - } - - - /** - * Adjust components to fit their containers. - */ - adjustComponentSizes() { - this.manager.input.calcMaxTabs(); - this.manager.output.calcMaxTabs(); - } - - /** * Sets the compile message ( "notice" in #banner ). */ @@ -845,7 +808,6 @@ class App { this.loadURIParams(); } - /** * Set element visibility * @@ -859,23 +821,21 @@ class App { /** * Set desktop UI ( on init and on window resize events ) - * - * @param {boolean} minimise */ - setDesktopUI(minimise) { + setDesktopUI() { this.setCompileMessage(); - this.setDesktopSplitter(minimise); - this.adjustComponentSizes(); - $("[data-toggle=tooltip]").tooltip("enable"); + this.setSplitter(); + + this.manager.input.calcMaxTabs(); + this.manager.output.calcMaxTabs(); } /** * Set mobile UI ( on init and on window resize events ) */ setMobileUI() { - this.setMobileSplitter(); + this.setSplitter(false); this.assignAvailableHeight(); - $("[data-toggle=tooltip]").tooltip("disable"); } /** @@ -904,7 +864,7 @@ class App { } /** - * Build a CCategoryList element and append it to #categories + * Build a CCategoryList component and append it to #categories */ buildCategoryList() { // double-check if the c-category-list already exists, @@ -919,8 +879,8 @@ class App { this.operations, true ); - categoryList.build(); + categoryList.build(); document.querySelector("#categories").appendChild(categoryList); } } diff --git a/src/web/Manager.mjs b/src/web/Manager.mjs index 607759f6..cc2f2fff 100755 --- a/src/web/Manager.mjs +++ b/src/web/Manager.mjs @@ -163,7 +163,7 @@ class Manager { this.addDynamicListener("textarea.arg", "drop", this.recipe.textArgDrop, this.recipe); // Input - document.getElementById("reset-layout").addEventListener("click", this.app.resetLayout.bind(this.app)); + document.getElementById("reset-layout").addEventListener("click", this.app.setDesktopUI.bind(this.app)); this.addListeners("#clr-io,#btn-close-all-tabs", "click", this.input.clearAllIoClick, this.input); this.addListeners("#open-file,#open-folder", "change", this.input.inputOpen, this.input); document.getElementById("btn-open-file").addEventListener("click", this.input.inputOpenClick.bind(this.input)); diff --git a/src/web/TODO.md b/src/web/TODO.md index 945672b1..d290c2cd 100644 --- a/src/web/TODO.md +++ b/src/web/TODO.md @@ -5,3 +5,4 @@ manual testing issues mobile: - all ops with bootstrap checkboxes in recipe break ( due to the bootstrap checkbox func not being applied ). Need to replace / remove this +- on ingredient input change ( for instance 'to charcode' 'base' or whatever ) on backspace / removing the value, there is a popup at teh bottem [object Object]. Also happens on actual CC but still. Only happens when value = null diff --git a/src/web/waiters/RecipeWaiter.mjs b/src/web/waiters/RecipeWaiter.mjs index 43cead87..a4bb1178 100755 --- a/src/web/waiters/RecipeWaiter.mjs +++ b/src/web/waiters/RecipeWaiter.mjs @@ -164,7 +164,7 @@ class RecipeWaiter { /** * Generates a configuration object to represent the current recipe. * - * @returns {recipeConfig} + * @returns {Object[]} recipeConfig - The recipe configuration */ getConfig() { const config = []; diff --git a/src/web/waiters/WindowWaiter.mjs b/src/web/waiters/WindowWaiter.mjs index 616d7500..59b81d99 100755 --- a/src/web/waiters/WindowWaiter.mjs +++ b/src/web/waiters/WindowWaiter.mjs @@ -25,9 +25,6 @@ class WindowWaiter { /** * Handler for window resize events. - * - * Resets adjustable component sizes after 200ms (so that continuous resizing doesn't cause - * continuous resetting). */ windowResize() { if (!this.app.isMobileView()) { @@ -41,8 +38,6 @@ class WindowWaiter { if (document.getElementById("output").classList.contains("maximised-pane")) { this.manager.controls.setPaneMaximised("output", true); } - - debounce(this.app.adjustComponentSizes, 200, "windowResize", this.app, [])(); } @@ -51,9 +46,9 @@ class WindowWaiter { * Correct the height of #recipe */ onResizeToDesktop() { - this.app.setDesktopUI(false); + this.app.setDesktopUI(); - // disable app popovers on li.operation elements + // enable popovers on li.operation elements $(document.querySelectorAll("li.operation")).popover("enable"); // if a window is resized past breakpoint while #recipe or #input is maximised, close these maxed panes