griffincss-ui 0.27.0 → 0.28.0

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

@@ -1,5 +1,5 @@
 /*!
- * GriffinJS — Core v0.27.0
+ * GriffinJS — Core v0.28.0
  * Опциональный слой виджетов с состоянием поверх Griffincss: слайдер,
  * галерея, лайтбокс, параллакс, мегаменю. Подключается одной строкой
  * и одним файлом; страница без него — законное и рабочее состояние.
@@ -45,7 +45,7 @@
 })(function () {
   'use strict';
 
-  var VERSION = '0.27.0';
+  var VERSION = '0.28.0';
 
   // Реестры. Модуль зовёт defineEngine/defineWidget; ядро — единственное
   // место, которое знает, как их применить.
@@ -84,13 +84,13 @@
     if (typeof opts === 'function') { factory = opts; opts = null; }
 
     if (typeof name !== 'string' || !name) {
-      throw new Error('GriffinJS: ' + kind + ' без имени');
+      throw new Error('GriffinJS: ' + kind + ' without a name');
     }
     if (typeof factory !== 'function') {
-      throw new Error('GriffinJS: ' + kind + ' «' + name + '» — не функция');
+      throw new Error('GriffinJS: ' + kind + ' "' + name + '" is not a function');
     }
     if (registry[name]) {
-      throw new Error('GriffinJS: ' + kind + ' «' + name + '» уже зарегистрирован');
+      throw new Error('GriffinJS: ' + kind + ' "' + name + '" is already registered');
     }
 
     if (opts && opts.needs) needs(name, opts.needs);
@@ -101,11 +101,11 @@
   }
 
   function defineEngine(name, opts, factory) {
-    return define(engines, 'движок', name, opts, factory);
+    return define(engines, 'engine', name, opts, factory);
   }
 
   function defineWidget(name, opts, factory) {
-    return define(widgets, 'виджет', name, opts, factory);
+    return define(widgets, 'widget', name, opts, factory);
   }
 
   // Проверка сборки на старте: модуль подключён, а часть, которую он берёт
@@ -124,7 +124,7 @@
         // Зависимостью бывает и часть G (track, anchor), и целый модуль:
         // галерея строится поверх слайдера.
         if (!api[dep] && !widgets[dep] && !engines[dep]) {
-          warn('«' + names[i] + '» не работает без griffinjs-' + dep + '.js');
+          warn('"' + names[i] + '" does not work without griffinjs-' + dep + '.js');
         }
       }
     }
@@ -228,7 +228,7 @@
   // два слайдера на одной дорожке — ошибка автора, а не два состояния.
   function mount(el, name, opts) {
     if (!el || !widgets[name]) {
-      warn('виджет «' + name + '» не зарегистрирован');
+      warn('widget "' + name + '" is not registered');
       return null;
     }
 
@@ -244,7 +244,7 @@
       record.instance = widgets[name](el, opts, api) || {};
     } catch (e) {
       mounted.splice(mounted.indexOf(record), 1);
-      warn('виджет «' + name + '» не поднялся: ' + (e && e.message));
+      warn('widget "' + name + '" failed to mount: ' + (e && e.message));
       return null;
     }
 
@@ -369,7 +369,14 @@
   function autoStart() {
     var script = null;
 
-    try { script = document.currentScript; } catch (e) { /* currentScript недоступен */ }
+    // Флаги — только у настоящего тега: именованный элемент перекрывает
+    // свойство документа — <img name="currentScript"> даёт картинку,
+    // <iframe name> — окно фрейма (у чужого origin чтение бросает).
+    try {
+      var tag = document.currentScript;
+
+      if (tag && tag.tagName === 'SCRIPT') script = tag;
+    } catch (e) { /* currentScript недоступен */ }
 
     if (script && script.getAttribute('data-auto') === 'false') return;
 

package/src/griffinjs/core/loader.js

@@ -37,10 +37,13 @@
   var loading = null;   // null — не запрашивали; pending | done | failed
   var warned = {};      // поле → без config уже сказано
 
+  // Только настоящий тег: именованный элемент перекрывает свойство
+  // документа, и <img name="currentScript" data-fields> дал бы адрес
+  // бандла из чужой разметки.
   try {
     var script = document.currentScript;
 
-    if (script) {
+    if (script && script.tagName === 'SCRIPT') {
       nonce = script.nonce || '';
 
       var src = script.getAttribute('data-fields');
@@ -62,7 +65,7 @@
       if (config.fields && config.fields.src) return request();
 
       warned[name] = true;
-      G.warn('поле «' + name + '» не собрано: подключите griffinjs-fields.js или задайте GriffinJS.config.fields');
+      G.warn('field "' + name + '" is not loaded: include griffinjs-fields.js or set GriffinJS.config.fields');
     }
   }
 
@@ -85,7 +88,7 @@
     function settle(event) {
       if (event.type === 'error') {
         ok = false;
-        G.warn('бандл полей не загружен: ' + event.target.src + ' — поля остались базой без скрипта');
+        G.warn('fields bundle failed to load: ' + event.target.src + '; fields stay without the script');
       }
 
       if (--left) return;

package/src/griffinjs/core/options.js

@@ -37,7 +37,7 @@
       try {
         return JSON.parse(text);
       } catch (e) {
-        G.warn('параметры не разобраны как JSON: ' + text);
+        G.warn('options are not valid JSON: ' + text);
         return out;
       }
     }

package/src/griffinjs/core/track.js

@@ -542,7 +542,7 @@
     var factory = G.engines[o.engine];
 
     if (!factory) {
-      G.warn('движок «' + o.engine + '» не зарегистрирован — дорожка без движения');
+      G.warn('engine "' + o.engine + '" is not registered; the track will not move');
     } else {
       engine = factory(api, el, o) || null;
     }

package/src/griffinjs/engines/scroll.js

@@ -54,8 +54,22 @@
 
     // --- Клоны -----------------------------------------------------------------
 
+    // Клон — декорация на время доезда до края: медиа в нём не грузится.
+    // Плеер во фрейме-клоне грузился бы вторым (с autoplay — играл бы
+    // невидимо), <video> качал бы файл ещё раз; src снимается до вставки.
     function makeClone(slide) {
       var node = slide.cloneNode(true);
+      var media = node.querySelectorAll('iframe,video,audio,source');
+
+      // Шаг −1 — сам слайд: видео-слайдер ставит слайдом <video>;
+      // картинка-слайд остаётся с src — она и видна на доезде.
+      for (var i = -1; i < media.length; i++) {
+        var m = i < 0 ? node : media[i];
+
+        if (m.tagName === 'IMG') continue;
+        m.removeAttribute('src');
+        m.removeAttribute('srcdoc');
+      }
 
       node.setAttribute(CLONE, '');
       node.setAttribute('aria-hidden', 'true');

package/src/griffinjs/fields/counter.js

@@ -32,9 +32,11 @@
     var attrs = G.recorder();
     var events = G.listeners();
 
-    if (!(max > 0)) throw new Error('у поля нет maxlength — считать не к чему');
+    if (!(max > 0)) throw new Error('the field has no maxlength: nothing to count');
 
-    var out = o.out ? document.querySelector(o.out) : null;
+    // Цель — в своей форме (без формы — в документе): out приходит
+    // и из данных, и out: main не должен сделать подписью <main>.
+    var out = o.out ? (G.closest(el, 'form') || document).querySelector(o.out) : null;
     var created = false;
 
     if (!out) {

package/src/griffinjs/fields/datetime.js

@@ -235,7 +235,7 @@
     var native = el.getAttribute('type');
     var mode = MODES[native];
 
-    if (!mode) throw new Error('нужен type="date", "time" или "datetime-local"');
+    if (!mode) throw new Error('needs type="date", "time" or "datetime-local"');
 
     var attrs = G.recorder();
     var events = G.listeners();    // на всё время жизни
@@ -792,12 +792,13 @@
 
     // Сосед по паре: уже поднятый — как есть, иначе поднимается здесь;
     // сканер на нём потом найдёт живой экземпляр.
+    // Сосед — поле с data-gr-datetime своей формы (без формы — документа).
     if (o.to && mode !== 'time') {
-      var target = document.querySelector(o.to);
-      var other = target && G.mount(target, 'datetime');
+      var target = (G.closest(el, 'form') || document).querySelector(o.to);
+      var other = target && target.hasAttribute('data-gr-datetime') && G.mount(target, 'datetime');
 
       if (other) { peer = other; role = 'from'; other.pair(api); push(); }
-      else G.warn('datetime: поле «по» не найдено — ' + o.to);
+      else G.warn('datetime: the "to" field is not found: ' + o.to);
     }
 
     return api;

package/src/griffinjs/fields/file.js

@@ -77,12 +77,16 @@
   G.defineWidget('file', function (el, opts) {
     var o = G.merge(DEFAULTS, opts);
 
-    if (typeof DataTransfer !== 'function') throw new Error('без DataTransfer убрать один файл из выбранного нельзя');
+    // Только на самом поле: на обёртке change любого потомка чистил бы цель.
+    if (String(el.tagName).toLowerCase() !== 'input' || String(el.getAttribute('type')).toLowerCase() !== 'file') throw new Error('needs <input type="file">');
+
+    if (typeof DataTransfer !== 'function') throw new Error('without DataTransfer a single file cannot be removed from the selection');
 
     var attrs = G.recorder();
     var events = G.listeners();
     var locale = lang();
-    var list = o.list ? document.querySelector(o.list) : null;
+    // Цель — в своей форме (без формы — в документе).
+    var list = o.list ? (G.closest(el, 'form') || document).querySelector(o.list) : null;
     var created = false;
     var known = [];
 

package/src/griffinjs/fields/mask.js

@@ -163,7 +163,7 @@
     // разобрался бы как пара «00: 00», поэтому без ключа берётся строка как есть.
     var format = o.format ? String(o.format) : (el.getAttribute('data-gr-mask') || '').trim();
 
-    if (!format) throw new Error('у маски нет формата');
+    if (!format) throw new Error('the mask has no format');
 
     var tokens;
     var last = null;          // последнее записанное значение

package/src/griffinjs/fields/otp.js

@@ -35,7 +35,7 @@
   G.defineWidget('otp', function (el) {
     var cells = el.querySelectorAll('input');
 
-    if (!cells.length) throw new Error('внутри нет ни одной ячейки <input>');
+    if (!cells.length) throw new Error('no <input> cells inside');
 
     var attrs = G.recorder();
     var events = G.listeners();

package/src/griffinjs/fields/phone.js

@@ -93,7 +93,7 @@
     var input = el.querySelector('input');
     var locale = lang();
 
-    if (!input) throw new Error('у поля телефона нет <input>');
+    if (!input) throw new Error('the phone field has no <input>');
 
     var created = [];   // позиции, добавленные из таблицы
     var texts = [];     // [позиция, подпись автора] — для destroy
@@ -142,11 +142,11 @@
       // Без country первой стоит первая по алфавиту языка страницы —
       // на русской это Австралия, +61. Угадывать страну за автора виджет
       // не берётся: ошибся бы тише, чем сейчас. Но и молчать не должен.
-      if (!o.country) G.warn('телефон: страна не задана — выбрана первая по алфавиту; укажите country');
+      if (!o.country) G.warn('phone: no country set, the first one alphabetically is used; set country');
     }
 
     if (!options().length) {
-      G.warn('телефон: список кодов пуст — перечислите <option> сами или подключите griffinjs-countries.js');
+      G.warn('phone: the code list is empty; list the <option>s yourself or include griffinjs-countries.js');
     }
 
     // Подписи: флаг + имя в языке страницы + код. Только там, где есть ISO

package/src/griffinjs/fields/rating.js

@@ -37,7 +37,7 @@
     var display = el.querySelector('.gr-rating');
     var radios = el.querySelectorAll('input[type="radio"]');
 
-    if (!display || !radios.length) throw new Error('нужны .gr-rating и <input type="radio"> внутри');
+    if (!display || !radios.length) throw new Error('needs .gr-rating and <input type="radio"> inside');
 
     var attrs = G.recorder();
     var events = G.listeners();

package/src/griffinjs/fields/validate.js

@@ -45,12 +45,13 @@
   }
 
   G.defineWidget('validate', function (el, opts) {
-    if (String(el.tagName).toLowerCase() !== 'form') throw new Error('нужен <form>');
+    if (String(el.tagName).toLowerCase() !== 'form') throw new Error('needs a <form>');
 
     var o = G.merge(DEFAULTS, opts);
     var attrs = G.recorder();
     var events = G.listeners();
-    var box = o.summary ? document.querySelector(o.summary) : null;
+    // Сводка — внутри своей формы: summary: main спрятал бы <main>.
+    var box = o.summary ? el.querySelector(o.summary) : null;
     var created = false;
     var marked = [];   // поля, которым поставлен aria-invalid
 
@@ -72,9 +73,11 @@
       return control.validity ? control.validity.valid === false : false;
     }
 
-    // Подпись поля: <label>, иначе aria-label, иначе name.
+    // Подпись поля: <label>, иначе aria-label, иначе name. Только
+    // control.labels: селектор label[for="…"] из id с кавычкой бросал
+    // до preventDefault, и форма уходила без проверки.
     function labelOf(control) {
-      var label = (control.labels && control.labels[0]) || (control.getAttribute('id') ? el.querySelector('label[for="' + control.getAttribute('id') + '"]') : null);
+      var label = control.labels && control.labels[0];
       var text = label ? String(label.textContent || '').trim() : '';
 
       return text || control.getAttribute('aria-label') || control.getAttribute('name') || '';

package/src/griffinjs/widgets/combobox.js

@@ -8,8 +8,16 @@
  * Источник — адрес с {q} (ответ — JSON: массив строк или объектов
  * {value, label, href, group, id}, либо {items: […]}) или функция
  * через JS: GriffinJS.mount(el, 'combobox', { source: (q, signal) => Promise }).
+ * С флагом navigate выбор позиции переходит по её href — только http(s).
  * Рендер позиции подменяется render(item) → узел.
  *
+ * Набранное уходит источнику с каждым запросом, и CORS этого не держит —
+ * он закрывает только чтение ответа. Поэтому адрес из разметки — только
+ * http(s) своего origin; другой сайт разрешает JS темы:
+ * GriffinJS.config.sources.push('https://api.example.ru') (origin, по
+ * умолчанию список пуст) — или функция source. Редирект не выполняется:
+ * по 302 запрос с набранным ушёл бы дальше.
+ *
  * База без JS — само поле: форма поиска отправляется Enter, как всегда.
  * Скрипт добавляет список под полем и то, что описано в WAI-ARIA combobox:
  * role=combobox с aria-autocomplete=list, listbox с option,
@@ -66,6 +74,26 @@
   };
 
   var seq = 0;
+  var config = G.config;
+
+  if (!config.sources) config.sources = [];
+
+  // Адрес запроса — только http(s) своего origin или origin из списка
+  // (записи сводятся к origin: путь и слеш в конце не мешают). Список
+  // читается при каждом запросе — присваивание работает, как push.
+  function allowed(src) {
+    var url = null;
+
+    try { url = new URL(src, document.baseURI); } catch (e) { /* не адрес */ }
+
+    if (url && /^https?:$/.test(url.protocol) && (url.origin === location.origin || [].concat(config.sources).some(function (entry) {
+      try { return new URL(entry).origin === url.origin; } catch (e) { return false; }
+    }))) return url;
+
+    G.warn('combobox: source refused: ' + src + ' (other origins: GriffinJS.config.sources)');
+
+    return null;
+  }
 
   function normalize(raw) {
     var items = raw && raw.items ? raw.items : raw;
@@ -140,12 +168,12 @@
 
     var input = el.querySelector('input');
 
-    if (!input) throw new Error('у комбобокса нет поля ввода');
+    if (!input) throw new Error('the combobox has no input');
 
     var choice = o.multiple ? el.querySelector('select[multiple]') : null;
 
-    if (o.multiple && !choice) throw new Error('для multiple нужен <select multiple> внутри');
-    if (o.free && !choice) { G.warn('комбобокс: free без multiple смысла не имеет — флаг пропущен'); o.free = false; }
+    if (o.multiple && !choice) throw new Error('multiple needs a <select multiple> inside');
+    if (o.free && !choice) { G.warn('combobox: free makes no sense without multiple; flag ignored'); o.free = false; }
 
     var list = el.querySelector('[role="listbox"]');
     var created = false;
@@ -271,12 +299,16 @@
       if (typeof o.source === 'function') {
         promise = Promise.resolve(o.source(query, signal));
       } else if (o.src && typeof fetch === 'function') {
-        promise = fetch(o.src.replace('{q}', encodeURIComponent(query)), { signal: signal }).then(function (response) {
+        var url = allowed(o.src.replace('{q}', encodeURIComponent(query)));
+
+        if (!url) return;
+
+        promise = fetch(url.href, { signal: signal, redirect: 'error' }).then(function (response) {
           if (!response.ok) throw new Error('HTTP ' + response.status);
           return response.json();
         });
       } else {
-        G.warn('комбобокс: нет источника (src или source)');
+        G.warn('combobox: no source (src or source)');
         return;
       }
 
@@ -292,7 +324,7 @@
         render(query, found);
       }, function (error) {
         if (error && error.name === 'AbortError') return;
-        G.warn('комбобокс: запрос не удался: ' + (error && error.message));
+        G.warn('combobox: request failed: ' + (error && error.message));
       });
     }
 
@@ -440,11 +472,24 @@
       close();
       G.emit('griffin:select', input, { item: item, index: index, input: input });
 
-      if (o.navigate && item.href && typeof location !== 'undefined') location.href = item.href;
+      if (o.navigate && item.href && typeof location !== 'undefined') navigate(String(item.href));
 
       return api;
     }
 
+    // Переход — только по http(s): href приходит из ответа источника,
+    // и javascript: исполнился бы в origin страницы. Выбор при отказе
+    // остаётся — значение в поле, событие ушло. Адрес — строка, приведённая
+    // один раз: она проверяется, она же уходит в location.
+    function navigate(href) {
+      var url = null;
+
+      try { url = new URL(href, document.baseURI); } catch (e) { /* не адрес */ }
+
+      if (url && /^https?:$/.test(url.protocol)) location.href = href;
+      else G.warn('combobox: navigation refused: ' + href);
+    }
+
     // --- События --------------------------------------------------------------
 
     function onInput() { query(); }

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,44 @@
     return (value || '').replace(/^#/, '');
   }
 
+  // Фрагмент — только ответ своего origin с типом text/html: разметку
+  // из innerHTML браузер оживляет, и <img onerror> чужого ответа исполнился
+  // бы в origin страницы. Адрес — http(s) своего origin (у data: origin —
+  // строка 'null'); редирект на чужой отклоняет mode: 'same-origin'; тип
+  // ответа отсекает свой JSON или текст, отражающий запрос. Тип — целиком:
+  // text/htmlx — не HTML, а склейку двух заголовков («text/html,
+  // application/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\s*(;[^,]*)?$/i.test(response.headers.get('content-type'))) throw new Error('not text/html');
+
+      return response.text();
+    }).then(function (html) {
+      // Кусок разметки — без meta, base и link: refresh увёл бы страницу
+      // без щелчка, base сменил бы базу адресов всей страницы, а в куске
+      // разметки они — ошибка или подлог. В <template> они не срабатывают
+      // и снимаются до вставки; <script> куска не исполняется и так.
+      var tpl = document.createElement('template');
+
+      tpl.innerHTML = html;
+
+      var bad = tpl.content.querySelectorAll('meta, base, link');
+
+      for (var i = 0; i < bad.length; i++) bad[i].remove();
+
+      return tpl.content;
+    });
+  }
+
   // Прокручиваемый предок внутри окна: жест в теле окна с прокруткой —
   // законный, всё остальное двигало бы страницу.
   function scrollable(node, root) {
@@ -135,6 +176,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 +223,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 +232,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) {
-        target.innerHTML = html;
+      fragment(src).then(function (html) {
+        target.replaceChildren(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 +282,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 +335,7 @@
       relock();
       stopMedia();
       popHash();
+      pushed = false;
       byHistory = false;
 
       if (el.getAttribute('data-gr-state') !== 'loading') setAttr(el, 'data-gr-state', 'ready');
@@ -356,7 +401,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> знает сам