chuijs 4.0.1 → 4.0.3

package/framework/components/chui_media/audio_styles.css

@@ -125,7 +125,8 @@ chui_ap_info chui_label {
     font-variant-numeric: tabular-nums;
     flex: none;
 }
-#chui_ap_seek, #chui_ap_volume {
+#chui_ap_seek,
+#chui_ap_volume {
     margin: 0;
     -webkit-appearance: none;
     border-radius: var(--radius_pill);
@@ -145,23 +146,29 @@ chui_ap_info chui_label {
 }
 
 #chui_ap_seek {
-    background-image: linear-gradient(to right,
+    background-image: linear-gradient(
+        to right,
         var(--blue_prime_background) 0 var(--seek-before-width, 0%),
-        var(--ap_slider_background) var(--seek-before-width, 0%) 100%);
+        var(--ap_slider_background) var(--seek-before-width, 0%) 100%
+    );
 }
 
 /* Громкость — ступень звука, а не время: заливка нейтральная, чтобы не читалась второй
    полосой прогресса */
 #chui_ap_volume {
-    background-image: linear-gradient(to right,
+    background-image: linear-gradient(
+        to right,
         var(--text_color) 0 var(--volume-before-width, 0%),
-        var(--ap_slider_background) var(--volume-before-width, 0%) 100%);
+        var(--ap_slider_background) var(--volume-before-width, 0%) 100%
+    );
 }
 
 #chui_ap_volume:disabled {
-    background-image: linear-gradient(to right,
+    background-image: linear-gradient(
+        to right,
         var(--ap_slider_buf_background) 0 var(--volume-before-width, 0%),
-        var(--ap_slider_background) var(--volume-before-width, 0%) 100%);
+        var(--ap_slider_background) var(--volume-before-width, 0%) 100%
+    );
 }
 
 #chui_ap_seek::-webkit-slider-runnable-track,
@@ -176,7 +183,8 @@ chui_ap_info chui_label {
    курсором, и в покое полоса прогресса на нуле читалась пустой серой чертой,
    а громкость в 100 % — сплошной белой линией: два разных элемента, а не
    одинаковые ползунки. Ободок цвета подложки нужен там, где заливка белая. */
-#chui_ap_seek::-webkit-slider-thumb, #chui_ap_volume::-webkit-slider-thumb {
+#chui_ap_seek::-webkit-slider-thumb,
+#chui_ap_volume::-webkit-slider-thumb {
     -webkit-appearance: none;
     border: none;
     height: 9px;
@@ -206,10 +214,13 @@ chui_ap_main:hover #chui_ap_volume:not(:disabled)::-webkit-slider-thumb,
     width: 12px;
     margin-top: calc((var(--player_track_height) - 12px) / 2);
     background-color: var(--player_thumb_background);
-    box-shadow: 0 0 0 2px var(--ap_main_background), var(--box_shadow_main);
+    box-shadow:
+        0 0 0 2px var(--ap_main_background),
+        var(--box_shadow_main);
 }
 
-#chui_ap_seek:focus, #chui_ap_volume:focus,
+#chui_ap_seek:focus,
+#chui_ap_volume:focus,
 #chui_ap_seek:focus::-webkit-slider-runnable-track,
 #chui_ap_volume:focus::-webkit-slider-runnable-track {
     outline: none;
@@ -217,7 +228,8 @@ chui_ap_main:hover #chui_ap_volume:not(:disabled)::-webkit-slider-thumb,
 }
 
 /* Клавиатурный фокус возвращаем точечно: правило выше снимает UA-обводку */
-#chui_ap_seek:focus-visible, #chui_ap_volume:focus-visible {
+#chui_ap_seek:focus-visible,
+#chui_ap_volume:focus-visible {
     outline: var(--focus_outline);
     outline-offset: var(--focus_outline_offset);
 }
@@ -244,7 +256,8 @@ chui_ap_volume_block {
 /* КНОПКИ: площадка 32px с глифом 18px. Прежде глиф занимал почти всю кнопку
    (30px в 34px), и она читалась рамкой вокруг значка */
 chui_ap_play_pause,
-chui_ap_fx_icon, chui_ap_volume_icon {
+chui_ap_fx_icon,
+chui_ap_volume_icon {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -278,7 +291,7 @@ chui_ap_play_pause:hover {
 }
 
 chui_ap_play_pause:active {
-    transform: scale(.96);
+    transform: scale(0.96);
 }
 
 /* === ЭКВАЛАЙЗЕР === */
@@ -406,7 +419,7 @@ chui_eq_slider_main slider_label:first-child {
     color: var(--text_color);
     text-align: center;
     opacity: 0;
-    transition: opacity .12s ease;
+    transition: opacity 0.12s ease;
     pointer-events: none;
 }
 
@@ -422,7 +435,7 @@ chui_eq_slider_main:focus-within slider_label:first-child {
 
 .chui_ap_equalizer_disabled slider_label {
     color: var(--text_color_disabled);
-    opacity: .5;
+    opacity: 0.5;
 }
 
 /*
@@ -460,9 +473,11 @@ chui_eq_slider_main:focus-within slider_label:first-child {
        значении (`--fx-before-width` считает скрипт, как у полос прогресса и громкости) */
     background-size: 100% calc(100% - var(--fx_knob));
     background-position: center;
-    background-image: linear-gradient(to top,
+    background-image: linear-gradient(
+        to top,
         var(--blue_prime_background) 0 var(--fx-before-width),
-        transparent var(--fx-before-width));
+        transparent var(--fx-before-width)
+    );
 }
 
 /* Дорожка не рисуется: рельс — само поле */
@@ -488,9 +503,11 @@ chui_eq_slider_main:focus-within slider_label:first-child {
 .eq_slider_test:disabled {
     cursor: not-allowed;
     accent-color: var(--text_color_disabled);
-    background-image: linear-gradient(to top,
+    background-image: linear-gradient(
+        to top,
         var(--text_color_disabled) 0 var(--fx-before-width),
-        transparent var(--fx-before-width));
+        transparent var(--fx-before-width)
+    );
 }
 
 .eq_slider_test:disabled::-webkit-slider-thumb {
@@ -514,11 +531,13 @@ chui_ap_fx_icon:focus-visible,
 }
 
 /* Наведение: нейтральная площадка — у всех, кроме главной кнопки: она уже светлая */
-chui_ap_fx_icon:hover, chui_ap_volume_icon:hover {
+chui_ap_fx_icon:hover,
+chui_ap_volume_icon:hover {
     background: var(--element_background_hover);
 }
 
-chui_ap_fx_icon:hover chui_icon, chui_ap_volume_icon:hover chui_icon {
+chui_ap_fx_icon:hover chui_icon,
+chui_ap_volume_icon:hover chui_icon {
     color: var(--text_color);
 }
 

package/framework/components/chui_media/image.js

@@ -1,34 +1,45 @@
-const {Animation} = require("../../modules/chui_animations/animations");
-const {optionOr} = require("../../modules/chui_functions");
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
-const {makeKeyboardButton} = require("../../modules/chui_a11y/chui_a11y");
+const { Animation } = require("../../modules/chui_animations/animations");
+const { optionOr } = require("../../modules/chui_functions");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
+const { makeKeyboardButton } = require("../../modules/chui_a11y/chui_a11y");
 // image-size 2.x отдаёт объект с функцией внутри (сборка ESM + CJS-обёртка), а 1.x — саму
 // функцию: разворачиваем оба варианта, чтобы модуль не зависел от установленной версии
 const image_size = require("image-size");
 const sizeOf = typeof image_size === "function" ? image_size : image_size.imageSize;
-const {Icon, Icons} = require("../chui_icons/icons");
+const { Icon, Icons } = require("../chui_icons/icons");
 
 class Image {
-    #chui_image = document.createElement('chui_image');
-    #image = document.createElement('img');
+    #chui_image = document.createElement("chui_image");
+    #image = document.createElement("img");
     #alt = "";
     #decorative = false;
-    constructor(options = {
-        path: String(), base64: String(), httpPath: String(),
-        width: String(), height: String(),
-        openPopup: Boolean(), disableMargin: Boolean(),
-        alt: String(), decorative: Boolean()
-    }) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/image_styles.css", 'chUiJS_Image');
+    constructor(
+        options = {
+            path: String(),
+            base64: String(),
+            httpPath: String(),
+            width: String(),
+            height: String(),
+            openPopup: Boolean(),
+            disableMargin: Boolean(),
+            alt: String(),
+            decorative: Boolean(),
+        }
+    ) {
+        require("../../modules/chui_functions").setStyles(__dirname + "/image_styles.css", "chUiJS_Image");
         // Внешний отступ снимает класс: его читает CSS
         if (options.disableMargin) this.#chui_image.classList.add("image_no_margin");
         // Источник — необязательная опция: пустая заготовка пути раньше читалась как файл (ENOENT)
         const path = optionOr(options.path, undefined);
         const base64 = optionOr(options.base64, undefined);
         const http_path = optionOr(options.httpPath, undefined);
-        if (path !== undefined) this.#image.setAttribute('src', `data:image/png;base64,${require('fs').readFileSync(path).toString("base64")}`)
-        if (base64 !== undefined) this.#image.setAttribute('src', `data:image/png;base64,${base64}`);
-        if (http_path !== undefined) this.#image.setAttribute('src', http_path);
+        if (path !== undefined)
+            this.#image.setAttribute(
+                "src",
+                `data:image/png;base64,${require("fs").readFileSync(path).toString("base64")}`
+            );
+        if (base64 !== undefined) this.#image.setAttribute("src", `data:image/png;base64,${base64}`);
+        if (http_path !== undefined) this.#image.setAttribute("src", http_path);
         if (options.width !== undefined) this.#chui_image.style.width = options.width;
         if (options.height !== undefined) this.#chui_image.style.height = options.height;
         if (options.width !== undefined) this.#image.style.width = options.width;
@@ -47,33 +58,52 @@ class Image {
                     let imageSet;
                     // image-size 2.x размеры файла по пути не считает (строку он читал бы как байты),
                     // поэтому файл читаем сами и отдаём буфер — как в ветке base64 ниже
-                    const dimensions = sizeOf(require('fs').readFileSync(options.path));
+                    const dimensions = sizeOf(require("fs").readFileSync(options.path));
                     if (dimensions.height > dimensions.width) {
-                        imageSet = new Image({ disableMargin: true, openPopup: false, path: options.path, width: "auto", height: "-webkit-fill-available" });
+                        imageSet = new Image({
+                            disableMargin: true,
+                            openPopup: false,
+                            path: options.path,
+                            width: "auto",
+                            height: "-webkit-fill-available",
+                        });
                         popup = new ImagePopup(imageSet.set(), "auto", "-webkit-fill-available");
                     } else {
-                        imageSet = new Image({ disableMargin: true, openPopup: false, path: options.path, width: "auto", height: "auto" });
+                        imageSet = new Image({
+                            disableMargin: true,
+                            openPopup: false,
+                            path: options.path,
+                            width: "auto",
+                            height: "auto",
+                        });
                         popup = new ImagePopup(imageSet.set(), "auto", "-webkit-fill-available");
                     }
                 }
                 if (options.base64 !== undefined) {
-                    let image_size; let imageSet; let img = Buffer.from(options.base64, 'base64'); let dimensions = sizeOf(img);
+                    let image_size;
+                    let imageSet;
+                    let img = Buffer.from(options.base64, "base64");
+                    let dimensions = sizeOf(img);
                     if (dimensions.height > widow_size.height) {
-                        image_size = ["auto", `${widow_size.height}px`]
+                        image_size = ["auto", `${widow_size.height}px`];
                     } else if (dimensions.width > widow_size.width) {
-                        image_size = [`${widow_size.height}px`, "auto"]
+                        image_size = [`${widow_size.height}px`, "auto"];
                     } else {
-                        image_size = ["auto", `auto`]
+                        image_size = ["auto", `auto`];
                     }
                     //
-                    imageSet = new Image({ disableMargin: true, openPopup: false, base64: options.base64, width: image_size[0], height: image_size[1] });
+                    imageSet = new Image({
+                        disableMargin: true,
+                        openPopup: false,
+                        base64: options.base64,
+                        width: image_size[0],
+                        height: image_size[1],
+                    });
                     popup = new ImagePopup(imageSet.set(), "max-content", "max-content");
-
-
                 }
-                document.body.appendChild(popup.set())
+                document.body.appendChild(popup.set());
                 popup.open();
-            })
+            });
         }
     }
     setWidth(value) {
@@ -104,20 +134,22 @@ class Image {
         this.#image.setAttribute("alt", this.#decorative ? "" : this.#alt);
         return this;
     }
-    set() { return this.#chui_image; }
+    set() {
+        return this.#chui_image;
+    }
 }
 
 class ImagePopup {
     #id = require("randomstring").generate();
     #chui_image_popup = document.createElement(`chui_image_popup`);
-    #popup_content = document.createElement('popup_content_test');
-    #image_popup_content = document.createElement('image_popup_content');
-    #close_popup = document.createElement("image_popup_close")
+    #popup_content = document.createElement("popup_content_test");
+    #image_popup_content = document.createElement("image_popup_content");
+    #close_popup = document.createElement("image_popup_close");
     constructor(image, width, height) {
-        this.#chui_image_popup.id = this.#id
+        this.#chui_image_popup.id = this.#id;
         //ADDS
-        this.#image_popup_content.style.width = width
-        this.#image_popup_content.style.height = height
+        this.#image_popup_content.style.width = width;
+        this.#image_popup_content.style.height = height;
         this.#image_popup_content.appendChild(image);
 
         this.#close_popup.innerHTML = new Icon(Icons.NAVIGATION.CLOSE, "30px", "").getHTML();
@@ -127,7 +159,7 @@ class ImagePopup {
         this.#close_popup.setAttribute("aria-label", I18n.t("common.close"));
         this.#close_popup.addEventListener("click", () => this.close());
 
-        this.#popup_content.appendChild(this.#image_popup_content)
+        this.#popup_content.appendChild(this.#image_popup_content);
         this.#popup_content.appendChild(this.#close_popup);
         this.#chui_image_popup.appendChild(this.#popup_content);
     }
@@ -146,4 +178,4 @@ class ImagePopup {
     }
 }
 
-exports.Image = Image;
+exports.Image = Image;

package/framework/components/chui_media/image_compare.js

@@ -1,5 +1,5 @@
-const { setStyles } = require('../../modules/chui_functions');
-const { I18n } = require('../../modules/chui_i18n/chui_i18n');
+const { setStyles } = require("../../modules/chui_functions");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /** Минимальная ширина половины кадра, при которой её подпись ещё уместна, % */
 const BADGE_MIN_PART = 20;
@@ -41,7 +41,7 @@ const BADGE_MIN_PART = 20;
 class ImageCompare {
     static ORIENTATION = {
         HORIZONTAL: "horizontal",
-        VERTICAL: "vertical"
+        VERTICAL: "vertical",
     };
     static #counter = 0;
 
@@ -68,12 +68,25 @@ class ImageCompare {
     #on_change = undefined;
     #change_listeners = [];
 
-    constructor(options = {
-        id: String(), title: String(), label: String(), before: String(), after: String(),
-        beforeAlt: String(), afterAlt: String(), width: String(), height: String(),
-        orientation: String(), value: Number(), step: Number(), labels: Boolean(),
-        disabled: Boolean(), onChange: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            title: String(),
+            label: String(),
+            before: String(),
+            after: String(),
+            beforeAlt: String(),
+            afterAlt: String(),
+            width: String(),
+            height: String(),
+            orientation: String(),
+            value: Number(),
+            step: Number(),
+            labels: Boolean(),
+            disabled: Boolean(),
+            onChange: undefined,
+        }
+    ) {
         setStyles(__dirname + "/image_compare_styles.css", "chUiJS_ImageCompare");
         ImageCompare.#counter += 1;
         this.#id = options.id === undefined ? `chui_image_compare_${ImageCompare.#counter}` : options.id;
@@ -87,8 +100,10 @@ class ImageCompare {
         if (options.height !== undefined) this.#root.style.setProperty("--image_compare_height", options.height);
         if (options.value !== undefined) this.#value = this.#clamp(options.value);
         if (options.step !== undefined) this.#step = Math.abs(Number(options.step) || 1);
-        this.#orientation = options.orientation === ImageCompare.ORIENTATION.VERTICAL
-            ? ImageCompare.ORIENTATION.VERTICAL : ImageCompare.ORIENTATION.HORIZONTAL;
+        this.#orientation =
+            options.orientation === ImageCompare.ORIENTATION.VERTICAL
+                ? ImageCompare.ORIENTATION.VERTICAL
+                : ImageCompare.ORIENTATION.HORIZONTAL;
 
         if (options.title !== undefined) {
             this.#title.id = `${this.#id}_title`;
@@ -107,7 +122,11 @@ class ImageCompare {
         this.#handle.setAttribute("aria-valuemin", "0");
         this.#handle.setAttribute("aria-valuemax", "100");
         if (options.title !== undefined) this.#handle.setAttribute("aria-labelledby", this.#title.id);
-        else this.#handle.setAttribute("aria-label", this.#label_text === undefined ? I18n.t("media.imageCompareLabel") : this.#label_text);
+        else
+            this.#handle.setAttribute(
+                "aria-label",
+                this.#label_text === undefined ? I18n.t("media.imageCompareLabel") : this.#label_text
+            );
         this.#grip.setAttribute("aria-hidden", "true");
         this.#grip.innerText = "‹ ›";
         this.#badge_before.className = "image_compare_badge image_compare_badge_before";
@@ -138,10 +157,18 @@ class ImageCompare {
 
     // === ЗНАЧЕНИЕ ===
     /** Где стоит граница, в процентах от ширины (или высоты) кадра */
-    getValue() { return this.#value; }
-    getId() { return this.#id; }
-    getOrientation() { return this.#orientation; }
-    isDisabled() { return this.#disabled; }
+    getValue() {
+        return this.#value;
+    }
+    getId() {
+        return this.#id;
+    }
+    getOrientation() {
+        return this.#orientation;
+    }
+    isDisabled() {
+        return this.#disabled;
+    }
 
     /** Поставить границу; `silent` — без уведомления слушателей (значение ставит модель) */
     setValue(value = Number(), silent = Boolean()) {
@@ -154,8 +181,10 @@ class ImageCompare {
         return this;
     }
     setOrientation(orientation = String()) {
-        this.#orientation = orientation === ImageCompare.ORIENTATION.VERTICAL
-            ? ImageCompare.ORIENTATION.VERTICAL : ImageCompare.ORIENTATION.HORIZONTAL;
+        this.#orientation =
+            orientation === ImageCompare.ORIENTATION.VERTICAL
+                ? ImageCompare.ORIENTATION.VERTICAL
+                : ImageCompare.ORIENTATION.HORIZONTAL;
         this.#syncOrientation();
         this.#render();
         return this;
@@ -183,7 +212,9 @@ class ImageCompare {
         this.#change_listeners.push(listener);
         return this;
     }
-    set() { return this.#root; }
+    set() {
+        return this.#root;
+    }
 
     // === ВНУТРЕННЕЕ ===
     #emit() {
@@ -214,7 +245,7 @@ class ImageCompare {
     #render() {
         const percent = `${this.#value}%`;
         this.#handle.setAttribute("aria-valuenow", String(this.#value));
-        this.#handle.setAttribute("aria-valuetext", I18n.t("media.imageCompareValue", {value: this.#value}));
+        this.#handle.setAttribute("aria-valuetext", I18n.t("media.imageCompareValue", { value: this.#value }));
         if (this.#orientation === ImageCompare.ORIENTATION.VERTICAL) {
             this.#handle.style.top = percent;
             this.#handle.style.left = "";
@@ -319,4 +350,4 @@ class ImageCompare {
     };
 }
 
-exports.ImageCompare = ImageCompare
+exports.ImageCompare = ImageCompare;

package/framework/components/chui_media/image_styles.css

@@ -3,7 +3,7 @@ chui_image {
     width: max-content;
     border-radius: var(--radius_md);
     margin: var(--margin);
-    display: flex
+    display: flex;
 }
 
 /* Опция `disableMargin`: внешний отступ снимает класс */
@@ -17,7 +17,7 @@ chui_image img {
     border-radius: var(--radius_md);
     /* Волосок вместо рамки: белая картинка не сливается со страницей,
        а размер от него не меняется */
-    box-shadow: 0 0 0 1px var(--border_color)
+    box-shadow: 0 0 0 1px var(--border_color);
 }
 
 /* IMAGE POPUP */
@@ -33,7 +33,7 @@ chui_image_popup {
     background-color: var(--header_background);
     padding: 0;
     border: none;
-    backdrop-filter: var(--global_blur)
+    backdrop-filter: var(--global_blur);
 }
 
 popup_content_test {