chuijs 4.0.2 → 4.0.4

package/framework/components/chui_media/audio_styles.css

@@ -9,11 +9,11 @@ chui_ap_main {
     display: flex;
     flex-direction: column;
     border-radius: var(--radius_md);
-    background: var(--ap_main_background);
+    background: var(--player_background);
     border: 1px solid var(--border_color);
     overflow: hidden;
-    --seek-before-width: 0%;
-    --volume-before-width: 0%;
+    --seek_before_width: 0%;
+    --volume_before_width: 0%;
     min-width: 460px;
     height: max-content;
 }
@@ -40,21 +40,21 @@ chui_ap_main[data_pin] {
 chui_ap_main[data_pin="bottom"] {
     inset-inline: 0;
     bottom: 0;
-    margin: var(--margin);
+    margin: var(--block_margin);
 }
 
 chui_ap_main[data_pin="top"] {
     inset-inline: 0;
     top: 0;
-    margin: var(--margin);
+    margin: var(--block_margin);
 }
 
 /* Боковые закрепления — компактная полоса у края, по центру высоты окна */
 chui_ap_main[data_pin="left"],
 chui_ap_main[data_pin="right"] {
     inset-block: 0;
-    width: min(460px, calc(100% - 2 * var(--margin)));
-    margin: auto var(--margin);
+    width: min(460px, calc(100% - 2 * var(--block_margin)));
+    margin: auto var(--block_margin);
 }
 
 chui_ap_main[data_pin="left"] {
@@ -112,7 +112,7 @@ chui_ap_seek_buf {
     width: 0;
     height: var(--player_track_height);
     border-radius: var(--radius_pill);
-    background: var(--ap_slider_buf_background);
+    background: var(--player_slider_buffer_background);
     position: absolute;
     inset-inline-start: 6px;
     max-width: calc(100% - 12px);
@@ -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,
-        var(--blue_prime_background) 0 var(--seek-before-width, 0%),
-        var(--ap_slider_background) var(--seek-before-width, 0%) 100%);
+    background-image: linear-gradient(
+        to right,
+        var(--blue_prime_background) 0 var(--seek_before_width, 0%),
+        var(--player_slider_background) var(--seek_before_width, 0%) 100%
+    );
 }
 
 /* Громкость — ступень звука, а не время: заливка нейтральная, чтобы не читалась второй
    полосой прогресса */
 #chui_ap_volume {
-    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%);
+    background-image: linear-gradient(
+        to right,
+        var(--text_color) 0 var(--volume_before_width, 0%),
+        var(--player_slider_background) var(--volume_before_width, 0%) 100%
+    );
 }
 
 #chui_ap_volume:disabled {
-    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%);
+    background-image: linear-gradient(
+        to right,
+        var(--player_slider_buffer_background) 0 var(--volume_before_width, 0%),
+        var(--player_slider_background) var(--volume_before_width, 0%) 100%
+    );
 }
 
 #chui_ap_seek::-webkit-slider-runnable-track,
@@ -176,16 +183,25 @@ 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;
     width: 9px;
     border-radius: 50%;
     background-color: var(--player_thumb_background);
-    box-shadow: 0 0 0 2px var(--ap_main_background);
+    box-shadow: 0 0 0 2px var(--player_background);
     cursor: pointer;
     margin-top: calc((var(--player_track_height) - 9px) / 2);
+    /* Рост под курсором — тот же переход: своё время у ручки есть только здесь,
+       общее правило до псевдоэлементов бегунка не достаёт */
+    transition:
+        height var(--motion_fast) var(--motion_ease),
+        width var(--motion_fast) var(--motion_ease),
+        margin-top var(--motion_fast) var(--motion_ease),
+        background-color var(--motion_fast) var(--motion_ease),
+        box-shadow var(--motion_fast) var(--motion_ease);
 }
 
 /* У выключенной полосы ползунка нет: она и так приглушена заливкой */
@@ -206,10 +222,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(--player_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 +236,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 +264,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;
@@ -256,6 +277,14 @@ chui_ap_fx_icon, chui_ap_volume_icon {
     cursor: pointer;
 }
 
+/* Кегль глифа — ключом плеера: у `chui_icon` есть своё правило (размер шапки),
+   поэтому размер задаётся значку, а не кнопке. Прежде число стояло в коде (пять мест) */
+chui_ap_play_pause chui_icon,
+chui_ap_fx_icon chui_icon,
+chui_ap_volume_icon chui_icon {
+    font-size: var(--player_icon_size);
+}
+
 /* Главная кнопка — светлый круг с глифом цвета подложки, как у Spotify: роль акцента
    в плеере занята полосами прогресса, а круг читается кнопкой воспроизведения */
 chui_ap_play_pause {
@@ -278,7 +307,7 @@ chui_ap_play_pause:hover {
 }
 
 chui_ap_play_pause:active {
-    transform: scale(.96);
+    transform: scale(0.96);
 }
 
 /* === ЭКВАЛАЙЗЕР === */
@@ -300,6 +329,8 @@ chui_ap_fx_dropdown {
 
 chui_ap_fx_dropdown.fx_open {
     display: block;
+    /* Раскрытие панели — общим кадром: прежде секция вставала на место рывком */
+    animation: chui_panel_in var(--motion_base) var(--motion_spring);
 }
 
 /* Открытая кнопка — как у прочих выпадающих: состояние держит тонировка акцента */
@@ -320,7 +351,7 @@ chui_ap_equalizer_main {
 /* === ПРЕСЕТЫ И ВЫКЛЮЧАТЕЛЬ ЭКВАЛАЙЗЕРА === */
 /* Поле пресетов и выключатель — общекитовые `Select` и `Toggle`, вложенные в полосу панели:
    клавиатура, роли и состояния у них свои, а здесь только размеры. У `Select` ширина взята
-   токеном страницы (`--control_width`), у `Toggle` — свои поля `--margin`, из-за которых
+   токеном страницы (`--control_width`), у `Toggle` — свои поля `--block_margin`, из-за которых
    выключатель не вставал к краю */
 chui_ap_equalizer_controls chui_selectbox {
     flex: 0 1 260px;
@@ -406,7 +437,7 @@ chui_eq_slider_main slider_label:first-child {
     color: var(--text_color);
     text-align: center;
     opacity: 0;
-    transition: opacity .12s ease;
+    transition: opacity var(--motion_fast) var(--motion_ease);
     pointer-events: none;
 }
 
@@ -422,7 +453,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;
 }
 
 /*
@@ -457,12 +488,14 @@ chui_eq_slider_main:focus-within slider_label:first-child {
     background-repeat: no-repeat;
     /* Заливка идёт от низа до ручки: полоса заливки короче рельса ровно на размер ручки
        и стоит по центру, поэтому её края совпадают с крайними положениями ручки при любом
-       значении (`--fx-before-width` считает скрипт, как у полос прогресса и громкости) */
+       значении (`--fx_before_width` считает скрипт, как у полос прогресса и громкости) */
     background-size: 100% calc(100% - var(--fx_knob));
     background-position: center;
-    background-image: linear-gradient(to top,
-        var(--blue_prime_background) 0 var(--fx-before-width),
-        transparent var(--fx-before-width));
+    background-image: linear-gradient(
+        to top,
+        var(--blue_prime_background) 0 var(--fx_before_width),
+        transparent var(--fx_before_width)
+    );
 }
 
 /* Дорожка не рисуется: рельс — само поле */
@@ -488,9 +521,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,
-        var(--text_color_disabled) 0 var(--fx-before-width),
-        transparent var(--fx-before-width));
+    background-image: linear-gradient(
+        to top,
+        var(--text_color_disabled) 0 var(--fx_before_width),
+        transparent var(--fx_before_width)
+    );
 }
 
 .eq_slider_test:disabled::-webkit-slider-thumb {
@@ -514,11 +549,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,87 +1,120 @@
-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 imageSizeModule = require("image-size");
+const sizeOf = typeof imageSizeModule === "function" ? imageSizeModule : imageSizeModule.imageSize;
+const { Icon, Icons } = require("../chui_icons/icons");
 
 class Image {
-    #chui_image = document.createElement('chui_image');
-    #image = document.createElement('img');
+    #chuiImage = 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");
+        if (options.disableMargin) this.#chuiImage.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 (options.width !== undefined) this.#chui_image.style.width = options.width;
-        if (options.height !== undefined) this.#chui_image.style.height = options.height;
+        const httpPath = 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 (httpPath !== undefined) this.#image.setAttribute("src", httpPath);
+        if (options.width !== undefined) this.#chuiImage.style.width = options.width;
+        if (options.height !== undefined) this.#chuiImage.style.height = options.height;
         if (options.width !== undefined) this.#image.style.width = options.width;
         if (options.height !== undefined) this.#image.style.height = options.height;
-        this.#chui_image.appendChild(this.#image);
+        this.#chuiImage.appendChild(this.#image);
         // Alt по умолчанию пустой: без атрибута скринридер читал бы вместо подписи data-URL картинки
         this.setAlt(options.alt === undefined ? "" : options.alt);
         if (options.decorative !== undefined) this.setDecorative(options.decorative === true);
 
         if (options.openPopup) {
-            this.#chui_image.addEventListener("click", () => {
+            this.#chuiImage.addEventListener("click", () => {
                 let popup;
-                let widow_size = document.body.getBoundingClientRect();
+                const windowSize = document.body.getBoundingClientRect();
                 if (options.path !== undefined) {
                     //
                     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);
-                    if (dimensions.height > widow_size.height) {
-                        image_size = ["auto", `${widow_size.height}px`]
-                    } else if (dimensions.width > widow_size.width) {
-                        image_size = [`${widow_size.height}px`, "auto"]
+                    let imageSize;
+                    const img = Buffer.from(options.base64, "base64");
+                    const dimensions = sizeOf(img);
+                    // Картинка вписывается в окно по той стороне, которой не хватает: высокая
+                    // ограничивается высотой окна, широкая — шириной. Прежде в широкой ветке
+                    // стояла высота окна (опечатка): картинка 1600×400 в окне 1000×800
+                    // получала ширину 800 px вместо 1000
+                    if (dimensions.height > windowSize.height) {
+                        imageSize = ["auto", `${windowSize.height}px`];
+                    } else if (dimensions.width > windowSize.width) {
+                        imageSize = [`${windowSize.width}px`, "auto"];
                     } else {
-                        image_size = ["auto", `auto`]
+                        imageSize = ["auto", "auto"];
                     }
                     //
-                    imageSet = new Image({ disableMargin: true, openPopup: false, base64: options.base64, width: image_size[0], height: image_size[1] });
+                    const imageSet = new Image({
+                        disableMargin: true,
+                        openPopup: false,
+                        base64: options.base64,
+                        width: imageSize[0],
+                        height: imageSize[1],
+                    });
                     popup = new ImagePopup(imageSet.set(), "max-content", "max-content");
-
-
                 }
-                document.body.appendChild(popup.set())
+                document.body.appendChild(popup.set());
                 popup.open();
-            })
+            });
         }
     }
     setWidth(value) {
-        this.#chui_image.style.width = value;
+        this.#chuiImage.style.width = value;
         this.#image.style.width = value;
     }
     setHeight(value) {
-        this.#chui_image.style.height = value;
+        this.#chuiImage.style.height = value;
         this.#image.style.height = value;
     }
     /** Подпись изображения (пустая строка — декоративное) */
@@ -99,51 +132,53 @@ class Image {
     /** Декоративное изображение прячется от скринридера целиком (`aria-hidden`) */
     setDecorative(boolean = Boolean()) {
         this.#decorative = boolean;
-        if (this.#decorative) this.#chui_image.setAttribute("aria-hidden", "true");
-        else this.#chui_image.removeAttribute("aria-hidden");
+        if (this.#decorative) this.#chuiImage.setAttribute("aria-hidden", "true");
+        else this.#chuiImage.removeAttribute("aria-hidden");
         this.#image.setAttribute("alt", this.#decorative ? "" : this.#alt);
         return this;
     }
-    set() { return this.#chui_image; }
+    set() {
+        return this.#chuiImage;
+    }
 }
 
 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")
+    #chuiImagePopup = document.createElement(`chui_image_popup`);
+    #popupContent = document.createElement("popup_content_test");
+    #imagePopupContent = document.createElement("image_popup_content");
+    #closePopup = document.createElement("image_popup_close");
     constructor(image, width, height) {
-        this.#chui_image_popup.id = this.#id
+        this.#chuiImagePopup.id = this.#id;
         //ADDS
-        this.#image_popup_content.style.width = width
-        this.#image_popup_content.style.height = height
-        this.#image_popup_content.appendChild(image);
+        this.#imagePopupContent.style.width = width;
+        this.#imagePopupContent.style.height = height;
+        this.#imagePopupContent.appendChild(image);
 
-        this.#close_popup.innerHTML = new Icon(Icons.NAVIGATION.CLOSE, "30px", "").getHTML();
+        this.#closePopup.innerHTML = new Icon(Icons.NAVIGATION.CLOSE, "30px", "").getHTML();
         // Крестик без подписи читался бы как «кнопка» без имени: значок помечен aria-hidden,
         // а роль и Enter/Space даёт общий хелпер — клавиатурой слой тоже закрывается
-        makeKeyboardButton(this.#close_popup);
-        this.#close_popup.setAttribute("aria-label", I18n.t("common.close"));
-        this.#close_popup.addEventListener("click", () => this.close());
+        makeKeyboardButton(this.#closePopup);
+        this.#closePopup.setAttribute("aria-label", I18n.t("common.close"));
+        this.#closePopup.addEventListener("click", () => this.close());
 
-        this.#popup_content.appendChild(this.#image_popup_content)
-        this.#popup_content.appendChild(this.#close_popup);
-        this.#chui_image_popup.appendChild(this.#popup_content);
+        this.#popupContent.appendChild(this.#imagePopupContent);
+        this.#popupContent.appendChild(this.#closePopup);
+        this.#chuiImagePopup.appendChild(this.#popupContent);
     }
     open() {
-        let dialog = this.#chui_image_popup;
+        const dialog = this.#chuiImagePopup;
         new Animation(dialog).fadeIn();
         new Animation(dialog.firstChild).scaleIn();
     }
     close() {
-        let dialog = this.#chui_image_popup;
+        const dialog = this.#chuiImagePopup;
         new Animation(dialog.firstChild).scaleOut();
         new Animation(dialog).fadeOutAndRemove();
     }
     set() {
-        return this.#chui_image_popup;
+        return this.#chuiImagePopup;
     }
 }
 
-exports.Image = Image;
+exports.Image = Image;