chuijs 3.6.3 → 3.6.4

package/framework/components/chui_modal/modal.js

@@ -1,136 +1,143 @@
-const {Animation} = require('../../modules/chui_animations/animations');
-
-class Dialog {
-    #id = require("randomstring").generate();
-    #dialog = document.createElement(`chui_dialog`);
-    #header = document.createElement('dialog_header');
-    #body = document.createElement('dialog_body');
-    #footer = document.createElement('dialog_footer');
-    //
-    #width = undefined;
-    #height = undefined;
-    isOpen = false;
-
-    constructor(options = {
-        width: String(),
-        height: String(),
-        closeOutSideClick: false
-    }) {
-
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_Dialogs');
-        this.#dialog.id = this.#id
-
-        if (options.width === undefined) {
-            this.#width = "max-content";
-            this.#dialog.style.width = "max-content";
-        } else {
-            this.#width = options.width
-            this.#dialog.style.width = options.width;
-        }
-        if (options.height === undefined) {
-            this.#height = "max-content";
-            this.#dialog.style.height = "max-content";
-        } else {
-            this.#height = options.height
-            this.#dialog.style.height = options.height;
-        }
-
-        if (options.closeOutSideClick) {
-            this.#dialog.addEventListener("animationend", (evt) => {
-                if (evt.animationName === "fade-in") window.addEventListener('click', this.#closeOutsideEvent)
-            })
-        }
-        //ADDS
-        this.#dialog.appendChild(this.#body)
-    }
-
-    #closeOutsideEvent = (event) => {
-        const dialog = document.getElementById(this.#id);
-        if (!dialog.contains(event.target)) {
-            window.removeEventListener("click", this.#closeOutsideEvent)
-            this.close()
-        }
-    }
-
-    addToHeader(...components) {
-        this.#dialog.insertBefore(this.#header, this.#body)
-        for (let component of components) this.#header.appendChild(component.set());
-    }
-
-    addToBody(...components) {
-        for (let component of components) this.#body.appendChild(component.set());
-    }
-
-    addToFooter(...components) {
-        this.#dialog.appendChild(this.#footer)
-        for (let component of components) this.#footer.appendChild(component.set());
-    }
-
-    removeFromHeader(...components) {
-        for (let component of components) new Animation(component.set()).fadeOutAndRemove();
-    }
-
-    removeFromBody(...components) {
-        for (let component of components) new Animation(component.set()).fadeOutAndRemove();
-    }
-
-    removeFromFooter(...components) {
-        for (let component of components) new Animation(component.set()).fadeOutAndRemove();
-    }
-
-    open() {
-        this.isOpen = true
-        const dialog = document.getElementById(this.#id);
-        // if (this.#width === "-webkit-fill-available" && this.#height === "-webkit-fill-available") {
-        //     dialog.style.top = "0"
-        //     dialog.style.left = "0"
-        //     new Animation(dialog).fadeIn();
-        // } else {
-        //     window.addEventListener("resize", (event) => this.#setCenter(dialog, event.currentTarget))
-        //     new Animation(dialog).fadeIn();
-        //     this.#setCenter(dialog, window)
-        // }
-
-        window.addEventListener("resize", (event) => this.#setCenter(dialog, event.currentTarget))
-        new Animation(dialog).fadeIn();
-        this.#setCenter(dialog, window)
-    }
-
-    openAndClose() {
-        if (!this.isOpen) {
-            this.open()
-        } else {
-            this.close()
-        }
-    }
-
-    close() {
-        window.removeEventListener("click", this.#closeOutsideEvent)
-        this.isOpen = false
-        const dialog = document.getElementById(this.#id);
-        new Animation(dialog).fadeOut();
-    }
-
-    set() {
-        return this.#dialog;
-    }
-
-    #setCenter(element, window) {
-        // Ширина
-        const width = parseInt(window.getComputedStyle(element).width) + "px"
-        if (element.style.width === "-webkit-fill-available") {
-            element.style.left = "0"
-        } else {
-            element.style.left = `calc(100% / 2 - ${width} / 2)`;
-        }
-        // Высота
-        const height = parseInt(window.getComputedStyle(element).height) + "px"
-        if (element.style.height === "-webkit-fill-available") {
-            element.style.top = "0"
-        } else {
-            element.style.top = `calc(100% / 2 - ${height} / 2)`;
-        }
-    }
-}
-
+const {Animation} = require('../../modules/chui_animations/animations');
+
+class Dialog {
+    #id = require("randomstring").generate();
+    #dialog = document.createElement(`chui_dialog`);
+    #header = document.createElement('dialog_header');
+    #body = document.createElement('dialog_body');
+    #footer = document.createElement('dialog_footer');
+    //
+    #width = undefined;
+    #height = undefined;
+    isOpen = false;
+
+    constructor(options = {
+        width: String(),
+        height: String(),
+        closeOutSideClick: false
+    }) {
+
+        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_Dialogs');
+        this.#dialog.id = this.#id
+
+        if (options.width === undefined) {
+            this.#width = "max-content";
+            this.#dialog.style.width = "max-content";
+        } else {
+            this.#width = options.width
+            this.#dialog.style.width = options.width;
+        }
+        if (options.height === undefined) {
+            this.#height = "max-content";
+            this.#dialog.style.height = "max-content";
+        } else {
+            this.#height = options.height
+            this.#dialog.style.height = options.height;
+        }
+
+        if (options.closeOutSideClick) {
+            this.#dialog.addEventListener("animationend", (evt) => {
+                if (evt.animationName === "fade-in") window.addEventListener('click', this.#closeOutsideEvent)
+            })
+        }
+        //ADDS
+        this.#dialog.appendChild(this.#body)
+    }
+
+    #closeOutsideEvent = (event) => {
+        const dialog = document.getElementById(this.#id);
+        if (!dialog.contains(event.target)) {
+            window.removeEventListener("click", this.#closeOutsideEvent)
+            this.close()
+        }
+    }
+
+    #resizeEvent = () => {
+        const dialog = document.getElementById(this.#id);
+        if (dialog === null) return;
+        this.#setCenter(dialog, window)
+    }
+
+    addToHeader(...components) {
+        this.#dialog.insertBefore(this.#header, this.#body)
+        for (let component of components) this.#header.appendChild(component.set());
+    }
+
+    addToBody(...components) {
+        for (let component of components) this.#body.appendChild(component.set());
+    }
+
+    addToFooter(...components) {
+        this.#dialog.appendChild(this.#footer)
+        for (let component of components) this.#footer.appendChild(component.set());
+    }
+
+    removeFromHeader(...components) {
+        for (let component of components) new Animation(component.set()).fadeOutAndRemove();
+    }
+
+    removeFromBody(...components) {
+        for (let component of components) new Animation(component.set()).fadeOutAndRemove();
+    }
+
+    removeFromFooter(...components) {
+        for (let component of components) new Animation(component.set()).fadeOutAndRemove();
+    }
+
+    open() {
+        this.isOpen = true
+        const dialog = document.getElementById(this.#id);
+        // if (this.#width === "-webkit-fill-available" && this.#height === "-webkit-fill-available") {
+        //     dialog.style.top = "0"
+        //     dialog.style.left = "0"
+        //     new Animation(dialog).fadeIn();
+        // } else {
+        //     window.addEventListener("resize", (event) => this.#setCenter(dialog, event.currentTarget))
+        //     new Animation(dialog).fadeIn();
+        //     this.#setCenter(dialog, window)
+        // }
+
+        window.addEventListener("resize", this.#resizeEvent)
+        new Animation(dialog).fadeIn();
+        this.#setCenter(dialog, window)
+    }
+
+    openAndClose() {
+        if (!this.isOpen) {
+            this.open()
+        } else {
+            this.close()
+        }
+    }
+
+    close() {
+        window.removeEventListener("click", this.#closeOutsideEvent)
+        window.removeEventListener("resize", this.#resizeEvent)
+        this.isOpen = false
+        const dialog = document.getElementById(this.#id);
+        new Animation(dialog).fadeOut();
+    }
+
+    set() {
+        return this.#dialog;
+    }
+
+    #setCenter(element, window) {
+        // Ширина
+        const width = parseInt(window.getComputedStyle(element).width) + "px"
+        if (element.style.width === "-webkit-fill-available") {
+            element.style.left = "0"
+        } else {
+            element.style.left = `calc(100% / 2 - ${width} / 2)`;
+        }
+        // Высота
+        const height = parseInt(window.getComputedStyle(element).height) + "px"
+        if (element.style.height === "-webkit-fill-available") {
+            element.style.top = "0"
+        } else {
+            element.style.top = `calc(100% / 2 - ${height} / 2)`;
+        }
+    }
+}
+
 exports.Dialog = Dialog

package/framework/components/chui_modal/styles.css

@@ -1,37 +1,37 @@
-chui_dialog {
-    display: none;
-    position: fixed;
-    z-index: 1000;
-    left: calc(100% / 2);
-    top: calc(100% / 2);
-    width: max-content;
-    height: max-content;
-    overflow: hidden;
-    background-color: var(--modal_background);
-    border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
-    box-shadow: var(--box_shadow_main);
-    margin: auto;
-    flex-direction: column;
-    padding: var(--test_padding);
-    color: var(--text_color);
-    backdrop-filter: var(--global_blur);
-}
-
-dialog_header {
-    display: flex;
-    margin-bottom: var(--test_padding);
-}
-
-dialog_body {
-    /*padding: 6px 0px;*/
-    display: flex;
-    height: -webkit-fill-available;
-    width: -webkit-fill-available;
-    overflow: auto;
-}
-
-dialog_footer {
-    display: flex;
-    margin-top: var(--test_padding);
+chui_dialog {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: calc(100% / 2);
+    top: calc(100% / 2);
+    width: max-content;
+    height: max-content;
+    overflow: hidden;
+    background-color: var(--modal_background);
+    border: 1px solid var(--border_color);
+    border-radius: var(--radius_md);
+    box-shadow: var(--box_shadow_modal);
+    margin: auto;
+    flex-direction: column;
+    padding: var(--test_padding);
+    color: var(--text_color);
+    backdrop-filter: var(--global_blur);
+}
+
+dialog_header {
+    display: flex;
+    margin-bottom: var(--test_padding);
+}
+
+dialog_body {
+    /*padding: 6px 0px;*/
+    display: flex;
+    height: -webkit-fill-available;
+    width: -webkit-fill-available;
+    overflow: auto;
+}
+
+dialog_footer {
+    display: flex;
+    margin-top: var(--test_padding);
 }

package/framework/components/chui_notification/notification.js

@@ -1,73 +1,73 @@
-const {Animation} = require('../../modules/chui_animations/animations');
-const {setStyles, markdownToHtml, getDate} = require('../../modules/chui_functions');
-
-class Notification {
-    #id = require("randomstring").generate();
-    #time = 5000;
-    #notification = document.createElement(`notification`);
-    #notification_content = document.createElement("notification_content");
-    #notification_header = document.createElement("notification_header");
-    #notification_title = document.createElement("notification_title");
-    #notification_date = document.createElement("notification_date");
-    #notification_text = document.createElement("notification_text")
-    constructor(options = {
-        title: String(), markdownTitle: String(),
-        text: String(), markdownText: String(),
-        style: undefined, showTime: Number()
-    }) {
-        setStyles(__dirname + "/styles.css", 'chUiJS_Notification');
-        if (options.showTime !== undefined) this.#time = options.showTime;
-        this.#notification.id = this.#id;
-        // Стили заголовка уведомления
-        if (options.title !== undefined && options.markdownTitle !== undefined) {
-            throw new Error("Должна быть установлена одна опция title или markdownTitle");
-        } else {
-            if (options.title !== undefined) this.#notification_title.innerText = options.title;
-            if (options.markdownTitle !== undefined) this.#notification_title.innerHTML = markdownToHtml(options.markdownTitle);
-        }
-        // Стили текста уведомления
-        if (options.text !== undefined && options.markdownText !== undefined) {
-            throw new Error("Должна быть установлена одна опция text или markdownText");
-        } else {
-            if (options.text !== undefined) this.#notification_text.innerText = options.text;
-            if (options.markdownText !== undefined) this.#notification_text.innerHTML = markdownToHtml(options.markdownText);
-        }
-        this.#notification_date.innerHTML = getDate();
-        //
-        if (options.style !== undefined) this.#notification.classList.add(options.style);
-        //
-        this.#notification_header.appendChild(this.#notification_title)
-        this.#notification_header.appendChild(this.#notification_date)
-        //
-        this.#notification_content.appendChild(this.#notification_header)
-        this.#notification_content.appendChild(this.#notification_text)
-        this.#notification.appendChild(this.#notification_content)
-    }
-    show(showOnSystem = Boolean()) {
-        document.getElementsByTagName('notification_panel')[0].appendChild(this.#notification);
-        let notification = document.getElementById(this.#id);
-        new Animation(notification).slideRightIn();
-        notification.addEventListener('animationend', () => setTimeout(() => this.#removeNotification(notification), this.#time));
-        notification.addEventListener("click", () => this.#removeNotification(notification));
-        if (showOnSystem) require("electron").ipcRenderer.send("show_system_notification", this.#notification_title.innerText, this.#notification_text.innerText);
-    }
-    #removeNotification(notification) {
-        new Animation(notification).slideRightOutAndRemove();
-        notification.addEventListener("animationend", (e) => {
-            notification.removeAttribute("style");
-            notification.style.display = 'flex';
-            notification.style.width = '-webkit-fill-available';
-            notification.style.opacity = "0"
-            notification.style.transform = "translateX(100%)"
-            let box = document.getElementById("chui_notification_box");
-            box.appendChild(notification)
-            setTimeout(() => {
-                notification.style.opacity = "1"
-                notification.style.transform = "translateX(0)"
-            }, 500)
-        })
-    }
-    static STYLE = { ERROR: 'notification_error', SUCCESS: 'notification_success', WARNING: 'notification_warning' }
-}
-
+const {Animation} = require('../../modules/chui_animations/animations');
+const {setStyles, markdownToHtml, getDate} = require('../../modules/chui_functions');
+
+class Notification {
+    #id = require("randomstring").generate();
+    #time = 5000;
+    #notification = document.createElement(`notification`);
+    #notification_content = document.createElement("notification_content");
+    #notification_header = document.createElement("notification_header");
+    #notification_title = document.createElement("notification_title");
+    #notification_date = document.createElement("notification_date");
+    #notification_text = document.createElement("notification_text")
+    constructor(options = {
+        title: String(), markdownTitle: String(),
+        text: String(), markdownText: String(),
+        style: undefined, showTime: Number()
+    }) {
+        setStyles(__dirname + "/styles.css", 'chUiJS_Notification');
+        if (options.showTime !== undefined) this.#time = options.showTime;
+        this.#notification.id = this.#id;
+        // Стили заголовка уведомления
+        if (options.title !== undefined && options.markdownTitle !== undefined) {
+            throw new Error("Должна быть установлена одна опция title или markdownTitle");
+        } else {
+            if (options.title !== undefined) this.#notification_title.innerText = options.title;
+            if (options.markdownTitle !== undefined) this.#notification_title.innerHTML = markdownToHtml(options.markdownTitle);
+        }
+        // Стили текста уведомления
+        if (options.text !== undefined && options.markdownText !== undefined) {
+            throw new Error("Должна быть установлена одна опция text или markdownText");
+        } else {
+            if (options.text !== undefined) this.#notification_text.innerText = options.text;
+            if (options.markdownText !== undefined) this.#notification_text.innerHTML = markdownToHtml(options.markdownText);
+        }
+        this.#notification_date.innerHTML = getDate();
+        //
+        if (options.style !== undefined) this.#notification.classList.add(options.style);
+        //
+        this.#notification_header.appendChild(this.#notification_title)
+        this.#notification_header.appendChild(this.#notification_date)
+        //
+        this.#notification_content.appendChild(this.#notification_header)
+        this.#notification_content.appendChild(this.#notification_text)
+        this.#notification.appendChild(this.#notification_content)
+    }
+    show(showOnSystem = Boolean()) {
+        document.getElementsByTagName('notification_panel')[0].appendChild(this.#notification);
+        let notification = document.getElementById(this.#id);
+        new Animation(notification).slideRightIn();
+        notification.addEventListener('animationend', () => setTimeout(() => this.#removeNotification(notification), this.#time));
+        notification.addEventListener("click", () => this.#removeNotification(notification));
+        if (showOnSystem) require("electron").ipcRenderer.send("show_system_notification", this.#notification_title.innerText, this.#notification_text.innerText);
+    }
+    #removeNotification(notification) {
+        new Animation(notification).slideRightOutAndRemove();
+        notification.addEventListener("animationend", (e) => {
+            notification.removeAttribute("style");
+            notification.style.display = 'flex';
+            notification.style.width = '-webkit-fill-available';
+            notification.style.opacity = "0"
+            notification.style.transform = "translateX(100%)"
+            let box = document.getElementById("chui_notification_box");
+            box.appendChild(notification)
+            setTimeout(() => {
+                notification.style.opacity = "1"
+                notification.style.transform = "translateX(0)"
+            }, 500)
+        })
+    }
+    static STYLE = { ERROR: 'notification_error', SUCCESS: 'notification_success', WARNING: 'notification_warning' }
+}
+
 exports.Notification = Notification