chuijs 3.6.2 → 3.6.4

package/framework/components/chui_code/code.js

@@ -1,19 +1,19 @@
-class CodeBlock {
-    #chui_code = document.createElement(`code`);
-    constructor(text = String(), options = { textAlign: String(), wordBreak: String(), width: String() }) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_code');
-        this.#chui_code.innerText = text;
-        this.#chui_code.classList.add("chui_code");
-        if (options.textAlign !== undefined) this.#chui_code.style.textAlign = options.textAlign;
-        if (options.wordBreak !== undefined) this.#chui_code.style.wordBreak = options.wordBreak;
-        if (options.width !== undefined) this.#chui_code.style.width = options.width;
-    }
-    setText(text = String()) {
-        this.#chui_code.innerText = text;
-    }
-    set() {
-        return this.#chui_code;
-    }
-}
-
+class CodeBlock {
+    #chui_code = document.createElement(`code`);
+    constructor(text = String(), options = { textAlign: String(), wordBreak: String(), width: String() }) {
+        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_code');
+        this.#chui_code.innerText = text;
+        this.#chui_code.classList.add("chui_code");
+        if (options.textAlign !== undefined) this.#chui_code.style.textAlign = options.textAlign;
+        if (options.wordBreak !== undefined) this.#chui_code.style.wordBreak = options.wordBreak;
+        if (options.width !== undefined) this.#chui_code.style.width = options.width;
+    }
+    setText(text = String()) {
+        this.#chui_code.innerText = text;
+    }
+    set() {
+        return this.#chui_code;
+    }
+}
+
 exports.CodeBlock = CodeBlock

package/framework/components/chui_code/styles.css

@@ -1,10 +1,10 @@
-.chui_code {
-    height: max-content;
-    width: max-content;
-    margin: var(--margin);
-    font-size: var(--font_default_size);
-    font-weight: 400;
-    color: var(--text_color);
-    white-space: pre-wrap;
-    font-family: monospace;
+.chui_code {
+    height: max-content;
+    width: max-content;
+    margin: var(--margin);
+    font-size: var(--font_default_size);
+    font-weight: 400;
+    color: var(--text_color);
+    white-space: pre-wrap;
+    font-family: monospace;
 }

package/framework/components/chui_console/console.js

@@ -1,28 +1,28 @@
-class Console {
-    #chui_console = document.createElement(`chui_console`);
-    constructor(options = { width: String(), height: String() }) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_console');
-
-        if (options.width !== undefined) {
-            this.#chui_console.style.width = options.width
-        } else {
-            this.#chui_console.style.width = "max-content"
-        }
-
-        if (options.height !== undefined) {
-            this.#chui_console.style.height = options.height
-        } else {
-            this.#chui_console.style.height = "max-content"
-        }
-    }
-    addText(text = String()) {
-        const chui_console_text = document.createElement(`chui_console_text`);
-        chui_console_text.innerText = text;
-        this.#chui_console.appendChild(chui_console_text)
-    }
-    set() {
-        return this.#chui_console;
-    }
-}
-
+class Console {
+    #chui_console = document.createElement(`chui_console`);
+    constructor(options = { width: String(), height: String() }) {
+        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_console');
+
+        if (options.width !== undefined) {
+            this.#chui_console.style.width = options.width
+        } else {
+            this.#chui_console.style.width = "max-content"
+        }
+
+        if (options.height !== undefined) {
+            this.#chui_console.style.height = options.height
+        } else {
+            this.#chui_console.style.height = "max-content"
+        }
+    }
+    addText(text = String()) {
+        const chui_console_text = document.createElement(`chui_console_text`);
+        chui_console_text.innerText = text;
+        this.#chui_console.appendChild(chui_console_text)
+    }
+    set() {
+        return this.#chui_console;
+    }
+}
+
 exports.Console = Console

package/framework/components/chui_console/styles.css

@@ -1,32 +1,32 @@
-chui_console {
-    height: max-content;
-    width: max-content;
-    margin: var(--margin);
-    font-size: var(--font_default_size);
-    font-weight: 500;
-    color: var(--text_color);
-    white-space: break-spaces;
-    word-wrap: break-word;
-    font-family: monospace;
-    user-select: text;
-    border: 1px solid var(--border_color);
-    padding: var(--test_padding);
-    border-radius: var(--border_radius);
-
-    display: flex;
-    flex-direction: column;
-    align-items: start;
-    justify-content: start;
-    overflow: auto;
-}
-
-chui_console_text {
-    display: block;
-    height: -webkit-fill-available;
-    width: -webkit-fill-available;
-    white-space: break-spaces;
-    word-wrap: break-word;
-    padding: var(--test_padding);
-    text-align: start;
-    user-select: text;
+chui_console {
+    height: max-content;
+    width: max-content;
+    margin: var(--margin);
+    font-size: var(--font_default_size);
+    font-weight: 500;
+    color: var(--text_color);
+    white-space: break-spaces;
+    word-wrap: break-word;
+    font-family: monospace;
+    user-select: text;
+    border: 1px solid var(--border_color);
+    padding: var(--test_padding);
+    border-radius: var(--border_radius);
+
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    justify-content: start;
+    overflow: auto;
+}
+
+chui_console_text {
+    display: block;
+    height: -webkit-fill-available;
+    width: -webkit-fill-available;
+    white-space: break-spaces;
+    word-wrap: break-word;
+    padding: var(--test_padding);
+    text-align: start;
+    user-select: text;
 }

package/framework/components/chui_content_block/content_block.js

@@ -1,52 +1,52 @@
-const {Animation} = require("../../modules/chui_animations/animations");
-
-class ContentBlock {
-    #body = document.createElement(`contentblock`);
-    #disableMarginChild = false;
-    constructor(options = {
-        display: String(),
-        direction: String(),
-        wrap: String(),
-        align: String(),
-        justify: String(),
-        disableMarginChild: Boolean(),
-    }) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_ContentBlock');
-        if (options.display !== undefined) this.#body.style.display = options.display;
-        if (options.direction !== undefined) this.#body.style.flexDirection = options.direction;
-        if (options.wrap !== undefined) this.#body.style.flexWrap = options.wrap;
-        if (options.align !== undefined) this.#body.style.alignItems = options.align;
-        if (options.justify !== undefined) this.#body.style.justifyContent = options.justify;
-        this.#disableMarginChild = options.disableMarginChild;
-    }
-    remove(...components) {
-        for (let component of components) new Animation(component.set()).fadeOutAndRemove();
-    }
-    // FUNCTIONS
-    disableMarginChild() {
-        for (let child of this.#body.children) child.style.margin = '0px';
-    }
-    add(...components) {
-        for (let component of components) {
-            if (this.#disableMarginChild) {
-                let child = component.set();
-                child.style.margin = "0px";
-                new Animation(child).fadeIn()
-                this.#body.appendChild(child);
-            } else {
-                new Animation(component.set()).fadeIn()
-                this.#body.appendChild(component.set());
-            }
-        }
-    }
-    clear() { this.#body.innerHTML = ''; }
-    // SETS
-    setAutoOverflow(boolean = Boolean(false)) { if (boolean) this.#body.style.overflow = 'auto'; }
-    setContentEditable(boolean= Boolean(false)) { this.#body.setAttribute('contenteditable', boolean); }
-    setWidth(width = String()) { this.#body.style.width = width; }
-    setHeight(height = String()) { this.#body.style.height = height; }
-    setPadding(value = String()) { this.#body.style.padding = value; }
-    set() { return this.#body; }
-}
-
+const {Animation} = require("../../modules/chui_animations/animations");
+
+class ContentBlock {
+    #body = document.createElement(`contentblock`);
+    #disableMarginChild = false;
+    constructor(options = {
+        display: String(),
+        direction: String(),
+        wrap: String(),
+        align: String(),
+        justify: String(),
+        disableMarginChild: Boolean(),
+    }) {
+        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_ContentBlock');
+        if (options.display !== undefined) this.#body.style.display = options.display;
+        if (options.direction !== undefined) this.#body.style.flexDirection = options.direction;
+        if (options.wrap !== undefined) this.#body.style.flexWrap = options.wrap;
+        if (options.align !== undefined) this.#body.style.alignItems = options.align;
+        if (options.justify !== undefined) this.#body.style.justifyContent = options.justify;
+        this.#disableMarginChild = options.disableMarginChild;
+    }
+    remove(...components) {
+        for (let component of components) new Animation(component.set()).fadeOutAndRemove();
+    }
+    // FUNCTIONS
+    disableMarginChild() {
+        for (let child of this.#body.children) child.style.margin = '0px';
+    }
+    add(...components) {
+        for (let component of components) {
+            if (this.#disableMarginChild) {
+                let child = component.set();
+                child.style.margin = "0px";
+                new Animation(child).fadeIn()
+                this.#body.appendChild(child);
+            } else {
+                new Animation(component.set()).fadeIn()
+                this.#body.appendChild(component.set());
+            }
+        }
+    }
+    clear() { this.#body.innerHTML = ''; }
+    // SETS
+    setAutoOverflow(boolean = Boolean(false)) { if (boolean) this.#body.style.overflow = 'auto'; }
+    setContentEditable(boolean= Boolean(false)) { this.#body.setAttribute('contenteditable', boolean); }
+    setWidth(width = String()) { this.#body.style.width = width; }
+    setHeight(height = String()) { this.#body.style.height = height; }
+    setPadding(value = String()) { this.#body.style.padding = value; }
+    set() { return this.#body; }
+}
+
 exports.ContentBlock = ContentBlock

package/framework/components/chui_content_block/styles.css

@@ -1,3 +1,3 @@
-contentblock {
-    display: flex
+contentblock {
+    display: flex
 }

package/framework/components/chui_context_menu/context_menu.js

@@ -0,0 +1,230 @@
+const { setStyles } = require("../../modules/chui_functions");
+const { Icon, Icons } = require("../chui_icons/icons");
+
+class ContextMenu {
+    #menu = document.createElement("chui_context_menu");
+    #targets = [];
+    #visible = false;
+    #hideHandler = undefined;
+
+    constructor(options = { items: [] }) {
+        setStyles(__dirname + "/styles.css", "chUiJS_ContextMenu");
+        this.#renderItems(this.#menu, options.items);
+        this.#menu.addEventListener("contextmenu", (event) => event.preventDefault());
+        document.body.appendChild(this.#menu);
+    }
+
+    // === СТАТИЧЕСКИЕ ОПИСАНИЯ ПУНКТОВ ===
+    static Item(
+        options = { title: String(), icon: String(), shortcut: String(), disabled: Boolean(), clickEvent: () => {} }
+    ) {
+        return { type: "item", ...options };
+    }
+    static Separator() {
+        return { type: "separator" };
+    }
+    static SubMenu(options = { title: String(), icon: String(), items: [] }) {
+        return { type: "submenu", ...options };
+    }
+
+    // === ПОСТРОЕНИЕ ===
+    #renderItems(container, items) {
+        if (items === undefined) return;
+        for (let item of items) {
+            if (item.type === "separator") {
+                container.appendChild(document.createElement("context_menu_separator"));
+                continue;
+            }
+            let row = document.createElement("context_menu_item");
+            if (item.icon) {
+                let iconWrap = document.createElement("context_menu_item_icon");
+                iconWrap.innerHTML = new Icon(item.icon).getHTML();
+                row.appendChild(iconWrap);
+            }
+            let title = document.createElement("context_menu_item_title");
+            if (item.title !== undefined) title.innerText = item.title;
+            row.appendChild(title);
+
+            if (item.type === "submenu") {
+                if (item.shortcut) {
+                    let shortcut = document.createElement("context_menu_item_shortcut");
+                    shortcut.innerText = item.shortcut;
+                    row.appendChild(shortcut);
+                }
+                let arrow = document.createElement("context_menu_item_arrow");
+                arrow.innerHTML = new Icon(Icons.NAVIGATION.CHEVRON_RIGHT).getHTML();
+                if (!item.shortcut) arrow.style.marginLeft = "auto";
+                row.appendChild(arrow);
+                let submenu = document.createElement("context_menu_submenu");
+                this.#renderItems(submenu, item.items);
+                row.appendChild(submenu);
+                row.addEventListener("mouseenter", () => this.#openSubMenu(row));
+                row.addEventListener("mouseleave", () => this.#closeSubMenu(row));
+            } else {
+                if (item.disabled === true) {
+                    row.classList.add("context_menu_item_disabled");
+                } else {
+                    row.addEventListener("click", () => {
+                        if (typeof item.clickEvent === "function") item.clickEvent();
+                        this.hide();
+                    });
+                }
+                if (item.shortcut) {
+                    let shortcut = document.createElement("context_menu_item_shortcut");
+                    shortcut.innerText = item.shortcut;
+                    row.appendChild(shortcut);
+                }
+            }
+            container.appendChild(row);
+        }
+    }
+
+    // === ПОДМЕНЮ ===
+    #openSubMenu(row) {
+        let submenu = row.querySelector("context_menu_submenu");
+        if (submenu === null) return;
+        // Закрыть соседние подменю того же уровня
+        let parent = row.parentElement;
+        for (let child of parent.children) {
+            if (child === row) continue;
+            let sibling = child.querySelector("context_menu_submenu");
+            if (sibling !== null) sibling.style.display = "none";
+        }
+        submenu.style.display = "flex";
+        submenu.style.left = "100%";
+        submenu.style.top = "0px";
+        let rowRect = row.getBoundingClientRect();
+        let subRect = submenu.getBoundingClientRect();
+        // Флип влево у правого края окна
+        if (subRect.right > window.innerWidth - 8) {
+            submenu.style.left = "-100%";
+            subRect = submenu.getBoundingClientRect();
+        }
+        // Флип вверх у нижнего края окна
+        let overflow = rowRect.top + subRect.height - (window.innerHeight - 8);
+        if (overflow > 0) {
+            let shift = Math.min(overflow, rowRect.top - 8);
+            submenu.style.top = -shift + "px";
+        }
+    }
+    #closeSubMenu(row) {
+        let submenu = row.querySelector("context_menu_submenu");
+        if (submenu !== null) submenu.style.display = "none";
+    }
+
+    // === ПОКАЗ / СКРЫТИЕ ===
+    attach(target) {
+        let element = typeof target.set === "function" ? target.set() : target;
+        let listener = (event) => {
+            event.preventDefault();
+            this.show(event.clientX, event.clientY);
+        };
+        element.addEventListener("contextmenu", listener);
+        this.#targets.push({ element: element, listener: listener });
+        return this;
+    }
+    detach(target) {
+        let element = typeof target.set === "function" ? target.set() : target;
+        for (let i = 0; i < this.#targets.length; i++) {
+            if (this.#targets[i].element === element) {
+                element.removeEventListener("contextmenu", this.#targets[i].listener);
+                this.#targets.splice(i, 1);
+                return;
+            }
+        }
+    }
+    show(x = 0, y = 0) {
+        this.#cancelPendingHide();
+        // Сбросить геометрию подменю от прошлого показа
+        for (let submenu of this.#menu.querySelectorAll("context_menu_submenu")) {
+            submenu.style.display = "none";
+            submenu.style.left = "100%";
+            submenu.style.top = "0px";
+        }
+        if (!this.#visible) {
+            window.addEventListener("click", this.#onWindowClick, true);
+            window.addEventListener("contextmenu", this.#onWindowContextMenu, true);
+            window.addEventListener("keydown", this.#onWindowKeyDown);
+            window.addEventListener("resize", this.#onWindowResize);
+            window.addEventListener("blur", this.#onWindowBlur);
+            this.#visible = true;
+        }
+        // Убрать/зафиксировать переходы, чтобы перенос координат не анимировался
+        this.#menu.style.transition = "none";
+        // Позиционируем и измеряем скрытым, чтобы ни один кадр не отрисовался в (0, 0)
+        this.#menu.style.visibility = "hidden";
+        this.#menu.style.display = "flex";
+        this.#menu.style.left = "0px";
+        this.#menu.style.top = "0px";
+        // Позиция с учётом краёв окна
+        let left = Math.max(8, Math.min(x, window.innerWidth - this.#menu.offsetWidth - 8));
+        let top = Math.max(8, Math.min(y, window.innerHeight - this.#menu.offsetHeight - 8));
+        this.#menu.style.left = left + "px";
+        this.#menu.style.top = top + "px";
+        // Зафиксировать финальную геометрию до показа
+        void this.#menu.offsetWidth;
+        // Показ и перезапуск анимации уже в финальной позиции
+        this.#menu.style.visibility = "visible";
+        this.#menu.style.animationName = "none";
+        void this.#menu.offsetWidth;
+        this.#menu.style.animationName = "context-scale-in";
+    }
+    hide() {
+        if (!this.#visible) return;
+        this.#visible = false;
+        window.removeEventListener("click", this.#onWindowClick, true);
+        window.removeEventListener("contextmenu", this.#onWindowContextMenu, true);
+        window.removeEventListener("keydown", this.#onWindowKeyDown);
+        window.removeEventListener("resize", this.#onWindowResize);
+        window.removeEventListener("blur", this.#onWindowBlur);
+        // Анимация скрытия
+        this.#menu.style.animationName = "none";
+        void this.#menu.offsetWidth;
+        this.#menu.style.animationName = "context-scale-out";
+        this.#hideHandler = (event) => {
+            if (event.target !== this.#menu) return;
+            this.#menu.removeEventListener("animationend", this.#hideHandler);
+            this.#menu.style.display = "none";
+            this.#menu.style.removeProperty("animation-name");
+            this.#hideHandler = undefined;
+        };
+        this.#menu.addEventListener("animationend", this.#hideHandler);
+    }
+    #cancelPendingHide() {
+        if (this.#hideHandler !== undefined) {
+            this.#menu.removeEventListener("animationend", this.#hideHandler);
+            this.#menu.style.removeProperty("animation-name");
+            this.#hideHandler = undefined;
+        }
+    }
+    destroy() {
+        this.hide();
+        for (let target of this.#targets) {
+            target.element.removeEventListener("contextmenu", target.listener);
+        }
+        this.#targets = [];
+        this.#menu.remove();
+    }
+    set() {
+        return this.#menu;
+    }
+
+    // === СЛУШАТЕЛИ ОКНА ===
+    #onWindowClick = (event) => {
+        if (!this.#menu.contains(event.target)) this.hide();
+    };
+    #onWindowContextMenu = (event) => {
+        if (!this.#menu.contains(event.target)) this.hide();
+    };
+    #onWindowKeyDown = (event) => {
+        if (event.key === "Escape") this.hide();
+    };
+    #onWindowResize = () => {
+        this.hide();
+    };
+    #onWindowBlur = () => {
+        this.hide();
+    };
+}
+
+exports.ContextMenu = ContextMenu;

package/framework/components/chui_context_menu/styles.css

@@ -0,0 +1,136 @@
+/* ── ContextMenu — контекстное меню ───────────────────────── */
+@keyframes context-scale-in {
+    from {
+        opacity: 0;
+        transform: scale(0.92);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+@keyframes context-scale-out {
+    from {
+        opacity: 1;
+        transform: scale(1);
+    }
+    to {
+        opacity: 0;
+        transform: scale(0.92);
+    }
+}
+
+/* Общая "стеклянная" поверхность меню и подменю (как у notification / menu_bar_dropdown) */
+chui_context_menu,
+context_menu_submenu {
+    display: none;
+    flex-direction: column;
+    align-items: stretch;
+    width: max-content;
+    min-width: 180px;
+    height: max-content;
+    padding: var(--margin);
+    background-color: var(--header_background);
+    color: var(--text_color);
+    border: 1px solid var(--border_color);
+    border-radius: var(--border_radius);
+    box-shadow: var(--box_shadow_main);
+    backdrop-filter: var(--global_blur);
+    -webkit-backdrop-filter: var(--global_blur);
+    font-size: var(--font_default_size);
+}
+
+chui_context_menu {
+    position: fixed;
+    z-index: 5000;
+    transform-origin: top left;
+}
+
+context_menu_submenu {
+    position: absolute;
+    z-index: 10;
+    top: 0;
+    left: 100%;
+    transition: none;
+}
+
+context_menu_item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    position: relative;
+    width: -webkit-fill-available;
+    white-space: nowrap;
+    cursor: pointer;
+    padding: var(--main_padding);
+    border-radius: var(--border_radius);
+    color: var(--text_color);
+    gap: 6px;
+    box-sizing: border-box;
+}
+
+context_menu_item:hover {
+    background: var(--blue_prime_background);
+    color: var(--text_color_hover);
+}
+
+context_menu_item_icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    flex: none;
+}
+
+context_menu_item_icon chui_icon {
+    font-size: 15px;
+    color: inherit;
+}
+
+context_menu_item_title {
+    display: block;
+    font-size: var(--font_default_size);
+    font-weight: 500;
+    color: inherit;
+}
+
+context_menu_item_arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    flex: none;
+}
+
+context_menu_item_arrow chui_icon {
+    font-size: 14px;
+    color: inherit;
+}
+
+context_menu_item:hover chui_icon {
+    color: var(--text_color_hover);
+}
+
+context_menu_item_shortcut {
+    display: block;
+    margin-left: auto;
+    padding-left: 24px;
+    font-size: var(--font_labels_size);
+    color: var(--text_color_disabled);
+}
+
+context_menu_item:hover context_menu_item_shortcut {
+    color: var(--text_color_hover_disable);
+}
+
+context_menu_separator {
+    height: 1px;
+    margin: 4px 6px;
+    background: var(--border_color);
+}
+
+.context_menu_item_disabled {
+    cursor: default;
+    opacity: 0.5;
+    pointer-events: none;
+}