✨ Hotswitch theme directly from fsDisplay

src/_renderer.js

@@ -19,46 +19,52 @@ const fontsDir = path.join(electron.remote.app.getPath("userData"), "fonts");
 const settingsFile = path.join(electron.remote.app.getPath("userData"), "settings.json");
 
 // Load config
-const settings = require(settingsFile);
+window.settings = require(settingsFile);
 
 // Load UI theme
-let theme = require(path.join(themesDir, settings.theme+".json"));
-
-document.querySelector("head").innerHTML += `<style id="theme_${settings.theme}_css">
-@font-face {
-    font-family: "${theme.cssvars.font_main}";
-    src: url("${path.join(fontsDir, theme.cssvars.font_main.toLowerCase().replace(/ /g, '_')+'.woff2')}") format("woff2");
-}
-@font-face {
-    font-family: "${theme.cssvars.font_main_light}";
-    src: url("${path.join(fontsDir, theme.cssvars.font_main_light.toLowerCase().replace(/ /g, '_')+'.woff2')}") format("woff2");
-}
-@font-face {
-    font-family: "${theme.terminal.fontFamily}";
-    src: url("${path.join(fontsDir, theme.terminal.fontFamily.toLowerCase().replace(/ /g, '_')+'.woff2')}") format("woff2");
-}
-
-:root {
-    --font_main: "${theme.cssvars.font_main}";
-    --font_main_light: "${theme.cssvars.font_main_light}";
-    --color_r: ${theme.colors.r};
-    --color_g: ${theme.colors.g};
-    --color_b: ${theme.colors.b};
-    --color_black: ${theme.colors.black};
-    --color_light_black: ${theme.colors.light_black};
-    --color_grey: ${theme.colors.grey};
-}
-
-body {
-    font-family: var(--font_main), sans-serif;
-}
-</style>`;
-
-window.settings = settings;
-window.theme = theme;
-window.theme.r = theme.colors.r;
-window.theme.g = theme.colors.g;
-window.theme.b = theme.colors.b;
+window._loadTheme = (theme) => {
+
+    if (document.querySelector("style.theming")) {
+        document.querySelector("style.theming").remove();
+    }
+
+    document.querySelector("head").innerHTML += `<style class="theming" id="theme_${settings.theme}_css">
+    @font-face {
+        font-family: "${theme.cssvars.font_main}";
+        src: url("${path.join(fontsDir, theme.cssvars.font_main.toLowerCase().replace(/ /g, '_')+'.woff2')}") format("woff2");
+    }
+    @font-face {
+        font-family: "${theme.cssvars.font_main_light}";
+        src: url("${path.join(fontsDir, theme.cssvars.font_main_light.toLowerCase().replace(/ /g, '_')+'.woff2')}") format("woff2");
+    }
+    @font-face {
+        font-family: "${theme.terminal.fontFamily}";
+        src: url("${path.join(fontsDir, theme.terminal.fontFamily.toLowerCase().replace(/ /g, '_')+'.woff2')}") format("woff2");
+    }
+
+    :root {
+        --font_main: "${theme.cssvars.font_main}";
+        --font_main_light: "${theme.cssvars.font_main_light}";
+        --color_r: ${theme.colors.r};
+        --color_g: ${theme.colors.g};
+        --color_b: ${theme.colors.b};
+        --color_black: ${theme.colors.black};
+        --color_light_black: ${theme.colors.light_black};
+        --color_grey: ${theme.colors.grey};
+    }
+
+    body {
+        font-family: var(--font_main), sans-serif;
+    }
+    </style>`;
+
+    window.theme = theme;
+    window.theme.r = theme.colors.r;
+    window.theme.g = theme.colors.g;
+    window.theme.b = theme.colors.b;
+};
+
+_loadTheme(require(path.join(themesDir, settings.theme+".json")));
 
 // Startup boot log
 let resumeInit, initUI, initMods, initGreeter;
@@ -270,6 +276,31 @@ initGreeter = () => {
     });
 };
 
+window.themeChanger = (theme) => {
+    window._loadTheme(require(path.join(themesDir, theme || settings.theme+".json")));
+    for (let i; i < 99999; i++) {
+        clearInterval(i);
+    }
+    delete window.term;
+    delete window.mods;
+    delete window.fsDisp;
+
+    document.getElementById("terminal").innerHTML = "";
+    document.querySelectorAll(".mod_column").forEach((e) => {
+        e.setAttribute("class", "mod_column");
+    });
+    document.querySelectorAll(".mod_column > div").forEach(e => {e.remove()});
+
+    window.term = new Terminal({
+        role: "client",
+        parentId: "terminal"
+    });
+    initMods();
+    window.fsDisp = new FilesystemDisplay({
+        parentId: "filesystem"
+    });
+};
+
 // Prevent showing menu, exiting fullscreen or app with keyboard shortcuts
 window.onkeydown = (e) => {
     if (e.key === "Alt" || e.key === "F11") {

src/classes/filesystem.class.js

@@ -12,7 +12,10 @@ class FilesystemDisplay {
             dir: `<path fill="${this.iconcolor}" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 9.99936,3.99807L 3.99936,3.99807C 2.89436,3.99807 2.00936,4.89406 2.00936,5.99807L 1.99936,17.9981C 1.99936,19.1021 2.89436,19.9981 3.99936,19.9981L 19.9994,19.9981C 21.1029,19.9981 21.9994,19.1021 21.9994,17.9981L 21.9994,7.99807C 21.9994,6.89406 21.1029,5.99807 19.9994,5.99807L 11.9994,5.99807L 9.99936,3.99807 Z "/>`,
             symlink: `<path fill="${this.iconcolor}" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 15.9995,5.99817L 12.9995,5.99817L 12.9995,7.89813L 15.9995,7.89813C 18.2635,7.89813 20.0995,9.73413 20.0995,11.9982C 20.0995,14.2621 18.2635,16.0981 15.9995,16.0981L 12.9995,16.0981L 12.9995,17.9982L 15.9995,17.9982C 19.3145,17.9982 21.9995,15.3121 21.9995,11.9982C 21.9995,8.68414 19.3145,5.99817 15.9995,5.99817 Z M 3.89948,11.9982C 3.89948,9.73413 5.7355,7.89813 7.99948,7.89813L 10.9995,7.89813L 10.9995,5.99817L 7.99948,5.99817C 4.68649,5.99817 1.99948,8.68414 1.99948,11.9982C 1.99948,15.3121 4.68649,17.9982 7.99948,17.9982L 10.9995,17.9982L 10.9995,16.0981L 7.99948,16.0981C 5.7355,16.0981 3.89948,14.2621 3.89948,11.9982 Z M 7.99948,12.9982L 15.9995,12.9982L 15.9995,10.9982L 7.99948,10.9982L 7.99948,12.9982 Z "/>`,
             file: `<path fill="${this.iconcolor}" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 12.9994,8.99807L 12.9994,3.49807L 18.4994,8.99807M 5.99939,1.99807C 4.89438,1.99807 4.0094,2.89406 4.0094,3.99807L 3.99939,19.9981C 3.99939,21.1021 4.88538,21.9981 5.98938,21.9981L 17.9994,21.9981C 19.1034,21.9981 19.9994,21.1021 19.9994,19.9981L 19.9994,7.99807L 13.9994,1.99807L 5.99939,1.99807 Z "/>`,
-            other: `<path fill="${this.iconcolor}" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 11,18L 13,18L 13,16L 11,16L 11,18 Z M 12,6C 9.79,6 8,7.79 8,10L 10,10C 10,8.9 10.9,8 12,8C 13.1,8 14,8.9 14,10C 14,12 11,11.75 11,15L 13,15C 13,12.75 16,12.5 16,10C 16,7.79 14.21,6 12,6 Z M 5,3L 19,3C 20.1046,3 21,3.89543 21,5L 21,19C 21,20.1046 20.1046,21 19,21L 5,21C 3.89543,21 3,20.1046 3,19L 3,5C 3,3.89543 3.89543,3 5,3 Z "/>`
+            other: `<path fill="${this.iconcolor}" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 11,18L 13,18L 13,16L 11,16L 11,18 Z M 12,6C 9.79,6 8,7.79 8,10L 10,10C 10,8.9 10.9,8 12,8C 13.1,8 14,8.9 14,10C 14,12 11,11.75 11,15L 13,15C 13,12.75 16,12.5 16,10C 16,7.79 14.21,6 12,6 Z M 5,3L 19,3C 20.1046,3 21,3.89543 21,5L 21,19C 21,20.1046 20.1046,21 19,21L 5,21C 3.89543,21 3,20.1046 3,19L 3,5C 3,3.89543 3.89543,3 5,3 Z "/>`,
+            edex: {
+                theme: `<path fill="${this.iconcolor}" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 17.9994,3.99805L 17.9994,2.99805C 17.9994,2.44604 17.5514,1.99805 16.9994,1.99805L 4.9994,1.99805C 4.4474,1.99805 3.9994,2.44604 3.9994,2.99805L 3.9994,6.99805C 3.9994,7.55005 4.4474,7.99805 4.9994,7.99805L 16.9994,7.99805C 17.5514,7.99805 17.9994,7.55005 17.9994,6.99805L 17.9994,5.99805L 18.9994,5.99805L 18.9994,9.99805L 8.9994,9.99805L 8.9994,20.998C 8.9994,21.55 9.4474,21.998 9.9994,21.998L 11.9994,21.998C 12.5514,21.998 12.9994,21.55 12.9994,20.998L 12.9994,11.998L 20.9994,11.998L 20.9994,3.99805L 17.9994,3.99805 Z "/>`
+            }
         };
 
         const container = document.getElementById(opts.parentId);
@@ -47,8 +50,10 @@ class FilesystemDisplay {
         };
 
         window.term.oncwdchange = () => {
-            this.readFS();
-            this.watchFS();
+            if (window.term.cwd) {
+                this.readFS();
+                this.watchFS();
+            }
         };
 
         this.watchFS = () => {
@@ -62,8 +67,9 @@ class FilesystemDisplay {
 
         this.readFS = () => {
             if (this.failed === true) return false;
-            document.getElementById("fs_disp_title_dir").innerText = window.term.cwd;
-            fs.readdir(window.term.cwd, (err, content) => {
+            let tcwd = window.term.cwd;
+            document.getElementById("fs_disp_title_dir").innerText = tcwd;
+            fs.readdir(tcwd, (err, content) => {
                 if (err !== null) {
                     this.setFailedState();
                 } else {
@@ -76,60 +82,71 @@ class FilesystemDisplay {
                     };
                     let i = 0;
                     content.forEach(file => {
-                        fs.lstat(path.join(window.term.cwd, file), (err, fstat) => {
-                            if (fstat.isDirectory()) {
-                                this._tmp.dirs.push(file);
-                            } else if (fstat.isSymbolicLink()) {
-                                this._tmp.symlinks.push(file);
-                            } else if (fstat.isFile()) {
-                                this._tmp.files.push(file);
+                        fs.lstat(path.join(tcwd, file), (err, fstat) => {
+                            if (err !== null) {
+                                this.setFailedState();
                             } else {
-                                this._tmp.others.push(file);
-                            }
-
-                            i++;
-                            if (i === content.length) {
-                                if (window.term.cwd !== "/") {
-                                    this.cwd.push({
-                                        name: "..",
-                                        type: "up"
-                                    });
+                                if (fstat.isDirectory()) {
+                                    this._tmp.dirs.push(file);
+                                } else if (fstat.isSymbolicLink()) {
+                                    this._tmp.symlinks.push(file);
+                                } else if (fstat.isFile()) {
+                                    this._tmp.files.push(file);
+                                } else {
+                                    this._tmp.others.push(file);
                                 }
 
-                                this._tmp.dirs.forEach(e => {
-                                    this.cwd.push({
-                                        name: this._escapeHtml(e),
-                                        type: "dir"
+                                i++;
+                                if (i === content.length) {
+                                    if (tcwd !== "/") {
+                                        this.cwd.push({
+                                            name: "..",
+                                            type: "up"
+                                        });
+                                    }
+
+                                    this._tmp.dirs.forEach(e => {
+                                        this.cwd.push({
+                                            name: this._escapeHtml(e),
+                                            type: "dir"
+                                        });
                                     });
-                                });
-                                this._tmp.symlinks.forEach(e => {
-                                    this.cwd.push({
-                                        name: this._escapeHtml(e),
-                                        type: "symlink"
+                                    this._tmp.symlinks.forEach(e => {
+                                        this.cwd.push({
+                                            name: this._escapeHtml(e),
+                                            type: "symlink"
+                                        });
                                     });
-                                });
-                                this._tmp.files.forEach(e => {
-                                    this.cwd.push({
-                                        name: this._escapeHtml(e),
-                                        type: "file"
+                                    this._tmp.files.forEach(e => {
+                                        if (tcwd === themesDir && e.endsWith(".json")) {
+                                            this.cwd.push({
+                                                name: this._escapeHtml(e),
+                                                type: "edex-theme"
+                                            });
+                                        } else {
+                                            this.cwd.push({
+                                                name: this._escapeHtml(e),
+                                                type: "file"
+                                            });
+                                        }
                                     });
-                                });
-                                this._tmp.others.forEach(e => {
-                                    this.cwd.push({
-                                        name: this._escapeHtml(e),
-                                        type: "other"
+                                    this._tmp.others.forEach(e => {
+                                        this.cwd.push({
+                                            name: this._escapeHtml(e),
+                                            type: "other"
+                                        });
                                     });
-                                });
 
-                                si.fsSize(d => {
-                                    d.forEach(fsBlock => {
-                                        if (window.term.cwd.startsWith(fsBlock.mount)) {
-                                            this.fsBlock = fsBlock;
-                                        }
-                                    });
+                                    si.fsSize(d => {
+                                        d.forEach(fsBlock => {
+                                            if (tcwd.startsWith(fsBlock.mount)) {
+                                                this.fsBlock = fsBlock;
+                                            }
+                                        });
 
-                                    this.render();
-                                });
+                                        this.render();
+                                    });
+                                }
                             }
                         });
                     });
@@ -150,6 +167,9 @@ class FilesystemDisplay {
                 if (e.type === "dir" || e.type === "up") {
                     cmd = `window.term.writelr('cd ${e.name}')`;
                 }
+                if (e.type === "edex-theme") {
+                    cmd = `window.themeChanger('${e.name.slice(0, -5)}')`;
+                }
 
                 let icon = "";
                 switch(e.type) {
@@ -165,6 +185,9 @@ class FilesystemDisplay {
                     case "file":
                         icon = this.icons.file;
                         break;
+                    case "edex-theme":
+                        icon = this.icons.edex.theme;
+                        break;
                     default:
                         icon = this.icons.other;
                         break;