Moving the mouse: mouseover/out, mouseenter/leave

Author: Maksumi Murakami

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html

@@ -6,7 +6,7 @@
   <style>
     body {
       height: 2000px;
-      /* El tooltip debe funcionar también despues de hacer scroll */
+      /* El tooltip debe seguir funcionando aúnn después de hacer scroll */
     }
 
     .tooltip {
@@ -66,24 +66,24 @@
     let tooltip;
 
     document.onmouseover = function(event) {
-      // Importante: un movimiento ráido del mouse podría saltar directamente al descendiente en un nodo anotado, ignorando el padre
+      // Importante: un movimiento rápido del mouse podría saltar directamente al descendiente en un nodo anotado, ignorando el padre
       // por lo tanto mouseover podría ejecutarse en un descendiente.
 
       let anchorElem = event.target.closest('[data-tooltip]');
 
       if (!anchorElem) return;
 
-      //  Mostrando el tooltip y recordandolo
+      //  Mostrando el tooltip y recordándolo.
       tooltip = showTooltip(anchorElem, anchorElem.dataset.tooltip);
     }
 
     document.onmouseout = function() {
-      // es posible que mouseout se active, pero estaremos dentro del elemento
-      // (el target ocurrira dentro y se aparecera)
+      // Es posible que mouseout se active, pero estaremos dentro del elemento
+      // (el target ocurrirá dentro y se aparecerá)
       // pero en este caso tendremos un mouse over inmediato,
-      // entonces el tooltip será destruido y mostrado otra vez
+      // entonces el tooltip será destruido y mostrado otra vez.
       //
-      // afortunadamente, el parpadeo no es visble,
+      // Afortunadamente, el parpadeo no es visble,
       // ya que ambos eventos ocurren casi al mismo tiempo.
       if (tooltip) {
         tooltip.remove();

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/source.view/index.html

@@ -63,7 +63,7 @@
   </div>
 
   <script>
-    // ...tu codigo...
+    // ...tu código...
   </script>
 
 </body>

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`.
+El algorítmo luce simple:
+1. Coloca los controladores `onmouseover/out` en el elemento. Aquí también podemos usar `onmouseenter/leave` pero son menos universales, no funcionan si introducimos delegaciones.
+2. Cuando el cursor ingrese al elemento debes medir la velocidad en `mousemove`.
+3. Si la velocidad es lenta hay que ejecutar `over`.
+4. Si estamos saliendo del elemento, y `over` ya se había ejecutado, ahora ejecutamos `out`.
 
-But how to measure the speed?
+¿Pero cómo mediremos la velocidad?
 
-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 primera idea puede ser: correr una función cada `100ms` y medir la distancia entre la coordenada anterior y la actual. Si es pequeña entonces la velocidad fue rápida.
 
-Unfortunately, there's no way to get "current mouse coordinates" in JavaScript. There's no function like `getCurrentMouseCoordinates()`.
+Desafortunadamente no hay manera para obtener las coordenadas actuales del mouse en JavaScript. No existe algo así como `getCurrentMouseCoordinates()`.
 
-The only way to get coordinates is to listen for mouse events, like `mousemove`, and take coordinates from the event object.
+La única manera es registrando los eventos del mouse, como `mousemove`, y tomar las coordenadas del objeto del evento.
 
-So let's set a handler on `mousemove` to track coordinates and remember them. And then compare them, once per `100ms`.
+Entonces configuremos un `mousemove` para registrar las coordenadas y recordarlas. Y entonces las comparamos, una por cada `100ms`.
 
-P.S. Please note: the solution tests use `dispatchEvent` to see if the tooltip works right.
+PD. Toma nota: El test de la solución usa `dispatchEvent` para ver si el tooltip funciona bien.

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, // Velocidad menor a 0.1px/ms supone un "posicionamiento sobre el elemento"
+    interval = 100,    // Medida de la velocidad del mouse una vez por cada 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.
+    // Segurándonos de que "this" es el objeto en los controladores de eventos
     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)
+    // y en la función para medir el tiempo  (llamada desde 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
+      // Si estamos sobre el elemento ignoramos el evento
+      // Ya estamos midiendo la velocidad
       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
+    //Después de cada mousemove vamos a checar la distancia
+    // entre la coordinada previa y actual del mouse
+    // si es menor que sensivity entonces la velocidad es muy rápida
 
     this.prevX = event.pageX;
     this.prevY = event.pageY;
@@ -52,13 +52,13 @@ class HoverIntent {
   }
 
   onMouseOut(event) {
-    // if left the element
+    // Si abandomanos el 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
+        // Si nos detenemos sobre el 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
+      // Cursor sin movimieto (detenido)
       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
+      // Hubo movimiento rápido, registramos las coordenadas actuales como las anteriores
       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
+// Aquí hay un breve sketch con la clase
+// de cosas que vas a ocupar de cualquier forma
 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, // Velocidad menor a 0.1px/ms supone un "posicionamiento sobre el elemento"
+    interval = 100, // Medida de la velocidad del mouse una vez por cada 100ms: cualcula la distancia entre el punto anterior y el actual
     elem,
     over,
     out
@@ -17,16 +17,16 @@ class HoverIntent {
     this.over = over;
     this.out = out;
 
-    // make sure "this" is the object in event handlers.
+    // // Segurándonos de que "this" es el objeto en los controladores de eventos
     this.onMouseMove = this.onMouseMove.bind(this);
     this.onMouseOver = this.onMouseOver.bind(this);
     this.onMouseOut = this.onMouseOut.bind(this);
 
-    // assign the handlers
+    // Asignando los controladores
     elem.addEventListener("mouseover", this.onMouseOver);
     elem.addEventListener("mouseout", this.onMouseOut);
 
-    // continue from this point
+    // Continua trabajando desde este 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 */
+    /* Tu código para "deshabilitar" la funcionalidad, remueve los controladores */
+    /* Es necesario para que las pruebas funcionen*/
   }
 
 }

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

@@ -1,4 +1,4 @@
-Importancia: 5
+Importance: 5
 
 ---
 
@@ -20,12 +20,12 @@ Sus `options`:
 Un ejemplo de dicho objeto siendo usado para el tooltip:
 
 ```js
-//  un tooltip de muestra
+//  Un tooltip de muestra
 let tooltip = document.createElement('div');
 tooltip.className = "tooltip";
 tooltip.innerHTML = "Tooltip";
 
-// el obeto va a rastrear al mouse y llamar a over/out
+// El objeto va a rastrear al mouse y llamar a over/out
 new HoverIntent({
   elem,
   over() {
@@ -43,6 +43,6 @@ El demo:
 
 [iframe src="solution" height=140]
 
-Si mueves el mouse sobre el "reloj" rápido entonces no pasará nada, y si lo haces lento o paras sobre él, Entonces habrá un tooltip.
+Si mueves el mouse sobre el "reloj" rápido no pasará nada, y si lo haces lento o paras sobre él entonces habrá un tooltip.
 
 Toma en cuenta que el tooltip no "parpadea" cuando el cusor se mueve entre subelementos del reloj.