archive

Author: iliakan

2-ui/99-ui-misc/02-selection-range/article.md

@@ -649,3 +649,5 @@ button.onclick = () => {
 И пару слов о курсоре. Позиция курсора в редактируемых элементах, таких как `<textarea>`, всегда находится в начале или конце выделения.
 
 Мы можем использовать это, как для того, чтобы получить позицию курсора, так и чтобы переместить его, установив `elem.selectionStart` и `elem.selectionEnd`.
+
+P.S. Если вам нужна поддержка старого IE8-, посмотрите в [архивную статью](info:range-textrange-selection).

99-archive/001-regexp-ahchors/article.md

@@ -0,0 +1,67 @@
+archive:
+  ref: regexp-anchors
+
+---
+
+# Начало строки ^ и конец $
+
+Знак каретки `pattern:'^'` и доллара `pattern:'$'` имеют в регулярном выражении особый смысл. Их называют "якорями" (anchor - англ.).
+
+Каретка `pattern:^` совпадает в начале текста, а доллар `pattern:$` -- в конце.
+
+**Якоря являются не символами, а проверками.**
+
+До этого мы говорили о регулярных выражениях, которые ищут один или несколько символов. Если совпадение есть -- эти символы включаются в результат.
+
+А якоря -- не такие. Когда поиск ходит до якоря -- он проверяет, есть ли соответствие, если есть -- продолжает идти по шаблону, не прибавляя ничего к результату.
+
+Каретку `pattern:^` обычно используют, чтобы указать, что регулярное выражение необходимо проверить именно с начала текста.
+
+Например, без каретки найдёт все числа:
+
+```js run
+var str = '100500 попугаев съели 500100 бананов!';
+alert( str.match(/\d+/ig) ); // 100500, 500100 (нашло все числа)
+```
+
+А с кареткой -- только первое:
+
+```js run
+var str = '100500 попугаев съели 500100 бананов!';
+alert( str.match(/^\d+/ig) ); // 100500 (только в начале строки)*!*
+```
+
+Знак доллара `pattern:$` используют, чтобы указать, что паттерн должен заканчиваться в конце текста.
+
+Аналогичный пример с долларом для поиска числа в конце:
+
+```js run
+var str = '100500 попугаев съели 500100';
+alert( str.match(/\d+$/ig) ); // 500100
+```
+
+Оба якоря используют одновременно, если требуется, чтобы шаблон охватывал текст с начала и до конца. Обычно это требуется при валидации.
+
+Например, мы хотим проверить, что в переменной `num` хранится именно десятичная дробь.
+
+Ей соответствует регэксп `pattern:\d+\.\d+`. Но простой поиск найдёт дробь в любом тексте:
+
+```js run
+var num = "ля-ля 12.34";
+alert( num.match(/\d+\.\d+/ig) ); // 12.34
+```
+
+Наша же задача -- проверить, что `num` *целиком* соответствует паттерну `pattern:\d+\.\d+`.
+
+Для этого обернём шаблон в якоря `pattern:^...$`:
+
+```js run
+var num = "ля-ля 12.34";
+alert( num.match(/^\d+\.\d+$/ig) ); // null, не дробь
+
+var num = "12.34";
+alert( num.match(/^\d+\.\d+$/ig) ); // 12.34, дробь!
+```
+
+Теперь поиск ищет начало текста, за которым идёт число, затем точка, ещё число и конец текста. Это как раз то, что нужно.
+

99-archive/002-behavior/article.md

@@ -0,0 +1,96 @@
+archive:
+  ref: event-delegation#the-behavior-pattern
+
+---
+
+# Приём проектирования "поведение"
+
+Шаблон проектирования "поведение" (behavior) позволяет задавать хитрые обработчики на элементе *декларативно*, установкой специальных HTML-атрибутов и классов.
+
+## Описание
+
+Приём проектирования "поведение" состоит из двух частей:
+
+1. Элементу ставится атрибут, описывающий его поведение.
+2. При помощи делегирования ставится обработчик на документ, который ловит все клики и, если элемент имеет нужный атрибут, производит нужное действие.
+
+## Пример
+
+Например, добавим "поведение", которое всем элементам, у которых стоит атрибут `data-counter`, будет при клике увеличивать значение на `1`:
+
+```html run autorun height=60
+Счётчик:
+<button data-counter>1</button>
+Ещё счётчик:
+<button data-counter>2</button>
+
+<script>
+  document.onclick = function(event) {
+    if (!event.target.hasAttribute('data-counter')) return;
+
+    var counter = event.target;
+
+    counter.innerHTML++;
+  };
+</script>
+```
+
+Если запустить HTML-код выше, то при клике на каждую кнопку -- её значение будет увеличиваться.
+
+Конечно, нам важны не счётчики, а общий подход, который они демонстрируют.
+
+Элементов `data-counter` может быть сколько угодно. Новые могут добавляться в HTML в любой момент. При помощи делегирования мы, фактически, добавили новый "псевдо-стандартный" атрибут в HTML, который добавляет элементу новую возможность ("поведение").
+
+## Ещё пример
+
+Добавим ещё поведение.
+
+Сделаем так, что при клике на элемент с атрибутом `data-toggle-id` будет скрываться/показываться элемент с заданным `id`:
+
+```html autorun run height=60
+<button *!*data-toggle-id="subscribe-mail"*/!*>
+  Показать форму подписки
+</button>
+
+<form id="subscribe-mail" hidden>
+  Ваша почта: <input type="email">
+</form>
+
+<script>
+*!*
+  document.onclick = function(event) {
+    var target = event.target;
+
+    var id = target.getAttribute('data-toggle-id');
+    if (!id) return;
+
+    var elem = document.getElementById(id);
+
+    elem.hidden = !elem.hidden;
+  };
+*/!*
+</script>
+```
+
+Ещё раз заметим, что мы сделали. Теперь для того, чтобы добавить скрытие-раскрытие любому элементу -- даже не надо знать JavaScript, можно просто написать атрибут `data-toggle-id`.
+
+Это бывает очень удобно -- не нужно писать JavaScript-код для каждого элемента, который должен служить такой кнопкой. Просто используем поведение.
+
+Обратите внимание: обработчик поставлен на `document`, клик на любом элементе страницы пройдёт через него, так что поведение определено глобально.
+
+```smart header="Не только атрибут"
+Для своих целей мы можем использовать в HTML любые атрибуты, но стандарт рекомендует для своих целей называть атрибуты `data-*`.
+
+В обработчике `document.onclick` мы могли бы проверять не атрибут, а класс или что-то ещё, но с атрибутом -- проще и понятнее всего.
+
+Также для добавления обработчиков на `document` рекомендуется использовать `addEventListener`, чтобы можно было добавить более одного обработчика для типа события.
+```
+
+## Итого
+
+Шаблон "поведение" удобен тем, что сколь угодно сложное JavaScript-поведение можно "навесить" на элемент одним лишь атрибутом. А можно -- несколькими атрибутами на связанных элементах.
+
+Здесь мы рассмотрели базовый пример, который можно как угодно модифицировать и масштабировать. Важно не переусердствовать.
+
+Приём разработки "поведение" рекомендуется использовать для расширения возможностей разметки, как альтернативу мини-фрагментам JavaScript.
+

99-archive/003-mouse-clicks/2-tree-coords/solution.md

@@ -0,0 +1,28 @@
+# Подсказка
+
+У события клика есть координаты. Проверьте по ним, попал ли клик на заголовок.
+
+Самый глубокий узел на координатах можно получить вызовом [document.elementFromPoint(clientX, clientY)](https://developer.mozilla.org/en/DOM/document.elementFromPoint).
+
+...Но заголовок является текстовым узлом, поэтому эта функция для него работать не будет. Однако это, всё же, можно обойти. Как?
+
+# Подсказка 2
+
+Можно при клике на `LI` сделать временный `SPAN` и переместить в него текстовый узел-заголовок.
+
+После этого проверить, попал ли клик в него и вернуть всё как было.
+
+```js
+// 1) заворачиваем текстовый узел в SPAN
+
+// 2) проверяем
+var elem = document.elementFromPoint(e.clientX, e.clientY);
+var isClickOnTitle = (elem == span);
+
+// 3) возвращаем текстовый узел обратно из SPAN
+```
+
+На шаге 3 текстовый узел вынимается обратно из `SPAN`, всё возвращается в исходное состояние.
+
+# Решение
+

99-archive/003-mouse-clicks/2-tree-coords/solution.view/index.html

@@ -0,0 +1,94 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <style>
+    .tree li {
+      cursor: pointer;
+    }
+  </style>
+</head>
+
+<body>
+
+  <ul class="tree" id="tree">
+    <li>Животные
+      <ul>
+        <li>Млекопитающие
+          <ul>
+            <li>Коровы</li>
+            <li>Ослы</li>
+            <li>Собаки</li>
+            <li>Тигры</li>
+          </ul>
+        </li>
+        <li>Другие
+          <ul>
+            <li>Змеи</li>
+            <li>Птицы</li>
+            <li>Ящерицы</li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+    <li>Рыбы
+      <ul>
+        <li>Аквариумные
+          <ul>
+            <li>Гуппи</li>
+            <li>Скалярии</li>
+          </ul>
+
+        </li>
+        <li>Морские
+          <ul>
+            <li>Морская форель</li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+
+  <script>
+    var tree = document.getElementById('tree');
+
+    /* проверить на попадание события в заголовок LI */
+    function isOverTitle(evt, li) {
+      /* обернуть заголовок в span */
+      var titleWrapper = document.createElement('span');
+      var titleTextNode = li.firstChild; // <li>TITLE...
+      li.insertBefore(titleWrapper, titleTextNode); // <li><span></span>TITLE
+      titleWrapper.appendChild(titleTextNode); // <li><span>TITLE</span>
+
+      /* определить, был ли клик по координатам - в SPAN ?*/
+      var isClickOnTitle = (document.elementFromPoint(evt.clientX, evt.clientY) == titleWrapper);
+
+      /* в любом случае вернуть заголовок в текст обратно перед тем как идти дальше */
+      titleWrapper.removeChild(titleWrapper.firstChild); // <li><span></span>
+      li.replaceChild(titleTextNode, titleWrapper); // <li>TITLE...
+
+      return isClickOnTitle;
+    }
+
+    /* отслеживаем клики на всём дереве */
+    tree.onclick = function(evt) {
+      var evt = evt || event;
+      var target = evt.target || evt.srcElement;
+
+
+      if (!isOverTitle(evt, target)) {
+        return; // клик не на заголовке
+      }
+
+      /* раскрыть-закрыть детей */
+      var node = target.getElementsByTagName('ul')[0];
+      if (!node) return; // нет детей
+
+      node.style.display = node.style.display ? '' : 'none';
+    }
+  </script>
+
+</body>
+
+</html>

99-archive/003-mouse-clicks/2-tree-coords/source.view/index.html

@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <style>
+    .tree li {
+      cursor: pointer;
+    }
+  </style>
+</head>
+
+<body>
+
+  <ul class="tree" id="tree">
+    <li>Животные
+      <ul>
+        <li>Млекопитающие
+          <ul>
+            <li>Коровы</li>
+            <li>Ослы</li>
+            <li>Собаки</li>
+            <li>Тигры</li>
+          </ul>
+        </li>
+        <li>Другие
+          <ul>
+            <li>Змеи</li>
+            <li>Птицы</li>
+            <li>Ящерицы</li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+    <li>Рыбы
+      <ul>
+        <li>Аквариумные
+          <ul>
+            <li>Гуппи</li>
+            <li>Скалярии</li>
+          </ul>
+
+        </li>
+        <li>Морские
+          <ul>
+            <li>Морская форель</li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+
+  <script>
+    var tree = document.getElementById('tree');
+
+    tree.onclick = function(evt) {
+      var evt = evt || event;
+      var target = evt.target || evt.srcElement;
+
+      /* раскрыть-закрыть детей */
+      var node = target.getElementsByTagName('ul')[0];
+      if (!node) return; // нет детей
+
+      node.style.display = node.style.display ? '' : 'none';
+    }
+  </script>
+
+</body>
+
+</html>