chuijs 4.0.2 → 4.0.4

package/framework/components/chui_popover/popover.js

@@ -1,4 +1,5 @@
-const {setStyles, optionOr} = require("../../modules/chui_functions");
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { Animation } = require("../../modules/chui_animations/animations");
 
 /**
  * Поповер: панель у триггера с произвольным содержимым.
@@ -34,7 +35,7 @@ class Popover {
         TOP: "top",
         BOTTOM: "bottom",
         LEFT: "left",
-        RIGHT: "right"
+        RIGHT: "right",
     };
     /** Зазор между триггером и панелью, px */
     static GAP = 8;
@@ -48,23 +49,25 @@ class Popover {
     #id = undefined;
     #trigger = undefined;
     #placement = Popover.PLACEMENT.BOTTOM;
-    #is_open = false;
-    #on_open = undefined;
-    #on_close = undefined;
-    #close_on_outside = true;
+    #isOpen = false;
+    #onOpen = undefined;
+    #onClose = undefined;
+    #closeOnOutside = true;
     #destroyed = false;
 
-    constructor(options = {
-        id: String(),
-        trigger: undefined,
-        content: undefined,
-        title: String(),
-        placement: String(),
-        label: String(),
-        onOpen: undefined,
-        onClose: undefined,
-        closeOnOutsideClick: Boolean()
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            trigger: undefined,
+            content: undefined,
+            title: String(),
+            placement: String(),
+            label: String(),
+            onOpen: undefined,
+            onClose: undefined,
+            closeOnOutsideClick: Boolean(),
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Popover");
         Popover.#counter += 1;
         // Заготовка опции (`String()`) равносильна отсутствующей: иначе слой без аргументов
@@ -76,9 +79,9 @@ class Popover {
         this.#panel.setAttribute("tabindex", "-1");
         if (options.label !== undefined) this.setLabel(options.label);
         if (options.placement !== undefined) this.#placement = Popover.#normalize(options.placement);
-        this.#on_open = options.onOpen;
-        this.#on_close = options.onClose;
-        if (options.closeOnOutsideClick !== undefined) this.#close_on_outside = options.closeOnOutsideClick !== false;
+        this.#onOpen = options.onOpen;
+        this.#onClose = options.onClose;
+        if (options.closeOnOutsideClick !== undefined) this.#closeOnOutside = options.closeOnOutsideClick !== false;
         this.#panel.appendChild(this.#header);
         this.#panel.appendChild(this.#body);
         if (options.title !== undefined) this.setTitle(options.title);
@@ -96,7 +99,7 @@ class Popover {
     }
 
     get isOpen() {
-        return this.#is_open;
+        return this.#isOpen;
     }
 
     getTitle() {
@@ -119,8 +122,9 @@ class Popover {
         this.#header.innerText = text === undefined ? "" : String(text);
         if (this.#header.id === "") this.#header.id = `${this.#id}_title`;
         // Заголовок служит именем слоя, пока не задан свой label и пока он не пуст
-        const has_title = this.#header.innerText.trim() !== "";
-        if (has_title && this.#panel.getAttribute("aria-label") === null) this.#panel.setAttribute("aria-labelledby", this.#header.id);
+        const hasTitle = this.#header.innerText.trim() !== "";
+        if (hasTitle && this.#panel.getAttribute("aria-label") === null)
+            this.#panel.setAttribute("aria-labelledby", this.#header.id);
         else this.#panel.removeAttribute("aria-labelledby");
         return this;
     }
@@ -139,7 +143,7 @@ class Popover {
 
     setPlacement(placement = String()) {
         this.#placement = Popover.#normalize(placement);
-        if (this.#is_open) this.#place();
+        if (this.#isOpen) this.#place();
         return this;
     }
 
@@ -180,41 +184,46 @@ class Popover {
 
     // ПОКАЗ / СКРЫТИЕ
     open() {
-        if (this.#destroyed || this.#is_open) return this;
+        if (this.#destroyed || this.#isOpen) return this;
         if (this.#trigger !== undefined && !document.body.contains(this.#trigger)) return this;
-        this.#is_open = true;
+        this.#isOpen = true;
         this.#panel.style.visibility = "hidden";
         this.#panel.style.display = "flex";
         this.#place();
         this.#panel.style.visibility = "visible";
+        // Кадр — после расстановки: её мереет `getBoundingClientRect`, а он считает
+        // по анимированному состоянию
+        new Animation(this.#panel).panelIn();
         if (this.#trigger !== undefined) this.#trigger.setAttribute("aria-expanded", "true");
-        if (this.#close_on_outside) window.addEventListener("click", this.#onWindowClick);
+        if (this.#closeOnOutside) window.addEventListener("click", this.#onWindowClick);
         window.addEventListener("resize", this.#onWindowChange);
         window.addEventListener("scroll", this.#onWindowChange, true);
         this.#focusInside();
-        if (this.#on_open !== undefined) this.#on_open(this);
+        if (this.#onOpen !== undefined) this.#onOpen(this);
         return this;
     }
 
     close() {
-        if (!this.#is_open) return this;
+        if (!this.#isOpen) return this;
         // Проверяем до скрытия: `display: none` уводит фокус в body, и «был ли он внутри» уже не узнать
-        const focus_inside = this.#panel.contains(document.activeElement);
-        this.#is_open = false;
+        const focusInside = this.#panel.contains(document.activeElement);
+        this.#isOpen = false;
         window.removeEventListener("click", this.#onWindowClick);
         window.removeEventListener("resize", this.#onWindowChange);
         window.removeEventListener("scroll", this.#onWindowChange, true);
-        this.#panel.style.display = "none";
+        // Уход — кадром: панель гаснет и сходит вверх, а `display` снимает драйвер по концу
+        // кадра. Прежде панель пропадала рывком
+        new Animation(this.#panel).fadeOut();
         if (this.#trigger !== undefined) {
             this.#trigger.setAttribute("aria-expanded", "false");
-            if (focus_inside) this.#trigger.focus();
+            if (focusInside) this.#trigger.focus();
         }
-        if (this.#on_close !== undefined) this.#on_close(this);
+        if (this.#onClose !== undefined) this.#onClose(this);
         return this;
     }
 
     toggle() {
-        return this.#is_open ? this.close() : this.open();
+        return this.#isOpen ? this.close() : this.open();
     }
 
     destroy() {
@@ -242,24 +251,42 @@ class Popover {
     // Панель ставится по выбранной стороне; если не влезает — на противоположную, затем в окно
     #place() {
         const trigger = this.#trigger;
-        const rect = trigger === undefined
-            ? {top: window.innerHeight / 2, bottom: window.innerHeight / 2, left: window.innerWidth / 2, right: window.innerWidth / 2, width: 0, height: 0}
-            : trigger.getBoundingClientRect();
+        const rect =
+            trigger === undefined
+                ? {
+                      top: window.innerHeight / 2,
+                      bottom: window.innerHeight / 2,
+                      left: window.innerWidth / 2,
+                      right: window.innerWidth / 2,
+                      width: 0,
+                      height: 0,
+                  }
+                : trigger.getBoundingClientRect();
         const width = this.#panel.offsetWidth;
         const height = this.#panel.offsetHeight;
         const gap = Popover.GAP;
         const edge = Popover.EDGE;
         let placement = this.#placement;
-        if (placement === Popover.PLACEMENT.BOTTOM && rect.bottom + height + gap > window.innerHeight - edge) placement = Popover.PLACEMENT.TOP;
-        else if (placement === Popover.PLACEMENT.TOP && rect.top - height - gap < edge) placement = Popover.PLACEMENT.BOTTOM;
-        else if (placement === Popover.PLACEMENT.RIGHT && rect.right + width + gap > window.innerWidth - edge) placement = Popover.PLACEMENT.LEFT;
-        else if (placement === Popover.PLACEMENT.LEFT && rect.left - width - gap < edge) placement = Popover.PLACEMENT.RIGHT;
-        let left = placement === Popover.PLACEMENT.LEFT ? rect.left - width - gap
-            : placement === Popover.PLACEMENT.RIGHT ? rect.right + gap
-                : rect.left;
-        let top = placement === Popover.PLACEMENT.TOP ? rect.top - height - gap
-            : placement === Popover.PLACEMENT.BOTTOM ? rect.bottom + gap
-                : rect.top;
+        if (placement === Popover.PLACEMENT.BOTTOM && rect.bottom + height + gap > window.innerHeight - edge)
+            placement = Popover.PLACEMENT.TOP;
+        else if (placement === Popover.PLACEMENT.TOP && rect.top - height - gap < edge)
+            placement = Popover.PLACEMENT.BOTTOM;
+        else if (placement === Popover.PLACEMENT.RIGHT && rect.right + width + gap > window.innerWidth - edge)
+            placement = Popover.PLACEMENT.LEFT;
+        else if (placement === Popover.PLACEMENT.LEFT && rect.left - width - gap < edge)
+            placement = Popover.PLACEMENT.RIGHT;
+        let left =
+            placement === Popover.PLACEMENT.LEFT
+                ? rect.left - width - gap
+                : placement === Popover.PLACEMENT.RIGHT
+                  ? rect.right + gap
+                  : rect.left;
+        let top =
+            placement === Popover.PLACEMENT.TOP
+                ? rect.top - height - gap
+                : placement === Popover.PLACEMENT.BOTTOM
+                  ? rect.bottom + gap
+                  : rect.top;
         left = Math.max(edge, Math.min(left, window.innerWidth - width - edge));
         top = Math.max(edge, Math.min(top, window.innerHeight - height - edge));
         this.#panel.dataset.placement = placement;
@@ -289,7 +316,7 @@ class Popover {
     };
 
     #onWindowChange = () => {
-        if (!this.#is_open) return;
+        if (!this.#isOpen) return;
         this.#place();
     };
 
@@ -314,4 +341,4 @@ class Popover {
     }
 }
 
-exports.Popover = Popover
+exports.Popover = Popover;

package/framework/components/chui_popover/styles.css

@@ -11,7 +11,7 @@ chui_popover {
     padding: 12px;
     gap: 10px;
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--header_background);
     backdrop-filter: var(--global_blur);
     box-shadow: var(--box_shadow_drop);