Skip to content

Commit ea22bf7

Browse files
OlhaBrozhenetsOlhaBrozhenets
authored
Event delegation (#262)
1 parent d1dd2b8 commit ea22bf7

File tree

15 files changed

+267
-267
lines changed

15 files changed

+267
-267
lines changed

‎2-ui/2-events/03-event-delegation/1-hide-message-delegate/solution.view/index.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,18 @@
1010

1111
<div id="container">
1212
<div class="pane">
13-
<h3>Horse</h3>
14-
<p>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.</p>
13+
<h3>Кінь</h3>
14+
<p>Кінь є одним із двох існуючих підвидів дикого коня (Equus ferus). Це парнокопитний ссавець, що належить до таксономічної родини коневих (Equidae). За останні 45-55 мільйонів років кінь еволюціонував із маленької багатопалої істоти, Еогіппа (Eohippus), до великої однопалої тварини сучасності.</p>
1515
<button class="remove-button">[x]</button>
1616
</div>
1717
<div class="pane">
18-
<h3>Donkey</h3>
19-
<p>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.</p>
18+
<h3>Осел</h3>
19+
<p>Осел (Equus africanus asinus) є одомашненим представником сімейства коней (Equidae). Диким предком осла є африканський дикий осел (E. africanus). Осел використовувався як робоча тварина щонайменше 5000 років.</p>
2020
<button class="remove-button">[x]</button>
2121
</div>
2222
<div class="pane">
23-
<h3>Cat</h3>
24-
<p>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.
23+
<h3>Кіт</h3>
24+
<p>Домашній кіт (лат. Felis catus) — невеликий, типово пухнастий, хижий ссавець. Їх часто називають домашніми котами, якщо їх триваюсь вдома, або просто котами, коли немає необхідності відрізняти їх від інших котячих. Люди часто цінують котів за товариські стосунки і за їх здатність полювати на шкідників.
2525
</p>
2626
<button class="remove-button">[x]</button>
2727
</div>

‎2-ui/2-events/03-event-delegation/1-hide-message-delegate/source.view/index.html

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,25 +10,25 @@
1010

1111
<div id="container">
1212
<div class="pane">
13-
<h3>Horse</h3>
14-
<p>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.</p>
13+
<h3>Кінь</h3>
14+
<p>Кінь є одним із двох існуючих підвидів дикого коня (Equus ferus). Це парнокопитний ссавець, що належить до таксономічної родини коневих (Equidae). За останні 45-55 мільйонів років кінь еволюціонував із маленької багатопалої істоти, Еогіппа (Eohippus), до великої однопалої тварини сучасності.</p>
1515
<button class="remove-button">[x]</button>
1616
</div>
1717
<div class="pane">
18-
<h3>Donkey</h3>
19-
<p>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.</p>
18+
<h3>Осел</h3>
19+
<p>Осел (Equus africanus asinus) є одомашненим представником сімейства коней (Equidae). Диким предком осла є африканський дикий осел (E. africanus). Осел використовувався як робоча тварина щонайменше 5000 років.</p>
2020
<button class="remove-button">[x]</button>
2121
</div>
2222
<div class="pane">
23-
<h3>Cat</h3>
24-
<p>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.
23+
<h3>Кіт</h3>
24+
<p>Домашній кіт (лат. Felis catus) — невеликий, типово пухнастий, хижий ссавець. Їх часто називають домашніми котами, якщо їх триваюсь вдома, або просто котами, коли немає необхідності відрізняти їх від інших котячих. Люди часто цінують котів за товариські стосунки і за їх здатність полювати на шкідників.
2525
</p>
2626
<button class="remove-button">[x]</button>
2727
</div>
2828
</div>
2929

3030
<script>
31-
// ...your code...
31+
// ...Ваш код...
3232
</script>
3333

3434
</body>

‎2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ importance: 5
22

33
---
44

5-
# Hide messages with delegation
5+
# Приховайте повідомлення за допомогою делегування
66

7-
There's a list of messages with removal buttons `[x]`. Make the buttons work.
7+
Є список повідомлень із кнопками видалення `[x]`. Зробіть так, щоб кнопки працювали.
88

9-
Like this:
9+
В результаті має працювати наступним чином:
1010

1111
[iframe src="solution" height=420]
1212

13-
P.S. Should be only one event listener on the container, use event delegation.
13+
P.S. У контейнері має бути лише один прослуховувач подій, використовуйте делегування.

‎2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
The solution has two parts.
1+
Рішення складається з двох частин.
22

3-
1. Wrap every tree node title into `<span>`. Then we can CSS-style them on `:hover` and handle clicks exactly on text, because `<span>` width is exactly the text width (unlike without it).
4-
2. Set a handler to the `tree` root node and handle clicks on that `<span>` titles.
3+
1. Обертаємо кожен заголовок дерева в `<span>`. Тоді ми можемо додати їм CSS стилі на `:hover` і обробляти клік саме по тексту, тому що ширина `<span>` повністю співпадає з шириною тексту.
4+
2. Встановлюємо обробник на кореневий вузол `tree` та обробляємо кліки на елементах `<span>`, які містять заголовки.

‎2-ui/2-events/03-event-delegation/2-sliding-tree/solution.view/index.html

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -17,60 +17,60 @@
1717
<body>
1818

1919
<ul class="tree" id="tree">
20-
<li>Animals
20+
<li>Тварини
2121
<ul>
22-
<li>Mammals
22+
<li>Ссавці
2323
<ul>
24-
<li>Cows</li>
25-
<li>Donkeys</li>
26-
<li>Dogs</li>
27-
<li>Tigers</li>
24+
<li>Корови</li>
25+
<li>Осли</li>
26+
<li>Собаки</li>
27+
<li>Тигри</li>
2828
</ul>
2929
</li>
30-
<li>Other
30+
<li>Інші
3131
<ul>
32-
<li>Snakes</li>
33-
<li>Birds</li>
34-
<li>Lizards</li>
32+
<li>Змії</li>
33+
<li>Птахи</li>
34+
<li>Ящірки</li>
3535
</ul>
3636
</li>
3737
</ul>
3838
</li>
39-
<li>Fishes
39+
<li>Риби
4040
<ul>
41-
<li>Aquarium
41+
<li>Акваріумні
4242
<ul>
43-
<li>Guppy</li>
44-
<li>Angelfish</li>
43+
<li>Гуппі</li>
44+
<li>Риба-янгол</li>
4545
</ul>
4646
</li>
47-
<li>Sea
47+
<li>Морські
4848
<ul>
49-
<li>Sea trout</li>
49+
<li>Морська форель</li>
5050
</ul>
5151
</li>
5252
</ul>
5353
</li>
5454
</ul>
5555

5656
<script>
57-
// move all text into <span>
58-
// they occupy exactly the place necessary for the text,
57+
// помістіть кожен текстовий вузол у елемент <span>
58+
// він займає саме те місце, яке необхідне для тексту,
5959
for (let li of tree.querySelectorAll('li')) {
6060
let span = document.createElement('span');
6161
li.prepend(span);
62-
span.append(span.nextSibling); // move the text node into span
62+
span.append(span.nextSibling); // поміщаємо текстовий вузол у span
6363
}
6464

65-
// catch clicks on whole tree
65+
// ловимо кліки на всьому дереві
6666
tree.onclick = function(event) {
6767

6868
if (event.target.tagName != 'SPAN') {
6969
return;
7070
}
7171

7272
let childrenContainer = event.target.parentNode.querySelector('ul');
73-
if (!childrenContainer) return; // no children
73+
if (!childrenContainer) return; // дітей немає
7474

7575
childrenContainer.hidden = !childrenContainer.hidden;
7676
}

‎2-ui/2-events/03-event-delegation/2-sliding-tree/source.view/index.html

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,36 +6,36 @@
66
<body>
77

88
<ul class="tree" id="tree">
9-
<li>Animals
9+
<li>Тварини
1010
<ul>
11-
<li>Mammals
11+
<li>Ссавці
1212
<ul>
13-
<li>Cows</li>
14-
<li>Donkeys</li>
15-
<li>Dogs</li>
16-
<li>Tigers</li>
13+
<li>Корови</li>
14+
<li>Осли</li>
15+
<li>Собаки</li>
16+
<li>Тигри</li>
1717
</ul>
1818
</li>
19-
<li>Other
19+
<li>Інші
2020
<ul>
21-
<li>Snakes</li>
22-
<li>Birds</li>
23-
<li>Lizards</li>
21+
<li>Змії</li>
22+
<li>Птахи</li>
23+
<li>Ящірки</li>
2424
</ul>
2525
</li>
2626
</ul>
2727
</li>
28-
<li>Fishes
28+
<li>Риби
2929
<ul>
30-
<li>Aquarium
30+
<li>Акваріумні
3131
<ul>
32-
<li>Guppy</li>
33-
<li>Angelfish</li>
32+
<li>Гуппі</li>
33+
<li>Риба-янгол</li>
3434
</ul>
3535
</li>
36-
<li>Sea
36+
<li>Морські
3737
<ul>
38-
<li>Sea trout</li>
38+
<li>Морська форель</li>
3939
</ul>
4040
</li>
4141
</ul>

‎2-ui/2-events/03-event-delegation/2-sliding-tree/task.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@ importance: 5
22

33
---
44

5-
# Tree menu
5+
# Деревоподібне меню
66

7-
Create a tree that shows/hides node children on click:
7+
Створіть дерево, яке показує/приховує дочірні вузли при кліці:
88

99
[iframe border=1 src="solution"]
1010

11-
Requirements:
11+
Вимоги:
1212

13-
- Only one event handler (use delegation)
14-
- A click outside the node title (on an empty space) should not do anything.
13+
- Тільки один обробник подій (використовуйте делегування)
14+
- Клік поза заголовком вузла (на порожньому місці) не має нічого робити.

‎2-ui/2-events/03-event-delegation/3-sortable-table/solution.view/index.html

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -25,30 +25,30 @@
2525
<table id="grid">
2626
<thead>
2727
<tr>
28-
<th data-type="number">Age</th>
29-
<th data-type="string">Name</th>
28+
<th data-type="number">Вік</th>
29+
<th data-type="string">Ім’я</th>
3030
</tr>
3131
</thead>
3232
<tbody>
3333
<tr>
3434
<td>5</td>
35-
<td>John</td>
35+
<td>Іван</td>
3636
</tr>
3737
<tr>
3838
<td>2</td>
39-
<td>Pete</td>
39+
<td>Петро</td>
4040
</tr>
4141
<tr>
4242
<td>12</td>
43-
<td>Ann</td>
43+
<td>Ганна</td>
4444
</tr>
4545
<tr>
4646
<td>9</td>
47-
<td>Eugene</td>
47+
<td>Євген</td>
4848
</tr>
4949
<tr>
5050
<td>1</td>
51-
<td>Ilya</td>
51+
<td>Ілля</td>
5252
</tr>
5353
</tbody>
5454
</table>
@@ -59,10 +59,10 @@
5959
if (e.target.tagName != 'TH') return;
6060

6161
let th = e.target;
62-
// if TH, then sort
63-
// cellIndex is the number of th:
64-
// 0 for the first column
65-
// 1 for the second column, etc
62+
// якщо клітинка TH, тоді сортувати
63+
// cellIndex - це номер клітинки th:
64+
// 0 для першого стовпця
65+
// 1 для другого і т.д.
6666
sortGrid(th.cellIndex, th.dataset.type);
6767
};
6868

@@ -71,7 +71,7 @@
7171

7272
let rowsArray = Array.from(tbody.rows);
7373

74-
// compare(a, b) compares two rows, need for sorting
74+
// compare(a, b) порівнює два рядки, необхідно для сортування
7575
let compare;
7676

7777
switch (type) {
@@ -87,7 +87,7 @@
8787
break;
8888
}
8989

90-
// sort
90+
// сортування
9191
rowsArray.sort(compare);
9292

9393
tbody.append(...rowsArray);

‎2-ui/2-events/03-event-delegation/3-sortable-table/source.view/index.html

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,18 @@
55
<meta charset="utf-8">
66
<style>
77
table {
8-
border-collapse: collapse;
9-
}
10-
th, td {
11-
border: 1px solid black;
12-
padding: 4px;
13-
}
14-
th {
15-
cursor: pointer;
16-
}
17-
th:hover {
18-
background: yellow;
19-
}
8+
border-collapse: collapse;
9+
}
10+
th, td {
11+
border: 1px solid black;
12+
padding: 4px;
13+
}
14+
th {
15+
cursor: pointer;
16+
}
17+
th:hover {
18+
background: yellow;
19+
}
2020
</style>
2121
</head>
2222

@@ -25,36 +25,36 @@
2525
<table id="grid">
2626
<thead>
2727
<tr>
28-
<th data-type="number">Age</th>
29-
<th data-type="string">Name</th>
28+
<th data-type="number">Вік</th>
29+
<th data-type="string">Ім’я</th>
3030
</tr>
3131
</thead>
3232
<tbody>
3333
<tr>
3434
<td>5</td>
35-
<td>John</td>
35+
<td>Іван</td>
3636
</tr>
3737
<tr>
3838
<td>2</td>
39-
<td>Pete</td>
39+
<td>Петро</td>
4040
</tr>
4141
<tr>
4242
<td>12</td>
43-
<td>Ann</td>
43+
<td>Ганна</td>
4444
</tr>
4545
<tr>
4646
<td>9</td>
47-
<td>Eugene</td>
47+
<td>Євген</td>
4848
</tr>
4949
<tr>
5050
<td>1</td>
51-
<td>Ilya</td>
51+
<td>Ілля</td>
5252
</tr>
5353
</tbody>
5454
</table>
5555

5656
<script>
57-
// ...your code...
57+
// ...Ваш код...
5858
</script>
5959

6060
</body>

0 commit comments

Comments
 (0)