chuijs 3.6.3 → 3.6.4

package/framework/components/chui_tree_view/styles.css

@@ -1,76 +1,82 @@
-chui_tree_view {
-    display: flex;
-    flex-direction: column;
-    height: max-content;
-    font-size: var(--font_default_size);
-    font-weight:500;
-    border: none;
-    margin: var(--margin);
-    border-radius: var(--border_radius);
-}
-
-chui_tree_view_main_test {
-    display: flex;
-    flex-direction: column;
-    height: max-content;
-    width: -webkit-fill-available;
-    font-size: var(--font_default_size);
-    font-weight:500;
-    border-radius: var(--border_radius);
-    border: none;
-}
-
-tree_view_button {
-    cursor: pointer;
-    padding: var(--main_padding);
-    width: -webkit-fill-available;
-    text-align: left;
-    outline: none;
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-    border-radius: var(--border_radius);
-    color: var(--text_color);
-    border: none;
-}
-
-tree_view_panel {
-    padding: 0 0 0 10px;
-    display: block;
-    overflow: hidden;
-    width: -webkit-fill-available;
-    max-height: 0;
-    border-bottom-right-radius: var(--border_radius);
-    border-bottom-left-radius: var(--border_radius);
-    color: var(--text_color);
-    border: none;
-}
-
-tree_view_html {
-    padding: 0;
-    width: -webkit-fill-available;
-    display: flex;
-    border: none;
-    flex-direction: column
-}
-
-tree_view_button:hover {
-    color: var(--blue_prime_background);
-    background: var(--blue_prime_background);
-}
-
-tree_view_button:hover tree_view_button_text {
-    color: var(--text_color_hover);
-}
-
-tree_view_button:hover chui_icon {
-    color: var(--text_color_hover);
-}
-
-.tree_view_button_active {
-    color: var(--blue_prime_background)
-}
-
-.tree_view_button_active chui_icon {
-    color: var(--blue_prime_background);
+chui_tree_view {
+    display: flex;
+    flex-direction: column;
+    height: max-content;
+    font-size: var(--font_default_size);
+    font-weight:500;
+    border: none;
+    margin: var(--margin);
+    border-radius: var(--border_radius);
+}
+
+chui_tree_view_main_test {
+    display: flex;
+    flex-direction: column;
+    height: max-content;
+    width: -webkit-fill-available;
+    font-size: var(--font_default_size);
+    font-weight:500;
+    border-radius: var(--border_radius);
+    background: var(--element_background);
+    border: none;
+}
+
+tree_view_button {
+    cursor: pointer;
+    padding: var(--main_padding);
+    width: -webkit-fill-available;
+    text-align: left;
+    outline: none;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    border-radius: var(--border_radius);
+    color: var(--text_color);
+    border: none;
+}
+
+tree_view_panel {
+    padding: 0 0 0 10px;
+    display: block;
+    overflow: hidden;
+    width: -webkit-fill-available;
+    max-height: 0;
+    border-bottom-right-radius: var(--border_radius);
+    border-bottom-left-radius: var(--border_radius);
+    color: var(--text_color);
+    border: none;
+}
+
+tree_view_html {
+    padding: 0;
+    width: -webkit-fill-available;
+    display: flex;
+    border: none;
+    flex-direction: column
+}
+
+tree_view_button:hover {
+    background: var(--blue_prime_background);
+    color: var(--text_color_hover);
+}
+
+tree_view_button:active {
+    background: var(--element_background_prime);
+}
+
+tree_view_button:hover tree_view_button_text {
+    color: var(--text_color_hover);
+}
+
+tree_view_button:hover chui_icon {
+    color: var(--text_color_hover);
+}
+
+.tree_view_button_active {
+    background: var(--blue_prime_background);
+    color: var(--text_color_hover);
+}
+
+.tree_view_button_active chui_icon {
+    color: var(--text_color_hover);
 }

package/framework/components/chui_tree_view/tree_view.js

@@ -1,91 +1,91 @@
-const {Icon, Icons} = require("../chui_icons/icons");
-
-class TreeView {
-    #chui_tree_view = document.createElement(`chui_tree_view`);
-    constructor(options = { width: String(), components: [] }) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_TreeView');
-        let main_test = document.createElement(`chui_tree_view_main_test`);
-        if (options.width !== undefined) {
-            this.#chui_tree_view.style.width = options.width;
-        } else {
-            this.#chui_tree_view.style.width = 'max-content'
-        }
-        options.components.forEach(buttons => {
-            main_test.appendChild(buttons.button)
-            if (buttons.panel !== undefined) {
-                main_test.appendChild(buttons.panel)
-            }
-        })
-        this.#chui_tree_view.appendChild(main_test)
-    }
-    set() {
-        return this.#chui_tree_view;
-    }
-    static Button(options = { title: String(), listener: () => {} }) {
-        let button = document.createElement('tree_view_button');
-        button.addEventListener("click", options.listener);
-        let button_text = document.createElement('tree_view_button_text');
-        button_text.innerHTML = options.title;
-        button.appendChild(button_text)
-        return {
-            title: options.title,
-            button: button
-        };
-    }
-    static ExpandButton(options = { title: String(), subButtons: [], components: [] }) {
-        let button = document.createElement('tree_view_button');
-        let panel = document.createElement('tree_view_panel')
-        button.addEventListener('click', (e) => {
-            button.classList.toggle('tree_view_button_active')
-            let panel = button.nextElementSibling;
-            if (panel.style.maxHeight) {
-                panel.style.maxHeight = panel.scrollHeight + "px";
-                setTimeout(() => {
-                    button.children[1].children[0].style.transform = 'rotate(0deg)';
-                    panel.style.maxHeight = null;
-                    button.style.borderBottomLeftRadius = 'var(--border_radius)';
-                    button.style.borderBottomRightRadius = 'var(--border_radius)';
-                }, 1);
-            } else {
-                setTimeout(() => {
-                    button.children[1].children[0].style.transform = 'rotate(180deg)';
-                    button.style.borderBottomLeftRadius = '0px';
-                    button.style.borderBottomRightRadius = '0px';
-                    panel.style.maxHeight = panel.scrollHeight + "px";
-                    panel.addEventListener('transitionend', () => {
-                        if (panel.style.maxHeight) panel.style.maxHeight = "max-content";
-                    });
-                }, 1);
-            }
-        })
-        let button_text = document.createElement('tree_view_button_text');
-        button_text.innerHTML = options.title;
-        button.appendChild(button_text)
-        let barrow = document.createElement('tree_view_button_arrow')
-        barrow.style.marginLeft = 'auto'
-        barrow.innerHTML = new Icon(Icons.HARDWARE.KEYBOARD_ARROW_DOWN).getHTML();
-        button.appendChild(barrow)
-        let html = document.createElement('tree_view_html')
-        if (options.subButtons !== undefined) {
-            options.subButtons.forEach(sub => {
-                html.appendChild(sub.button)
-                if (sub.panel !== undefined) {
-                    html.appendChild(sub.panel)
-                }
-            })
-        }
-        if (options.components !== undefined) {
-            options.components.forEach(sub => {
-                html.appendChild(sub.set())
-            })
-        }
-        panel.appendChild(html)
-        return {
-            title: options.title,
-            button: button,
-            panel: panel
-        };
-    }
-}
-
+const {Icon, Icons} = require("../chui_icons/icons");
+
+class TreeView {
+    #chui_tree_view = document.createElement(`chui_tree_view`);
+    constructor(options = { width: String(), components: [] }) {
+        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_TreeView');
+        let main_test = document.createElement(`chui_tree_view_main_test`);
+        if (options.width !== undefined) {
+            this.#chui_tree_view.style.width = options.width;
+        } else {
+            this.#chui_tree_view.style.width = 'max-content'
+        }
+        options.components.forEach(buttons => {
+            main_test.appendChild(buttons.button)
+            if (buttons.panel !== undefined) {
+                main_test.appendChild(buttons.panel)
+            }
+        })
+        this.#chui_tree_view.appendChild(main_test)
+    }
+    set() {
+        return this.#chui_tree_view;
+    }
+    static Button(options = { title: String(), listener: () => {} }) {
+        let button = document.createElement('tree_view_button');
+        button.addEventListener("click", options.listener);
+        let button_text = document.createElement('tree_view_button_text');
+        button_text.innerHTML = options.title;
+        button.appendChild(button_text)
+        return {
+            title: options.title,
+            button: button
+        };
+    }
+    static ExpandButton(options = { title: String(), subButtons: [], components: [] }) {
+        let button = document.createElement('tree_view_button');
+        let panel = document.createElement('tree_view_panel')
+        button.addEventListener('click', (e) => {
+            button.classList.toggle('tree_view_button_active')
+            let panel = button.nextElementSibling;
+            if (panel.style.maxHeight) {
+                panel.style.maxHeight = panel.scrollHeight + "px";
+                setTimeout(() => {
+                    button.children[1].children[0].style.transform = 'rotate(0deg)';
+                    panel.style.maxHeight = null;
+                    button.style.borderBottomLeftRadius = 'var(--border_radius)';
+                    button.style.borderBottomRightRadius = 'var(--border_radius)';
+                }, 1);
+            } else {
+                setTimeout(() => {
+                    button.children[1].children[0].style.transform = 'rotate(180deg)';
+                    button.style.borderBottomLeftRadius = '0px';
+                    button.style.borderBottomRightRadius = '0px';
+                    panel.style.maxHeight = panel.scrollHeight + "px";
+                    panel.addEventListener('transitionend', () => {
+                        if (panel.style.maxHeight) panel.style.maxHeight = "max-content";
+                    });
+                }, 1);
+            }
+        })
+        let button_text = document.createElement('tree_view_button_text');
+        button_text.innerHTML = options.title;
+        button.appendChild(button_text)
+        let barrow = document.createElement('tree_view_button_arrow')
+        barrow.style.marginLeft = 'auto'
+        barrow.innerHTML = new Icon(Icons.HARDWARE.KEYBOARD_ARROW_DOWN).getHTML();
+        button.appendChild(barrow)
+        let html = document.createElement('tree_view_html')
+        if (options.subButtons !== undefined) {
+            options.subButtons.forEach(sub => {
+                html.appendChild(sub.button)
+                if (sub.panel !== undefined) {
+                    html.appendChild(sub.panel)
+                }
+            })
+        }
+        if (options.components !== undefined) {
+            options.components.forEach(sub => {
+                html.appendChild(sub.set())
+            })
+        }
+        panel.appendChild(html)
+        return {
+            title: options.title,
+            button: button,
+            panel: panel
+        };
+    }
+}
+
 exports.TreeView = TreeView

package/framework/components/chui_webview/styles.css

@@ -1,28 +1,28 @@
-chui_webview {
-    position: relative;
-    width: -webkit-fill-available;
-    height: 100%
-}
-
-chui_load {
-    display: flex;
-    width: -webkit-fill-available;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    justify-content: center;
-    align-items: center;
-    z-index: 0;
-}
-
-webview {
-    height: 100%;
-    width: -webkit-fill-available;
-    display: none;
-    z-index: 1;
-}
-
-webview.hide {
-    visibility: hidden;
+chui_webview {
+    position: relative;
+    width: -webkit-fill-available;
+    height: 100%
+}
+
+chui_load {
+    display: flex;
+    width: -webkit-fill-available;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    justify-content: center;
+    align-items: center;
+    z-index: 0;
+}
+
+webview {
+    height: 100%;
+    width: -webkit-fill-available;
+    display: none;
+    z-index: 1;
+}
+
+webview.hide {
+    visibility: hidden;
 }

package/framework/components/chui_webview/webview.js

@@ -1,104 +1,104 @@
-const { Animation } = require('../../modules/chui_animations/animations')
-const { Spinner } = require('../chui_spinner/spinner')
-const {Log} = require("../../../framework/modules/chui_logger/chui_logger");
-
-class WebView {
-    #id = require("randomstring").generate()
-    #main_block = document.createElement('chui_webview')
-    #WebView = document.createElement('webview')
-    #chui_load = document.createElement('chui_load')
-    constructor(url = String(), dev = false) {
-        require('../../modules/chui_functions').setStyles(__dirname + '/styles.css', 'chUiJS_WebView');
-        this.#WebView.setAttribute('id', this.#id)
-        this.#WebView.setAttribute('src', url)
-        this.#WebView.setAttribute('nodeintegration', 'true');
-        this.#WebView.setAttribute('plugins', 'true')
-        this.#WebView.setAttribute('useragent', getFirefoxUserAgent())
-        this.#WebView.setAttribute('disablewebsecurity', 'true')
-        this.#WebView.setAttribute('allowpopups', 'true')
-        this.#WebView.setAttribute("webpreferences", "allowRunningInsecureContent, javascript=yes")
-        let spinner = new Spinner(Spinner.SIZE.BIG);
-        this.#chui_load.appendChild(spinner.set());
-        this.#main_block.appendChild(this.#WebView)
-        const loadStart = () => {
-            this.#main_block.appendChild(this.#chui_load)
-        }
-        const loadStop = () => {
-            new Animation(this.#WebView).fadeIn();
-            this.#main_block.removeChild(this.#chui_load)
-            if (dev) this.#WebView.openDevTools();
-        }
-        this.#WebView.addEventListener('did-start-loading', loadStart)
-        this.#WebView.addEventListener('did-stop-loading', loadStop)
-    }
-    setPartition(partition = String()) {
-        this.#WebView.partition = partition;
-    }
-    setPreload(path = String()) {
-        this.#WebView.preload = "file://" + path;
-    }
-    addStartLoadEvent(listener = () => {}) {
-        this.#WebView.addEventListener('did-start-loading', listener)
-    }
-    addStopLoadEvent(listener = () => {}) {
-        this.#WebView.addEventListener('did-stop-loading', listener)
-    }
-    addFinishLoadEvent(listener = () => {}) {
-        this.#WebView.addEventListener('did-finish-load', listener)
-    }
-    async executeJavaScript(code = String()) {
-        try {
-            await this.#WebView.executeJavaScript(code);
-        } catch (err) {
-            Log.error(err)
-        }
-    }
-    insertCustomRes(options = { cssPath: String(), jsPath: String() }) {
-        this.#WebView.addEventListener('did-frame-finish-load', async () => {
-            const fs = require('fs');
-            if (options.cssPath !== undefined) {
-                let data = fs.readFileSync(options.cssPath, 'utf8');
-                this.#WebView.insertCSS(String(data)).catch(r => Log.error(r));
-            }
-            if (options.jsPath !== undefined) {
-                try {
-                    const data = fs.readFileSync(options.jsPath, 'utf8');
-                    await this.#WebView.executeJavaScript(data);
-                } catch (err) {
-                    Log.error(err);
-                }
-            }
-        })
-    }
-    async send(channel = String(), ...args) {
-        await this.#WebView.send(channel, args)
-    }
-    setUrl(url = String()) {
-        this.#WebView.setAttribute('src', url)
-    }
-    getWebContentsId() {
-        return this.#WebView.getWebContentsId()
-    }
-    set() {
-        return this.#main_block
-    }
-}
-
-const getFirefoxUserAgent = () => {
-    const rootUAs = {
-      mac: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:FXVERSION.0) Gecko/20100101 Firefox/FXVERSION.0',
-      windows: 'Mozilla/5.0 (Windows NT 10.0; WOW64; rv:FXVERSION.0) Gecko/20100101 Firefox/FXVERSION.0',
-      linux: 'Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:FXVERSION.0) Gecko/20100101 Firefox/FXVERSION.0',
-    };
-    let rootUA;
-    if (process.platform === 'win32') {
-      rootUA = rootUAs.windows;
-    } else if (process.platform === 'darwin') {
-      rootUA = rootUAs.mac;
-    } else {
-      rootUA = rootUAs.linux;
-    }
-    return rootUA.replace(/FXVERSION/g, 91 + Math.floor((Date.now() - 1628553600000) / (4.1 * 7 * 24 * 60 * 60 * 1000)));
-};
-
+const { Animation } = require('../../modules/chui_animations/animations')
+const { Spinner } = require('../chui_spinner/spinner')
+const {Log} = require("../../../framework/modules/chui_logger/chui_logger");
+
+class WebView {
+    #id = require("randomstring").generate()
+    #main_block = document.createElement('chui_webview')
+    #WebView = document.createElement('webview')
+    #chui_load = document.createElement('chui_load')
+    constructor(url = String(), dev = false) {
+        require('../../modules/chui_functions').setStyles(__dirname + '/styles.css', 'chUiJS_WebView');
+        this.#WebView.setAttribute('id', this.#id)
+        this.#WebView.setAttribute('src', url)
+        this.#WebView.setAttribute('nodeintegration', 'true');
+        this.#WebView.setAttribute('plugins', 'true')
+        this.#WebView.setAttribute('useragent', getFirefoxUserAgent())
+        this.#WebView.setAttribute('disablewebsecurity', 'true')
+        this.#WebView.setAttribute('allowpopups', 'true')
+        this.#WebView.setAttribute("webpreferences", "allowRunningInsecureContent, javascript=yes")
+        let spinner = new Spinner(Spinner.SIZE.BIG);
+        this.#chui_load.appendChild(spinner.set());
+        this.#main_block.appendChild(this.#WebView)
+        const loadStart = () => {
+            this.#main_block.appendChild(this.#chui_load)
+        }
+        const loadStop = () => {
+            new Animation(this.#WebView).fadeIn();
+            this.#main_block.removeChild(this.#chui_load)
+            if (dev) this.#WebView.openDevTools();
+        }
+        this.#WebView.addEventListener('did-start-loading', loadStart)
+        this.#WebView.addEventListener('did-stop-loading', loadStop)
+    }
+    setPartition(partition = String()) {
+        this.#WebView.partition = partition;
+    }
+    setPreload(path = String()) {
+        this.#WebView.preload = "file://" + path;
+    }
+    addStartLoadEvent(listener = () => {}) {
+        this.#WebView.addEventListener('did-start-loading', listener)
+    }
+    addStopLoadEvent(listener = () => {}) {
+        this.#WebView.addEventListener('did-stop-loading', listener)
+    }
+    addFinishLoadEvent(listener = () => {}) {
+        this.#WebView.addEventListener('did-finish-load', listener)
+    }
+    async executeJavaScript(code = String()) {
+        try {
+            await this.#WebView.executeJavaScript(code);
+        } catch (err) {
+            Log.error(err)
+        }
+    }
+    insertCustomRes(options = { cssPath: String(), jsPath: String() }) {
+        this.#WebView.addEventListener('did-frame-finish-load', async () => {
+            const fs = require('fs');
+            if (options.cssPath !== undefined) {
+                let data = fs.readFileSync(options.cssPath, 'utf8');
+                this.#WebView.insertCSS(String(data)).catch(r => Log.error(r));
+            }
+            if (options.jsPath !== undefined) {
+                try {
+                    const data = fs.readFileSync(options.jsPath, 'utf8');
+                    await this.#WebView.executeJavaScript(data);
+                } catch (err) {
+                    Log.error(err);
+                }
+            }
+        })
+    }
+    async send(channel = String(), ...args) {
+        await this.#WebView.send(channel, args)
+    }
+    setUrl(url = String()) {
+        this.#WebView.setAttribute('src', url)
+    }
+    getWebContentsId() {
+        return this.#WebView.getWebContentsId()
+    }
+    set() {
+        return this.#main_block
+    }
+}
+
+const getFirefoxUserAgent = () => {
+    const rootUAs = {
+      mac: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:FXVERSION.0) Gecko/20100101 Firefox/FXVERSION.0',
+      windows: 'Mozilla/5.0 (Windows NT 10.0; WOW64; rv:FXVERSION.0) Gecko/20100101 Firefox/FXVERSION.0',
+      linux: 'Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:FXVERSION.0) Gecko/20100101 Firefox/FXVERSION.0',
+    };
+    let rootUA;
+    if (process.platform === 'win32') {
+      rootUA = rootUAs.windows;
+    } else if (process.platform === 'darwin') {
+      rootUA = rootUAs.mac;
+    } else {
+      rootUA = rootUAs.linux;
+    }
+    return rootUA.replace(/FXVERSION/g, 91 + Math.floor((Date.now() - 1628553600000) / (4.1 * 7 * 24 * 60 * 60 * 1000)));
+};
+
 exports.WebView = WebView