chuijs 4.0.2 → 4.0.4

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;
 
@@ -54,41 +54,56 @@ class ImageCompare {
     #after = document.createElement("img");
     #handle = document.createElement("image_compare_handle");
     #grip = document.createElement("image_compare_grip");
-    #badge_before = document.createElement("image_compare_badge");
-    #badge_after = document.createElement("image_compare_badge");
+    #badgeBefore = document.createElement("image_compare_badge");
+    #badgeAfter = document.createElement("image_compare_badge");
     #value = 50;
     #step = 1;
     #orientation = ImageCompare.ORIENTATION.HORIZONTAL;
     #labels = true;
     #disabled = false;
     #dragging = false;
-    #label_text = undefined;
-    #before_alt = undefined;
-    #after_alt = undefined;
-    #on_change = undefined;
-    #change_listeners = [];
+    #labelText = undefined;
+    #beforeAlt = undefined;
+    #afterAlt = undefined;
+    #onChange = undefined;
+    #changeListeners = [];
 
-    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;
         this.#root.id = this.#id;
-        this.#label_text = options.label === undefined ? undefined : options.label;
-        this.#before_alt = options.beforeAlt;
-        this.#after_alt = options.afterAlt;
+        this.#labelText = options.label === undefined ? undefined : options.label;
+        this.#beforeAlt = options.beforeAlt;
+        this.#afterAlt = options.afterAlt;
         this.#labels = options.labels !== false;
-        this.#on_change = options.onChange;
+        this.#onChange = options.onChange;
         if (options.width !== undefined) this.#root.style.width = options.width;
         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`;
@@ -99,29 +114,33 @@ class ImageCompare {
         this.#after.className = "image_compare_image";
         this.#before.setAttribute("draggable", "false");
         this.#after.setAttribute("draggable", "false");
-        this.#before.setAttribute("alt", this.#altText(this.#before_alt, "media.imageCompareBefore"));
-        this.#after.setAttribute("alt", this.#altText(this.#after_alt, "media.imageCompareAfter"));
+        this.#before.setAttribute("alt", this.#altText(this.#beforeAlt, "media.imageCompareBefore"));
+        this.#after.setAttribute("alt", this.#altText(this.#afterAlt, "media.imageCompareAfter"));
         // Ручка ведёт себя как ползунок: имя берётся из заголовка или из опции label
         this.#handle.setAttribute("role", "slider");
         this.#handle.setAttribute("tabindex", "0");
         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.#labelText === undefined ? I18n.t("media.imageCompareLabel") : this.#labelText
+            );
         this.#grip.setAttribute("aria-hidden", "true");
         this.#grip.innerText = "‹ ›";
-        this.#badge_before.className = "image_compare_badge image_compare_badge_before";
-        this.#badge_after.className = "image_compare_badge image_compare_badge_after";
-        this.#badge_before.innerText = I18n.t("media.imageCompareBefore");
-        this.#badge_after.innerText = I18n.t("media.imageCompareAfter");
+        this.#badgeBefore.className = "image_compare_badge image_compare_badge_before";
+        this.#badgeAfter.className = "image_compare_badge image_compare_badge_after";
+        this.#badgeBefore.innerText = I18n.t("media.imageCompareBefore");
+        this.#badgeAfter.innerText = I18n.t("media.imageCompareAfter");
 
         this.#handle.appendChild(this.#grip);
         this.#clip.appendChild(this.#after);
         this.#frame.appendChild(this.#before);
         this.#frame.appendChild(this.#clip);
         this.#frame.appendChild(this.#handle);
-        this.#frame.appendChild(this.#badge_before);
-        this.#frame.appendChild(this.#badge_after);
+        this.#frame.appendChild(this.#badgeBefore);
+        this.#frame.appendChild(this.#badgeAfter);
         this.#root.appendChild(this.#frame);
 
         // Перетаскивание идёт с захватом указателя на кадре: слушателей окна не нужно
@@ -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;
@@ -180,15 +209,17 @@ class ImageCompare {
         return this;
     }
     addChangeListener(listener = () => {}) {
-        this.#change_listeners.push(listener);
+        this.#changeListeners.push(listener);
         return this;
     }
-    set() { return this.#root; }
+    set() {
+        return this.#root;
+    }
 
     // === ВНУТРЕННЕЕ ===
     #emit() {
-        for (const listener of this.#change_listeners) listener(this.#value);
-        if (this.#on_change !== undefined) this.#on_change(this.#value);
+        for (const listener of this.#changeListeners) listener(this.#value);
+        if (this.#onChange !== undefined) this.#onChange(this.#value);
     }
     #clamp(value) {
         return Math.max(0, Math.min(100, Number(value) || 0));
@@ -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 = "";
@@ -223,22 +254,22 @@ class ImageCompare {
             this.#syncBadges(this.#value, 100 - this.#value);
             return;
         }
-        const from_end = this.#isRTL();
+        const fromEnd = this.#isRTL();
         this.#handle.style.top = "";
-        this.#handle.style.left = from_end ? "" : percent;
-        this.#handle.style.right = from_end ? percent : "";
-        this.#clip.style.clipPath = from_end ? `inset(0 ${percent} 0 0)` : `inset(0 0 0 ${percent})`;
-        this.#syncBadges(from_end ? 100 - this.#value : this.#value, from_end ? this.#value : 100 - this.#value);
+        this.#handle.style.left = fromEnd ? "" : percent;
+        this.#handle.style.right = fromEnd ? percent : "";
+        this.#clip.style.clipPath = fromEnd ? `inset(0 ${percent} 0 0)` : `inset(0 0 0 ${percent})`;
+        this.#syncBadges(fromEnd ? 100 - this.#value : this.#value, fromEnd ? this.#value : 100 - this.#value);
     }
     /**
      * Подпись стороны видна, только если её половина кадра достаточно широка:
      * иначе «До» оказалось бы поверх картинки «после» и путало бы.
      */
-    #syncBadges(before_part, after_part) {
-        const enough = this.#labels !== false && before_part >= BADGE_MIN_PART;
-        const enough_after = this.#labels !== false && after_part >= BADGE_MIN_PART;
-        this.#badge_before.style.display = enough ? "" : "none";
-        this.#badge_after.style.display = enough_after ? "" : "none";
+    #syncBadges(beforePart, afterPart) {
+        const enough = this.#labels !== false && beforePart >= BADGE_MIN_PART;
+        const enoughAfter = this.#labels !== false && afterPart >= BADGE_MIN_PART;
+        this.#badgeBefore.style.display = enough ? "" : "none";
+        this.#badgeAfter.style.display = enoughAfter ? "" : "none";
     }
     /** Доля кадра под указателем: в RTL отсчёт идёт с другого края */
     #percentAt(clientX, clientY) {
@@ -247,8 +278,8 @@ class ImageCompare {
         if (this.#orientation === ImageCompare.ORIENTATION.VERTICAL) {
             return ((clientY - rect.top) / rect.height) * 100;
         }
-        const from_start = ((clientX - rect.left) / rect.width) * 100;
-        return this.#isRTL() ? 100 - from_start : from_start;
+        const fromStart = ((clientX - rect.left) / rect.width) * 100;
+        return this.#isRTL() ? 100 - fromStart : fromStart;
     }
 
     // === ОБРАБОТЧИКИ ===
@@ -319,4 +350,4 @@ class ImageCompare {
     };
 }
 
-exports.ImageCompare = ImageCompare
+exports.ImageCompare = ImageCompare;

package/framework/components/chui_media/image_compare_styles.css

@@ -4,14 +4,14 @@ chui_image_compare {
     flex-direction: column;
     height: max-content;
     width: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     font-size: var(--font_default_size);
     color: var(--text_color);
 }
 
 image_compare_title {
     display: block;
-    margin: var(--margin);
+    margin: var(--block_margin);
     font-size: var(--font_labels_size);
     font-weight: 500;
     color: var(--text_color);
@@ -73,8 +73,8 @@ image_compare_handle {
     justify-content: center;
     width: 2px;
     margin-inline: -1px;
-    background: var(--background_color);
-    box-shadow: 0 0 8px rgb(0 0 0 / 25%);
+    background: var(--element_background_2);
+    box-shadow: var(--box_shadow_halo);
     cursor: ew-resize;
     outline: none;
 }
@@ -102,7 +102,7 @@ image_compare_grip {
     width: 34px;
     height: 34px;
     border-radius: 50%;
-    background: var(--background_color);
+    background: var(--element_background_2);
     border: 1px solid var(--border_color);
     box-shadow: var(--box_shadow_drop);
     color: var(--text_color);

package/framework/components/chui_media/image_styles.css

@@ -2,8 +2,8 @@ chui_image {
     height: max-content;
     width: max-content;
     border-radius: var(--radius_md);
-    margin: var(--margin);
-    display: flex
+    margin: var(--block_margin);
+    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 {