Skip to content

Commit cfe724e

Browse files
authored
Merge pull request #191 from HachemiH/master
Coordinates
2 parents da2c78a + 4ffd153 commit cfe724e

File tree

8 files changed

+131
-130
lines changed

8 files changed

+131
-130
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+
# Coins extérieurs
22

3-
Outer corners are basically what we get from [elem.getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect).
3+
Les coins extérieurs sont essentiellement ce que nous obtenons de [elem.getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect).
44

5-
Coordinates of the upper-left corner `answer1` and the bottom-right corner `answer2`:
5+
Les coordonnées du coin supérieur gauche `answer1` et du coin inférieur droit` 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+
# Coin intérieur supérieur gauche
1515

16-
That differs from the outer corner by the border width. A reliable way to get the distance is `clientLeft/clientTop`:
16+
Cela diffère du coin extérieur par la largeur de la bordure. Un moyen fiable pour obtenir la distance est `clientLeft/clientTop` :
1717

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

22-
# Right-bottom inner corner
22+
# Coin intérieur en bas à droite
2323

24-
In our case we need to substract the border size from the outer coordinates.
24+
Dans notre cas, nous devons soustraire la taille de la bordure des coordonnées extérieures.
2525

26-
We could use CSS way:
26+
Nous pourrions utiliser la manière 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+
Une autre façon serait d'ajouter `clientWidth/clientHeight` aux coordonnées du coin supérieur gauche. C'est probablement encore mieux :
3636

3737
```js
3838
let answer4 = [

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+
# Trouver les coordonnées de la fenêtre du champ
66

7-
In the iframe below you can see a document with the green "field".
7+
Dans l'iframe ci-dessous, vous pouvez voir un document avec le "champ" vert.
88

9-
Use JavaScript to find window coordinates of corners pointed by with arrows.
9+
Utilisez JavaScript pour trouver les coordonnées de la fenêtre des coins pointés par des flèches.
1010

11-
There's a small feature implemented in the document for convenience. A click at any place shows coordinates there.
11+
Il y a une petite fonctionnalité implémentée dans le document pour plus de commodité. Un clic à n'importe quel endroit montre les coordonnées là-bas.
1212

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

15-
Your code should use DOM to get window coordinates of:
15+
Votre code doit utiliser DOM pour obtenir les coordonnées de la fenêtre 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. Coin extérieur supérieur gauche (c'est simple).
18+
2. En bas à droite, coin extérieur (simple aussi).
19+
3. Coin intérieur supérieur gauche (un peu plus dur).
20+
4. En bas à droite, coin intérieur (il y a plusieurs façons, choisissez-en une).
2121

22-
The coordinates that you calculate should be the same as those returned by the mouse click.
22+
Les coordonnées que vous calculez doivent être les mêmes que celles renvoyées par le clic de souris.
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.S. Le code devrait également fonctionner si l'élément a une autre taille ou bordure, qui n'est lié à aucune valeur fixe.
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+
Dans cet exercice, il suffit de calculer avec précision les coordonnées. Voir le code pour plus de détails.
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+
Veuillez noter : les éléments doivent être dans le document pour lire `offsetHeight` et d'autres propriétés.
4+
Un élément caché (`display:none`) ou hors du document n'a pas de taille.

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+
# Afficher une note près de l'élément
66

7-
Create a function `positionAt(anchor, position, elem)` that positions `elem`, depending on `position` near `anchor` element.
7+
Créez une fonction `positionAt(anchor, position, elem)` qui positionne `elem`, en fonction de `position` près de l'élément `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+
La `position` doit être une chaîne de caractères avec l'une des 3 valeurs :
10+
- `"top"` - position `elem` juste au dessus de `anchor`
11+
- `"right"` - position `elem` immédiatement à droite de `anchor`
12+
- `"bottom"` - position `elem` juste en dessous `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+
Il est utilisé à l'intérieur de la fonction `showNote(anchor, position, html)`, fournie dans le code source de la tâche, qui crée un élément "note" avec `html` donné et l'affiche à la `position` donnée près de `anchor`.
1515

16-
Here's the demo of notes:
16+
Voici la démo des notes :
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 solution est en fait assez 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+
- Utilisez `position:absolute` dans le CSS au lieu de `position:fixed` pour `.note`.
4+
- Utilisez la fonction [getCoords()](info:coordinates#getCoords) du chapitre <info:coordinates> pour obtenir les coordonnées relatives au document.

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+
# Afficher une note près de l'élément (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+
Modifier la solution du [précédent exercice](info:task/position-at) de sorte que la note utilise `position:absolute` au lieu de `position:fixed`.
88

9-
That will prevent its "runaway" from the element when the page scrolls.
9+
Cela empêchera son "éloignement" de l'élément lorsque la page défile.
1010

11-
Take the solution of that task as a starting point. To test the scroll, add the style `<body style="height: 2000px">`.
11+
Prenez la solution de cet exercice comme point de départ. Pour tester le défilement, ajoutez le style `<body style="height: 2000px">`.

2-ui/1-document/11-coordinates/4-position-inside-absolute/task.md

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

33
---
44

5-
# Position the note inside (absolute)
5+
# Positionnez la note à l'intérieur (absolute)
66

7-
Extend the previous task <info:task/position-at-absolute>: teach the function `positionAt(anchor, position, elem)` to insert `elem` inside the `anchor`.
7+
Étendre l'exercice précédent <info:task/position-at-absolute> : enseigner la fonction `positionAt(anchor, position, elem)` pour inserer `elem` dans le `anchor`.
88

9-
New values for `position`:
9+
Nouvelles valeurs pour `position` :
1010

11-
- `top-out`, `right-out`, `bottom-out` -- work the same as before, they insert the `elem` over/right/under `anchor`.
12-
- `top-in`, `right-in`, `bottom-in` -- insert `elem` inside the `anchor`: stick it to the upper/right/bottom edge.
11+
- `top-out`, `right-out`, `bottom-out` -- fonctionnent de la même manière qu'avant, ils insèrent le `elem` au-dessus/à droite/sous le `anchor`.
12+
- `top-in`, `right-in`, `bottom-in` -- insèrent `elem` à l'intérieur de `anchor` : collez-le sur le bord supérieur/droit/inférieur.
1313

14-
For instance:
14+
Par exemple :
1515

1616
```js
17-
// shows the note above blockquote
17+
// affiche la note au dessus de blockquote
1818
positionAt(blockquote, "top-out", note);
1919

20-
// shows the note inside blockquote, at the top
20+
// affiche la note à l'intérieur de blockquote, en haut
2121
positionAt(blockquote, "top-in", note);
2222
```
2323

24-
The result:
24+
Le resultat :
2525

2626
[iframe src="solution" height="310" border="1" link]
2727

28-
As the source code, take the solution of the task <info:task/position-at-absolute>.
28+
En tant que code source, prenez la solution de l'exercice <info:task/position-at-absolute>.

0 commit comments

Comments
 (0)