Skip to content
Prev Previous commit
Next Next commit
Apply suggestions from code review
  • Loading branch information
dolgachio authored Mar 18, 2024
commit 3581caba5d17be35d8f8d2783fa17bb22b45ca10
Original file line number Diff line number Diff line change
Expand Up @@ -54,19 +54,19 @@

<p>Жила-була мама-свиня, у якої було троє поросят.</p>

<p>Троє поросят виросли такі великі, що їхня мати сказала їм: "Ви занадто великі, щоб жити тут далі. Ви повинні йти і будувати собі будинки. Але бережіть себе, щоб вовк вас не спіймав".</p>
<p>Троє поросят виросли такі великі, що їхня мати сказала їм: "Ви занадто великі, щоб жити тут далі. Ви повинні йти і будувати собі будинки. Але бережіть себе, щоб вовк вас не спіймав."</p>

<p>Троє поросят рушили. "Будемо берегти один одного, щоб вовк нас не спіймав", - сказали вони.</p>

<p>Незабаром вони зустріли чоловіка.<a href="https://uk.wikipedia.org/wiki/Троє_поросят" data-tooltip="Читайте далі…">Наведіть на мене вказівник</a></p>
<p>Незабаром вони зустріли чоловіка.<a href="https://uk.wikipedia.org/wiki/Троє_поросят" data-tooltip="Читайте далі…">Наведіть на мене мишу</a></p>

</div>

<script>
let tooltip;

document.onmouseover = function(event) {
// важливо: миша, що швидко рухається, може "стрибнути" прямо до дочірнього вузла на анотованому вузлі, пропускаючи батьківського
// важливо: миша, що швидко рухається, може "стрибнути" прямо до дочірнього вузла, пропускаючи батьківський
// тому mouseover може статися на дочірньому елементі.

let anchorElem = event.target.closest('[data-tooltip]');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,16 +32,16 @@ class HoverIntent {
onMouseOver(event) {

if (this.isOverElement) {
// якщо ми знову пройшли над елементом, ігноруємо подію
// ми вже вимірюємо швидкість
// якщо ми знову пройшли над елементом, ігноруємо подію,
// бо ми вже вимірюємо швидкість
return;
}

this.isOverElement = true;

// після кожного руху миші ми будемо перевіряти відстань
// між попередньою та поточною координатами миші
// якщо менше ніж значення sensitivity, швидкість повільна
// якщо ця відстань менше ніж значення sensitivity, швидкість повільна

this.prevX = event.pageX;
this.prevY = event.pageY;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ importance: 5

# "Розумна" підказка

Напишіть функцію, яка показуватиме спливаючу підказку над елементом лише тоді, коли відвідувач прямую вказівник миші безпосередньо *до нього*, але не *крізь нього*.
Напишіть функцію, яка показуватиме спливаючу підказку над елементом лише тоді, коли користувач веде вказівник миші безпосередньо *до нього*, але не *крізь нього*.

Іншими словами, якщо відвідувач наводить вказівник миші на елемент і зупиняється на ньому, показується підказка. І якщо просто провели мишею, то показувати підказку взагалі не потрібно, кому може сподобатись додаткове миготіння?
Іншими словами, якщо користувач наводить вказівник миші на елемент і зупиняється на ньому, показується підказка. І якщо просто провели мишею, то показувати підказку взагалі не потрібно, кому може сподобатись додаткове миготіння?

Технічно ми можемо виміряти швидкість я кою рухається вказівник над елементом, і якщо вона швидкість повільна, ми припускаємо, що вказівник проходить "над елементом" і показуємо спливаючу підказку, якщо вона швидка, ми ігноруємо цей прохід вказівника.
Технічно ми можемо виміряти швидкість з якою рухається вказівник над елементом, і якщо вона (швидкість) повільна, ми припускаємо, що вказівник проходить "над елементом" і показуємо спливаючу підказку, якщо вона швидка, ми ігноруємо цей прохід вказівника.

У цьому завданні ви маєте описати клас і створити універсальний об’єкт `new HoverIntent(options)`

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ let currentElem = null;

table.onmouseover = function(event) {
// перед переходом до нового елемента миша завжди залишає попередній
// якщо вже встановлено currentElem, то ми не залишили попередній <td>,
// якщо вже встановлено currentElem, то ми ще не залишили попередній <td>,
// і цей mouseover відбувається всередині, тому ігноруємо подію
if (currentElem) return;

Expand All @@ -16,7 +16,7 @@ table.onmouseover = function(event) {
// ігнорувати
if (!table.contains(target)) return;

// ура! ми перейщли до нового <td>
// ура! ми перейшли до нового <td>
currentElem = target;
onEnter(currentElem);
};
Expand Down