Skip to content

Commit 03407a7

Browse files
joaquineliojoaquinelio
authored
Merge pull request #302 from maksumi/movingthemouse
Moving the mouse: mouseover/out, mouseenter/leave
2 parents 29b4499 + 73547e6 commit 03407a7

File tree

11 files changed

+182
-182
lines changed

11 files changed

+182
-182
lines changed

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<style>
77
body {
88
height: 2000px;
9-
/* the tooltip should work after page scroll too */
9+
/* El tooltip debe seguir funcionando aúnn después de hacer scroll */
1010
}
1111

1212
.tooltip {
@@ -66,25 +66,25 @@
6666
let tooltip;
6767

6868
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+
// Importante: un movimiento rápido del mouse podría saltar directamente al descendiente en un nodo anotado, ignorando el padre
70+
// por lo tanto mouseover podría ejecutarse en un descendiente.
7171

7272
let anchorElem = event.target.closest('[data-tooltip]');
7373

7474
if (!anchorElem) return;
7575

76-
// show tooltip and remember it
76+
// Mostrando el tooltip y recordándolo.
7777
tooltip = showTooltip(anchorElem, anchorElem.dataset.tooltip);
7878
}
7979

8080
document.onmouseout = function() {
81-
// it is possible that mouseout triggered, but we're still inside the element
82-
// (its target was inside, and it bubbled)
83-
// but in this case we'll have an immediate mouseover,
84-
// so the tooltip will be destroyed and shown again
81+
// Es posible que mouseout se active, pero estaremos dentro del elemento
82+
// (el target ocurrirá dentro y se aparecerá)
83+
// pero en este caso tendremos un mouse over inmediato,
84+
// entonces el tooltip será destruido y mostrado otra vez.
8585
//
86-
// luckily, the "blinking" won't be visible,
87-
// as both events happen almost at the same time
86+
// Afortunadamente, el parpadeo no es visble,
87+
// ya que ambos eventos ocurren casi al mismo tiempo.
8888
if (tooltip) {
8989
tooltip.remove();
9090
tooltip = false;
@@ -101,7 +101,7 @@
101101

102102
let coords = anchorElem.getBoundingClientRect();
103103

104-
// position the tooltip over the center of the element
104+
// Posicionando el tooltip sobre el centro del elemento
105105
let left = coords.left + (anchorElem.offsetWidth - tooltipElem.offsetWidth) / 2;
106106
if (left < 0) left = 0;
107107

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<style>
77
body {
88
height: 2000px;
9-
/* the tooltip should work after page scroll too */
9+
/* El tooltip debe funcionar también despues de hacer scroll */
1010
}
1111

1212
.tooltip {
@@ -49,21 +49,21 @@
4949
<body>
5050

5151

52-
<div data-tooltip="Here is the house interior" id="house">
53-
<div data-tooltip="Here is the roof" id="roof"></div>
52+
<div data-tooltip="Aquí esta el interior de la casa" id="house">
53+
<div data-tooltip="Aquí está el techo" id="roof"></div>
5454

5555
<p>Once upon a time there was a mother pig who had three little pigs.</p>
5656

5757
<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."
5858

5959
<p>The three little pigs set off. "We will take care that the wolf does not catch us," they said.</p>
6060

61-
<p>Soon they met a man. <a href="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="Read on…">Hover over me</a></p>
61+
<p>Soon they met a man. <a href="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="Continúa leyendo…">Colócate sobre mí</a></p>
6262

6363
</div>
6464

6565
<script>
66-
// ...your code...
66+
// ...tu código...
6767
</script>
6868

6969
</body>

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,24 @@ importance: 5
22

33
---
44

5-
# Improved tooltip behavior
5+
# Comportamiento mejorado de un tooltip
66

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+
Escribe JavaScript que muestre un tooltip sobre un elemento con el atributo `data-tooltip`. El valor de este atributo debe convertirse en el texto del tooltip.
88

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+
Es como la tarea <info:task/behavior-tooltip>, pero aquí los elementos anotados se pueden anidar. Los tooltips más internos se muestran.
1010

11-
Only one tooltip may show up at the same time.
11+
Solamente un tooltip puede aparecer a la vez.
1212

13-
For instance:
13+
Por ejemplo:
1414

1515
```html
16-
<div data-tooltip="Here – is the house interior" id="house">
17-
<div data-tooltip="Here – is the roof" id="roof"></div>
16+
<div data-tooltip="Aquí – está el interior de la casa" id="house">
17+
<div data-tooltip="Aquí – está el techo" id="roof"></div>
1818
...
19-
<a href="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="Read on…">Hover over me</a>
19+
<a href="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="Continúa leyendo…">Colócate sobre mi</a>
2020
</div>
2121
```
2222

23-
The result in iframe:
23+
El resultado en el iframe:
2424

2525
[iframe src="solution" height=300 border=1]

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

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

2-
The algorithm looks simple:
3-
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+
El algorítmo luce simple:
3+
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.
4+
2. Cuando el cursor ingrese al elemento debes medir la velocidad en `mousemove`.
5+
3. Si la velocidad es lenta hay que ejecutar `over`.
6+
4. Si estamos saliendo del elemento, y `over` ya se había ejecutado, ahora ejecutamos `out`.
77

8-
But how to measure the speed?
8+
¿Pero cómo mediremos la velocidad?
99

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+
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.
1111

12-
Unfortunately, there's no way to get "current mouse coordinates" in JavaScript. There's no function like `getCurrentMouseCoordinates()`.
12+
Desafortunadamente no hay manera para obtener las coordenadas actuales del mouse en JavaScript. No existe algo así como `getCurrentMouseCoordinates()`.
1313

14-
The only way to get coordinates is to listen for mouse events, like `mousemove`, and take coordinates from the event object.
14+
La única manera es registrando los eventos del mouse, como `mousemove`, y tomar las coordenadas del objeto del evento.
1515

16-
So let's set a handler on `mousemove` to track coordinates and remember them. And then compare them, once per `100ms`.
16+
Entonces configuremos un `mousemove` para registrar las coordenadas y recordarlas. Y entonces las comparamos, una por cada `100ms`.
1717

18-
P.S. Please note: the solution tests use `dispatchEvent` to see if the tooltip works right.
18+
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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
class HoverIntent {
44

55
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, // Velocidad menor a 0.1px/ms supone un "posicionamiento sobre el elemento"
7+
interval = 100, // Medida de la velocidad del mouse una vez por cada 100ms
88
elem,
99
over,
1010
out
@@ -15,12 +15,12 @@ class HoverIntent {
1515
this.over = over;
1616
this.out = out;
1717

18-
// make sure "this" is the object in event handlers.
18+
// Segurándonos de que "this" es el objeto en los controladores de eventos
1919
this.onMouseMove = this.onMouseMove.bind(this);
2020
this.onMouseOver = this.onMouseOver.bind(this);
2121
this.onMouseOut = this.onMouseOut.bind(this);
2222

23-
// and in time-measuring function (called from setInterval)
23+
// y en la función para medir el tiempo (llamada desde setInterval)
2424
this.trackSpeed = this.trackSpeed.bind(this);
2525

2626
elem.addEventListener("mouseover", this.onMouseOver);
@@ -32,16 +32,16 @@ class HoverIntent {
3232
onMouseOver(event) {
3333

3434
if (this.isOverElement) {
35-
// if we're over the element, then ignore the event
36-
// we are already measuring the speed
35+
// Si estamos sobre el elemento ignoramos el evento
36+
// Ya estamos midiendo la velocidad
3737
return;
3838
}
3939

4040
this.isOverElement = true;
4141

42-
// after every mousemove we'll be check the distance
43-
// between the previous and the current mouse coordinates
44-
// if it's less than sensivity, then the speed is slow
42+
//Después de cada mousemove vamos a checar la distancia
43+
// entre la coordinada previa y actual del mouse
44+
// si es menor que sensivity entonces la velocidad es muy rápida
4545

4646
this.prevX = event.pageX;
4747
this.prevY = event.pageY;
@@ -52,13 +52,13 @@ class HoverIntent {
5252
}
5353

5454
onMouseOut(event) {
55-
// if left the element
55+
// Si abandomanos el elemento
5656
if (!event.relatedTarget || !elem.contains(event.relatedTarget)) {
5757
this.isOverElement = false;
5858
this.elem.removeEventListener('mousemove', this.onMouseMove);
5959
clearInterval(this.checkSpeedInterval);
6060
if (this.isHover) {
61-
// if there was a stop over the element
61+
// Si nos detenemos sobre el elemento
6262
this.out.call(this.elem, event);
6363
this.isHover = false;
6464
}
@@ -76,7 +76,7 @@ class HoverIntent {
7676
let speed;
7777

7878
if (!this.lastTime || this.lastTime == this.prevTime) {
79-
// cursor didn't move
79+
// Cursor sin movimieto (detenido)
8080
speed = 0;
8181
} else {
8282
speed = Math.sqrt(
@@ -90,7 +90,7 @@ class HoverIntent {
9090
this.isHover = true;
9191
this.over.call(this.elem, event);
9292
} else {
93-
// speed fast, remember new coordinates as the previous ones
93+
// Hubo movimiento rápido, registramos las coordenadas actuales como las anteriores
9494
this.prevX = this.lastX;
9595
this.prevY = this.lastY;
9696
this.prevTime = this.lastTime;

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
'use strict';
22

3-
// Here's a brief sketch of the class
4-
// with things that you'll need anyway
3+
// Aquí hay un breve sketch con la clase
4+
// de cosas que vas a ocupar de cualquier forma
55
class HoverIntent {
66

77
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, // Velocidad menor a 0.1px/ms supone un "posicionamiento sobre el elemento"
9+
interval = 100, // Medida de la velocidad del mouse una vez por cada 100ms: cualcula la distancia entre el punto anterior y el actual
1010
elem,
1111
over,
1212
out
@@ -17,16 +17,16 @@ class HoverIntent {
1717
this.over = over;
1818
this.out = out;
1919

20-
// make sure "this" is the object in event handlers.
20+
// // Segurándonos de que "this" es el objeto en los controladores de eventos
2121
this.onMouseMove = this.onMouseMove.bind(this);
2222
this.onMouseOver = this.onMouseOver.bind(this);
2323
this.onMouseOut = this.onMouseOut.bind(this);
2424

25-
// assign the handlers
25+
// Asignando los controladores
2626
elem.addEventListener("mouseover", this.onMouseOver);
2727
elem.addEventListener("mouseout", this.onMouseOut);
2828

29-
// continue from this point
29+
// Continua trabajando desde este punto
3030

3131
}
3232

@@ -44,8 +44,8 @@ class HoverIntent {
4444

4545

4646
destroy() {
47-
/* your code to "disable" the functionality, remove all handlers */
48-
/* it's needed for the tests to work */
47+
/* Tu código para "deshabilitar" la funcionalidad, remueve los controladores */
48+
/* Es necesario para que las pruebas funcionen*/
4949
}
5050

5151
}

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

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,31 @@
1-
importance: 5
1+
Importance: 5
22

33
---
44

5-
# "Smart" tooltip
5+
# Tooltip "inteligente"
66

7-
Write a function that shows a tooltip over an element only if the visitor moves the mouse *to it*, but not *through it*.
7+
Escribe una función que muestre un tooltip sobre un elemento solamente si el visitante mueve el mouse *hacia él*, pero no *a través de él*.
88

9-
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?
9+
En otras palabras, si el visitante mueve el mouse hacia el elemento y para ahí -- muestra el tooltip. Y si solamente mueve el mouse a través, entonces no lo necesitamos. ¿Quién quiere parpadeos extra?
1010

11-
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.
11+
Tecnicamente, podemos medir la velocidad del mouse sobre el elemento, y si es lenta podemos asumir que el mouse viene "sobre el elemento" y mostramos el tooltip, si es rápida -- entonces lo ignoramos.
1212

13-
Make a universal object `new HoverIntent(options)` for it.
13+
Hay que crear un objeto universal `new HoverIntent(options)` para ello.
1414

15-
Its `options`:
16-
- `elem` -- element to track.
17-
- `over` -- a function to call if the mouse came to the element: that is, it moves slowly or stopped over it.
18-
- `out` -- a function to call when the mouse leaves the element (if `over` was called).
15+
Sus `options`:
16+
- `elem` -- elemento a seguir.
17+
- `over` -- una función a llamar si el el mouse viene hacia el elemento: o sea, si viene lentamente o para sobre él.
18+
- `out` -- una función a llmar cuando el mouse abandona el lemento (si `over` fue llamado).
1919

20-
An example of using such object for the tooltip:
20+
Un ejemplo de dicho objeto siendo usado para el tooltip:
2121

2222
```js
23-
// a sample tooltip
23+
// Un tooltip de muestra
2424
let tooltip = document.createElement('div');
2525
tooltip.className = "tooltip";
2626
tooltip.innerHTML = "Tooltip";
2727

28-
// the object will track mouse and call over/out
28+
// El objeto va a rastrear al mouse y llamar a over/out
2929
new HoverIntent({
3030
elem,
3131
over() {
@@ -39,10 +39,10 @@ new HoverIntent({
3939
});
4040
```
4141

42-
The demo:
42+
El demo:
4343

4444
[iframe src="solution" height=140]
4545

46-
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.
46+
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.
4747

48-
Please note: the tooltip doesn't "blink" when the cursor moves between the clock subelements.
48+
Toma en cuenta que el tooltip no "parpadea" cuando el cusor se mueve entre subelementos del reloj.

0 commit comments

Comments
 (0)