Dynamische menu in plaats van hard-coded in index.html

builddate.js

@@ -1 +1 @@
-var CONF_builddate="20241116-202831"
+var CONF_builddate="20241117-113301"

css/styles.css

@@ -54,6 +54,10 @@ ul#minitabs li {
   display: inline;
   margin: 0 6px;
 }
+ul#minitabs li.menu-item { 
+  display: inline; margin: 
+  0 6px; 
+}
 ul#minitabs a {
   text-decoration: none;
   padding: 0 0 3px;

eendraadschema.js

@@ -1234,7 +1234,7 @@ function json_to_structure(text, version, redraw) {
     structure.reSort();
     // Draw the structure
     if (redraw == true)
-        HLRedrawTree();
+        topMenu.selectMenuItemByName('Bewerken'); // Ga naar het bewerken scherm, dat zal automatisch voor hertekenen zorgen.
 }
 /* FUNCTION import_to_structure
    
@@ -1468,6 +1468,55 @@ var undoRedo = /** @class */ (function () {
     undoRedo.prototype.redoStackSize = function () { return (this.history.redoStackSize()); };
     return undoRedo;
 }());
+var TopMenu = /** @class */ (function () {
+    function TopMenu(ulId, liClassName, menuItems) {
+        this.ulElement = document.getElementById(ulId);
+        this.liClassName = liClassName;
+        this.menuItems = menuItems;
+        this.renderMenu();
+        this.resetToFirstItem(); // Ensure the first item is selected initially
+    }
+    TopMenu.prototype.renderMenu = function () {
+        var _this = this;
+        this.ulElement.innerHTML = ''; // Clear any existing content
+        this.menuItems.forEach(function (item) {
+            var liElement = document.createElement('li');
+            var aElement = document.createElement('a');
+            liElement.className = _this.liClassName;
+            aElement.innerText = item.name;
+            aElement.addEventListener('click', function () {
+                _this.selectItem(aElement);
+                item.callback();
+            });
+            liElement.appendChild(aElement);
+            _this.ulElement.appendChild(liElement);
+        });
+    };
+    TopMenu.prototype.selectItem = function (selectedElement) {
+        // Remove 'current' ID from all <a> elements
+        var items = this.ulElement.querySelectorAll('a');
+        items.forEach(function (item) { return item.removeAttribute('id'); });
+        // Add 'current' ID to the clicked <a> element
+        selectedElement.id = 'current';
+    };
+    TopMenu.prototype.resetToFirstItem = function () {
+        var firstItem = this.ulElement.querySelector('a');
+        if (firstItem) {
+            this.selectItem(firstItem);
+        }
+    };
+    TopMenu.prototype.selectMenuItemByName = function (name) {
+        var item = this.menuItems.find(function (menuItem) { return menuItem.name === name; });
+        if (item) {
+            var aElement = Array.from(this.ulElement.querySelectorAll('a')).find(function (a) { return a.innerText === name; });
+            if (aElement) {
+                this.selectItem(aElement);
+                item.callback();
+            }
+        }
+    };
+    return TopMenu;
+}());
 var List_Item = /** @class */ (function () {
     // -- Constructor --
     function List_Item(mylist) {
@@ -6780,6 +6829,17 @@ var CONF_upload_OK = "ask"; //can be "ask", "yes", "no"; //before uploading, we
 var session = new Session();
 var structure;
 var undostruct = new undoRedo(100);
+// Build the menu
+var menuItems = [
+    { name: 'Nieuw', callback: restart_all },
+    { name: 'Bestand', callback: showFilePage },
+    { name: 'Bewerken', callback: HLRedrawTree },
+    { name: 'Print', callback: printsvg },
+    { name: 'Documentatie', callback: function () { window.open('Documentation/edsdoc.pdf', '_blank'); } },
+    { name: 'Info/Contact', callback: openContactForm }
+];
+var topMenu = new TopMenu('minitabs', 'menu-item', menuItems);
+// Download a default structure
 import_to_structure(EXAMPLE_DEFAULT, false); //Just in case the user doesn't select a scheme and goes to drawing immediately, there should be something there
 // Now add handlers for everything that changes in the left column
 document.querySelector('#left_col_inner').addEventListener('change', function (event) {

index.html

@@ -20,17 +20,7 @@
   </head>
   <body>
     <div class="container">
-      <div id="topmenu">
-        <ul id="minitabs">
-          <!--<li><a href="#">Thuis</a></li>-->
-          <li><a href="javascript:restart_all()">Nieuw</a></li>
-          <li><a href="javascript:showFilePage()">Bestand</a></li>
-          <li><a href="javascript:HLRedrawTree()">Bewerken</a></li>
-          <li><a href="javascript:printsvg()">Print</a></li>
-          <li><a href="Documentation/edsdoc.pdf" target="_blank">Documentatie</a></li>
-          <li><a href="javascript:openContactForm()">Info/Contact</a></li>
-        </ul>
-      </div>
+      <div id="topmenu"><ul id="minitabs"></ul></div>
       <div id="app">
         <div id="configsection" class="configsection"></div> 
         <div id="ribbon" style="display:none;"></div>

src/TopMenu.ts

@@ -0,0 +1,68 @@
+interface MenuItem {
+    name: string;
+    callback: () => void;
+}
+
+class TopMenu {
+    private ulElement: HTMLUListElement;
+    private liClassName: string;
+    private menuItems: MenuItem[];
+
+    constructor(ulId: string, liClassName: string, menuItems: MenuItem[]) {
+        this.ulElement = document.getElementById(ulId) as HTMLUListElement;
+        this.liClassName = liClassName;
+        this.menuItems = menuItems;
+
+        this.renderMenu();
+        this.resetToFirstItem(); // Ensure the first item is selected initially
+    }
+
+    private renderMenu() {
+        this.ulElement.innerHTML = ''; // Clear any existing content
+        this.menuItems.forEach(item => {
+            const liElement = document.createElement('li');
+            const aElement = document.createElement('a');
+
+            liElement.className = this.liClassName;
+            aElement.innerText = item.name;
+
+            aElement.addEventListener('click', () => {
+                this.selectItem(aElement);
+                item.callback();
+            });
+
+            liElement.appendChild(aElement);
+            this.ulElement.appendChild(liElement);
+        });
+    }
+
+    private selectItem(selectedElement: HTMLAnchorElement) {
+        // Remove 'current' ID from all <a> elements
+        const items = this.ulElement.querySelectorAll('a');
+        items.forEach(item => item.removeAttribute('id'));
+
+        // Add 'current' ID to the clicked <a> element
+        selectedElement.id = 'current';
+    }
+
+    public resetToFirstItem() {
+        const firstItem = this.ulElement.querySelector('a');
+        if (firstItem) {
+            this.selectItem(firstItem as HTMLAnchorElement);
+        }
+    }
+
+    public selectMenuItemByName(name: string) { 
+        const item = this.menuItems.find(menuItem => menuItem.name === name); 
+        if (item) { 
+            const aElement = Array.from(this.ulElement.querySelectorAll('a')).find(a => a.innerText === name); 
+            if (aElement) { 
+                this.selectItem(aElement as HTMLAnchorElement); 
+                item.callback(); 
+            } 
+        } 
+    }
+
+}
+
+

src/importExport.ts

@@ -278,7 +278,8 @@ function json_to_structure(text: string, version = 0, redraw = true) {
     structure.reSort();
 
     // Draw the structure
-    if (redraw == true) HLRedrawTree();
+    if (redraw == true) topMenu.selectMenuItemByName('Bewerken'); // Ga naar het bewerken scherm, dat zal automatisch voor hertekenen zorgen.
+
 }
 
 /* FUNCTION import_to_structure

src/main.ts

@@ -361,6 +361,21 @@ var session = new Session();
 var structure: Hierarchical_List;
 var undostruct: undoRedo = new undoRedo(100);
 
+// Build the menu
+
+const menuItems: MenuItem[] = [
+    { name: 'Nieuw', callback: restart_all },
+    { name: 'Bestand', callback: showFilePage },
+    { name: 'Bewerken', callback: HLRedrawTree },
+    { name: 'Print', callback: printsvg },
+    { name: 'Documentatie', callback: () => {window.open('Documentation/edsdoc.pdf', '_blank');} },
+    { name: 'Info/Contact', callback: openContactForm }
+];
+
+const topMenu = new TopMenu('minitabs', 'menu-item', menuItems);
+
+// Download a default structure
+
 import_to_structure(EXAMPLE_DEFAULT,false); //Just in case the user doesn't select a scheme and goes to drawing immediately, there should be something there
 
 // Now add handlers for everything that changes in the left column

src/tsconfig.json

@@ -12,6 +12,7 @@
     "print/*.ts",
     "importExport.ts",
     "undoRedo.ts",
+    "TopMenu.ts",
     "List_Item/List_Item.ts",
     "List_Item/Electro_Item.ts",
     "List_Item/Schakelaars/Schakelaar.ts",