griffincss-ui 0.29.0 → 0.29.2

package/scss/_table.scss

@@ -254,6 +254,18 @@
   overscroll-behavior-x: contain;
 }
 
+// Word и Google Docs кладут ширину таблицы в style — 100 %, пиксели,
+// пункты. Блок растягивался по ней, а строки — анонимная таблица внутри —
+// вставали по содержимому: рамка и фон уходили далеко за ячейки. Встроенный
+// стиль сильнее любого правила без !important, поэтому здесь — единственное
+// !important библиотеки, и только у таблицы прозы со встроенной шириной:
+// у остальных таблиц ширину по-прежнему перебивает любой CSS сайта.
+// Тема из подслоя ниже ui снимает его своим !important.
+:where(.gr-prose table:not(.gr-table)[style*="width" i]) {
+  // stylelint-disable-next-line declaration-no-important
+  inline-size: max-content !important;
+}
+
 // Подсказка прокрутки. Край колонки обрезает таблицу ровно по столбцу,
 // а полосы прокрутки macOS и телефонов видны только при касании — скрытые
 // столбцы легко не заметить. У края, за которым ещё есть содержимое,
@@ -279,6 +291,11 @@
 $gr-scroll-areas: '.gr-table-wrap, .gr-table-scroll, :where(.gr-prose table:not(.gr-table))';
 
 // Первые два слоя — шторки для Firefox (см. ниже); здесь они прозрачные.
+//
+// --gr-scroll-hint-inset — отступ подсказки от начала строки: у таблицы
+// с липким первым столбцом тень «в начале ещё есть столбцы» лежит у его
+// края, а не у края области, где её закрывает или (в строке без липкой
+// ячейки) пятнает сам столбец. Сдвигаются начальная тень и шторка.
 #{$gr-scroll-areas} {
   background-image:
     linear-gradient(to right, var(--gr-scroll-cover, transparent) 30%, transparent),
@@ -286,7 +303,7 @@ $gr-scroll-areas: '.gr-table-wrap, .gr-table-scroll, :where(.gr-prose table:not(
     gr-scroll-shade(0, var(--gr-scroll-start)),
     gr-scroll-shade(100%, var(--gr-scroll-end));
   background-repeat: no-repeat;
-  background-position: 0 50%, 100% 50%;
+  background-position: var(--gr-scroll-hint-inset, 0) 50%, 100% 50%;
   background-size: 2.5rem 100%, 2.5rem 100%, 1rem 100%, 1rem 100%;
   background-attachment: local, local, scroll, scroll;
 }
@@ -297,15 +314,18 @@ $gr-scroll-areas: '.gr-table-wrap, .gr-table-scroll, :where(.gr-prose table:not(
     animation-timeline: scroll(self inline);
     animation-range: 0 2rem, calc(100% - 2rem) 100%;
   }
+}
 
-  // В RTL прокрутка начинается справа: та же пара анимаций, но тень у левого
-  // края гаснет к концу шкалы, а у правого появляется с её начала.
-  .gr-table-wrap:dir(rtl),
-  .gr-table-scroll:dir(rtl),
-  :where(.gr-prose table:not(.gr-table):dir(rtl)) {
-    animation-direction: reverse;
-    animation-range: calc(100% - 2rem) 100%, 0 2rem;
-  }
+// В RTL строка начинается справа: отступ — у правого края, а та же пара
+// анимаций идёт в обратную сторону — тень у левого края гаснет к концу
+// шкалы, у правого появляется с её начала. Вне @supports: отступ нужен
+// и шторке Firefox, а animation-* там без анимации ничего не делают.
+.gr-table-wrap:dir(rtl),
+.gr-table-scroll:dir(rtl),
+:where(.gr-prose table:not(.gr-table):dir(rtl)) {
+  background-position: 0 50%, right var(--gr-scroll-hint-inset, 0) center;
+  animation-direction: reverse;
+  animation-range: calc(100% - 2rem) 100%, 0 2rem;
 }
 
 // Firefox шкалы прокрутки не знает: там тени у краёв стоят на полной силе,

package/scss/griffinjs/_megamenu.scss

@@ -95,6 +95,10 @@ $gr-megamenu-expand: map.get(bp.$gr-breakpoints, md);
   border-block-end: var(--gr-border-width) solid var(--gr-color-border);
   background-color: var(--gr-color-surface-overlay);
   color: var(--gr-color-text);
+
+  // Подложка — и шторке подсказки прокрутки (_table.scss): без шкалы прокрутки
+  // (Firefox) тень у края таблицы прячет шторка этого цвета.
+  --gr-scroll-hint-bg: var(--gr-color-surface-overlay);
 }
 
 // Ajax-панель, пока грузится: место под содержимое, чтобы полоса

package/src/griffincss-ui.js

@@ -1,10 +1,10 @@
 /*!
- * Griffincss UI — Runtime v0.29.0
+ * Griffincss UI — Runtime v0.29.2
  * Опциональный рантайм пакета компонентов. Делает ровно то, чего платформа
  * не даёт вовсе; всё, что умеют <details>, <dialog> и Popover API, остаётся
  * за ними. Без этого файла компоненты работают — просто без перечисленного.
  *
- * Здесь четыре вещи:
+ * Здесь пять вещей:
  *
  *   1. Закрытие модального окна и выдвижной панели щелчком по подложке.
  *      <dialog> закрывается по Esc сам, но щелчок мимо окна ему безразличен,
@@ -27,6 +27,15 @@
  *      для разметки с [data-gr-tabs]. Без скрипта та же разметка остаётся
  *      списком ссылок-якорей и секциями подряд.
  *
+ *   5. Таблица в .gr-prose. Она прокручивается сама и потому — блок:
+ *      Firefox считает такую таблицу без заголовков таблицей раскладки,
+ *      и рантайм ставит ей role="table". Широкую он ставит в порядок Tab:
+ *      Chromium с Firefox делают это сами, Safari — нет, а tabindex в тексте
+ *      из редактора поставить некому; стала помещаться — снимает. Таблицы
+ *      в поверхности редактора (contenteditable) не трогает. Разметке,
+ *      вставленной позже, роль ставит повторный start(), фрагменту
+ *      GriffinJS — событие griffin:load.
+ *
  * Всё, что умеют <details>, <dialog> и Popover API, остаётся за ними.
  */
 (function (factory) {
@@ -50,7 +59,7 @@
 })(function () {
   'use strict';
 
-  var VERSION = '0.29.0';
+  var VERSION = '0.29.2';
 
   var OVERLAY_ATTR = 'data-gr-overlay-close';
 
@@ -73,12 +82,31 @@
 
   var TABS_ATTR = 'data-gr-tabs';
 
+  // Таблица прозы со своей прокруткой (_table.scss) и то, на чём внутри
+  // неё может остановиться Tab: он и так докручивает таблицу до своей
+  // остановки. Кандидаты отсеивает stopsTab(): tabindex="-1", отключённое
+  // и скрытое разметкой — не остановки. Ссылки и кнопки Safari обычным Tab
+  // пропускает, до них доходит Option+Tab.
+  var PROSE_TABLES = '.gr-prose table:not(.gr-table)';
+  var FOCUSABLE = 'a[href],button,input:not([type=hidden]),select,textarea,summary,iframe,' +
+    '[tabindex],[contenteditable]:not([contenteditable=false])';
+
+  // Скрыто разметкой: hidden (и until-found), inert, закрытый details вне
+  // своего summary. Проверка по дереву — раскладку не трогает.
+  var UNSHOWN = '[hidden],[inert],details:not([open])>:not(summary)';
+
   // Причина закрытия попадает в dialog.returnValue: обработчик close
   // на странице отличит щелчок мимо от кнопки «Сохранить».
   var OVERLAY_REASON = 'overlay';
 
   var started = false;
 
+  // Таблицы, которым рантайм поставил tabindex и роль: снимается только
+  // своё. Слабые наборы — таблицу, убранную из документа на время
+  // перерисовки, рантайм не держит и, вернувшуюся, не забывает.
+  var tabTables = new WeakSet();
+  var roleTables = new WeakSet();
+
   // Цель нажатия. Щелчок — это пара «нажал» и «отпустил», и закрывать окно
   // нужно, только если обе половины пришлись на подложку: выделение текста,
   // начатое в окне и законченное за его краем, щелчком по подложке не является.
@@ -611,14 +639,189 @@
     return Array.prototype.indexOf.call(list, node);
   }
 
+  // --- Таблица прозы: роль и порядок Tab ---------------------------------------
+
+  // Firefox решает, таблица это данных или раскладки, по числу столбцов
+  // у её рамки, а у таблицы со своей прокруткой рамка — блок без столбцов:
+  // без признаков данных она для читалки — раскладка, без «таблица, N строк»
+  // и перехода по ячейкам. Явная роль возвращает данные. В Chromium
+  // и WebKit своя прокрутка роли не отнимает, и роль там лишь подтверждает
+  // таблицу — а WebKit и сам гадает о раскладке: таблицу, где второй
+  // столбец даёт один rowspan, роль делает таблицей и для него. Как
+  // в Firefox у таблицы без своей прокрутки:
+  // от двух строк и двух столбцов по карте таблицы (colspan и rowspan),
+  // без своих признаков данных (th, thead, tfoot, col; у вложенной таблицы —
+  // её признаки). Пустой role — не роль. Таблица, ставшая редактируемой,
+  // теряет свои роль и tabindex: иначе они уйдут в HTML, который сохранит
+  // редактор.
+  function markRole(table) {
+    if (table.isContentEditable) {
+      unmark(table, tabTables, 'tabindex', '0');
+      return unmark(table, roleTables, 'role', 'table');
+    }
+    if (table.getAttribute('role') || table.tHead || table.tFoot || table.querySelector(':scope>col,:scope>colgroup')) return;
+
+    var rows = table.rows;
+    var spans = []; // ячейки с rowspan сверху: [colSpan, строк осталось]
+    var columns = false;
+
+    for (var i = 0; i < rows.length; i++) {
+      var cols = 0;
+
+      for (var k = spans.length; k--;) {
+        cols += spans[k][0];
+        if (!--spans[k][1]) spans.splice(k, 1);
+      }
+
+      for (var j = 0, cell; (cell = rows[i].cells[j]); j++) {
+        if (cell.tagName === 'TH') return;
+        cols += cell.colSpan;
+        if (cell.rowSpan > 1) spans.push([cell.colSpan, cell.rowSpan - 1]);
+      }
+
+      if (cols > 1) columns = true;
+    }
+
+    if (columns && rows.length > 1) {
+      table.setAttribute('role', 'table');
+      roleTables.add(table);
+    }
+  }
+
+  function markRoles() {
+    eachTable(PROSE_TABLES, markRole);
+  }
+
+  // Перед каждым Tab, в перехвате: порядок обхода браузер считает после
+  // обработчиков, и отметка, поставленная здесь, уже в нём. Так не нужны
+  // ни наблюдатели, ни замеры вне нажатия. Мерить все таблицы нельзя:
+  // в Chromium каждое чтение раскладки стоит пропорционально числу анимаций
+  // по прокрутке, и замер всех на каждый Tab — квадрат их числа. Поэтому —
+  // от фокуса по ходу Tab до первой широкой: дальше неё Tab не уйдёт.
+  // Фокус на body — откуда пойдёт Tab, неизвестно (щелчок в текст), и
+  // меряются все.
+  function onTabPress(event) {
+    if (event.key !== 'Tab') return;
+
+    var tables = document.querySelectorAll(PROSE_TABLES);
+    var from = document.activeElement;
+    var all = !from || from === document.body;
+    var step = all || !event.shiftKey ? 1 : -1;
+    var i = all ? 0 : firstAfter(tables, from) - (step < 0 ? 1 : 0);
+
+    // Shift+Tab с самой таблицы: она уже позади, замер — с предыдущей.
+    // Иначе отмеченная под фокусом останавливала его сразу, а предыдущая
+    // широкая оставалась без отметки — Safari её пропускал.
+    if (tables[i] === from) i += step;
+
+    // Встать можно только на таблице, до которой Tab дойдёт: невидимую
+    // широкую (закрытый details, inert) он пропустит — за ней идём дальше.
+    for (; i >= 0 && i < tables.length; i += step) {
+      markRole(tables[i]);
+      if (syncTabStop(tables[i]) && !all && shown(tables[i])) return;
+    }
+  }
+
+  // Tab до таблицы может дойти: она не скрыта разметкой и видна —
+  // checkVisibility (второе имя опции — у Chrome 105–120), а в Safari
+  // до 17.4, где его нет, — вычисленное visibility.
+  function shown(node) {
+    return !node.closest(UNSHOWN) && (node.checkVisibility
+      ? node.checkVisibility({ visibilityProperty: true, checkVisibilityCSS: true })
+      : getComputedStyle(node).visibility !== 'hidden');
+  }
+
+  // Остановка Tab внутри таблицы — только по дереву: в Chromium и чтение
+  // раскладки, и checkVisibility стоят по числу анимаций по прокрутке
+  // на странице, а таблиц со ссылками в тексте бывают сотни. Цена —
+  // ссылка, скрытая только стилями (visibility, display классом),
+  // считается остановкой. Хост правки tabIndex не даёт, но остановка.
+  function stopsTab(table) {
+    var found = table.querySelectorAll(FOCUSABLE);
+
+    for (var i = 0; i < found.length; i++) {
+      var node = found[i];
+
+      if ((node.tabIndex >= 0 || node.isContentEditable && !node.hasAttribute('tabindex')) &&
+        !node.matches(':disabled') && !node.closest(UNSHOWN)) return true;
+    }
+
+    return false;
+  }
+
+  // Первая таблица после узла в порядке документа — двоичным поиском:
+  // сравнение позиций раскладку не трогает. Таблица внутри узла — после
+  // него (4 — DOCUMENT_POSITION_FOLLOWING), таблица вокруг узла — до.
+  function firstAfter(tables, node) {
+    var lo = 0;
+    var hi = tables.length;
+
+    while (lo < hi) {
+      var mid = (lo + hi) >> 1;
+
+      if (node.compareDocumentPosition(tables[mid]) & 4) hi = mid;
+      else lo = mid + 1;
+    }
+
+    return lo;
+  }
+
+  // tabindex="0" — широкой таблице, где Tab больше не на чем остановиться;
+  // стала помещаться — снять. Своё — в наборе и сейчас "0": значение
+  // страницы (окно-ловушка фокуса ставит -1 на время, потом возвращает
+  // сохранённое) рантайм не снимает и не возвращает, а вернувшийся "0" —
+  // снова его. Атрибут сняли совсем (морфинг разметки) — это не значение
+  // страницы: отметка ставится заново. Остановки внутри — раньше ширины:
+  // по дереву они дешевле, а таблицу, где Tab и так остановится, мерить
+  // незачем. true — таблица теперь остановка Tab.
+  function syncTabStop(table) {
+    var mine = tabTables.has(table);
+    var value = table.getAttribute('tabindex');
+
+    if (mine && value === null) {
+      tabTables.delete(table);
+      mine = false;
+    }
+
+    if (mine ? value !== '0' : value !== null) return false;
+
+    var wide = !table.isContentEditable && !stopsTab(table) && table.scrollWidth > table.clientWidth;
+
+    if (wide && !mine) {
+      table.setAttribute('tabindex', '0');
+      tabTables.add(table);
+    } else if (!wide) {
+      unmark(table, tabTables, 'tabindex', '0');
+    }
+
+    return wide;
+  }
+
+  // Снять своё — атрибут, который поставил рантайм и с тех пор не сменили.
+  function unmark(table, set, name, value) {
+    if (set.has(table) && table.getAttribute(name) === value) table.removeAttribute(name);
+    set.delete(table);
+  }
+
+  function eachTable(selector, fn) {
+    var tables = document.querySelectorAll(selector);
+
+    for (var i = 0; i < tables.length; i++) fn(tables[i]);
+  }
+
   // Один делегированный обработчик на документ, а не по слушателю на окно:
   // окна появляются и исчезают вместе с разметкой, и переподписываться
-  // на каждое пришлось бы вручную.
+  // на каждое пришлось бы вручную. Повторный вызов подписки не удваивает,
+  // а проходит таблицы прозы ещё раз: разметке, вставленной после старта
+  // (смена варианта товара, догруженный текст), роль нужна сразу — читалка
+  // идёт по тексту без Tab и прохода перед Tab может не дождаться.
   function start() {
-    if (started) return publicApi;
+    if (!started) {
+      started = true;
+      listen('addEventListener');
+    }
 
-    started = true;
-    listen('addEventListener');
+    markRoles();
 
     return publicApi;
   }
@@ -630,13 +833,23 @@
     pressed = null;
     listen('removeEventListener');
 
+    // Все таблицы документа с такими значениями, а не только таблицы прозы:
+    // отмеченную могли вынести из прозы или дать ей класс .gr-table.
+    eachTable('table[tabindex="0"],table[role=table]', function (table) {
+      unmark(table, tabTables, 'tabindex', '0');
+      unmark(table, roleTables, 'role', 'table');
+    });
+
     return publicApi;
   }
 
   // Подписка и отписка — один список: диспетчер на каждый тип события
-  // из реестра плюс перехват нажатия для щелчка по подложке.
+  // из реестра плюс перехват нажатия для щелчка по подложке и Tab
+  // для широких таблиц прозы и конец вставки фрагмента GriffinJS.
   function listen(method) {
     document[method]('pointerdown', onPointerDown, true);
+    document[method]('keydown', onTabPress, true);
+    document[method]('griffin:load', markRoles);
 
     for (var type in registry) {
       if (Object.prototype.hasOwnProperty.call(registry, type)) {

package/src/griffinjs/core/griffinjs-core.js

@@ -1,5 +1,5 @@
 /*!
- * GriffinJS — Core v0.29.0
+ * GriffinJS — Core v0.29.2
  * Опциональный слой виджетов с состоянием поверх Griffincss: слайдер,
  * галерея, лайтбокс, параллакс, мегаменю. Подключается одной строкой
  * и одним файлом; страница без него — законное и рабочее состояние.
@@ -45,7 +45,7 @@
 })(function () {
   'use strict';
 
-  var VERSION = '0.29.0';
+  var VERSION = '0.29.2';
 
   // Реестры. Модуль зовёт defineEngine/defineWidget; ядро — единственное
   // место, которое знает, как их применить.

package/src/griffinjs/widgets/dialog.js

@@ -232,9 +232,13 @@
 
       setAttr(el, 'data-gr-state', 'loading');
 
+      // griffin:load — конец вставки: его знает только окно. По нему
+      // рантайм компонентов ставит роль таблице прозы во фрагменте,
+      // а страница — оживляет свои скрипты.
       fragment(src).then(function (html) {
         target.replaceChildren(html);
         setAttr(el, 'data-gr-state', isOpen() ? 'open' : 'ready');
+        G.emit('griffin:load', el, { dialog: el });
       }, function (error) {
         G.warn('dialog: ' + src + ' not loaded: ' + (error && error.message));
         setAttr(el, 'data-gr-state', 'error');

package/src/griffinjs/widgets/megamenu.js

@@ -329,9 +329,11 @@
 
       setAttr(item.el, 'data-gr-state', 'loading');
 
+      // griffin:load — конец вставки, как у окна.
       fragment(src).then(function (html) {
         item.panel.replaceChildren(html);
         setAttr(item.el, 'data-gr-state', 'ready');
+        G.emit('griffin:load', item.el, { item: item.el, panel: item.panel });
       }, function (error) {
         G.warn('megamenu: panel ' + src + ' not loaded: ' + (error && error.message));
         setAttr(item.el, 'data-gr-state', 'error');