Skip to content

Commit cf9969f

Browse files
iliakaniliakan
committed
ok
1 parent 003272d commit cf9969f

File tree

26 files changed

+351
-545
lines changed

26 files changed

+351
-545
lines changed

‎2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.view/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020

2121

2222
<div id="field">
23-
<img src="https://en.js.gripe/clipart/ball.svg" width="40" height="40" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
23+
<img src="https://en.js.cx/clipart/ball.svg" width="40" height="40" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2424
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2525
</div>
2626

‎2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/source.view/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020

2121

2222
<div id="field">
23-
<img src="https://en.js.gripe/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
23+
<img src="https://en.js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2424
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2525
</div>
2626

‎2-ui/2-events/1-introduction-browser-events/04-move-ball-field/solution.view/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232

3333

3434
<div id="field">
35-
<img src="https://en.js.gripe/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
35+
<img src="https://en.js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3636
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3737
</div>
3838

‎2-ui/2-events/1-introduction-browser-events/04-move-ball-field/source.view/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121

2222

2323
<div id="field">
24-
<img src="https://en.js.gripe/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
24+
<img src="https://en.js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2525
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2626
</div>
2727

‎2-ui/2-events/5-event-delegation/1-hide-message-delegate/solution.md‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +0,0 @@
1-
Поставьте обработчик `click` на контейнере. Он должен проверять, произошел ли клик на кнопке удаления (`target`), и если да, то удалять соответствующий ей `DIV`.
2-

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

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,38 +8,33 @@
88

99
<body>
1010

11-
<div id="messages-container">
11+
<div id="container">
1212
<div class="pane">
13-
<h3>Лошадь</h3>
14-
<p>Домашняя лошадь — животное семейства непарнокопытных, одомашненный и единственный сохранившийся подвид дикой лошади, вымершей в дикой природе, за исключением небольшой популяции лошади Пржевальского.</p>
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>
1515
<button class="remove-button">[x]</button>
1616
</div>
1717
<div class="pane">
18-
<h3>Осёл</h3>
19-
<p>Домашний осёл или ишак — одомашненный подвид дикого осла, сыгравший важную историческую роль в развитии хозяйства и культуры человека. Все одомашненные ослы относятся к африканским ослам.</p>
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>
2020
<button class="remove-button">[x]</button>
2121
</div>
2222
<div class="pane">
23-
<h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3>
24-
<p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют
25-
тёлками.
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.
2625
</p>
2726
<button class="remove-button">[x]</button>
2827
</div>
2928
</div>
3029

31-
32-
3330
<script>
34-
var container = document.getElementById('messages-container');
35-
3631
container.onclick = function(event) {
37-
if (!event.target.classList.contains('remove-button')) return;
32+
if (event.target.className != 'remove-button') return;
3833

39-
event.target.parentNode.hidden = !event.target.parentNode.hidden;
40-
}
34+
let pane = event.target.closest('.pane');
35+
pane.remove();
36+
};
4137
</script>
4238

4339
</body>
44-
45-
</html>
40+
</html>

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

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,34 @@
22
<html>
33

44
<head>
5-
<link rel="stylesheet" type="text/css" href="messages.css">
5+
<link rel="stylesheet" href="messages.css">
66
<meta charset="utf-8">
77
</head>
88

99
<body>
1010

11-
Кнопка для удаления:
12-
<button class="remove-button">[x]</button>
13-
14-
<div>
11+
<div id="container">
1512
<div class="pane">
16-
<h3>Лошадь</h3>
17-
<p>Домашняя лошадь — животное семейства непарнокопытных, одомашненный и единственный сохранившийся подвид дикой лошади, вымершей в дикой природе, за исключением небольшой популяции лошади Пржевальского.</p>
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>
15+
<button class="remove-button">[x]</button>
1816
</div>
1917
<div class="pane">
20-
<h3>Осёл</h3>
21-
<p>Домашний осёл или ишак — одомашненный подвид дикого осла, сыгравший важную историческую роль в развитии хозяйства и культуры человека. Все одомашненные ослы относятся к африканским ослам.</p>
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>
20+
<button class="remove-button">[x]</button>
2221
</div>
2322
<div class="pane">
24-
<h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3>
25-
<p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют
26-
тёлками.
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.
2725
</p>
26+
<button class="remove-button">[x]</button>
2827
</div>
2928
</div>
3029

31-
</body>
30+
<script>
31+
// ...your code...
32+
</script>
3233

33-
</html>
34+
</body>
35+
</html>

‎2-ui/2-events/5-event-delegation/1-hide-message-delegate/source.view/messages.css‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ body {
66
h3 {
77
margin: 0;
88
padding-bottom: .3em;
9+
padding-right: 20px;
910
font-size: 1.1em;
1011
}
1112

@@ -18,15 +19,19 @@ p {
1819
background: #edf5e1;
1920
padding: 10px 20px 10px;
2021
border-top: solid 2px #c4df9b;
22+
position: relative;
2123
}
2224

2325
.remove-button {
26+
position: absolute;
2427
font-size: 110%;
28+
top: 0;
2529
color: darkred;
2630
right: 10px;
31+
display: block;
2732
width: 24px;
2833
height: 24px;
2934
border: none;
3035
background: transparent;
3136
cursor: pointer;
32-
}
37+
}

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

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

33
---
44

5-
# Скрытие сообщения с помощью делегирования
5+
# Hide messages with delegation
66

7-
Дан список сообщений. Добавьте каждому сообщению кнопку для его удаления.
7+
There's a list of messages with removal buttons `[x]`. Make the buttons work.
88

9-
**Используйте делегирование событий. Один обработчик для всего.**
10-
11-
В результате, должно работать вот так(кликните на крестик):
9+
Like this:
1210

1311
[iframe src="solution" height=420]
1412

13+
P.S. Should be only one event listener on the container, use event delegation.

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

Lines changed: 3 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,4 @@
1-
# Схема решения
2-
3-
Дерево устроено как вложенный список.
4-
5-
Клики на все элементы можно поймать, повесив единый обработчик `onclick` на внешний `UL`.
6-
7-
Как поймать клик на заголовке? Элемент `LI` является блочным, поэтому нельзя понять, был ли клик на *тексте*, или справа от него.
8-
9-
Например, ниже -- участок дерева с выделенными рамкой узлами. Кликните справа от любого заголовка. Видите, клик ловится? А лучше бы такие клики (не на тексте) игнорировать.
10-
11-
```html autorun height=190 untrusted
12-
<style>
13-
li {
14-
border: 1px solid green;
15-
}
16-
</style>
17-
18-
<ul onclick="alert(event.target)">
19-
<li>Млекопетающие
20-
<ul>
21-
<li>Коровы</li>
22-
<li>Ослы</li>
23-
<li>Собаки</li>
24-
<li>Тигры</li>
25-
</ul>
26-
</li>
27-
</ul>
28-
```
29-
30-
В примере выше видно, что проблема в верстке, в том что `LI` занимает всю ширину. Можно кликнуть справа от текста, это все еще `LI`.
31-
32-
Один из способов это поправить -- обернуть заголовки в дополнительный элемент `SPAN`, и обрабатывать только клики внутри `SPAN'ов`, получать по `SPAN'у` его родителя `LI` и ставить ему класс открыт/закрыт.
33-
34-
Напишите для этого JavaScript-код.
35-
36-
# Оборачиваем заголовки в SPAN
37-
38-
Следующий код ищет все `LI` и оборачивает текстовые узлы в `SPAN`.
39-
40-
```js
41-
var treeUl = document.getElementsByTagName('ul')[0];
42-
43-
var treeLis = treeUl.getElementsByTagName('li');
44-
45-
for (var i = 0; i < treeLis.length; i++) {
46-
var li = treeLis[i];
47-
48-
var span = document.createElement('span');
49-
li.insertBefore(span, li.firstChild); // добавить пустой SPAN
50-
span.appendChild(span.nextSibling); // переместить в него заголовок
51-
}
52-
```
53-
54-
Теперь можно отслеживать клики *на заголовках*.
55-
56-
Так выглядит дерево с обёрнутыми в `SPAN` заголовками и делегированием:
57-
58-
```html autorun height=190 untrusted
59-
<style>
60-
span {
61-
border: 1px solid red;
62-
}
63-
</style>
64-
65-
<ul onclick="alert(event.target.tagName)">
66-
<li><span>Млекопетающие</span>
67-
<ul>
68-
<li><span>Коровы</span></li>
69-
<li><span>Ослы</span></li>
70-
<li><span>Собаки</span></li>
71-
<li><span>Тигры</span></li>
72-
</ul>
73-
</li>
74-
</ul>
75-
```
76-
77-
Так как `SPAN` -- инлайновый элемент, он всегда такого же размера как текст. Да здравствует `SPAN`!
78-
79-
В реальной жизни дерево, скорее всего, будет сразу со `SPAN`: если HTML-код дерева генерируется на сервере, то это несложно, если дерево генерируется в JavaScript -- тем более просто.
80-
81-
# Итоговое решение
82-
83-
Для делегирования нужно по клику понять, на каком узле он произошел.
84-
85-
В нашем случае у `SPAN` нет детей-элементов, поэтому не нужно подниматься вверх по цепочке родителей. Достаточно просто проверить `event.target.tagName == 'SPAN'`, чтобы понять, где был клик, и спрятать потомков.
86-
87-
```js
88-
var tree = document.getElementsByTagName('ul')[0];
89-
90-
tree.onclick = function(event) {
91-
var target = event.target;
92-
93-
if (target.tagName != 'SPAN') {
94-
return; // клик был не на заголовке
95-
}
96-
97-
var li = target.parentNode; // получить родительский LI
98-
99-
// получить UL с потомками -- это первый UL внутри LI
100-
var childrenContainer = li.getElementsByTagName('ul')[0];
101-
102-
if (!childrenContainer) return; // потомков нет -- ничего не надо делать
103-
104-
// спрятать/показать (можно и через CSS-класс)
105-
childrenContainer.hidden = !childrenContainer.hidden;
106-
}
107-
```
108-
109-
Выделение узлов жирным при наведении делается при помощи CSS-селектора `:hover`.
1+
The solution has two parts.
1102

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.

0 commit comments

Comments
 (0)