You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html
+17-17
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@
6
6
<style>
7
7
body {
8
8
height:2000px;
9
-
/* the tooltip should work after page scroll too */
9
+
/* спливаюча підказка також має працювати після прокручування сторінки */
10
10
}
11
11
12
12
.tooltip {
@@ -49,42 +49,42 @@
49
49
<body>
50
50
51
51
52
-
<divdata-tooltip="Here is the house interior" id="house">
53
-
<divdata-tooltip="Here is the roof" id="roof"></div>
<p>Once upon a time there was a mother pig who had three little pigs.</p>
55
+
<p>Жила-була мама-свиня, у якої було троє поросят.</p>
56
56
57
-
<p>The three little pigs grew so big that their mother said to them, "You are too big to live here any longer. You must go and build houses for yourselves. But take care that the wolf does not catch you."</p>
57
+
<p>Троє поросят виросли такі великі, що їхня мати сказала їм: "Ви занадто великі, щоб жити тут далі. Ви повинні йти і будувати собі будинки. Але бережіть себе, щоб вовк вас не спіймав."</p>
58
58
59
-
<p>The three little pigs set off. "We will take care that the wolf does not catch us," they said.</p>
59
+
<p>Троє поросят рушили. "Будемо берегти один одного, щоб вовк нас не спіймав", - сказали вони.</p>
60
60
61
-
<p>Soon they met a man. <ahref="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="Read on…">Hover over me</a></p>
61
+
<p>Незабаром вони зустріли чоловіка.<ahref="https://uk.wikipedia.org/wiki/Троє_поросят" data-tooltip="Читайте далі…">Наведіть на мене мишу</a></p>
62
62
63
63
</div>
64
64
65
65
<script>
66
66
lettooltip;
67
67
68
68
document.onmouseover=function(event){
69
-
// important: a fast-moving mouse may "jump" right to a child on an annotated node, skipping the parent
70
-
// so mouseover may happen on a child.
69
+
// важливо: миша, що швидко рухається, може "стрибнути" прямо до дочірнього вузла, пропускаючи батьківський
70
+
// тому mouseover може статися на дочірньому елементі.
Copy file name to clipboardExpand all lines: 2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/source.view/index.html
+8-8
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@
6
6
<style>
7
7
body {
8
8
height:2000px;
9
-
/* the tooltip should work after page scroll too */
9
+
/* спливаюча підказка також має працювати після прокручування сторінки */
10
10
}
11
11
12
12
.tooltip {
@@ -49,21 +49,21 @@
49
49
<body>
50
50
51
51
52
-
<divdata-tooltip="Here is the house interior" id="house">
53
-
<divdata-tooltip="Here is the roof" id="roof"></div>
<p>Once upon a time there was a mother pig who had three little pigs.</p>
55
+
<p>Жила-була мама-свиня, у якої було троє поросят.</p>
56
56
57
-
<p>The three little pigs grew so big that their mother said to them, "You are too big to live here any longer. You must go and build houses for yourselves. But take care that the wolf does not catch you."</p>
57
+
<p>Троє поросят виросли такі великі, що їхня мати сказала їм: "Ви занадто великі, щоб жити тут далі. Ви повинні йти і будувати собі будинки. Але бережіть себе, щоб вовк вас не спіймав."</p>
58
58
59
-
<p>The three little pigs set off. "We will take care that the wolf does not catch us," they said.</p>
59
+
<p>Троє поросят рушили. "Будемо берегти один одного, щоб вовк нас не спіймав", - сказали вони.</p>
60
60
61
-
<p>Soon they met a man. <ahref="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="Read on…">Hover over me</a></p>
61
+
<p>Незабаром вони зустріли чоловіка.<ahref="https://uk.wikipedia.org/wiki/Троє_поросят" data-tooltip="Читайте далі…">Наведіть на мене мишу</a></p>
Copy file name to clipboardExpand all lines: 2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/task.md
+9-9
Original file line number
Diff line number
Diff line change
@@ -2,24 +2,24 @@ importance: 5
2
2
3
3
---
4
4
5
-
# Improved tooltip behavior
5
+
# Покращена поведінка спливаючої підказки
6
6
7
-
Write JavaScript that shows a tooltip over an element with the attribute `data-tooltip`. The value of this attribute should become the tooltip text.
7
+
Напишіть JavaScript, який покаже спливаючу підказку над елементом із атрибутом `data-tooltip`. Значення цього атрибута має стати текстом підказки.
8
8
9
-
That's like the task <info:task/behavior-tooltip>, but here the annotated elements can be nested. The most deeply nested tooltip is shown.
9
+
Це як задача <info:task/behavior-tooltip>, але тут елементи можуть бути вкладеними. Ви маєте показати найбільш глибоко вкладену підказку.
10
10
11
-
Only one tooltip may show up at the same time.
11
+
Одночасно може відображатися лише одна підказка.
12
12
13
-
For instance:
13
+
Наприклад:
14
14
15
15
```html
16
-
<divdata-tooltip="Here – is the house interior"id="house">
17
-
<divdata-tooltip="Here – is the roof"id="roof"></div>
1.Put `onmouseover/out`handlers on the element. Also can use `onmouseenter/leave` here, but they are less universal, won't work if we introduce delegation.
4
-
2.When a mouse cursor entered the element, start measuring the speed on`mousemove`.
5
-
3.If the speed is slow, then run`over`.
6
-
4.When we're going out of the element, and`over`was executed, run`out`.
2
+
Алгоритм виглядає просто:
3
+
1.Додайте обробники `onmouseover/out`на елемент. Тут також можна використовувати `onmouseenter/leave`, але вони менш універсальні, і не працюватимуть, якщо ми використаємо делегування подій.
4
+
2.Коли вказівник миші увійшов на елемент, почніть вимірювати швидкість на`mousemove`.
5
+
3.Якщо швидкість низька, то запускаємо`over`.
6
+
4.Коли вказівник виходить за межі елемента, і`over`закінчила свою роботу, запускаємо`out`.
7
7
8
-
But how to measure the speed?
8
+
Але як виміряти швидкість?
9
9
10
-
The first idea can be: run a function every `100ms`and measure the distance between previous and new coordinates. If it's small, then the speed is small.
10
+
Перша ідея може бути такою: запускати функцію кожні `100ms`і вимірювати відстань між попередньою та новою координатами. Якщо відстань маленька, то швидкість невелика.
11
11
12
-
Unfortunately, there's no way to get "current mouse coordinates" in JavaScript. There's no function like`getCurrentMouseCoordinates()`.
12
+
На жаль, у JavaScript немає способу отримати поточні координати вказівника миші. Немає таких функцій, як`getCurrentMouseCoordinates()`.
13
13
14
-
The only way to get coordinates is to listen for mouse events, like`mousemove`, and take coordinates from the event object.
14
+
Єдиний спосіб отримати координати -- в обробнику подій миші, наприклад`mousemove`, і брати координати з об’єкта події.
15
15
16
-
So let's set a handler on `mousemove` to track coordinates and remember them. And then compare them, once per`100ms`.
16
+
Отже, давайте додамо обробник на `mousemove`, де відстежемо і запам'ятаємо поточні координати. А далі будемо порівнювати їх раз на`100ms`.
17
17
18
-
P.S. Please note: the solution tests use `dispatchEvent` to see if the tooltip works right.
18
+
P.S. Зверніть увагу: тести рішення використовують `dispatchEvent`, щоб перевірити, чи підказка працює правильно.
Copy file name to clipboardExpand all lines: 2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js
+13-13
Original file line number
Diff line number
Diff line change
@@ -3,8 +3,8 @@
3
3
classHoverIntent{
4
4
5
5
constructor({
6
-
sensitivity =0.1,// speed less than 0.1px/ms means "hovering over an element"
7
-
interval =100,// measure mouse speed once per 100ms
6
+
sensitivity =0.1,// швидкість менше 0,1 пікселів/мс означає "наведення вказівника на елемент"
7
+
interval =100,// вимірювати швидкість миші раз на 100ms: обчислити відстань між попередньою та наступною точками
8
8
elem,
9
9
over,
10
10
out
@@ -15,12 +15,12 @@ class HoverIntent {
15
15
this.over=over;
16
16
this.out=out;
17
17
18
-
// make sure "this" is the object in event handlers.
18
+
// переконайтеся, що "this" є нашми об’єктом в обробниках подій.
19
19
this.onMouseMove=this.onMouseMove.bind(this);
20
20
this.onMouseOver=this.onMouseOver.bind(this);
21
21
this.onMouseOut=this.onMouseOut.bind(this);
22
22
23
-
// and in time-measuring function (called from setInterval)
23
+
// і у функції вимірювання часу (викликається з setInterval)
Copy file name to clipboardExpand all lines: 2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/hoverIntent.js
+9-9
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,12 @@
1
1
'use strict';
2
2
3
-
// Here's a brief sketch of the class
4
-
// with things that you'll need anyway
3
+
// Ось короткий нарис класу
4
+
// з речами, які все одно знадобляться
5
5
classHoverIntent{
6
6
7
7
constructor({
8
-
sensitivity =0.1,// speed less than 0.1px/ms means "hovering over an element"
9
-
interval =100,// measure mouse speed once per 100ms: calculate the distance between previous and next points
8
+
sensitivity =0.1,// швидкість менше 0,1 пікселів/мс означає "наведення вказівника на елемент"
9
+
interval =100,// вимірювати швидкість миші раз на 100ms: обчислити відстань між попередньою та наступною точками
10
10
elem,
11
11
over,
12
12
out
@@ -17,16 +17,16 @@ class HoverIntent {
17
17
this.over=over;
18
18
this.out=out;
19
19
20
-
// make sure "this" is the object in event handlers.
20
+
// переконайтеся, що "this" є нашим об’єктом в обробниках подій.
0 commit comments