Merge pull request #239 from TevaHenry/master

Event delegation

Author: HachemiH

2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md

@@ -2,12 +2,12 @@ importance: 5
 
 ---
 
-# Hide messages with delegation
+# Masquer les messages avec délégation d'événement
 
-There's a list of messages with removal buttons `[x]`. Make the buttons work.
+Il y a une liste de messages avec des boutons de suppression "[x]". Faites fonctionner les boutons.
 
-Like this:
+Comme ceci:
 
 [iframe src="solution" height=420]
 
-P.S. Should be only one event listener on the container, use event delegation.
+P.S. Il devrait y avoir qu'un seul écouteur d'événement sur le conteneur, utiliser la délégation d'événement.

2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md

@@ -1,4 +1,4 @@
-The solution has two parts.
+La solution comporte deux parties.
 
-1. Wrap every tree node title into `<span>`. Then we can CSS-style them on `:hover` and handle clicks exactly on text, because `<span>` width is exactly the text width (unlike without it).
-2. Set a handler to the `tree` root node and handle clicks on that `<span>` titles.
+1. Enveloppez chaque titre de nœud d'arbre dans `<span>`. Ensuite, nous pouvons ajouter du CSS sur `:hover` et gérer les clics exactement sur le texte, car la largeur de `<span>` est exactement la largeur du texte (contrairement à sans elle).
+2. Définissez un gestionnaire sur le nœud racine `tree` et gérez les clics sur ces `<span>` titres.

2-ui/2-events/03-event-delegation/2-sliding-tree/task.md

@@ -2,13 +2,13 @@ importance: 5
 
 ---
 
-# Tree menu
+# Menu arborescent
 
-Create a tree that shows/hides node children on click:
+Créez une arborescence qui affiche / masque les enfants des nœuds au clic:
 
 [iframe border=1 src="solution"]
 
-Requirements:
+Conditions:
 
-- Only one event handler (use delegation)
-- A click outside the node title (on an empty space) should not do anything.
+- Un seul gestionnaire d'événements (utiliser la délégation d'événement)
+- Un clic en dehors du titre du nœud (sur un espace vide) ne devrait rien faire.

2-ui/2-events/03-event-delegation/3-sortable-table/task.md

@@ -2,11 +2,11 @@ importance: 4
 
 ---
 
-# Sortable table
+# Table triable
 
-Make the table sortable: clicks on `<th>` elements should sort it by corresponding column.
+Rendre le tableau triable: les clics sur les éléments `<th>` doivent le trier par colonne correspondante.
 
-Each `<th>` has the type in the attribute, like this:
+Chaque `<th>` a le type dans l'attribut, comme ceci:
 
 ```html
 <table id="grid">
@@ -32,12 +32,12 @@ Each `<th>` has the type in the attribute, like this:
 </table>
 ```
 
-In the example above the first column has numbers, and the second one -- strings. The sorting function should handle sort according to the type.
+Dans l'exemple ci-dessus, la première colonne contient des nombres et la seconde -- des chaînes. La fonction de tri doit gérer le tri en fonction du type.
 
-Only `"string"` and `"number"` types should be supported.
+Seuls les types `"string"` et `"number"` doivent être pris en charge.
 
-The working example:
+L'exemple de travail:
 
 [iframe border=1 src="solution" height=190]
 
-P.S. The table can be big, with any number of rows and columns.
+P.S. La table peut être grande, avec n'importe quel nombre de lignes et de colonnes.

2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md

@@ -2,37 +2,38 @@ importance: 5
 
 ---
 
-# Tooltip behavior
+# Comportement info-bulle
 
-Create JS-code for the tooltip behavior.
+Créez du code JS pour le comportement de l'info-bulle.
 
-When a mouse comes over an element with `data-tooltip`, the tooltip should appear over it, and when it's gone then hide.
+Lorsqu'une souris survole un élément avec `data-tooltip`, l'info-bulle devrait apparaître dessus, et quand elle est partie, se cacher.
+
+Un exemple de HTML annoté:
 
-An example of annotated HTML:
 ```html
 <button data-tooltip="the tooltip is longer than the element">Short button</button>
 <button data-tooltip="HTML<br>tooltip">One more button</button>
 ```
 
-Should work like this:
+Devrait fonctionner comme ceci:
 
 [iframe src="solution" height=200 border=1]
 
-In this task we assume that all elements with `data-tooltip` have only text inside. No nested tags (yet).
+Dans cette tâche, nous supposons que tous les éléments avec `data-tooltip` ne contiennent que du texte. Aucune balise imbriquée (pour le moment).
 
-Details:
+Détails:
 
-- The distance between the element and the tooltip should be `5px`.
-- The tooltip should be centered relative to the element, if possible.
-- The tooltip should not cross window edges. Normally it should be above the element, but if the element is at the page top and there's no space for the tooltip, then below it.
-- The tooltip content is given in the `data-tooltip` attribute. It can be arbitrary HTML.
+- La distance entre l'élément et l'info-bulle doit être de `5px`.
+- L'info-bulle doit être centrée par rapport à l'élément, si possible.
+- L'info-bulle ne doit pas traverser les bords de la fenêtre. Normalement, il devrait être au-dessus de l'élément, mais si l'élément est en haut de la page et qu'il n'y a pas d'espace pour l'info-bulle, alors en dessous.
+- Le contenu de l'info-bulle est donné dans l'attribut `data-tooltip`. Cela peut être du HTML arbitraire.
 
-You'll need two events here:
-- `mouseover` triggers when a pointer comes over an element.
-- `mouseout` triggers when a pointer leaves an element.
+Vous aurez besoin de deux événements ici:
+- `mouseover` se déclenche lorsqu'un pointeur survole un élément.
+- `mouseout` se déclenche lorsqu'un pointeur quitte un élément.
 
-Please use event delegation: set up two handlers on `document` to track all "overs" and "outs" from elements with `data-tooltip` and manage tooltips from there.
+Veuillez utiliser la délégation d'événements: configurez deux gestionnaires sur `document` pour suivre tous les "survolage" et "sorties" des éléments avec `data-tooltip` et gérer les info-bulles à partir de là.
 
-After the behavior is implemented, even people unfamiliar with JavaScript can add annotated elements.
+Une fois le comportement implémenté, même les personnes non familiarisées avec JavaScript peuvent ajouter des éléments annotés.
 
-P.S. Only one tooltip may show up at a time.
+P.S. Une seule info-bulle peut apparaître à la fois.