Skip to content

Commit 81bb2e8

Browse files
dolgachiodolgachio
authored
Merge pull request #314 from malechaneit/focus-blur
Focus/blur. Translated article and tasks
2 parents 9674f75 + 4565fb2 commit 81bb2e8

20 files changed

Lines changed: 206 additions & 206 deletions

File tree

‎2-ui/4-forms-controls/2-focus-blur/3-editable-div/solution.view/index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@
99
<body>
1010

1111
<ul>
12-
<li>Click the div to edit.</li>
13-
<li>Enter or blur saves the result.</li>
12+
<li>Клікніть на div щоб відредагувати.</li>
13+
<li>Натискання Enter або втрата фокусу збереже вміст поля введення.</li>
1414
</ul>
1515

16-
HTML is allowed.
16+
HTML дозволено.
1717

18-
<div id="view" class="view">Text</div>
18+
<div id="view" class="view">Текст</div>
1919

2020
<script>
2121
let area = null;

‎2-ui/4-forms-controls/2-focus-blur/3-editable-div/solution.view/my.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,12 @@
1414
}
1515

1616
.edit {
17-
/* replace padding with border (still 3px not to shift the contents) */
17+
/* замінити padding на border (3px щоб не зміщувати вміст) */
1818
border: 3px solid blue;
1919
padding: 0px;
2020
}
2121

2222
.edit:focus {
23-
/* remove focus border in Safari */
23+
/* позбутися рамки при фокусуванні в Safari */
2424
outline: none;
2525
}

‎2-ui/4-forms-controls/2-focus-blur/3-editable-div/source.view/index.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,18 @@
99
<body>
1010

1111
<ul>
12-
<li>Click the div to edit.</li>
13-
<li>Enter or blur saves the result.</li>
12+
<li>Клікніть на div щоб відредагувати.</li>
13+
<li>Натискання Enter або втрата фокусу збереже вміст поля введення.</li>
1414
</ul>
1515

16-
HTML is allowed.
16+
HTML дозволено.
1717

18-
<div id="view" class="view">Text</div>
18+
<div id="view" class="view">Текст</div>
1919

2020
<script>
21-
// ...your code...
22-
// Note: <textarea> should have class="edit"
23-
// my.css has styles to make it the same size as div
21+
// ...ваш код...
22+
// Зауважте: елемент <textarea> повинен мати class="edit"
23+
// в my.css є стилі, які зроблять його такого ж розміру як і div
2424
</script>
2525

2626
</body>

‎2-ui/4-forms-controls/2-focus-blur/3-editable-div/source.view/my.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,12 @@
1414
}
1515

1616
.edit {
17-
/* replace padding with border (still 3px not to shift the contents) */
17+
/* замінити padding на border (3px щоб не зміщувати вміст) */
1818
border: 3px solid blue;
1919
padding: 0px;
2020
}
2121

2222
.edit:focus {
23-
/* remove focus border in Safari */
23+
/* позбутися рамки при фокусуванні в Safari */
2424
outline: none;
2525
}

‎2-ui/4-forms-controls/2-focus-blur/3-editable-div/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-
# Editable div
5+
# div, який можна відредагувати
66

7-
Create a `<div>` that turns into `<textarea>` when clicked.
7+
Створіть `<div>`, який при кліканні на ньому, перетворюється на `<textarea>`.
88

9-
The textarea allows to edit the HTML in the `<div>`.
9+
Текстова область дозволяє редагувати HTML всередині `<div>`.
1010

11-
When the user presses `key:Enter` or it loses focus, the `<textarea>` turns back into `<div>`, and its content becomes HTML in `<div>`.
11+
Коли користувач натискає `key:Enter` або `<textarea>` втрачає фокус, тоді знову з’являється `<div>`, який містить в собі HTML введений в `<textarea>`.
1212

1313
[demo src="solution"]

‎2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
1. On click -- replace `innerHTML` of the cell by `<textarea>` with same sizes and no border. Can use JavaScript or CSS to set the right size.
3-
2. Set `textarea.value` to `td.innerHTML`.
4-
3. Focus on the textarea.
5-
4. Show buttons OK/CANCEL under the cell, handle clicks on them.
2+
1. По кліку -- замінити `innerHTML` клітини на `<textarea>` того ж розміру, без рамки. Задати розміри можна як в CSS так і в JavaScript.
3+
2. Взяти значення `textarea.value` з `td.innerHTML`.
4+
3. Встановити фокус в текстову область.
5+
4. Показати кнопки ЗГОДА/ВІДМІНА під клітиною, опрацювати кліки на них.

‎2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/bagua.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* common styles for the table, no need to modify these */
1+
/* загальні стилі для таблиці, немає потреби редагувати */
22

33
th {
44
text-align: center;

‎2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/index.html‎

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -10,61 +10,61 @@
1010
<link rel="stylesheet" href="my.css">
1111

1212

13-
<p>Click on a table cell to edit it. Press OK or CANCEL when you finish.</p>
13+
<p>Клікніть на клітину щоб відредагувати. Натисніть ЗГОДА або ВІДМІНА щоб завершити.</p>
1414

1515
<table id="bagua-table">
1616
<tr>
17-
<th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
17+
<th colspan="3">Таблиця<em>Bagua</em>: Напрям, Елемент, Колір, Значення</th>
1818
</tr>
1919
<tr>
20-
<td class="nw"><strong>Northwest</strong>
21-
<br>Metal
22-
<br>Silver
23-
<br>Elders
20+
<td class="nw"><strong>Північний захід</strong>
21+
<br>Метал
22+
<br>Срібло
23+
<br>Старійшини
2424
</td>
25-
<td class="n"><strong>North</strong>
26-
<br>Water
27-
<br>Blue
28-
<br>Change
25+
<td class="n"><strong>Північ</strong>
26+
<br>Вода
27+
<br>Синій
28+
<br>Зміни
2929
</td>
30-
<td class="ne"><strong>Northeast</strong>
31-
<br>Earth
32-
<br>Yellow
33-
<br>Direction
30+
<td class="ne"><strong>Північний схід</strong>
31+
<br>Земля
32+
<br>Жовтий
33+
<br>Напрям
3434
</td>
3535
</tr>
3636
<tr>
37-
<td class="w"><strong>West</strong>
38-
<br>Metal
39-
<br>Gold
40-
<br>Youth
37+
<td class="w"><strong>Захід</strong>
38+
<br>Метал
39+
<br>Золото
40+
<br>Молодість
4141
</td>
42-
<td class="c"><strong>Center</strong>
43-
<br>All
44-
<br>Purple
45-
<br>Harmony
42+
<td class="c"><strong>Центр</strong>
43+
<br>Все
44+
<br>Багряний
45+
<br>Гармонія
4646
</td>
47-
<td class="e"><strong>East</strong>
48-
<br>Wood
49-
<br>Blue
50-
<br>Future
47+
<td class="e"><strong>Схід</strong>
48+
<br>Дерево
49+
<br>Синій
50+
<br>Майбутнє
5151
</td>
5252
</tr>
5353
<tr>
54-
<td class="sw"><strong>Southwest</strong>
55-
<br>Earth
56-
<br>Brown
57-
<br>Tranquility
54+
<td class="sw"><strong>Південний захід</strong>
55+
<br>Земля
56+
<br>Коричневий
57+
<br>Спокій
5858
</td>
59-
<td class="s"><strong>South</strong>
60-
<br>Fire
61-
<br>Orange
62-
<br>Fame
59+
<td class="s"><strong>Південь</strong>
60+
<br>Вогонь
61+
<br>Помаранчевий
62+
<br>Слава
6363
</td>
64-
<td class="se"><strong>Southeast</strong>
65-
<br>Wood
66-
<br>Green
67-
<br>Romance
64+
<td class="se"><strong>Південний схід</strong>
65+
<br>Дерево
66+
<br>Зелений
67+
<br>Роман
6868
</td>
6969
</tr>
7070

‎2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/my.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@
44
padding: 0;
55
display: block;
66

7-
/* remove resizing handle in Firefox */
7+
/* заборонити змінювати розмір в Firefox */
88
resize: none;
99

10-
/* remove outline on focus in Chrome */
10+
/* позбутися рамки при фокусуванні в Chrome */
1111
outline: none;
1212

13-
/* remove scrollbar in IE */
13+
/* позбутися прокрутки в IE */
1414
overflow: auto;
1515
}
1616

‎2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/script.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ let editingTd;
44

55
table.onclick = function(event) {
66

7-
// 3 possible targets
7+
// 3 можливі цілі
88
let target = event.target.closest('.edit-cancel,.edit-ok,td');
99

1010
if (!table.contains(target)) return;
@@ -14,7 +14,7 @@ table.onclick = function(event) {
1414
} else if (target.className == 'edit-ok') {
1515
finishTdEdit(editingTd.elem, true);
1616
} else if (target.nodeName == 'TD') {
17-
if (editingTd) return; // already editing
17+
if (editingTd) return; // вже редагується
1818

1919
makeTdEditable(target);
2020
}
@@ -27,7 +27,7 @@ function makeTdEditable(td) {
2727
data: td.innerHTML
2828
};
2929

30-
td.classList.add('edit-td'); // td is in edit state, CSS also styles the area inside
30+
td.classList.add('edit-td'); // td в режимі редагування, CSS також стилізує область всередині
3131

3232
let textArea = document.createElement('textarea');
3333
textArea.style.width = td.clientWidth + 'px';
@@ -40,7 +40,7 @@ function makeTdEditable(td) {
4040
textArea.focus();
4141

4242
td.insertAdjacentHTML("beforeEnd",
43-
'<div class="edit-controls"><button class="edit-ok">OK</button><button class="edit-cancel">CANCEL</button></div>'
43+
'<div class="edit-controls"><button class="edit-ok">ЗГОДА</button><button class="edit-cancel">ВІДМІНА</button></div>'
4444
);
4545
}
4646

0 commit comments

Comments
 (0)