Skip to content

Commit 0e5dcff

Browse files
Merge pull request #349 from maksumi/coordinates
Coordinates
2 parents 94f389f + 1262db8 commit 0e5dcff

File tree

15 files changed

+193
-192
lines changed

15 files changed

+193
-192
lines changed

2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
# Outer corners
1+
# Esquinas externas
22

3-
Outer corners are basically what we get from [elem.getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect).
3+
Las esquinas externas son básicamente las que obtenemos de [elem.getBoundingClientRect()](https://developer.mozilla.org/es/docs/Web/API/Element/element.getBoundingClientRect).
44

5-
Coordinates of the upper-left corner `answer1` and the bottom-right corner `answer2`:
5+
Las coordenadas de la esquina superior izquierda `answer1` y la esquina inferior derecha `answer2`:
66

77
```js
88
let coords = elem.getBoundingClientRect();
@@ -11,19 +11,19 @@ let answer1 = [coords.left, coords.top];
1111
let answer2 = [coords.right, coords.bottom];
1212
```
1313

14-
# Left-upper inner corner
14+
# Esquina interna y superior izquierda
1515

16-
That differs from the outer corner by the border width. A reliable way to get the distance is `clientLeft/clientTop`:
16+
Esta es diferente a la esquina externa por el ancho del borde. Una manera confiable de obtener la distancia es usando `clientLeft/clientTop`:
1717

1818
```js
1919
let answer3 = [coords.left + field.clientLeft, coords.top + field.clientTop];
2020
```
2121

22-
# Right-bottom inner corner
22+
# Esquina interna e inferior derecha
2323

24-
In our case we need to substract the border size from the outer coordinates.
24+
En nuestro caso necesitamos sustraer la medida del borde de las coordenadas externas.
2525

26-
We could use CSS way:
26+
Podemos usar la forma de CSS:
2727

2828
```js
2929
let answer4 = [
@@ -32,7 +32,7 @@ let answer4 = [
3232
];
3333
```
3434

35-
An alternative way would be to add `clientWidth/clientHeight` to coordinates of the left-upper corner. That's probably even better:
35+
Una forma alternativa puede ser agregando `clientWidth/clientHeight` a las coordenadas de la esquina superior izquierda. Probablemente sea incluso mejor:
3636

3737
```js
3838
let answer4 = [

2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.view/index.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@
1313

1414
<body>
1515

16-
Click anywhere to get window coordinates.
17-
<br> That's for testing, to check the result you get by JavaScript.
16+
Haz click en cualquier lugar para obtener las coordenadas de la ventana.
17+
<br> Esto es útil para testear y confirmar el resultado que obtuviste con JavaScript.
1818
<br>
19-
<div id="coords">(click coordinates show up here)</div>
19+
<div id="coords">(Las coordenadas del click se mostrarán aquí)</div>
2020

2121

2222
<div id="field">

2-ui/1-document/11-coordinates/1-find-point-coordinates/source.view/index.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@
1313

1414
<body>
1515

16-
Click anywhere to get window coordinates.
17-
<br> That's for testing, to check the result you get by JavaScript.
16+
Haz click en cualquier lugar para obtener las coordenadas de la ventana.
17+
<br> Esto es útil para testear y confirmar el resultado que obtuviste con JavaScript.
1818
<br>
19-
<div id="coords">(click coordinates show up here)</div>
19+
<div id="coords">(Las coordenadas del click se mostrarán aquí)</div>
2020

2121

2222
<div id="field">
@@ -32,7 +32,7 @@
3232

3333

3434
<script>
35-
// ...your code...
35+
// ...tu código...
3636
</script>
3737

3838
</body>

2-ui/1-document/11-coordinates/1-find-point-coordinates/task.md

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

33
---
44

5-
# Find window coordinates of the field
5+
# Encuentra las coordenadas del campo en la ventana
66

7-
In the iframe below you can see a document with the green "field".
7+
En el siguiente iframe puedes ver un documento con el "campo" verde.
88

9-
Use JavaScript to find window coordinates of corners pointed by with arrows.
9+
Usa JavaScript para encontrar las coordenadas de las esquinas de la ventana señaladas con las flechas.
1010

11-
There's a small feature implemented in the document for convenience. A click at any place shows coordinates there.
11+
Hay una pequeña característica implementada en el documento para conveniencia. Un click en cualquier lugar mostrará las coordenadas ahí.
1212

1313
[iframe border=1 height=360 src="source" link edit]
1414

15-
Your code should use DOM to get window coordinates of:
15+
Tu código debe usar el DOM para obtener las coordenadas en la ventana de:
1616

17-
1. Upper-left, outer corner (that's simple).
18-
2. Bottom-right, outer corner (simple too).
19-
3. Upper-left, inner corner (a bit harder).
20-
4. Bottom-right, inner corner (there are several ways, choose one).
17+
1. La esquina superior izquierda externa (eso es simple).
18+
2. La esquina inferior derecha externa (simple también).
19+
3. La esquina superior izquierda interna (un poco más difícil).
20+
4. La esquina inferior derecha interna (existen muchas maneras, elige una).
2121

22-
The coordinates that you calculate should be the same as those returned by the mouse click.
22+
Las coordenadas que tú calcules deben ser iguales a las devueltas por el click del mouse.
2323

24-
P.S. The code should also work if the element has another size or border, not bound to any fixed values.
24+
P.D. El código también debe funcionar si el elemento tiene otro tamaño o borde, no está ligado a ningún valor fijo.
Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
In this task we only need to accurately calculate the coordinates. See the code for details.
1+
En esta tarea sólo necesitamos calcular exactamente las coordenadas. Mira el código para más detalles.
22

3-
Please note: the elements must be in the document to read `offsetHeight` and other properties.
4-
A hidden (`display:none`) or out of the document element has no size.
3+
Ten en cuenta: los elementos deben estar en el documento para leer `offsetHeight` y otras propiedades.
4+
Un elemento oculto (`display:none`) o fuera del documento no tiene medidas.

2-ui/1-document/11-coordinates/2-position-at/solution.view/index.html

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -12,25 +12,25 @@
1212
esse sequi officia sapiente.</p>
1313

1414
<blockquote>
15-
Teacher: Why are you late?
16-
Student: There was a man who lost a hundred dollar bill.
17-
Teacher: That's nice. Were you helping him look for it?
18-
Student: No. I was standing on it.
15+
Maestra: Por qué llegas tarde?
16+
Alumno: Alguien perdió un billete de cien dólares.
17+
Maestra: Que bueno. Lo estábas ayudando a buscarlo?
18+
Alumno: No. Estaba parado encima del billete.
1919
</blockquote>
2020

2121
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
22-
esse sequi officia sapiente.</p>
22+
esse sequi officia sapiente.</p>
2323

2424

2525
<script>
2626
/**
27-
* Positions elem relative to anchor as said in position.
27+
* Posiciona elem en relación a anchor como se indica en position.
2828
*
29-
* @param {Node} anchor Anchor element for positioning
30-
* @param {string} position One of: top/right/bottom
31-
* @param {Node} elem Element to position
29+
* @param {Node} anchor Elemento ancla para posicionamiento
30+
* @param {string} position Cualquiera de los siguientes: top/right/bottom
31+
* @param {Node} elem Elemento para position
3232
*
33-
* Both elements: elem and anchor must be in the document
33+
* Ambos elementos: elem y anchor deben estar en el documento
3434
*/
3535
function positionAt(anchor, position, elem) {
3636

@@ -56,8 +56,8 @@
5656
}
5757

5858
/**
59-
* Shows a note with the given html at the given position
60-
* relative to the anchor element.
59+
* Muestra una nota con el html proporcionado en el lugar indicado por position
60+
* relativa al elemento anchor.
6161
*/
6262
function showNote(anchor, position, html) {
6363

@@ -69,12 +69,12 @@
6969
positionAt(anchor, position, note);
7070
}
7171

72-
// test it
72+
// ¡Testéalo!
7373
let blockquote = document.querySelector('blockquote');
7474

75-
showNote(blockquote, "top", "note above");
76-
showNote(blockquote, "right", "note at the right");
77-
showNote(blockquote, "bottom", "note below");
75+
showNote(blockquote, "top", "nota encima");
76+
showNote(blockquote, "right", "nota a la derecha");
77+
showNote(blockquote, "bottom", "nota debajo");
7878
</script>
7979

8080

2-ui/1-document/11-coordinates/2-position-at/source.view/index.html

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@
1212
esse sequi officia sapiente.</p>
1313

1414
<blockquote>
15-
Teacher: Why are you late?
16-
Student: There was a man who lost a hundred dollar bill.
17-
Teacher: That's nice. Were you helping him look for it?
18-
Student: No. I was standing on it.
15+
Maestra: Por qué llegas tarde?
16+
Alumno: Alguien perdió un billete de cien dólares.
17+
Maestra: Que bueno. Lo estábas ayudando a buscarlo?
18+
Alumno: No. Estaba parado encima del billete.
1919
</blockquote>
2020

2121
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
@@ -24,21 +24,21 @@
2424

2525
<script>
2626
/**
27-
* Positions elem relative to anchor as said in position.
27+
* Posiciona elem en relación a anchor como se indica en position.
2828
*
29-
* @param {Node} anchor Anchor element for positioning
30-
* @param {string} position One of: top/right/bottom
31-
* @param {Node} elem Element to position
29+
* @param {Node} anchor Elemento anchor para posicionamiento
30+
* @param {string} position Cualquiera de los siguientes: top/right/bottom
31+
* @param {Node} elem Elemento para position
3232
*
33-
* Both elements: elem and anchor must be in the document
33+
* Ambos elementos: elem y anchor deben estar en el documento
3434
*/
3535
function positionAt(anchor, position, elem) {
36-
// ... your code ...
36+
// ... tu código ...
3737
}
3838

3939
/**
40-
* Shows a note with the given html at the given position
41-
* relative to the anchor element.
40+
* Muestra una nota con el html proporcionado en el lugar indicado por position
41+
* relativa al elemento anchor.
4242
*/
4343
function showNote(anchor, position, html) {
4444

@@ -50,12 +50,12 @@
5050
positionAt(anchor, position, note);
5151
}
5252

53-
// test it
53+
// ¡Testealo!
5454
let blockquote = document.querySelector('blockquote');
5555

56-
showNote(blockquote, "top", "note above");
57-
showNote(blockquote, "right", "note at the right");
58-
showNote(blockquote, "bottom", "note below");
56+
showNote(blockquote, "top", "nota encima");
57+
showNote(blockquote, "right", "nota a la derecha");
58+
showNote(blockquote, "bottom", "nota debajo");
5959
</script>
6060

6161

2-ui/1-document/11-coordinates/2-position-at/task.md

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

33
---
44

5-
# Show a note near the element
5+
# Muestra una nota cercana al elemento
66

7-
Create a function `positionAt(anchor, position, elem)` that positions `elem`, depending on `position` near `anchor` element.
7+
Crea una función `positionAt(anchor, position, elem)` que posicione `elem`, dependiendo de la proximidad de `position` al elemento `anchor`.
88

9-
The `position` must be a string with any one of 3 values:
10-
- `"top"` - position `elem` right above `anchor`
11-
- `"right"` - position `elem` immediately at the right of `anchor`
12-
- `"bottom"` - position `elem` right below `anchor`
9+
`position` debe ser un string con alguno de estos 3 valores:
10+
- `"top"` - posiciona `elem` encima de `anchor`
11+
- `"right"` - posiciona `elem` inmediatamente a la derecha de `anchor`
12+
- `"bottom"` - posiciona `elem` debajo de `anchor`
1313

14-
It's used inside function `showNote(anchor, position, html)`, provided in the task source code, that creates a "note" element with given `html` and shows it at the given `position` near the `anchor`.
14+
Esto será usado dentro de la función `showNote(anchor, position, html)`, proveída en el código fuente de la tarea, que crea un elemento "note" con el `html` y lo muestra en el lugar proporcionado por `position` cercano a `anchor`.
1515

16-
Here's the demo of notes:
16+
Aquí está el demo de las notas:
1717

1818
[iframe src="solution" height="350" border="1" link]
Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
The solution is actually pretty simple:
1+
La solución realmente es muy simple:
22

3-
- Use `position:absolute` in CSS instead of `position:fixed` for `.note`.
4-
- Use the function [getCoords()](info:coordinates#getCoords) from the chapter <info:coordinates> to get document-relative coordinates.
3+
- Usa `position:absolute` con CSS en lugar de `position:fixed` para `.note`.
4+
- Usa la función [getCoords()](info:coordinates#getCoords) del capítulo <info:coordinates> para obtener las coordenadas relativas al documento.

2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.html

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,14 @@
88

99
<body style="height: 2000px">
1010

11-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
11+
<p>El malvado Lord Vader, obsesionado por encontrar al joven Skywalker
1212
esse sequi officia sapiente.</p>
1313

1414
<blockquote>
15-
Teacher: Why are you late?
16-
Student: There was a man who lost a hundred dollar bill.
17-
Teacher: That's nice. Were you helping him look for it?
18-
Student: No. I was standing on it.
15+
Maestra: Por qué llegas tarde?
16+
Alumno: Alguien perdió un billete de cien dólares.
17+
Maestra: Que bueno. Lo estábas ayudando a buscarlo?
18+
Alumno: No. Estaba parado encima del billete.
1919
</blockquote>
2020

2121
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
@@ -66,12 +66,12 @@
6666
positionAt(anchor, position, note);
6767
}
6868

69-
// test it
69+
// ¡Testéalo!
7070
let blockquote = document.querySelector('blockquote');
7171

72-
showNote(blockquote, "top", "note above");
73-
showNote(blockquote, "right", "note at the right");
74-
showNote(blockquote, "bottom", "note below");
72+
showNote(blockquote, "top", "nota encima");
73+
showNote(blockquote, "right", "nota a la derecha");
74+
showNote(blockquote, "bottom", "nota debajo");
7575
</script>
7676

7777

2-ui/1-document/11-coordinates/3-position-at-absolute/task.md

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

33
---
44

5-
# Show a note near the element (absolute)
5+
# Muestra una nota cercana al elemento (absolute)
66

7-
Modify the solution of the [previous task](info:task/position-at) so that the note uses `position:absolute` instead of `position:fixed`.
7+
Modifica la solución de la [tarea previa](info:task/position-at) de manera que la nota use `position:absolute` en lugar de `position:fixed`.
88

9-
That will prevent its "runaway" from the element when the page scrolls.
9+
Esto evitará que se "aleje" del elemento cuando se desplace la página.
1010

11-
Take the solution of that task as a starting point. To test the scroll, add the style `<body style="height: 2000px">`.
11+
Toma la solución de la tarea anterior como punto de partida. Para testear el scroll, agrega el estilo `<body style="height: 2000px">`.

2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.view/index.html

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,16 @@
1212
esse sequi officia sapiente.</p>
1313

1414
<blockquote>
15-
Teacher: Why are you late?
16-
Student: There was a man who lost a hundred dollar bill.
17-
Teacher: That's nice. Were you helping him look for it?
18-
Student: No. I was standing on it.
15+
Maestra: Por qué llegas tarde?
16+
Alumno: Alguien perdió un billete de cien dólares.
17+
Maestra: Que bueno. Lo estábas ayudando a buscarlo?
18+
Alumno: No. Estaba parado encima del billete.
1919
</blockquote>
2020

2121
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
2222
esse sequi officia sapiente.</p>
2323

24+
2425
<script>
2526
function getCoords(elem) {
2627
let box = elem.getBoundingClientRect();
@@ -83,10 +84,10 @@
8384

8485
let blockquote = document.querySelector('blockquote');
8586

86-
showNote(blockquote, "top-in", "note top-in");
87-
showNote(blockquote, "top-out", "note top-out");
88-
showNote(blockquote, "right-out", "note right-out");
89-
showNote(blockquote, "bottom-in", "note bottom-in");
87+
showNote(blockquote, "top-in", "nota superior interna");
88+
showNote(blockquote, "top-out", "nota superior externa");
89+
showNote(blockquote, "right-out", "nota a la derecha externa");
90+
showNote(blockquote, "bottom-in", "nota inferior interna");
9091
</script>
9192

9293

0 commit comments

Comments
 (0)