dynamic ctx rendering

index.html

@@ -34,34 +34,7 @@
             </div>
         </div>
 
-        <div id="ctx">
+        <div id="ctx"></div>
-            <div class="ctx-group">
-                <div class="ctx-item">
-                    <p class="ctx-name nosel">New Folder</p>
-                </div>
-            </div>
-            <hr>
-            <div class="ctx-group">
-                <div class="ctx-item">
-                    <p class="ctx-name nosel">Sort by: Name</p>
-                </div>
-                <div class="ctx-item">
-                    <p class="ctx-name nosel">Order: Ascending</p>
-                </div>
-            </div>
-            <hr>
-            <div class="ctx-group">
-                <div class="ctx-item">
-                    <p class="ctx-name nosel">Reload</p>
-                </div>
-                <div class="ctx-item">
-                    <p class="ctx-name nosel">Refresh</p>
-                </div>
-                <div class="ctx-item">
-                    <p class="ctx-name nosel">Options</p>
-                </div>
-            </div>
-        </div>
 
 
         <script src="./scripts/renderer.js"></script>

json/ctx.json

@@ -0,0 +1,14 @@
+[
+    [
+        {"name": "New Folder", "id": "ctx-new-folder", "onclick": "newfolder"}
+    ],
+    [
+        {"name": "Sort by: Name", "id": "ctx-sort-by", "onclick": "changesort"},
+        {"name": "Order: Ascending", "id": "ctx-ascension", "onclick":  "changeascend"}
+    ],
+    [
+        {"name": "Reload", "id": "ctx-reload", "onclick": "reload"},
+        {"name": "Refresh", "id": "ctx-refresh", "onclick": "refresh"},
+        {"name": "Options", "id": "ctx-options", "onclick": "options"}
+    ]
+]

main.js

@@ -22,10 +22,10 @@ async function createWindow () {
     // and load the index.html of the app.
     mainWindow.maximize();
     await mainWindow.loadFile('index.html');
-    //mainWindow.removeMenu();
+    mainWindow.removeMenu();
 
     // Open the DevTools.
-    // mainWindow.webContents.openDevTools()
+    // mainWindow.webContents.openDevTools();
 }
 
 // This method will be called when Electron has finished

scripts/fileview/load/render.js

@@ -25,6 +25,7 @@ module.exports = (dir, options) => {
             if (!cfc.classList.contains('file-active')) {cfc.classList.add('file-active');}
             if (window.kade.cl) {window.kade.cl.classList.remove('file-active');}
             window.kade.cl = cfc;
+            window.kade.ctxel = cfc;
         };
         if (options.animate) {
             cfc.style = `animation-delay: ${num * .03}s`;

scripts/startup/initcontext.js

@@ -0,0 +1,28 @@
+const ctxl = require('../../json/ctx.json');
+
+module.exports = () => {
+    document.getElementById('ctx').style.display = 'none';
+    const ctx = document.getElementById('ctx');
+    console.log(ctxl);
+    try {
+        for (let i = 0; i < ctxl.length; i++) {
+            let k = ctxl[i];
+            let ctxg = document.createElement('div');
+            ctxg.className = 'ctx-group';
+            ctx.appendChild(ctxg);
+            for (let x = 0; x < k.length; x++) {
+                let item = k[x];
+                let ctxi = document.createElement('div');
+                ctxi.className = 'ctx-item';
+                ctxi.id = item.id;
+                try {ctxi.onclick = require(`../contextmenu/${item.onclick}`);} catch {}
+                ctxg.appendChild(ctxi);
+                let name = document.createElement('p');
+                name.classList.add('ctx-name', 'nosel');
+                name.innerHTML = item.name;
+                ctxi.appendChild(name);
+            }
+            if (i + 1 < ctxl.length) {ctx.appendChild(document.createElement('hr'));}
+        }
+    } catch (e) {console.error(e);}
+};

scripts/startup/preload.js

@@ -17,6 +17,8 @@ window.addEventListener('DOMContentLoaded', () => {
 
     const startDir = `${os.homedir}\\Desktop`;
 
+    require('./initcontext')();
+
     require('../fileview/refresh')(startDir);
     setButtons();
 
@@ -24,13 +26,12 @@ window.addEventListener('DOMContentLoaded', () => {
         setTimeout(function () {
             if (window.kade.elc) {window.kade.elc = false; return;}
             if (window.kade.cl) {window.kade.cl.classList.remove('file-active');}
+            window.kade.ctxel = null;
         }, 100);
         if (window.kade.context) {hideContext(window);}
     }
 
-    document.getElementById('ctx').style.display = 'none';
+    window.kade.refreshInterval = setInterval(lightRefresh, 60000);
-
-    window.kade.refreshInterval = setInterval(lightRefresh, 180000);
     window.kade.checkDirInterval = setInterval(checkDir, 5000);
 
     require('../keybinds/handleKey')();