Skip to content

Commit 9d111fe

Browse files
authored
Merge pull request #239 from TevaHenry/master
Event delegation
2 parents d2aada4 + dfff924 commit 9d111fe

File tree

6 files changed

+110
-109
lines changed

6 files changed

+110
-109
lines changed

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

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

33
---
44

5-
# Hide messages with delegation
5+
# Masquer les messages avec délégation d'événement
66

7-
There's a list of messages with removal buttons `[x]`. Make the buttons work.
7+
Il y a une liste de messages avec des boutons de suppression "[x]". Faites fonctionner les boutons.
88

9-
Like this:
9+
Comme ceci:
1010

1111
[iframe src="solution" height=420]
1212

13-
P.S. Should be only one event listener on the container, use event delegation.
13+
P.S. Il devrait y avoir qu'un seul écouteur d'événement sur le conteneur, utiliser la délégation d'événement.
Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
The solution has two parts.
1+
La solution comporte deux parties.
22

3-
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).
4-
2. Set a handler to the `tree` root node and handle clicks on that `<span>` titles.
3+
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).
4+
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

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

33
---
44

5-
# Tree menu
5+
# Menu arborescent
66

7-
Create a tree that shows/hides node children on click:
7+
Créez une arborescence qui affiche / masque les enfants des nœuds au clic:
88

99
[iframe border=1 src="solution"]
1010

11-
Requirements:
11+
Conditions:
1212

13-
- Only one event handler (use delegation)
14-
- A click outside the node title (on an empty space) should not do anything.
13+
- Un seul gestionnaire d'événements (utiliser la délégation d'événement)
14+
- 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

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

33
---
44

5-
# Sortable table
5+
# Table triable
66

7-
Make the table sortable: clicks on `<th>` elements should sort it by corresponding column.
7+
Rendre le tableau triable: les clics sur les éléments `<th>` doivent le trier par colonne correspondante.
88

9-
Each `<th>` has the type in the attribute, like this:
9+
Chaque `<th>` a le type dans l'attribut, comme ceci:
1010

1111
```html
1212
<table id="grid">
@@ -32,12 +32,12 @@ Each `<th>` has the type in the attribute, like this:
3232
</table>
3333
```
3434

35-
In the example above the first column has numbers, and the second one -- strings. The sorting function should handle sort according to the type.
35+
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.
3636

37-
Only `"string"` and `"number"` types should be supported.
37+
Seuls les types `"string"` et `"number"` doivent être pris en charge.
3838

39-
The working example:
39+
L'exemple de travail:
4040

4141
[iframe border=1 src="solution" height=190]
4242

43-
P.S. The table can be big, with any number of rows and columns.
43+
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

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

33
---
44

5-
# Tooltip behavior
5+
# Comportement info-bulle
66

7-
Create JS-code for the tooltip behavior.
7+
Créez du code JS pour le comportement de l'info-bulle.
88

9-
When a mouse comes over an element with `data-tooltip`, the tooltip should appear over it, and when it's gone then hide.
9+
Lorsqu'une souris survole un élément avec `data-tooltip`, l'info-bulle devrait apparaître dessus, et quand elle est partie, se cacher.
10+
11+
Un exemple de HTML annoté:
1012

11-
An example of annotated HTML:
1213
```html
1314
<button data-tooltip="the tooltip is longer than the element">Short button</button>
1415
<button data-tooltip="HTML<br>tooltip">One more button</button>
1516
```
1617

17-
Should work like this:
18+
Devrait fonctionner comme ceci:
1819

1920
[iframe src="solution" height=200 border=1]
2021

21-
In this task we assume that all elements with `data-tooltip` have only text inside. No nested tags (yet).
22+
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).
2223

23-
Details:
24+
Détails:
2425

25-
- The distance between the element and the tooltip should be `5px`.
26-
- The tooltip should be centered relative to the element, if possible.
27-
- 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.
28-
- The tooltip content is given in the `data-tooltip` attribute. It can be arbitrary HTML.
26+
- La distance entre l'élément et l'info-bulle doit être de `5px`.
27+
- L'info-bulle doit être centrée par rapport à l'élément, si possible.
28+
- 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.
29+
- Le contenu de l'info-bulle est donné dans l'attribut `data-tooltip`. Cela peut être du HTML arbitraire.
2930

30-
You'll need two events here:
31-
- `mouseover` triggers when a pointer comes over an element.
32-
- `mouseout` triggers when a pointer leaves an element.
31+
Vous aurez besoin de deux événements ici:
32+
- `mouseover` se déclenche lorsqu'un pointeur survole un élément.
33+
- `mouseout` se déclenche lorsqu'un pointeur quitte un élément.
3334

34-
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.
35+
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à.
3536

36-
After the behavior is implemented, even people unfamiliar with JavaScript can add annotated elements.
37+
Une fois le comportement implémenté, même les personnes non familiarisées avec JavaScript peuvent ajouter des éléments annotés.
3738

38-
P.S. Only one tooltip may show up at a time.
39+
P.S. Une seule info-bulle peut apparaître à la fois.

0 commit comments

Comments
 (0)