Coordinates by HachemiH · Pull Request #191 · javascript-tutorial/fr.javascript.info

javascript-tutorial

18 changes: 9 additions & 9 deletions 2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.md

Original file line number	Diff line number	Diff line change
		@@ -1,8 +1,8 @@
		# Outer corners
		# Coins extérieurs

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

		Coordinates of the upper-left corner `answer1` and the bottom-right corner `answer2`:
		Les coordonnées du coin supérieur gauche `answer1` et du coin inférieur droit` answer2` :

		```js
		let coords = elem.getBoundingClientRect();
Expand All		@@ -11,19 +11,19 @@ let answer1 = [coords.left, coords.top];
		let answer2 = [coords.right, coords.bottom];
		```

		# Left-upper inner corner
		# Coin intérieur supérieur gauche

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

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

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

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

		We could use CSS way:
		Nous pourrions utiliser la manière CSS :

		```js
		let answer4 = [
Expand All		@@ -32,7 +32,7 @@ let answer4 = [
		];
		```

		An alternative way would be to add `clientWidth/clientHeight` to coordinates of the left-upper corner. That's probably even better:
		Une autre façon serait d'ajouter `clientWidth/clientHeight` aux coordonnées du coin supérieur gauche. C'est probablement encore mieux :

		```js
		let answer4 = [
Expand Down

22 changes: 11 additions & 11 deletions 2-ui/1-document/11-coordinates/1-find-point-coordinates/task.md

Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,23 +2,23 @@ importance: 5

		---

		# Find window coordinates of the field
		# Trouver les coordonnées de la fenêtre du champ

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

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

		There's a small feature implemented in the document for convenience. A click at any place shows coordinates there.
		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.

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

		Your code should use DOM to get window coordinates of:
		Votre code doit utiliser DOM pour obtenir les coordonnées de la fenêtre de :

		1. Upper-left, outer corner (that's simple).
		2. Bottom-right, outer corner (simple too).
		3. Upper-left, inner corner (a bit harder).
		4. Bottom-right, inner corner (there are several ways, choose one).
		1. Coin extérieur supérieur gauche (c'est simple).
		2. En bas à droite, coin extérieur (simple aussi).
		3. Coin intérieur supérieur gauche (un peu plus dur).
		4. En bas à droite, coin intérieur (il y a plusieurs façons, choisissez-en une).

		The coordinates that you calculate should be the same as those returned by the mouse click.
		Les coordonnées que vous calculez doivent être les mêmes que celles renvoyées par le clic de souris.

		P.S. The code should also work if the element has another size or border, not bound to any fixed values.
		P.S. Le code devrait également fonctionner si l'élément a une autre taille ou bordure, qui n'est lié à aucune valeur fixe.

6 changes: 3 additions & 3 deletions 2-ui/1-document/11-coordinates/2-position-at/solution.md

Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,4 @@
		In this task we only need to accurately calculate the coordinates. See the code for details.
		Dans cet exercice, il suffit de calculer avec précision les coordonnées. Voir le code pour plus de détails.

		Please note: the elements must be in the document to read `offsetHeight` and other properties.
		A hidden (`display:none`) or out of the document element has no size.
		Veuillez noter : les éléments doivent être dans le document pour lire `offsetHeight` et d'autres propriétés.
		Un élément caché (`display:none`) ou hors du document n'a pas de taille.

16 changes: 8 additions & 8 deletions 2-ui/1-document/11-coordinates/2-position-at/task.md

Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,17 +2,17 @@ importance: 5

		---

		# Show a note near the element
		# Afficher une note près de l'élément

		Create a function `positionAt(anchor, position, elem)` that positions `elem`, depending on `position` near `anchor` element.
		Créez une fonction `positionAt(anchor, position, elem)` qui positionne `elem`, en fonction de `position` près de l'élément `anchor`.

		The `position` must be a string with any one of 3 values:
		- `"top"` - position `elem` right above `anchor`
		- `"right"` - position `elem` immediately at the right of `anchor`
		- `"bottom"` - position `elem` right below `anchor`
		La `position` doit être une chaîne de caractères avec l'une des 3 valeurs :
		- `"top"` - position `elem` juste au dessus de `anchor`
		- `"right"` - position `elem` immédiatement à droite de `anchor`
		- `"bottom"` - position `elem` juste en dessous `anchor`

		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`.
		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`.

		Here's the demo of notes:
		Voici la démo des notes :

		[iframe src="solution" height="350" border="1" link]

6 changes: 3 additions & 3 deletions 2-ui/1-document/11-coordinates/3-position-at-absolute/solution.md

Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,4 @@
		The solution is actually pretty simple:
		La solution est en fait assez simple :

		- Use `position:absolute` in CSS instead of `position:fixed` for `.note`.
		- Use the function [getCoords()](info:coordinates#getCoords) from the chapter <info:coordinates> to get document-relative coordinates.
		- Utilisez `position:absolute` dans le CSS au lieu de `position:fixed` pour `.note`.
		- Utilisez la fonction [getCoords()](info:coordinates#getCoords) du chapitre <info:coordinates> pour obtenir les coordonnées relatives au document.

8 changes: 4 additions & 4 deletions 2-ui/1-document/11-coordinates/3-position-at-absolute/task.md

Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,10 +2,10 @@ importance: 5

		---

		# Show a note near the element (absolute)
		# Afficher une note près de l'élément (absolute)

		Modify the solution of the [previous task](info:task/position-at) so that the note uses `position:absolute` instead of `position:fixed`.
		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`.

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

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

20 changes: 10 additions & 10 deletions 2-ui/1-document/11-coordinates/4-position-inside-absolute/task.md

Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,27 +2,27 @@ importance: 5

		---

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

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

		New values for `position`:
		Nouvelles valeurs pour `position` :

		- `top-out`, `right-out`, `bottom-out` -- work the same as before, they insert the `elem` over/right/under `anchor`.
		- `top-in`, `right-in`, `bottom-in` -- insert `elem` inside the `anchor`: stick it to the upper/right/bottom edge.
		- `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`.
		- `top-in`, `right-in`, `bottom-in` -- insèrent `elem` à l'intérieur de `anchor` : collez-le sur le bord supérieur/droit/inférieur.

		For instance:
		Par exemple :

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

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

		The result:
		Le resultat :

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

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