griffincss-ui 0.23.1 → 0.25.0-dev

package/src/griffinjs/fields/phone.js

@@ -15,8 +15,10 @@
  * зовётся иначе, чем виджет: data-gr-mask на позиции списка ядро приняло бы
  * за виджет и попыталось бы надеть маску на <option>. Пустой <select> заполняется
  * из таблицы griffinjs-countries.js, если она подключена; без неё виджет
- * предупреждает и работает как поле без маски. Данные со своим темпом
- * обновления библиотека вместе с кодом не сопровождает.
+ * предупреждает и работает как поле без маски. Начальная страна списка
+ * из таблицы — параметр country; без него первой стоит первая по алфавиту
+ * языка страницы, и виджет предупреждает об этом в консоли. Данные
+ * со своим темпом обновления библиотека вместе с кодом не сопровождает.
  *
  * Имя страны и флаг — у платформы: Intl.DisplayNames в языке страницы
  * (lang документа) и пара региональных индикаторов из двух букв ISO.
@@ -34,6 +36,13 @@
  * два поля: код и национальный номер; целиком он в value() и в событии
  * griffin:change.
  *
+ * Проверка приходит от маски и вместе со страной: недобранный номер
+ * не проходит checkValidity(), и смена кода пересчитывает полноту —
+ * девяти знаков хватает Беларуси и мало России. Проверяется ДЛИНА номера
+ * по маске выбранной страны, а не тип номера и не диапазон оператора:
+ * libphonenumber в замену не входит. value() при этом отражает набранное,
+ * даже неполное, — полнота отдаётся признаком complete в griffin:change.
+ *
  * База без скрипта: type="tel" и <select> кодов в .gr-input-group —
  * обе части платформенные.
  */
@@ -129,6 +138,11 @@
         select.appendChild(option);
         created.push(option);
       }
+
+      // Без country первой стоит первая по алфавиту языка страницы —
+      // на русской это Австралия, +61. Угадывать страну за автора виджет
+      // не берётся: ошибся бы тише, чем сейчас. Но и молчать не должен.
+      if (!o.country) G.warn('телефон: страна не задана — выбрана первая по алфавиту; укажите country');
     }
 
     if (!options().length) {
@@ -184,7 +198,7 @@
     function emit() {
       var c = info(current());
 
-      G.emit('griffin:change', el, { iso: c.iso, code: c.code, value: value() });
+      G.emit('griffin:change', el, { iso: c.iso, code: c.code, value: value(), complete: mask ? mask.complete() : true });
     }
 
     // Полный номер с плюсом: страна — по самому длинному коду, который

package/src/griffinjs/widgets/combobox.js

@@ -39,6 +39,13 @@
  * удаление тега или Backspace в пустом поле снимает выбор. Значение всегда
  * в <select> — форма отправляет его как без скрипта; о смене он сообщает
  * событием change.
+ *
+ * Свободные теги (Этап 42f) — флаг free рядом с multiple: Enter на непустом
+ * поле без активной позиции создаёт <option selected> со значением, равным
+ * тексту (ключевые слова, адреса писем). Дубликата по значению нет —
+ * существующая позиция просто выбирается. На сервер значение уходит
+ * текстом, проверять его — там. Без multiple флаг смысла не имеет: текст
+ * поля и есть значение, — и пропускается с предупреждением.
  */
 (function (G) {
   'use strict';
@@ -54,6 +61,7 @@
     highlight: true,
     cache: true,
     multiple: false,  // выбранное — теги, значение — в <select multiple>
+    free: false,      // Enter без позиции — новый тег из текста (только с multiple)
     remove: 'Убрать {label}'
   };
 
@@ -137,6 +145,7 @@
     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; }
 
     var list = el.querySelector('[role="listbox"]');
     var created = false;
@@ -452,8 +461,12 @@
         activate(key === 'Home' ? 0 : items.length - 1, true);
         event.preventDefault();
       } else if (key === 'Enter') {
-        if (!opened || active < 0) return;
-        select(active);
+        var text = input.value.trim();
+
+        if (opened && active >= 0) select(active);
+        else if (o.free && text) { add(text, text); input.value = ''; close(); }
+        else return;
+
         event.preventDefault();
       } else if (key === 'Escape') {
         if (!opened) return;

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 {