griffincss-ui 0.24.0-dev → 0.26.1

package/src/griffinjs/widgets/dropdown.js

@@ -21,10 +21,22 @@
  *   * позицию popover-панели у кнопки: считается здесь, а не CSS anchor
  *     positioning, — одинаково во всех движках (нужен griffinjs-anchor.js);
  *   * наведение с задержкой намерения (hover) — только для pointerType
- *     mouse/pen: касание открывает щелчком, как без скрипта.
+ *     mouse/pen: касание открывает щелчком, как без скрипта;
+ *   * закрытие <details> с состоянием (Этап 48d): панель, чей уход тема
+ *     анимирует, не пропадает в первом же кадре — обёртка получает
+ *     data-gr-state="closing", open снимается по transitionend/animationend
+ *     самой панели или по таймауту в длительность --gr-transition плюс
+ *     50 мс. Щелчок по кнопке открытого дропдауна идёт тем же путём.
+ *     Во всех браузерах, без развилки по ::details-content: Firefox 153
+ *     поддерживает селектор и allow-discrete, но закрытие не анимирует —
+ *     замер в browser/closing.spec.mjs (решение владельца 2026-09-21).
+ *     CSS слоя переходов не задаёт — при 0s закрывается сразу.
+ *     Popover-панель анимирует платформа через display allow-discrete —
+ *     ей это не нужно.
  *
  * Открытое состояние — data-gr-state="open" на обёртке: у варианта
  * по наведению (.gr-dropdown-hover) панель по нему показывает CSS слоя.
+ * Между open и ready у <details> бывает closing.
  */
 (function (G) {
   'use strict';
@@ -70,6 +82,18 @@
     return document.activeElement === node;
   }
 
+  // Длительность --gr-transition у узла, мс: «0.2s ease» → 200, «150ms» → 150,
+  // пусто или 0s → 0. Одно чтение вычисленного стиля при закрытии.
+  function duration(node) {
+    var value = '';
+
+    try { value = getComputedStyle(node).getPropertyValue('--gr-transition'); } catch (e) { /* без CSSOM */ }
+
+    var m = /(\d*\.?\d+)(m?s)/.exec(value);
+
+    return m ? parseFloat(m[1]) * (m[2] === 's' ? 1000 : 1) : 0;
+  }
+
   G.defineWidget('dropdown', { needs: ['anchor'] }, function (el, opts) {
     var o = G.merge(DEFAULTS, opts);
     var attrs = G.recorder();
@@ -86,6 +110,7 @@
     var opened = false;        // для popover и css: <details> знает сам
     var viaKeyboard = false;   // открыто с клавиатуры — фокус уходит в меню
     var timer = null;
+    var closing = null;        // таймаут состояния closing у <details>
 
     // --- Состояние ------------------------------------------------------------
 
@@ -111,6 +136,7 @@
 
     function sync(now) {
       if (kind !== 'details') opened = now;
+      if (!now) settleClosing();
 
       setAttr(trigger, 'aria-expanded', now ? 'true' : 'false');
       setAttr(el, 'data-gr-state', now ? 'open' : 'ready');
@@ -121,6 +147,59 @@
       viaKeyboard = false;
     }
 
+    // --- Закрытие <details> с состоянием closing ------------------------------
+
+    // open снимается не сразу: обёртка получает data-gr-state="closing",
+    // панель уходит переходом темы; конец — transitionend/animationend самой
+    // панели (не потомка) или таймаут. Затем toggle → sync(false) → ready.
+    function closeDetails() {
+      if (closing) return;
+
+      var wait = duration(panel);
+
+      if (!wait) {
+        el.open = false;
+        return;
+      }
+
+      closing = setTimeout(finishClosing, wait + 50);
+      panel.addEventListener('transitionend', onEnd);
+      panel.addEventListener('animationend', onEnd);
+      setAttr(el, 'data-gr-state', 'closing');
+    }
+
+    function onEnd(event) {
+      if (event.target === panel) finishClosing();
+    }
+
+    function settleClosing() {
+      if (!closing) return;
+
+      clearTimeout(closing);
+      closing = null;
+      panel.removeEventListener('transitionend', onEnd);
+      panel.removeEventListener('animationend', onEnd);
+    }
+
+    function finishClosing() {
+      if (!closing) return;
+
+      settleClosing();
+      el.open = false;
+    }
+
+    // Щелчок (и Enter/Space) по кнопке открытого <details>: платформа сняла бы
+    // open в тот же кадр — перехватывается и идёт через closing. Щелчок
+    // по закрывающемуся — передумали: панель остаётся.
+    function onTriggerClick(event) {
+      if (kind !== 'details' || !el.open) return;
+
+      event.preventDefault();
+
+      if (closing) open();
+      else close();
+    }
+
     // beforetoggle приходит синхронно, до показа: панель ещё без размера,
     // но для «снизу, по началу строки» размер и не нужен, а без этой
     // предварительной позиции она на один кадр вспыхивала бы в статическом
@@ -137,6 +216,14 @@
 
     function open() {
       cancelTimer();
+
+      // Открытие во время закрытия отменяет его: панель остаётся на месте.
+      if (closing) {
+        settleClosing();
+        setAttr(el, 'data-gr-state', 'open');
+        return;
+      }
+
       if (isOpen()) return;
 
       if (kind === 'details') el.open = true;
@@ -149,7 +236,7 @@
       cancelTimer();
       if (!isOpen()) return;
 
-      if (kind === 'details') el.open = false;
+      if (kind === 'details') closeDetails();
       else if (kind === 'popover') {
         try { panel.hidePopover(); } catch (e) { sync(false); }
       } else sync(false);
@@ -286,6 +373,7 @@
 
     function destroy() {
       cancelTimer();
+      finishClosing();
       events.removeAll();
       if (kind === 'popover' && G.anchor) G.anchor.clear(panel);
       attrs.restore();
@@ -298,8 +386,10 @@
 
     roles();
 
-    if (kind === 'details') listen(el, 'toggle', function () { sync(!!el.open); });
-    else if (kind === 'popover') {
+    if (kind === 'details') {
+      listen(el, 'toggle', function () { sync(!!el.open); });
+      listen(trigger, 'click', onTriggerClick);
+    } else if (kind === 'popover') {
       listen(panel, 'beforetoggle', onBeforeToggle);
       listen(panel, 'toggle', function (event) { sync(event.newState === 'open'); });
       listen(document, 'scroll', onReflow, true);

package/src/griffinjs/widgets/megamenu.js

@@ -27,7 +27,16 @@
  *     закрывает и возвращает фокус на заголовок;
  *   * закрытие щелчком мимо полосы и уходом фокуса;
  *   * ajax-панели: data-gr-src на пункте грузится при первом открытии,
- *     состояния loading → ready | error пишутся на пункт.
+ *     состояния loading → ready | error пишутся на пункт;
+ *   * закрытие с состоянием (Этап 48d): панель, чей уход тема анимирует,
+ *     не пропадает в первом же кадре — на пункт ставится
+ *     data-gr-state="closing", open снимается по transitionend/animationend
+ *     самой панели или по таймауту в длительность --gr-transition плюс
+ *     50 мс. Щелчок по заголовку открытого пункта идёт тем же путём.
+ *     Во всех браузерах, без развилки по ::details-content: Firefox 153
+ *     поддерживает селектор и allow-discrete, но закрытие не анимирует —
+ *     замер в browser/closing.spec.mjs (решение владельца 2026-09-21).
+ *     CSS слоя переходов не задаёт — при 0s закрывается сразу.
  *
  * Пункт — <details>, не вложенный в другой <details> полосы, с панелью
  * после <summary>. Переключатель шапки (.gr-nav-toggle) панели не имеет
@@ -89,6 +98,18 @@
     return document.activeElement === node;
   }
 
+  // Длительность --gr-transition у узла, мс: «0.2s ease» → 200, «150ms» → 150,
+  // пусто или 0s → 0. Одно чтение вычисленного стиля при закрытии.
+  function duration(node) {
+    var value = '';
+
+    try { value = getComputedStyle(node).getPropertyValue('--gr-transition'); } catch (e) { /* без CSSOM */ }
+
+    var m = /(\d*\.?\d+)(m?s)/.exec(value);
+
+    return m ? parseFloat(m[1]) * (m[2] === 's' ? 1000 : 1) : 0;
+  }
+
   G.defineWidget('megamenu', { needs: ['media'] }, function (el, opts) {
     var o = G.merge(DEFAULTS, opts);
     var attrs = G.recorder();
@@ -159,6 +180,7 @@
       setAttr(item.summary, 'aria-expanded', item.el.open ? 'true' : 'false');
 
       listen(item.el, 'toggle', function () { sync(item); });
+      listen(item.summary, 'click', function (event) { onSummaryClick(event, item); });
     }
 
     function sync(item) {
@@ -166,10 +188,13 @@
 
       setAttr(item.summary, 'aria-expanded', isOpen ? 'true' : 'false');
 
-      if (!isOpen) return;
+      if (!isOpen) {
+        settleClosing(item);
+        return;
+      }
 
       for (var i = 0; i < items.length; i++) {
-        if (items[i] !== item && items[i].el.open) items[i].el.open = false;
+        if (items[i] !== item) close(items[i]);
       }
 
       load(item);
@@ -177,11 +202,69 @@
 
     function open(item) {
       cancelTimers();
-      if (item && !item.el.open) item.el.open = true;
+      if (!item) return;
+
+      // Указатель вернулся на закрывающийся пункт — он остаётся открытым.
+      if (item.closing) {
+        settleClosing(item);
+        setAttr(item.el, 'data-gr-state', item.was);
+      }
+
+      if (!item.el.open) item.el.open = true;
     }
 
+    // --- Закрытие с состоянием closing ----------------------------------------
+
+    // open снимается не сразу: пункт получает data-gr-state="closing", и его
+    // панель уходит переходом темы; конец — transitionend/animationend самой
+    // панели (не потомка) или таймаут. Прежнее состояние пункта (ajax:
+    // ready | error) возвращается на место.
     function close(item) {
-      if (item && item.el.open) item.el.open = false;
+      if (!item || !item.el.open || item.closing) return;
+
+      var wait = duration(item.panel);
+
+      if (!wait) {
+        item.el.open = false;
+        return;
+      }
+
+      item.was = item.el.getAttribute('data-gr-state');
+      item.onEnd = function (event) { if (event.target === item.panel) finishClosing(item); };
+      item.closing = setTimeout(function () { finishClosing(item); }, wait + 50);
+
+      item.panel.addEventListener('transitionend', item.onEnd);
+      item.panel.addEventListener('animationend', item.onEnd);
+      setAttr(item.el, 'data-gr-state', 'closing');
+    }
+
+    function settleClosing(item) {
+      if (!item.closing) return;
+
+      clearTimeout(item.closing);
+      item.closing = null;
+      item.panel.removeEventListener('transitionend', item.onEnd);
+      item.panel.removeEventListener('animationend', item.onEnd);
+    }
+
+    function finishClosing(item) {
+      if (!item.closing) return;
+
+      settleClosing(item);
+      setAttr(item.el, 'data-gr-state', item.was);
+      item.el.open = false;
+    }
+
+    // Щелчок (и Enter/Space) по заголовку открытого пункта: платформа сняла бы
+    // open в тот же кадр — перехватывается и идёт через closing. Щелчок
+    // по закрывающемуся пункту — передумали: он остаётся открытым.
+    function onSummaryClick(event, item) {
+      if (!item.el.open) return;
+
+      event.preventDefault();
+
+      if (item.closing) open(item);
+      else close(item);
     }
 
     function closeAll() {
@@ -284,6 +367,7 @@
       if (item === active || item === pending) {
         if (closeTimer) clearTimeout(closeTimer);
         closeTimer = null;
+        if (item.closing) open(item);
         return;
       }
 
@@ -456,6 +540,7 @@
 
     function destroy() {
       cancelTimers();
+      for (var i = 0; i < items.length; i++) finishClosing(items[i]);
       if (unmedia) unmedia();
       events.removeAll();
       attrs.restore();

package/src/griffinjs/widgets/range.js

@@ -22,6 +22,20 @@
  * Второе дело скрипта в паре — порядок значений: тот, кого потянули
  * за чужую границу, толкает вторую ручку перед собой. Пересечься им
  * нельзя — отрезок между ручками вывернулся бы наизнанку.
+ *
+ * Третье — связка с числовыми полями (Этап 42a):
+ *
+ *   <div class="gr-range-pair" data-gr-range="fields: #price-min, #price-max">
+ *
+ * Селекторов столько же, сколько ползунков. Движение ручки пишет число
+ * в своё поле (после наведения порядка); ввод в поле двигает ручку
+ * с зажимом по min/max, а порядок наводится только на change — «1»
+ * по пути к «1000» иначе толкнул бы вторую ручку. Форму отправляют поля:
+ * name — у них, у ползунков его нет, иначе в GET уехали бы четыре
+ * параметра. Правда — в полях: страница вернулась с ними, а атрибуты
+ * value ползунков остались начальными, поэтому на монтаже ручки встают
+ * по полям; пустое поле — ручка на своём краю. Само поле от монтажа
+ * не заполняется: «фильтр не задан» остаётся пустым.
  */
 (function (G) {
   'use strict';
@@ -50,20 +64,59 @@
     return num(current, num(input.getAttribute('min'), 0));
   }
 
-  G.defineWidget('range', function (el) {
+  function edge(input, name, fallback) {
+    return num(input.getAttribute(name), fallback);
+  }
+
+  G.defineWidget('range', function (el, opts) {
     var single = el.tagName === 'INPUT';
     var inputs = single ? [el] : [].slice.call(el.querySelectorAll('input[type="range"]'));
     var listeners = G.listeners();
+    var fields = [];
 
     if (!inputs.length) throw new Error('внутри нет ни одного <input type="range">');
 
     function doneOf(input) {
-      var min = num(input.getAttribute('min'), 0);
-      var span = num(input.getAttribute('max'), 100) - min;
+      var min = edge(input, 'min', 0);
+      var span = edge(input, 'max', 100) - min;
 
       return round(span > 0 ? (valueOf(input) - min) / span : 0);
     }
 
+    // Число из поля — в ползунок: пустое поле ставит ручку на свой край
+    // (нижняя граница не задана — от min, верхняя — до max), число зажимается.
+    function pull(i) {
+      var input = inputs[i];
+      var min = edge(input, 'min', 0);
+      var max = edge(input, 'max', 100);
+      var value = fields[i].value;
+
+      input.value = value === '' ? (i ? max : min) : Math.max(min, Math.min(max, num(value, min)));
+    }
+
+    // Значения ручек — в поля, кроме того, откуда пришёл ввод: оно уже
+    // содержит то, что человек написал, и переписывать его под рукой нельзя.
+    function push(except) {
+      for (var i = 0; i < fields.length; i++) if (fields[i] !== except) fields[i].value = valueOf(inputs[i]);
+    }
+
+    function typed(event) {
+      var field = event.target;
+      var i = fields.indexOf(field);
+
+      pull(i);
+
+      // Пока число не дописано, ручки могут стоять наоборот: отрезок между
+      // ними на это время вырождается в точку, и это лучше толчка второй ручки.
+      if (event.type === 'change') {
+        order(inputs[i]);
+        push(field);
+      }
+
+      paint();
+      emit();
+    }
+
     // Порядок значений в паре. Толкает именно вторую ручку, а не возвращает
     // первую: человек ведёт ту, за которую взялся, и остановка под пальцем
     // читалась бы как поломка.
@@ -79,20 +132,26 @@
       else to.value = from.value;
     }
 
-    function update(event) {
-      order(event && event.target);
-
+    function paint() {
       if (inputs.length > 1) {
         el.style.setProperty(FROM, doneOf(inputs[0]));
         el.style.setProperty(TO, doneOf(inputs[1]));
       } else {
         inputs[0].style.setProperty(PROP, doneOf(inputs[0]));
       }
+    }
+
+    function update(event) {
+      order(event && event.target);
+      paint();
 
       // Событие — после наведения порядка, и только на живое движение ручки.
       // Подпись рядом с парой иначе показала бы значения ДО толчка: свой
       // обработчик на ползунке отработает раньше нашего, стоящего на обёртке.
-      if (event) emit();
+      if (event) {
+        push();
+        emit();
+      }
     }
 
     function emit() {
@@ -107,6 +166,21 @@
     // и второй ручке отдельная подписка не нужна.
     listeners.add(el, 'input', update);
 
+    if (opts && opts.fields) {
+      var selectors = String(opts.fields).split(',');
+
+      for (var f = 0; f < inputs.length; f++) {
+        var field = document.querySelector(selectors[f] || '#');
+
+        if (!field) throw new Error('поле «' + selectors[f] + '» не найдено');
+
+        fields.push(field);
+        pull(f);
+        listeners.add(field, 'input', typed);
+        listeners.add(field, 'change', typed);
+      }
+    }
+
     update();
 
     return {