Moving the mouse: mouseover/out, mouseenter/leave

Author: pasor1

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/task.md

@@ -2,24 +2,24 @@ importance: 5
 
 ---
 
-# Improved tooltip behavior
+# Comportamento del tooltip migliorato
 
-Write JavaScript that shows a tooltip over an element with the attribute `data-tooltip`. The value of this attribute should become the tooltip text.
+Scrivere del codice JavaScript che mostri un tooltip su un elemento con un attributo `data-tooltip`. Il valore di questo attributo dovrebbe rappresentare il testo del tooltip.
 
-That's like the task <info:task/behavior-tooltip>, but here the annotated elements can be nested. The most deeply nested tooltip is shown.
+Questo compito è come quello di <info:task/behavior-tooltip>, con la differenza che qui gli elementi delle annotazioni possono essere annidati. Deve essere mostrato il tooltip più annidato.
 
-Only one tooltip may show up at the same time.
+Può essere mostrato solo un tooltip alla volta.
 
-For instance:
+Per esempio:
 
 ```html
-<div data-tooltip="Here – is the house interior" id="house">
-  <div data-tooltip="Here – is the roof" id="roof"></div>
+<div data-tooltip="Qui – l'interno della casa" id="house">
+  <div data-tooltip="Qui – il tetto" id="roof"></div>
   ...
-  <a href="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="Read on…">Hover over me</a>
+  <a href="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="Leggi…">Hover su di me</a>
 </div>
 ```
 
-The result in iframe:
+Il risultato dell'iframe:
 
 [iframe src="solution" height=300 border=1]

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.md

@@ -1,18 +1,18 @@
 
-The algorithm looks simple:
-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.
-2. When a mouse cursor entered the element, start measuring the speed on `mousemove`.
-3. If the speed is slow, then run `over`.
-4. When we're going out of the element, and `over` was executed, run `out`.
+L'algoritmo è semplice:
+1. Impostare dei gestori `onmouseover/out` sull'elemento. Qui si possono anche usare `onmouseenter/leave`, però sono meno universali, e non funzionerebbero se introducessimo l'uso della delegation.
+2. Quando il puntatore è entrato dentro l'elemento, si comincia a misurare la velocità al `mousemove`.
+3. Se la velocità è lenta, eseguire `over`.
+4. Quando si esce fuori dall'elemento, ed è stato eseguito `over`, eseguire `out`.
 
-But how to measure the speed?
+Ma come misurare la velocità?
 
-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.
+La prima strategia potrebbe essere: eseguire una funzione ogni `100ms` e misurare la distanza tra le vecchie e nuove coordinate. Se fosse piccola, anche la velocità lo sarebbe.
 
-Unfortunately, there's no way to get "current mouse coordinates" in JavaScript. There's no function like `getCurrentMouseCoordinates()`.
+Sfortunatamente, non c'è modo di ricavare "le coordinate attuali del mouse" in JavaScript. Non esistono funzioni come `getCurrentMouseCoordinates()`.
 
-The only way to get coordinates is to listen for mouse events, like `mousemove`, and take coordinates from the event object.
+L'unico modo è di mettersi in ascolto sugli eventi del mouse, come `mousemove`, e prendere le coordinate dall'oggetto evento.
 
-So let's set a handler on `mousemove` to track coordinates and remember them. And then compare them, once per `100ms`.
+Quindi impostiamo un gestore su `mousemove` per tenere traccia delle coordinate e memorizzarle, per poi confrontarle ogni `100ms`.
 
-P.S. Please note: the solution tests use `dispatchEvent` to see if the tooltip works right.
+P.S.: Nota bene: i test della soluzione fanno uso di `dispatchEvent` per vedere se il tooltip funziona bene.

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js

@@ -3,8 +3,8 @@
 class HoverIntent {
 
   constructor({
-    sensitivity = 0.1, // speed less than 0.1px/ms means "hovering over an element"
-    interval = 100,    // measure mouse speed once per 100ms
+    sensitivity = 0.1, // velocità inferiore a 0.1px/ms indica "hovering su un elemento"
+    interval = 100,    // misura la velocità del mouse ogni 100ms
     elem,
     over,
     out
@@ -15,12 +15,12 @@ class HoverIntent {
     this.over = over;
     this.out = out;
 
-    // make sure "this" is the object in event handlers.
+    // si assicura che "this" sia l'oggetto nei gestori evento.
     this.onMouseMove = this.onMouseMove.bind(this);
     this.onMouseOver = this.onMouseOver.bind(this);
     this.onMouseOut = this.onMouseOut.bind(this);
 
-    // and in time-measuring function (called from setInterval)
+    // e che nella funzione che misura il tempo (chiamata da setInterval)
     this.trackSpeed = this.trackSpeed.bind(this);
 
     elem.addEventListener("mouseover", this.onMouseOver);
@@ -32,16 +32,16 @@ class HoverIntent {
   onMouseOver(event) {
 
     if (this.isOverElement) {
-      // if we're over the element, then ignore the event
-      // we are already measuring the speed
+      // se siamo sull'elemento, ignoriamo l'evento
+      // dato che stiamo già misurando la velocità
       return;
     }
 
     this.isOverElement = true;
 
-    // after every mousemove we'll be check the distance
-    // between the previous and the current mouse coordinates
-    // if it's less than sensivity, then the speed is slow
+    // dopo ogni mousemove controlliamo la distanza
+    // tra le coordinate attuali e le precedenti
+    // se e' minore della "sensibilità", allora la velocità sarà bassa
 
     this.prevX = event.pageX;
     this.prevY = event.pageY;
@@ -52,13 +52,13 @@ class HoverIntent {
   }
 
   onMouseOut(event) {
-    // if left the element
+    // se ha abbandonato l'elemento
     if (!event.relatedTarget || !elem.contains(event.relatedTarget)) {
       this.isOverElement = false;
       this.elem.removeEventListener('mousemove', this.onMouseMove);
       clearInterval(this.checkSpeedInterval);
       if (this.isHover) {
-        // if there was a stop over the element
+        // se c'è stato uno stop sull'elemento
         this.out.call(this.elem, event);
         this.isHover = false;
       }
@@ -76,7 +76,7 @@ class HoverIntent {
     let speed;
 
     if (!this.lastTime || this.lastTime == this.prevTime) {
-      // cursor didn't move
+      // il cursore non si è mosso
       speed = 0;
     } else {
       speed = Math.sqrt(
@@ -90,7 +90,7 @@ class HoverIntent {
       this.isHover = true;
       this.over.call(this.elem, event);
     } else {
-      // speed fast, remember new coordinates as the previous ones
+      // alta velocità, memorizza le nuove coordinate come quelle precedenti
       this.prevX = this.lastX;
       this.prevY = this.lastY;
       this.prevTime = this.lastTime;

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/hoverIntent.js

@@ -1,12 +1,12 @@
 'use strict';
 
-// Here's a brief sketch of the class
-// with things that you'll need anyway
+// Ecco una bozza
+// con le cose di cui avrete bisogno
 class HoverIntent {
 
   constructor({
-    sensitivity = 0.1, // speed less than 0.1px/ms means "hovering over an element"
-    interval = 100, // measure mouse speed once per 100ms: calculate the distance between previous and next points
+    sensitivity = 0.1, // una velocità inferiore a 0.1px/ms indica "hovering su un elemento"
+    interval = 100, // misura la velocità del mouse ogni 100ms
     elem,
     over,
     out
@@ -17,16 +17,16 @@ class HoverIntent {
     this.over = over;
     this.out = out;
 
-    // make sure "this" is the object in event handlers.
+    // si assicura che "this" sia l'oggetto nei gestori evento.
     this.onMouseMove = this.onMouseMove.bind(this);
     this.onMouseOver = this.onMouseOver.bind(this);
     this.onMouseOut = this.onMouseOut.bind(this);
 
-    // assign the handlers
+    // assegna i gestori
     elem.addEventListener("mouseover", this.onMouseOver);
     elem.addEventListener("mouseout", this.onMouseOut);
 
-    // continue from this point
+    // continua da questo punto
 
   }
 
@@ -44,8 +44,8 @@ class HoverIntent {
 
 
   destroy() {
-    /* your code to "disable" the functionality, remove all handlers */
-    /* it's needed for the tests to work */
+    /* il tuo codice per "disattivare" la funzionalità, che rimuove tutti i gestori  */
+    /* è necessario per fare funzionare i test */
   }
 
 }

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md

@@ -4,28 +4,28 @@ importance: 5
 
 # "Smart" tooltip
 
-Write a function that shows a tooltip over an element only if the visitor moves the mouse *to it*, but not *through it*.
+Scrivere una funzione che mostri un tooltip su un elemento solo se l'utente sposta il mouse *su di esso*, e non *attraverso di esso*.
 
-In other words, if the visitor moves the mouse to the element and stops there -- show the tooltip. And if they just moved the mouse through, then no need, who wants extra blinking?
+In altre parole, se il visitatore sposta il mouse su questo elemento e si ferma lì -- mostra il tooltip. Se invece ha solo spostato il mouse passandoci sopra, non ce n'è bisogno, d'altronde chi mai vorrebbe altri elementi lampeggianti non desiderati?
 
-Technically, we can measure the mouse speed over the element, and if it's slow then we assume that it comes "over the element" and show the tooltip, if it's fast -- then we ignore it.
+Tecnicamente, possiamo misurare la velocità del mouse su un elemento, e se è abbastanza lento possiamo supporre che sta arrivando proprio "sull'elemento", mostrando il tooltip, se è troppo veloce -- lo ignoriamo.
 
-Make a universal object `new HoverIntent(options)` for it.
+Creare un oggetto universale `new HoverIntent(options)` utile allo scopo.
 
-Its `options`:
-- `elem` -- element to track.
-- `over` -- a function to call if the mouse came to the element: that is, it moves slowly or stopped over it.
-- `out` -- a function to call when the mouse leaves the element (if `over` was called).
+Le opzioni possibili `options`:
+- `elem` -- elemento da tracciare.
+- `over` -- una funzione da chiamare se il mouse arriva sull'elemento: ossia, se si muove lentamente o se si ferma sull'elemento.
+- `out` -- una funzione da chiamare quando il mouse abbandona l'elemento (se è stato chiamato `over`).
 
-An example of using such object for the tooltip:
+Ecco un esempio dell'uso di questo oggetto per il tooltip:
 
 ```js
-// a sample tooltip
+// un tooltip di esempio
 let tooltip = document.createElement('div');
 tooltip.className = "tooltip";
 tooltip.innerHTML = "Tooltip";
 
-// the object will track mouse and call over/out
+// l'oggetto tiene traccia del mouse e chiama over/out
 new HoverIntent({
   elem,
   over() {
@@ -39,10 +39,10 @@ new HoverIntent({
 });
 ```
 
-The demo:
+La demo:
 
 [iframe src="solution" height=140]
 
-If you move the mouse over the "clock" fast then nothing happens, and if you do it slow or stop on them, then there will be a tooltip.
+Muovendo il mouse oltre la velocità di "clock" non succede nulla, facendolo lentamente o fermandocisi sopra, viene mostrato il tooltip.
 
-Please note: the tooltip doesn't "blink" when the cursor moves between the clock subelements.
+Nota bene: il tooltip non "lampeggia" quando il cursore si muove tra i sottoelementi dell'orologio.