fuse desktop/mobile splitters into one function, update accordingly across files

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],
+            sizes: isMobileView ? [100, 100, 100] : [20, 40, 40],
-            minSize: minimise ? [0, 0, 0] : [360, 330, 310],
+            minSize: [360, 330, 310],
-            gutterSize: 4,
+            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,
+            gutterSize: isMobileView ? 0 : 4,
-            minSize: minimise ? [0, 0] : [50, 50]
+            minSize: [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,
         });
     }
 
@@ -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
+     * (Re)render only the favourites category after updating favourites
-     * an operation to 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.setSplitter();
-        this.adjustComponentSizes();
+
-        $("[data-toggle=tooltip]").tooltip("enable");
+        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);
     }
 }

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));

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

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 = [];

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