From cf9969f7ab2550ec5b846cd1b5f58dbefbfa417d Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Sat, 4 Mar 2017 03:20:49 +0300 Subject: [PATCH] ok --- .../solution.view/index.html | 2 +- .../source.view/index.html | 2 +- .../solution.view/index.html | 2 +- .../04-move-ball-field/source.view/index.html | 2 +- .../1-hide-message-delegate/solution.md | 2 - .../solution.view/index.html | 29 ++--- .../source.view/index.html | 30 ++--- .../source.view/messages.css | 7 +- .../1-hide-message-delegate/task.md | 9 +- .../2-sliding-tree/solution.md | 112 +----------------- .../2-sliding-tree/solution.view/index.html | 65 +++++----- .../2-sliding-tree/source.view/index.html | 40 +++---- .../5-event-delegation/2-sliding-tree/task.md | 14 +-- .../3-sort-table/solution.md | 13 -- .../3-sort-table/solution.view/index.html | 72 +++++------ .../3-sort-table/source.view/index.html | 39 +++--- .../5-event-delegation/3-sort-table/task.md | 41 +++++-- .../4-behavior-tooltip}/solution.md | 0 .../solution.view/index.html | 80 +++++++++++++ .../4-behavior-tooltip/source.view/index.html | 43 +++++++ .../4-behavior-tooltip/task.md | 36 ++++++ 2-ui/2-events/5-event-delegation/article.md | 3 + .../solution.view/index.html | 81 ------------- .../1-behavior-tooltip/source.view/index.html | 32 ----- .../6-behavior/1-behavior-tooltip/task.md | 33 ------ 2-ui/2-events/6-behavior/article.md | 93 --------------- 26 files changed, 344 insertions(+), 538 deletions(-) rename 2-ui/2-events/{6-behavior/1-behavior-tooltip => 5-event-delegation/4-behavior-tooltip}/solution.md (100%) create mode 100644 2-ui/2-events/5-event-delegation/4-behavior-tooltip/solution.view/index.html create mode 100644 2-ui/2-events/5-event-delegation/4-behavior-tooltip/source.view/index.html create mode 100644 2-ui/2-events/5-event-delegation/4-behavior-tooltip/task.md delete mode 100644 2-ui/2-events/6-behavior/1-behavior-tooltip/solution.view/index.html delete mode 100644 2-ui/2-events/6-behavior/1-behavior-tooltip/source.view/index.html delete mode 100644 2-ui/2-events/6-behavior/1-behavior-tooltip/task.md delete mode 100644 2-ui/2-events/6-behavior/article.md diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.view/index.html b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.view/index.html index a90cfc50..9ebe6001 100755 --- a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.view/index.html +++ b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.view/index.html @@ -20,7 +20,7 @@
- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . + . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/source.view/index.html b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/source.view/index.html index 1d466adc..4f8eea63 100755 --- a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/source.view/index.html +++ b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/source.view/index.html @@ -20,7 +20,7 @@
- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . + . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
diff --git a/2-ui/2-events/1-introduction-browser-events/04-move-ball-field/solution.view/index.html b/2-ui/2-events/1-introduction-browser-events/04-move-ball-field/solution.view/index.html index 69538902..a483ccb1 100755 --- a/2-ui/2-events/1-introduction-browser-events/04-move-ball-field/solution.view/index.html +++ b/2-ui/2-events/1-introduction-browser-events/04-move-ball-field/solution.view/index.html @@ -32,7 +32,7 @@
- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . + . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
diff --git a/2-ui/2-events/1-introduction-browser-events/04-move-ball-field/source.view/index.html b/2-ui/2-events/1-introduction-browser-events/04-move-ball-field/source.view/index.html index a4ceeaa7..34f9c88a 100755 --- a/2-ui/2-events/1-introduction-browser-events/04-move-ball-field/source.view/index.html +++ b/2-ui/2-events/1-introduction-browser-events/04-move-ball-field/source.view/index.html @@ -21,7 +21,7 @@
- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . + . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
diff --git a/2-ui/2-events/5-event-delegation/1-hide-message-delegate/solution.md b/2-ui/2-events/5-event-delegation/1-hide-message-delegate/solution.md index 226224eb..e69de29b 100644 --- a/2-ui/2-events/5-event-delegation/1-hide-message-delegate/solution.md +++ b/2-ui/2-events/5-event-delegation/1-hide-message-delegate/solution.md @@ -1,2 +0,0 @@ -Поставьте обработчик `click` на контейнере. Он должен проверять, произошел ли клик на кнопке удаления (`target`), и если да, то удалять соответствующий ей `DIV`. - diff --git a/2-ui/2-events/5-event-delegation/1-hide-message-delegate/solution.view/index.html b/2-ui/2-events/5-event-delegation/1-hide-message-delegate/solution.view/index.html index e5b2fd28..6f8ed9c4 100755 --- a/2-ui/2-events/5-event-delegation/1-hide-message-delegate/solution.view/index.html +++ b/2-ui/2-events/5-event-delegation/1-hide-message-delegate/solution.view/index.html @@ -8,38 +8,33 @@ -
+
-

Лошадь

-

Домашняя лошадь — животное семейства непарнокопытных, одомашненный и единственный сохранившийся подвид дикой лошади, вымершей в дикой природе, за исключением небольшой популяции лошади Пржевальского.

+

Horse

+

The horse is one of two extant subspecies of Equus ferus. It is an odd-toed ungulate mammal belonging to the taxonomic family Equidae. The horse has evolved over the past 45 to 55 million years from a small multi-toed creature, Eohippus, into the large, single-toed animal of today.

-

Осёл

-

Домашний осёл или ишак — одомашненный подвид дикого осла, сыгравший важную историческую роль в развитии хозяйства и культуры человека. Все одомашненные ослы относятся к африканским ослам.

+

Donkey

+

The donkey or ass (Equus africanus asinus) is a domesticated member of the horse family, Equidae. The wild ancestor of the donkey is the African wild ass, E. africanus. The donkey has been used as a working animal for at least 5000 years.

-

Корова, а также пара слов о диком быке, о волах и о тёлках.

-

Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют - тёлками. +

Cat

+

The domestic cat (Latin: Felis catus) is a small, typically furry, carnivorous mammal. They are often called house cats when kept as indoor pets or simply cats when there is no need to distinguish them from other felids and felines. Cats are often valued by humans for companionship and for their ability to hunt vermin.

- - - - \ No newline at end of file + diff --git a/2-ui/2-events/5-event-delegation/1-hide-message-delegate/source.view/index.html b/2-ui/2-events/5-event-delegation/1-hide-message-delegate/source.view/index.html index c50a409a..8a9ed9a0 100755 --- a/2-ui/2-events/5-event-delegation/1-hide-message-delegate/source.view/index.html +++ b/2-ui/2-events/5-event-delegation/1-hide-message-delegate/source.view/index.html @@ -2,32 +2,34 @@ - + - Кнопка для удаления: - - -
+
-

Лошадь

-

Домашняя лошадь — животное семейства непарнокопытных, одомашненный и единственный сохранившийся подвид дикой лошади, вымершей в дикой природе, за исключением небольшой популяции лошади Пржевальского.

+

Horse

+

The horse is one of two extant subspecies of Equus ferus. It is an odd-toed ungulate mammal belonging to the taxonomic family Equidae. The horse has evolved over the past 45 to 55 million years from a small multi-toed creature, Eohippus, into the large, single-toed animal of today.

+
-

Осёл

-

Домашний осёл или ишак — одомашненный подвид дикого осла, сыгравший важную историческую роль в развитии хозяйства и культуры человека. Все одомашненные ослы относятся к африканским ослам.

+

Donkey

+

The donkey or ass (Equus africanus asinus) is a domesticated member of the horse family, Equidae. The wild ancestor of the donkey is the African wild ass, E. africanus. The donkey has been used as a working animal for at least 5000 years.

+
-

Корова, а также пара слов о диком быке, о волах и о тёлках.

-

Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют - тёлками. +

Cat

+

The domestic cat (Latin: Felis catus) is a small, typically furry, carnivorous mammal. They are often called house cats when kept as indoor pets or simply cats when there is no need to distinguish them from other felids and felines. Cats are often valued by humans for companionship and for their ability to hunt vermin.

+
- + - \ No newline at end of file + + diff --git a/2-ui/2-events/5-event-delegation/1-hide-message-delegate/source.view/messages.css b/2-ui/2-events/5-event-delegation/1-hide-message-delegate/source.view/messages.css index 6588f729..b5ee9877 100755 --- a/2-ui/2-events/5-event-delegation/1-hide-message-delegate/source.view/messages.css +++ b/2-ui/2-events/5-event-delegation/1-hide-message-delegate/source.view/messages.css @@ -6,6 +6,7 @@ body { h3 { margin: 0; padding-bottom: .3em; + padding-right: 20px; font-size: 1.1em; } @@ -18,15 +19,19 @@ p { background: #edf5e1; padding: 10px 20px 10px; border-top: solid 2px #c4df9b; + position: relative; } .remove-button { + position: absolute; font-size: 110%; + top: 0; color: darkred; right: 10px; + display: block; width: 24px; height: 24px; border: none; background: transparent; cursor: pointer; -} \ No newline at end of file +} diff --git a/2-ui/2-events/5-event-delegation/1-hide-message-delegate/task.md b/2-ui/2-events/5-event-delegation/1-hide-message-delegate/task.md index 43182e4d..62c0a8ab 100644 --- a/2-ui/2-events/5-event-delegation/1-hide-message-delegate/task.md +++ b/2-ui/2-events/5-event-delegation/1-hide-message-delegate/task.md @@ -2,13 +2,12 @@ importance: 5 --- -# Скрытие сообщения с помощью делегирования +# Hide messages with delegation -Дан список сообщений. Добавьте каждому сообщению кнопку для его удаления. +There's a list of messages with removal buttons `[x]`. Make the buttons work. -**Используйте делегирование событий. Один обработчик для всего.** - -В результате, должно работать вот так(кликните на крестик): +Like this: [iframe src="solution" height=420] +P.S. Should be only one event listener on the container, use event delegation. diff --git a/2-ui/2-events/5-event-delegation/2-sliding-tree/solution.md b/2-ui/2-events/5-event-delegation/2-sliding-tree/solution.md index aed18bd8..09c14a08 100644 --- a/2-ui/2-events/5-event-delegation/2-sliding-tree/solution.md +++ b/2-ui/2-events/5-event-delegation/2-sliding-tree/solution.md @@ -1,110 +1,4 @@ -# Схема решения - -Дерево устроено как вложенный список. - -Клики на все элементы можно поймать, повесив единый обработчик `onclick` на внешний `UL`. - -Как поймать клик на заголовке? Элемент `LI` является блочным, поэтому нельзя понять, был ли клик на *тексте*, или справа от него. - -Например, ниже -- участок дерева с выделенными рамкой узлами. Кликните справа от любого заголовка. Видите, клик ловится? А лучше бы такие клики (не на тексте) игнорировать. - -```html autorun height=190 untrusted - - -
    -
  • Млекопетающие -
      -
    • Коровы
      • -
    • Ослы
      • -
    • Собаки
      • -
    • Тигры
      • -
    -
    • -
-``` - -В примере выше видно, что проблема в верстке, в том что `LI` занимает всю ширину. Можно кликнуть справа от текста, это все еще `LI`. - -Один из способов это поправить -- обернуть заголовки в дополнительный элемент `SPAN`, и обрабатывать только клики внутри `SPAN'ов`, получать по `SPAN'у` его родителя `LI` и ставить ему класс открыт/закрыт. - -Напишите для этого JavaScript-код. - -# Оборачиваем заголовки в SPAN - -Следующий код ищет все `LI` и оборачивает текстовые узлы в `SPAN`. - -```js -var treeUl = document.getElementsByTagName('ul')[0]; - -var treeLis = treeUl.getElementsByTagName('li'); - -for (var i = 0; i < treeLis.length; i++) { - var li = treeLis[i]; - - var span = document.createElement('span'); - li.insertBefore(span, li.firstChild); // добавить пустой SPAN - span.appendChild(span.nextSibling); // переместить в него заголовок -} -``` - -Теперь можно отслеживать клики *на заголовках*. - -Так выглядит дерево с обёрнутыми в `SPAN` заголовками и делегированием: - -```html autorun height=190 untrusted - - -
    -
  • Млекопетающие -
      -
    • Коровы
      • -
    • Ослы
      • -
    • Собаки
      • -
    • Тигры
      • -
    -
    • -
-``` - -Так как `SPAN` -- инлайновый элемент, он всегда такого же размера как текст. Да здравствует `SPAN`! - -В реальной жизни дерево, скорее всего, будет сразу со `SPAN`: если HTML-код дерева генерируется на сервере, то это несложно, если дерево генерируется в JavaScript -- тем более просто. - -# Итоговое решение - -Для делегирования нужно по клику понять, на каком узле он произошел. - -В нашем случае у `SPAN` нет детей-элементов, поэтому не нужно подниматься вверх по цепочке родителей. Достаточно просто проверить `event.target.tagName == 'SPAN'`, чтобы понять, где был клик, и спрятать потомков. - -```js -var tree = document.getElementsByTagName('ul')[0]; - -tree.onclick = function(event) { - var target = event.target; - - if (target.tagName != 'SPAN') { - return; // клик был не на заголовке - } - - var li = target.parentNode; // получить родительский LI - - // получить UL с потомками -- это первый UL внутри LI - var childrenContainer = li.getElementsByTagName('ul')[0]; - - if (!childrenContainer) return; // потомков нет -- ничего не надо делать - - // спрятать/показать (можно и через CSS-класс) - childrenContainer.hidden = !childrenContainer.hidden; -} -``` - -Выделение узлов жирным при наведении делается при помощи CSS-селектора `:hover`. +The solution has two parts. +1. Wrap every tree node title into ``. Then we can CSS-style them on `:hover` and handle clicks exactly on text, because `` width is exactly the text width (unlike without it). +2. Set a handler to the `tree` root node and handle clicks on that `` titles. diff --git a/2-ui/2-events/5-event-delegation/2-sliding-tree/solution.view/index.html b/2-ui/2-events/5-event-delegation/2-sliding-tree/solution.view/index.html index 98d6c644..6e266dd3 100755 --- a/2-ui/2-events/5-event-delegation/2-sliding-tree/solution.view/index.html +++ b/2-ui/2-events/5-event-delegation/2-sliding-tree/solution.view/index.html @@ -6,7 +6,7 @@ .tree span:hover { font-weight: bold; } - + .tree span { cursor: pointer; } @@ -16,38 +16,37 @@ -
    -
  • Животные +
      +
    • Animals
        -
      • Млекопитающие +
      • Mammals
          -
        • Коровы
          • -
        • Ослы
          • -
        • Собаки
          • -
        • Тигры
          • +
        • Cows
          • +
        • Donkeys
          • +
        • Dogs
          • +
        • Tigers
        • -
      • Другие +
      • Other
          -
        • Змеи
          • -
        • Птицы
          • -
        • Ящерицы
          • +
        • Snakes
          • +
        • Birds
          • +
        • Lizards
      • -
    • Рыбы +
    • Fishes
        -
      • Аквариумные +
      • Aquarium
          -
        • Гуппи
          • -
        • Скалярии
          • +
        • Guppy
          • +
        • Angelfish
        -
        • -
      • Морские +
      • Sea
          -
        • Морская форель
          • +
        • Sea trout
      @@ -55,29 +54,22 @@
    - - \ No newline at end of file + diff --git a/2-ui/2-events/5-event-delegation/2-sliding-tree/source.view/index.html b/2-ui/2-events/5-event-delegation/2-sliding-tree/source.view/index.html index 82042a9b..8572517f 100755 --- a/2-ui/2-events/5-event-delegation/2-sliding-tree/source.view/index.html +++ b/2-ui/2-events/5-event-delegation/2-sliding-tree/source.view/index.html @@ -1,44 +1,41 @@ - - -
      -
    • Животные +
        +
      • Animals
          -
        • Млекопитающие +
        • Mammals
            -
          • Коровы
            • -
          • Ослы
            • -
          • Собаки
            • -
          • Тигры
            • +
          • Cows
            • +
          • Donkeys
            • +
          • Dogs
            • +
          • Tigers
          • -
        • Другие +
        • Other
            -
          • Змеи
            • -
          • Птицы
            • -
          • Ящерицы
            • +
          • Snakes
            • +
          • Birds
            • +
          • Lizards
        • -
      • Рыбы +
      • Fishes
          -
        • Аквариумные +
        • Aquarium
            -
          • Гуппи
            • -
          • Скалярии
            • +
          • Guppy
            • +
          • Angelfish
          -
          • -
        • Морские +
        • Sea
            -
          • Морская форель
            • +
          • Sea trout
        @@ -46,5 +43,4 @@
      - - \ No newline at end of file + diff --git a/2-ui/2-events/5-event-delegation/2-sliding-tree/task.md b/2-ui/2-events/5-event-delegation/2-sliding-tree/task.md index 10eaa1bc..bdcf2a51 100644 --- a/2-ui/2-events/5-event-delegation/2-sliding-tree/task.md +++ b/2-ui/2-events/5-event-delegation/2-sliding-tree/task.md @@ -2,17 +2,13 @@ importance: 5 --- -# Раскрывающееся дерево +# Tree menu -Создайте дерево, которое по клику на заголовок скрывает-показывает детей: +Create a tree that shows/hides node children on click: [iframe border=1 src="solution"] -Требования: - -- Использовать делегирование. -- Клик вне текста заголовка (на пустом месте) ничего делать не должен. -- При наведении на заголовок -- он становится жирным, реализовать через CSS. - -P.S. При необходимости HTML/CSS дерева можно изменить. +Requirements: +- Only one event handler (use delegation) +- A click outside the node title (on an empty space) should not do anything. diff --git a/2-ui/2-events/5-event-delegation/3-sort-table/solution.md b/2-ui/2-events/5-event-delegation/3-sort-table/solution.md index 22004fce..8b137891 100644 --- a/2-ui/2-events/5-event-delegation/3-sort-table/solution.md +++ b/2-ui/2-events/5-event-delegation/3-sort-table/solution.md @@ -1,14 +1 @@ -# Подсказка (обработчик) - -1. Обработчик `onclick` можно повесить один, на всю таблицу или `THEAD`. Он будет игнорировать клики не на `TH`. -2. При клике на `TH` обработчик будет получать номер из `TH`, на котором кликнули (`TH.cellIndex`) и вызывать функцию `sortColumn`, передавая ей номер колонки и тип. -3. Функция `sortColumn(colNum, type)` будет сортировать. - -# Подсказка (сортировка) - -Функция сортировки: - -1. Переносит все `TR` из `TBODY` в массив `rowsArr` -2. Сортирует массив, используя `rowsArr.sort(compare)`, функция `compare` зависит от типа столбца. -3. Добавляет `TR` из массива обратно в `TBODY` diff --git a/2-ui/2-events/5-event-delegation/3-sort-table/solution.view/index.html b/2-ui/2-events/5-event-delegation/3-sort-table/solution.view/index.html index aea9ccf1..9816ec85 100755 --- a/2-ui/2-events/5-event-delegation/3-sort-table/solution.view/index.html +++ b/2-ui/2-events/5-event-delegation/3-sort-table/solution.view/index.html @@ -4,13 +4,19 @@ @@ -19,57 +25,54 @@ - - + + - + - + - + - + - +
      ВозрастИмяAgeName
      5ВасяJohn
      2ПетяPete
      12ЖеняAnn
      9МашаEugene
      1ИльяIlya
      - - \ No newline at end of file + diff --git a/2-ui/2-events/5-event-delegation/3-sort-table/source.view/index.html b/2-ui/2-events/5-event-delegation/3-sort-table/source.view/index.html index f71b83c4..8fac0624 100755 --- a/2-ui/2-events/5-event-delegation/3-sort-table/source.view/index.html +++ b/2-ui/2-events/5-event-delegation/3-sort-table/source.view/index.html @@ -4,13 +4,19 @@ @@ -19,38 +25,37 @@ - - + + - + - + - + - + - +
      ВозрастИмяAgeName
      5ВасяJohn
      2ПетяPete
      12ЖеняAnn
      9МашаEugene
      1ИльяIlya
      - - \ No newline at end of file + diff --git a/2-ui/2-events/5-event-delegation/3-sort-table/task.md b/2-ui/2-events/5-event-delegation/3-sort-table/task.md index 2bb8fecc..ec85a473 100644 --- a/2-ui/2-events/5-event-delegation/3-sort-table/task.md +++ b/2-ui/2-events/5-event-delegation/3-sort-table/task.md @@ -2,19 +2,42 @@ importance: 4 --- -# Сортировка таблицы +# Sortable table -Сделать сортировку таблицы при клике на заголовок. +Make the table sortable: clicks on `` elements should sort it by corresponding column. -Демо: +Each `` has the type in the attribute, like this: -[iframe border=1 src="solution" height=180] +```html + + + +*!* + + +*/!* + + + + + + + + + + + + ... + +
      AgeName
      5John
      10Ann
      +``` -Требования: +In the example above the first column has numbers, and the second one -- strings. The sorting function should handle sort according to the type. -- Использовать делегирование. -- Код не должен меняться при увеличении количества столбцов или строк. +Only `"string"` and `"number"` types should be supported. -P.S. Обратите внимание, тип столбца задан атрибутом у заголовка. Это необходимо, ведь числа сортируются иначе чем строки. Соответственно, код это может использовать. +The working example: -P.P.S. Вам помогут дополнительные [навигационные ссылки по таблицам](info:traversing-dom#dom-navigation-tables). \ No newline at end of file +[iframe border=1 src="solution" height=190] + +P.S. The table can be big, with any number of rows and columns. diff --git a/2-ui/2-events/6-behavior/1-behavior-tooltip/solution.md b/2-ui/2-events/5-event-delegation/4-behavior-tooltip/solution.md similarity index 100% rename from 2-ui/2-events/6-behavior/1-behavior-tooltip/solution.md rename to 2-ui/2-events/5-event-delegation/4-behavior-tooltip/solution.md diff --git a/2-ui/2-events/5-event-delegation/4-behavior-tooltip/solution.view/index.html b/2-ui/2-events/5-event-delegation/4-behavior-tooltip/solution.view/index.html new file mode 100644 index 00000000..31d0d46b --- /dev/null +++ b/2-ui/2-events/5-event-delegation/4-behavior-tooltip/solution.view/index.html @@ -0,0 +1,80 @@ + + + + + + + + + + +

      LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa

      +

      LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa

      + + + + +

      Scroll the page to make buttons appear on the top, check if the tooltips show up correctly.

      + + + + + + diff --git a/2-ui/2-events/5-event-delegation/4-behavior-tooltip/source.view/index.html b/2-ui/2-events/5-event-delegation/4-behavior-tooltip/source.view/index.html new file mode 100644 index 00000000..57a19d01 --- /dev/null +++ b/2-ui/2-events/5-event-delegation/4-behavior-tooltip/source.view/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + +

      LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa

      +

      LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa

      + + + + +

      Scroll the page to make buttons appear on the top, check if the tooltips show up correctly.

      + + + + + + diff --git a/2-ui/2-events/5-event-delegation/4-behavior-tooltip/task.md b/2-ui/2-events/5-event-delegation/4-behavior-tooltip/task.md new file mode 100644 index 00000000..fc246228 --- /dev/null +++ b/2-ui/2-events/5-event-delegation/4-behavior-tooltip/task.md @@ -0,0 +1,36 @@ +importance: 5 + +--- + +# Tooltip behavior + +Create JS-code for the tooltip behavior. + +When a mouse comes over an element with `data-tooltip`, the tooltip should appear over it, and when it's gone then hide. + +An example of annotated HTML: +```html + + +``` + +Should work like this: + +[iframe src="solution" height=200 border=1] + +In this task we assume that all elements with `data-tooltip` have only text inside. No nested tags. + +Details: + +- The tooltip should not cross window edges. Normally it should be above the element, but if the element is at the page top and there's no space for the tooltip, then below it. +- The tooltip is given in the `data-tooltip` attribute. It can be arbitrary HTML. + +You'll need two events here: +- `mouseover` triggers when a pointer comes over an element. +- `mouseout` triggers when a pointer leaves an element. + +Please use event delegation: set up two handlers on `document` to track all "overs" and "outs" from elements with `data-tooltip` and manage tooltips from there. + +After the behavior is implemented, even people unfamiliar with JavaScript can add annotated elements. + +P.S. To keep things natural and simple: only one tooltip may show up at a time. diff --git a/2-ui/2-events/5-event-delegation/article.md b/2-ui/2-events/5-event-delegation/article.md index 13c3975e..364e79ef 100644 --- a/2-ui/2-events/5-event-delegation/article.md +++ b/2-ui/2-events/5-event-delegation/article.md @@ -240,6 +240,9 @@ Let's note once again what we did. Now, to add toggling functionality to an elem That may become really convenient -- no need to write JavaScript for every such element. Just use the behavior. The document-level handler makes it work for any element of the page. +We can combine multiple behaviors on a single element as well. + +The "behavior" pattern can be an alternative of mini-fragments of JavaScript. ## Summary diff --git a/2-ui/2-events/6-behavior/1-behavior-tooltip/solution.view/index.html b/2-ui/2-events/6-behavior/1-behavior-tooltip/solution.view/index.html deleted file mode 100644 index 7ad90f55..00000000 --- a/2-ui/2-events/6-behavior/1-behavior-tooltip/solution.view/index.html +++ /dev/null @@ -1,81 +0,0 @@ - - - - - - - - - - -

      ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя

      -

      ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя

      - - - - -

      Прокрутите страницу, чтобы ссылки были вверху и проверьте, правильно ли показываются подсказки.

      - - - - - - - \ No newline at end of file diff --git a/2-ui/2-events/6-behavior/1-behavior-tooltip/source.view/index.html b/2-ui/2-events/6-behavior/1-behavior-tooltip/source.view/index.html deleted file mode 100644 index 3af0269a..00000000 --- a/2-ui/2-events/6-behavior/1-behavior-tooltip/source.view/index.html +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - - - - - -

      ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя

      -

      ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя

      - - - - -

      Прокрутите страницу, чтобы ссылки были вверху и проверьте, правильно ли показываются подсказки.

      - - - - - - - \ No newline at end of file diff --git a/2-ui/2-events/6-behavior/1-behavior-tooltip/task.md b/2-ui/2-events/6-behavior/1-behavior-tooltip/task.md deleted file mode 100644 index e514be0b..00000000 --- a/2-ui/2-events/6-behavior/1-behavior-tooltip/task.md +++ /dev/null @@ -1,33 +0,0 @@ -importance: 5 - ---- - -# Поведение "подсказка" - -При наведении мыши на элемент, на нём возникает событие `mouseover`, при удалении мыши с элемента -- событие `mouseout`. - -Зная это, напишите JS-код, который будет делать так, что при наведении на элемент, если у него есть атрибут `data-tooltip` -- над ним будет показываться подсказка с содержимым этого атрибута. - -Например, две кнопки: - -```html - - -``` - -Результат в ифрейме с документом: - -[iframe src="solution" height=200 border=1] - -В этой задаче можно полагать, что в элементе с атрибутом `data-tooltip` -- только текст, то есть нет подэлементов. - -Детали оформления: - -- Подсказка должна появляться при наведении на элемент, по центру и на небольшом расстоянии сверху. При уходе курсора с элемента -- исчезать. -- Текст подсказки брать из значения атрибута `data-tooltip`. Это может быть произвольный HTML. -- Оформление подсказки должно задаваться CSS. -- Подсказка не должна вылезать за границы экрана, в том числе если страница частично прокручена. Если нельзя показать сверху -- показывать снизу элемента. - -Важно: нужно использовать приём разработки "поведение", то есть поставить обработчик (точнее два) на `document`, а не на каждый элемент. - -Плюс этого подхода -- динамически добавленные в DOM позже элементы автоматически получат этот функционал. \ No newline at end of file diff --git a/2-ui/2-events/6-behavior/article.md b/2-ui/2-events/6-behavior/article.md deleted file mode 100644 index 0a6a9de2..00000000 --- a/2-ui/2-events/6-behavior/article.md +++ /dev/null @@ -1,93 +0,0 @@ -# Приём проектирования "поведение" - -Шаблон проектирования "поведение" (behavior) позволяет задавать хитрые обработчики на элементе *декларативно*, установкой специальных HTML-атрибутов и классов. - -[cut] - -## Описание - -Приём проектирования "поведение" состоит из двух частей: - -1. Элементу ставится атрибут, описывающий его поведение. -2. При помощи делегирования ставится обработчик на документ, который ловит все клики и, если элемент имеет нужный атрибут, производит нужное действие. - -## Пример - -Например, добавим "поведение", которое всем элементам, у которых стоит атрибут `data-counter`, будет при клике увеличивать значение на `1`: - -```html run autorun height=60 -Счётчик: - -Ещё счётчик: - - - -``` - -Если запустить HTML-код выше, то при клике на каждую кнопку -- её значение будет увеличиваться. - -Конечно, нам важны не счётчики, а общий подход, который они демонстрируют. - -Элементов `data-counter` может быть сколько угодно. Новые могут добавляться в HTML в любой момент. При помощи делегирования мы, фактически, добавили новый "псевдо-стандартный" атрибут в HTML, который добавляет элементу новую возможность ("поведение"). - -## Ещё пример - -Добавим ещё поведение. - -Сделаем так, что при клике на элемент с атрибутом `data-toggle-id` будет скрываться/показываться элемент с заданным `id`: - -```html autorun run height=60 - - - - - -``` - -Ещё раз заметим, что мы сделали. Теперь для того, чтобы добавить скрытие-раскрытие любому элементу -- даже не надо знать JavaScript, можно просто написать атрибут `data-toggle-id`. - -Это бывает очень удобно -- не нужно писать JavaScript-код для каждого элемента, который должен служить такой кнопкой. Просто используем поведение. - -Обратите внимание: обработчик поставлен на `document`, клик на любом элементе страницы пройдёт через него, так что поведение определено глобально. - -```smart header="Не только атрибут" -Для своих целей мы можем использовать в HTML любые атрибуты, но стандарт рекомендует для своих целей называть атрибуты `data-*`. - -В обработчике `document.onclick` мы могли бы проверять не атрибут, а класс или что-то ещё, но с атрибутом -- проще и понятнее всего. - -Также для добавления обработчиков на `document` рекомендуется использовать `addEventListener`, чтобы можно было добавить более одного обработчика для типа события. -``` - -## Итого - -Шаблон "поведение" удобен тем, что сколь угодно сложное JavaScript-поведение можно "навесить" на элемент одним лишь атрибутом. А можно -- несколькими атрибутами на связанных элементах. - -Здесь мы рассмотрели базовый пример, который можно как угодно модифицировать и масштабировать. Важно не переусердствовать. - -Приём разработки "поведение" рекомендуется использовать для расширения возможностей разметки, как альтернативу мини-фрагментам JavaScript. -