Merge pull request #205 from mdenet/fix/204-errors-on-resize

Fix errors on resize
mdenet · Apr 12, 2024 · fe88277 · fe88277
2 parents ea11d77 + 0e92036
commit fe88277
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 29 deletions.
diff --git a/platform/src/EducationPlatformApp.js b/platform/src/EducationPlatformApp.js
@@ -30,7 +30,7 @@ import { CompositePanel } from './CompositePanel.js';
 import { Button } from './Button.js';
 
 import { Preloader } from './Preloader.js';
-import { Layout } from './Layout.js';
+import { Layout, PANEL_HOLDER_ID } from './Layout.js';
 import { PlaygroundUtility } from './PlaygroundUtility.js';
 import { jsonRequest, urlParamPrivateRepo, utility } from './Utility.js';
 import { ErrorHandler } from './ErrorHandler.js';
@@ -532,11 +532,11 @@ class EducationPlatformApp {
 
 
     fit() {
-
-        var splitter = document.getElementById("splitter");
-        splitter.style.minHeight = window.innerHeight + "px";
-        splitter.style.maxHeight = window.innerHeight + "px";
-
+        var splitter = document.getElementById(PANEL_HOLDER_ID);
+        if (splitter){
+            splitter.style.minHeight = window.innerHeight + "px";
+            splitter.style.maxHeight = window.innerHeight + "px";
+        }
         this.panels.forEach(panel => panel.fit());
         this.preloader.hide();
     }

diff --git a/platform/src/Layout.js b/platform/src/Layout.js
@@ -1,3 +1,4 @@
+const PANEL_HOLDER_ID = "navview-content-panels";
 
 class Layout {
 
@@ -9,43 +10,48 @@ class Layout {
      */
     createFromPanels(rootId, panels){
 
+        if (panels == null || panels.length < 1){
+             // Nothing to do
+            return;
+        }
+
         var root = document.getElementById(rootId);
         root.innerHTML = "";
 
-        var splitter;
+        var panelHolderElement;
 
         if ( panels.length == 1 ) {
-            splitter = Layout.createVerticalSplitter([panels[0].getElement()]);
+            panelHolderElement = panels[0].getElement(); // only the element to add
 
         } else if ( panels.length == 2  ) {
-            splitter = Layout.createVerticalSplitter([panels[0].getElement(), panels[1].getElement()], "50, 50" );
+                panelHolderElement = Layout.createVerticalSplitter([panels[0].getElement(), panels[1].getElement()], "50, 50" );
 
         } else {
-            var panelsToLayout = [...panels];            
+            // Three or more panels
+            var panelsToLayout = [...panels];
             var numberOfVerticalSplitters= Math.floor(panels.length / 2 );
             var verticalSplitters = [];
             var splitProportions =  ("10, ".repeat(numberOfVerticalSplitters)).slice(0, -2);
 
             // Layout pairs of panels
             for ( let sNo = 0; sNo < numberOfVerticalSplitters; sNo++) {
-                verticalSplitters.push( 
-                    // Appearance:                                Top               ,                  Bottom 
+                verticalSplitters.push(
+                    // Appearance:                                Top               ,                  Bottom
                     Layout.createVerticalSplitter([panelsToLayout.pop().getElement(), panelsToLayout.pop().getElement()] ) 
-                ); 
+                );
             }
 
             // Odd number of panels so add the last element
             if (panelsToLayout.length==1){
-                verticalSplitters.push( Layout.createVerticalSplitter([panelsToLayout.pop().getElement()]) );
+                verticalSplitters.push(panelsToLayout.pop().getElement());
             }
 
-            splitter = Layout.createHorizontalSplitter( verticalSplitters, splitProportions);   
+            panelHolderElement = Layout.createHorizontalSplitter( verticalSplitters, splitProportions);
         }
 
-        splitter.setAttribute("class", "h-100");
-        splitter.setAttribute("id", "splitter");
-        splitter.setAttribute("style", "min-height:800px");
-        root.appendChild(splitter);
+        Layout.addPanelHolderAttributes(panelHolderElement);
+
+        root.appendChild(panelHolderElement);
     }
 
 
@@ -62,8 +68,7 @@ class Layout {
         root.innerHTML = "";
 
         let verticalSplitters=[];
-        let splitter;
-
+        let panelHolderElement;
 
         // Get the number of rows and columns
         let numberOfRows = layout.length;
@@ -89,23 +94,37 @@ class Layout {
 
             // Create the splitters for the row
             let splitProportions = ("10, ".repeat(numberOfRows)); // Add a proportion per splitter
-            verticalSplitters.push ( Layout.createVerticalSplitter( panelsToLayout.map( pn => pn.getElement() ), splitProportions) );
+
+            if (panelsToLayout.length > 1) {
+                verticalSplitters.push( Layout.createVerticalSplitter( panelsToLayout.map( pn => pn.getElement() ), splitProportions) );
+            } else {
+                // No splitter required for a single panel
+                verticalSplitters.push( panelsToLayout[0].getElement() );
+            }
         }
 
         if (numberOfColumns > 1) {
             let splitProportions =  ("10, ".repeat(verticalSplitters.length)); // Add a proportion per splitter
-            splitter = Layout.createHorizontalSplitter( verticalSplitters, splitProportions ); 
+            panelHolderElement = Layout.createHorizontalSplitter( verticalSplitters, splitProportions );
 
         } else {
             // No splitter for single columns
-            splitter = Layout.createVerticalSplitter( verticalSplitters) ;
+            panelHolderElement = verticalSplitters[0];
         } 
 
-        splitter.setAttribute("class", "h-100");
-        splitter.setAttribute("id", "splitter");
-        splitter.setAttribute("style", "min-height:800px");
+        Layout.addPanelHolderAttributes(panelHolderElement);
 
-        root.appendChild(splitter);
+        root.appendChild(panelHolderElement);
+    }
+
+    /**
+     * Add the panel holder attributes to the given element.
+     * @param {HTMLElement} holderElement - The HTML element to add the attributes to
+     */
+    static addPanelHolderAttributes(holderElement){
+        holderElement.setAttribute("class", "h-100");
+        holderElement.setAttribute("id", PANEL_HOLDER_ID);
+        holderElement.setAttribute("style", "min-height:800px");
     }
 
     static createHorizontalSplitter(components, split = "50, 50") {
@@ -131,4 +150,4 @@ class Layout {
 
 }
 
-export { Layout };
+export { Layout, PANEL_HOLDER_ID };