griffincss-ui 0.26.2 → 0.27.1

package/src/griffinjs/widgets/dialog.js

@@ -19,9 +19,12 @@
  *   * остановка медиа при закрытии: <video>/<audio> на паузу, <iframe>
  *     разгружается и возвращается при следующем открытии;
  *   * ajax-содержимое: data-gr-src грузится один раз в [data-gr-content]
- *     (или в само окно), состояния loading → open | error;
+ *     (или в само окно), состояния loading → open | error. Только ответ
+ *     своего origin с типом text/html: чужой адрес, data: и прочие
+ *     схемы — error без запроса;
  *   * hash: открытие пишет #id в историю, «Назад» закрывает окно,
- *     а страница, открытая с #id, показывает окно сразу;
+ *     а страница, открытая с #id, показывает окно сразу — закрытие
+ *     такого окна снимает #id из адреса на месте, а не шагом назад;
  *   * рост окна (Этап 48d) — data-gr-dialog="grow": ResizeObserver
  *     на окне, и смена высоты больше 24 px идёт анимацией от прежней
  *     к новой (element.animate по block-size — не спорит с transition
@@ -80,6 +83,28 @@
     return (value || '').replace(/^#/, '');
   }
 
+  // Фрагмент — только ответ своего origin с типом text/html: разметку
+  // из innerHTML браузер оживляет, и <img onerror> чужого ответа исполнился
+  // бы в origin страницы. Адрес — http(s) своего origin (у data: origin —
+  // строка 'null'); редирект на чужой отклоняет mode: 'same-origin'; тип
+  // ответа отсекает свой JSON или текст, отражающий запрос.
+  function fragment(src) {
+    var url = null;
+
+    try { url = new URL(src, document.baseURI); } catch (e) { /* не адрес */ }
+
+    if (!url || !/^https?:$/.test(url.protocol) || url.origin !== location.origin) {
+      return Promise.reject(new Error('foreign origin'));
+    }
+
+    return fetch(url.href, { mode: 'same-origin' }).then(function (response) {
+      if (!response.ok) throw new Error('HTTP ' + response.status);
+      if (!/^text\/html/i.test(response.headers.get('content-type'))) throw new Error('not text/html');
+
+      return response.text();
+    });
+  }
+
   // Прокручиваемый предок внутри окна: жест в теле окна с прокруткой —
   // законный, всё остальное двигало бы страницу.
   function scrollable(node, root) {
@@ -135,6 +160,7 @@
     var loaded = false;
     var frames = [];           // [{el, src}] — разгруженные iframe
     var byHistory = false;     // закрыто кнопкой «Назад»: back() не зовём
+    var pushed = false;        // #id в адресе записало само окно
     var record = { el: el, o: o };
     var grow = null;           // ResizeObserver — только по grow
     var known = 0;             // высота окна по последнему наблюдению
@@ -181,7 +207,7 @@
       loaded = true;
 
       if (typeof fetch !== 'function') {
-        G.warn('окно: fetch недоступен, ' + src + ' не загружен');
+        G.warn('dialog: fetch is unavailable, ' + src + ' not loaded');
         setAttr(el, 'data-gr-state', 'error');
         return;
       }
@@ -190,15 +216,11 @@
 
       setAttr(el, 'data-gr-state', 'loading');
 
-      fetch(src).then(function (response) {
-        if (!response.ok) throw new Error('HTTP ' + response.status);
-
-        return response.text();
-      }).then(function (html) {
+      fragment(src).then(function (html) {
         target.innerHTML = html;
         setAttr(el, 'data-gr-state', isOpen() ? 'open' : 'ready');
       }, function (error) {
-        G.warn('окно: ' + src + ' не загружен: ' + (error && error.message));
+        G.warn('dialog: ' + src + ' not loaded: ' + (error && error.message));
         setAttr(el, 'data-gr-state', 'error');
       });
     }
@@ -244,13 +266,19 @@
     function pushHash() {
       if (!o.hash || !id() || typeof history === 'undefined' || hashIs()) return;
 
-      try { history.pushState(null, '', '#' + id()); } catch (e) { /* file:// и прочее */ }
+      try { history.pushState(null, '', '#' + id()); pushed = true; } catch (e) { /* file:// и прочее */ }
     }
 
+    // Свой #id закрытие убирает шагом назад по истории. #id, пришедший
+    // со ссылкой (страница открыта сразу с окном), так не убрать: «назад»
+    // увёл бы с сайта. Он снимается из адреса на месте, без новой записи.
     function popHash() {
       if (!o.hash || byHistory || typeof history === 'undefined' || !hashIs()) return;
 
-      try { history.back(); } catch (e) { /* без истории */ }
+      try {
+        if (pushed) history.back();
+        else history.replaceState(history.state, '', location.pathname + location.search);
+      } catch (e) { /* без истории */ }
     }
 
     // --- Открытие и закрытие ------------------------------------------------
@@ -291,6 +319,7 @@
       relock();
       stopMedia();
       popHash();
+      pushed = false;
       byHistory = false;
 
       if (el.getAttribute('data-gr-state') !== 'loading') setAttr(el, 'data-gr-state', 'ready');
@@ -356,7 +385,7 @@
   function open(target) {
     var w = instanceOf(target);
 
-    if (!w) { G.warn('окно не найдено: ' + target); return null; }
+    if (!w) { G.warn('dialog not found: ' + target); return null; }
 
     return w.open();
   }

package/src/griffinjs/widgets/dropdown.js

@@ -104,7 +104,7 @@
     var trigger = el.firstElementChild;
     var panel = trigger && trigger.nextElementSibling;
 
-    if (!trigger || !panel) throw new Error('у дропдауна нет кнопки и панели');
+    if (!trigger || !panel) throw new Error('the dropdown has no button and panel');
 
     var kind = el.tagName === 'DETAILS' ? 'details' : panel.hasAttribute('popover') ? 'popover' : 'css';
     var opened = false;        // для popover и css: <details> знает сам

package/src/griffinjs/widgets/gallery.js

@@ -1,7 +1,7 @@
 /*
  * GriffinJS — галерея: слайдер + полоса превью.
  *
- *   <div class="gr-gallery" data-gr-gallery>
+ *   <div data-gr-gallery>
  *     <div class="gr-track">…большие кадры…</div>
  *     <div class="gr-track gr-gallery-thumbs">
  *       <button type="button"><img …></button> …

package/src/griffinjs/widgets/lightbox.js

@@ -2,23 +2,36 @@
  * GriffinJS — лайтбокс: <dialog> + дорожка.
  *
  *   <a href="large.jpg" data-gr-lightbox="promo" data-gr-caption="Подпись"><img src="thumb.jpg" alt="…"></a>
+ *   <a href="https://rutube.ru/video/…/" data-gr-src="https://rutube.ru/play/embed/…" data-gr-lightbox>…</a>
  *
  * Значение атрибута — группа: элементы с одним значением листаются в одном
  * окне; пустое значение — окно на один элемент, и дорожка вырождается
- * в один кадр без кнопок. Тип — по адресу (картинка, видео, iframe для
- * YouTube/Vimeo) или явно: data-gr-type="iframe".
+ * в один кадр без кнопок. Адрес кадра — data-gr-src, без него — href:
+ * у видео это разные адреса — во фрейм встаёт только плеер, страницу ролика
+ * хостинги во фрейме не показывают, а ссылка без скрипта ведёт именно на неё.
+ * Тип — по адресу кадра (картинка, видео, iframe для плееров YouTube, Vimeo,
+ * Rutube и VK Видео — по хосту адреса) или явно: data-gr-type="iframe".
  *
- * База без JS — ссылка на большое изображение. Окно строится при открытии
- * и уничтожается при закрытии: так видео гарантированно останавливается,
- * а в документе не копится по <dialog> на каждую группу. Верхний слой,
- * ловушка фокуса, Esc, возврат фокуса — от <dialog>.
+ * Адрес кадра — http(s), относительный, data: или blob:. Любой другой кадр
+ * не открывает: javascript: во фрейме исполнился бы в origin страницы,
+ * а data-* редакторы и фильтры CMS не проверяют как ссылку. Отвергнутый
+ * кадр из группы выпадает; щелчок по нему остаётся браузеру.
+ *
+ * База без JS — ссылка на большое изображение или на страницу ролика.
+ * Окно строится при открытии и уничтожается при закрытии: так видео
+ * гарантированно останавливается, а в документе не копится по <dialog>
+ * на каждую группу. Верхний слой, ловушка фокуса, Esc, возврат фокуса —
+ * от <dialog>.
  */
 (function (G) {
   'use strict';
 
   var ATTR = 'data-gr-lightbox';
   var VIDEO = /\.(mp4|webm|ogv|mov)(\?|#|$)/i;
-  var EMBED = /youtube\.com|youtu\.be|vimeo\.com/i;
+  // Хост и путь разобранного адреса: хостинг — сам хост или его поддомен,
+  // а не подстрока где угодно (картинка …/rutube.ru-logo.png — не плеер).
+  var EMBED = /^([\w-]+\.)*((youtube\.com|youtu\.be|vimeo\.com|rutube\.ru|vkvideo\.ru)\/|vk\.com\/video)/i;
+  var SCHEMES = /^(https?|data|blob):$/;
 
   var dialog = null;
   var track = null;
@@ -26,19 +39,31 @@
   var events = G.listeners();
   var listen = events.add;
 
+  // Адрес по правилам браузера: регистр, пробелы по краям и табы внутри
+  // схемы разбор снимает. Не адрес — null.
+  function parse(src) {
+    try {
+      return new URL(src, document.baseURI);
+    } catch (e) {
+      return null;
+    }
+  }
+
   function typeOf(node, src) {
     var explicit = node && node.getAttribute && node.getAttribute('data-gr-type');
 
     if (explicit) return explicit;
     if (VIDEO.test(src)) return 'video';
-    if (EMBED.test(src)) return 'iframe';
 
-    return 'image';
+    var url = parse(src);
+
+    return url && EMBED.test(url.hostname + url.pathname) ? 'iframe' : 'image';
   }
 
-  // Элемент разметки → описание кадра.
+  // Элемент разметки → описание кадра. data-gr-src старше href: у видео
+  // href — страница ролика для перехода без скрипта, а кадр — плеер.
   function itemOf(node) {
-    var src = node.getAttribute('href') || node.getAttribute('data-gr-src') || '';
+    var src = node.getAttribute('data-gr-src') || node.getAttribute('href') || '';
     var img = node.querySelector ? node.querySelector('img') : null;
 
     return {
@@ -91,21 +116,41 @@
   // --- Открытие ----------------------------------------------------------------
 
   function open(items, index, opts) {
+    var list = [];
+
+    index = index || 0;
+
+    // Кадр с отвергнутым адресом выпадает из группы; отвергнут
+    // открываемый — окна нет.
+    for (var k = 0; k < items.length; k++) {
+      var url = parse(items[k].src);
+
+      if (url && SCHEMES.test(url.protocol)) {
+        list.push(items[k]);
+        continue;
+      }
+
+      G.warn('lightbox: frame address refused: ' + items[k].src);
+
+      if (k === index) return null;
+      if (k < index) index--;
+    }
+
+    if (!list.length) return null;
+
     close();
 
     opts = opts || {};
-    index = index || 0;
+    items = list;
 
     var n = items.length;
 
-    if (n === 0) return null;
-
     dialog = element('dialog', 'gr-modal gr-lightbox', { 'aria-label': opts.label || 'Просмотр' });
 
     var trackEl = element('div', 'gr-track gr-lightbox-track', { tabindex: '0' });
 
     for (var i = 0; i < n; i++) {
-      var figure = element('figure', 'gr-slide gr-lightbox-item');
+      var figure = element('figure', 'gr-lightbox-item');
 
       figure.appendChild(media(items[i]));
 
@@ -177,8 +222,6 @@
   }
 
   function openFrom(node) {
-    trigger = node;
-
     var group = groupOf(node);
     var items = [];
     var index = 0;
@@ -188,7 +231,11 @@
       items.push(itemOf(group[i]));
     }
 
-    return open(items, index);
+    var opened = open(items, index);
+
+    if (opened) trigger = node;
+
+    return opened;
   }
 
   // --- Закрытие ----------------------------------------------------------------
@@ -235,10 +282,10 @@
 
   function onClick(event, node) {
     // Ctrl/Cmd/средняя кнопка — читатель хочет новую вкладку, а не окно.
-    if (event.metaKey || event.ctrlKey || event.shiftKey || event.button) return false;
+    // Кадр не открылся — ссылка работает как без скрипта.
+    if (event.metaKey || event.ctrlKey || event.shiftKey || event.button || !openFrom(node)) return false;
 
     if (event.preventDefault) event.preventDefault();
-    openFrom(node);
 
     return true;
   }

package/src/griffinjs/widgets/megamenu.js

@@ -27,7 +27,9 @@
  *     закрывает и возвращает фокус на заголовок;
  *   * закрытие щелчком мимо полосы и уходом фокуса;
  *   * ajax-панели: data-gr-src на пункте грузится при первом открытии,
- *     состояния loading → ready | error пишутся на пункт;
+ *     состояния loading → ready | error пишутся на пункт. Только ответ
+ *     своего origin с типом text/html: чужой адрес, data: и прочие
+ *     схемы — error без запроса;
  *   * закрытие с состоянием (Этап 48d): панель, чей уход тема анимирует,
  *     не пропадает в первом же кадре — на пункт ставится
  *     data-gr-state="closing", open снимается по transitionend/animationend
@@ -98,6 +100,28 @@
     return document.activeElement === node;
   }
 
+  // Фрагмент — только ответ своего origin с типом text/html: разметку
+  // из innerHTML браузер оживляет, и <img onerror> чужого ответа исполнился
+  // бы в origin страницы. Адрес — http(s) своего origin (у data: origin —
+  // строка 'null'); редирект на чужой отклоняет mode: 'same-origin'; тип
+  // ответа отсекает свой JSON или текст, отражающий запрос.
+  function fragment(src) {
+    var url = null;
+
+    try { url = new URL(src, document.baseURI); } catch (e) { /* не адрес */ }
+
+    if (!url || !/^https?:$/.test(url.protocol) || url.origin !== location.origin) {
+      return Promise.reject(new Error('foreign origin'));
+    }
+
+    return fetch(url.href, { mode: 'same-origin' }).then(function (response) {
+      if (!response.ok) throw new Error('HTTP ' + response.status);
+      if (!/^text\/html/i.test(response.headers.get('content-type'))) throw new Error('not text/html');
+
+      return response.text();
+    });
+  }
+
   // Длительность --gr-transition у узла, мс: «0.2s ease» → 200, «150ms» → 150,
   // пусто или 0s → 0. Одно чтение вычисленного стиля при закрытии.
   function duration(node) {
@@ -282,22 +306,18 @@
       item.loaded = true;
 
       if (typeof fetch !== 'function') {
-        G.warn('мегаменю: fetch недоступен, панель ' + src + ' не загружена');
+        G.warn('megamenu: fetch is unavailable, panel ' + src + ' not loaded');
         setAttr(item.el, 'data-gr-state', 'error');
         return;
       }
 
       setAttr(item.el, 'data-gr-state', 'loading');
 
-      fetch(src).then(function (response) {
-        if (!response.ok) throw new Error('HTTP ' + response.status);
-
-        return response.text();
-      }).then(function (html) {
+      fragment(src).then(function (html) {
         item.panel.innerHTML = html;
         setAttr(item.el, 'data-gr-state', 'ready');
       }, function (error) {
-        G.warn('мегаменю: панель ' + src + ' не загружена: ' + (error && error.message));
+        G.warn('megamenu: panel ' + src + ' not loaded: ' + (error && error.message));
         setAttr(item.el, 'data-gr-state', 'error');
       });
     }

package/src/griffinjs/widgets/range.js

@@ -74,7 +74,7 @@
     var listeners = G.listeners();
     var fields = [];
 
-    if (!inputs.length) throw new Error('внутри нет ни одного <input type="range">');
+    if (!inputs.length) throw new Error('no <input type="range"> inside');
 
     function doneOf(input) {
       var min = edge(input, 'min', 0);
@@ -172,7 +172,7 @@
       for (var f = 0; f < inputs.length; f++) {
         var field = document.querySelector(selectors[f] || '#');
 
-        if (!field) throw new Error('поле «' + selectors[f] + '» не найдено');
+        if (!field) throw new Error('field "' + selectors[f] + '" not found');
 
         fields.push(field);
         pull(f);

package/src/griffinjs/widgets/slider.js

@@ -43,7 +43,7 @@
 
     var trackEl = el.querySelector('.gr-track') || el.firstElementChild;
 
-    if (!trackEl) throw new Error('у слайдера нет дорожки');
+    if (!trackEl) throw new Error('the slider has no track');
 
     var track = G.track(trackEl, { loop: o.loop, rewind: o.rewind, step: o.step, engine: o.engine, index: o.index || 0 });
     var attrs = G.recorder();

package/src/griffinjs/widgets/sortable.js

@@ -89,7 +89,7 @@
       return el.querySelector('tbody');
     }
 
-    if (!bodyOf() || !heads.length) throw new Error('нужны tbody и заголовки с aria-sort');
+    if (!bodyOf() || !heads.length) throw new Error('needs tbody and headers with aria-sort');
 
     var attrs = G.recorder();
     var events = G.listeners();

package/src/griffinjs/widgets/tooltip.js

@@ -53,7 +53,7 @@
     var target = el.firstElementChild;
     var tip = el.querySelector('[role="tooltip"]') || el.lastElementChild;
 
-    if (!target || !tip || tip === target) throw new Error('у подсказки нет якоря и текста');
+    if (!target || !tip || tip === target) throw new Error('the tooltip has no anchor and text');
 
     var shown = false;
     var timer = null;