diff --git a/2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md b/2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md index 62c0a8ab0..528c17593 100644 --- a/2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md +++ b/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. diff --git a/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md b/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md index 09c14a08c..c3c32465e 100644 --- a/2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md +++ b/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 ``. Then we can CSS-style them on `:hover` and handle clicks exactly on text, because `` width is exactly the text width (unlike without it). -2. Set a handler to the `tree` root node and handle clicks on that `` titles. +1. Enveloppez chaque titre de nœud d'arbre dans ``. Ensuite, nous pouvons ajouter du CSS sur `:hover` et gérer les clics exactement sur le texte, car la largeur de `` 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 `` titres. diff --git a/2-ui/2-events/03-event-delegation/2-sliding-tree/task.md b/2-ui/2-events/03-event-delegation/2-sliding-tree/task.md index bdcf2a510..6ce4fc8c4 100644 --- a/2-ui/2-events/03-event-delegation/2-sliding-tree/task.md +++ b/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. diff --git a/2-ui/2-events/03-event-delegation/3-sortable-table/task.md b/2-ui/2-events/03-event-delegation/3-sortable-table/task.md index ec85a473c..483d77ee8 100644 --- a/2-ui/2-events/03-event-delegation/3-sortable-table/task.md +++ b/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 `` elements should sort it by corresponding column. +Rendre le tableau triable: les clics sur les éléments `` doivent le trier par colonne correspondante. -Each `` has the type in the attribute, like this: +Chaque `` a le type dans l'attribut, comme ceci: ```html @@ -32,12 +32,12 @@ Each `
` has the type in the attribute, like this:
``` -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. diff --git a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md index 3001b9915..671cdc92b 100644 --- a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md +++ b/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 ``` -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. diff --git a/2-ui/2-events/03-event-delegation/article.md b/2-ui/2-events/03-event-delegation/article.md index df086f24b..77785ee6a 100644 --- a/2-ui/2-events/03-event-delegation/article.md +++ b/2-ui/2-events/03-event-delegation/article.md @@ -1,19 +1,19 @@ -# Event delegation +# Délégation d'événement -Capturing and bubbling allow us to implement one of most powerful event handling patterns called *event delegation*. +La capture et le bouillonement ("bubbling") nous permettent d'implémenter l'un des modèles de gestion d'événements les plus puissants appelés *Délégation d'événement*. -The idea is that if we have a lot of elements handled in a similar way, then instead of assigning a handler to each of them -- we put a single handler on their common ancestor. +L'idée est que si nous avons beaucoup d'éléments traités de la même manière, au lieu d'assigner un gestionnaire à chacun d'eux -- nous mettons un seul gestionnaire sur leur ancêtre commun. -In the handler we get `event.target`, see where the event actually happened and handle it. +Dans le gestionnaire, nous obtenons `event.target`, voyons où l'événement s'est réellement produit et traitons le. -Let's see an example -- the [Ba-Gua diagram](http://en.wikipedia.org/wiki/Ba_gua) reflecting the ancient Chinese philosophy. +Voyons un exemple -- le [diagramme Ba-Gua](http://en.wikipedia.org/wiki/Ba_gua) reflétant l'ancienne philosophie chinoise. -Here it is: +Le voici: [iframe height=350 src="bagua" edit link] -The HTML is like this: +Le code HTML est comme ceci: ```html @@ -30,45 +30,45 @@ The HTML is like this:
``` -The table has 9 cells, but there could be 99 or 9999, doesn't matter. +Le tableau a 9 cellules, mais il pourrait y en avoir 99 ou 9999, peu importe. -**Our task is to highlight a cell `` on click.** +**Notre tâche est de surligner une cellule `` en cliquant dessus.** -Instead of assign an `onclick` handler to each `` (can be many) -- we'll setup the "catch-all" handler on `` element. +Au lieu d'assigner un gestionnaire `onclick` à chaque `
` -- nous allons configurer le gestionnaire "foure-tout" sur l'élément ``. -It will use `event.target` to get the clicked element and highlight it. +Il utilisera `event.target` pour obtenir l'élément cliqué et le surligner. -The code: +Le code: ```js let selectedTd; *!* table.onclick = function(event) { - let target = event.target; // where was the click? + let target = event.target; // où était le clic? - if (target.tagName != 'TD') return; // not on TD? Then we're not interested + if (target.tagName != 'TD') return; // pas sur TD? Alors nous ne sommes pas intéressés - highlight(target); // highlight it + highlight(target); // surligner }; */!* function highlight(td) { - if (selectedTd) { // remove the existing highlight if any + if (selectedTd) { // supprimer le surlignage le cas échéant selectedTd.classList.remove('highlight'); } selectedTd = td; - selectedTd.classList.add('highlight'); // highlight the new td + selectedTd.classList.add('highlight'); // surligner le nouveau td } ``` -Such a code doesn't care how many cells there are in the table. We can add/remove `
` dynamically at any time and the highlighting will still work. +Un tel code ne se soucie pas du nombre de cellules dans le tableau. Nous pouvons ajouter / supprimer `` dynamiquement à tout moment et le surlignage fonctionnera toujours. -Still, there's a drawback. +Pourtant, il y a un inconvénient. -The click may occur not on the ``, but inside it. +Le clic peut se produire non pas sur le ``, mais à l'intérieur. -In our case if we take a look inside the HTML, we can see nested tags inside ``, like ``: +Dans notre cas, si nous jetons un œil à l'intérieur du HTML, nous pouvons voir des balises imbriquées à l'intérieur de ``, comme ``: ```html @@ -79,13 +79,13 @@ In our case if we take a look inside the HTML, we can see nested tags inside ` ``` -Naturally, if a click happens on that `` then it becomes the value of `event.target`. +Naturellement, si un clic se produit sur la balise ``, elle devient la valeur de `event.target`. ![](bagua-bubble.svg) -In the handler `table.onclick` we should take such `event.target` and find out whether the click was inside `` or not. +Dans le gestionnaire `table.onclick`, nous devrions prendre `event.target` et découvrir si le clic était à l'intérieur de `` ou non. -Here's the improved code: +Voici le code amélioré: ```js table.onclick = function(event) { @@ -99,27 +99,27 @@ table.onclick = function(event) { }; ``` -Explanations: -1. The method `elem.closest(selector)` returns the nearest ancestor that matches the selector. In our case we look for `` on the way up from the source element. -2. If `event.target` is not inside any ``, then the call returns immediately, as there's nothing to do. -3. In case of nested tables, `event.target` may be a ``, but lying outside of the current table. So we check if that's actually *our table's* ``. -4. And, if it's so, then highlight it. +Explications: +1. La méthode `elem.closest(selector)` retourne l'ancêtre le plus proche qui correspond au sélecteur. Dans notre cas, nous recherchons `` en remontant de l'élément source. +2. Si `event.target` n'est pas à l'intérieur d'un ``, alors l'appel renvoie immédiatement, car il n'y a rien à faire. +3. Dans le cas de tableaux imbriquées, `event.target` peut être un ``, mais se trouvant en dehors du tableau actuel. Nous vérifions donc si c'est réellement la balise `` de *notre tableau*. +4. Si c'est le cas, surligner le. -As the result, we have a fast, efficient highlighting code, that doesn't care about the total number of `` in the table. +En conséquence, nous avons un code de surlignage rapide et efficace, qui ne se soucie pas du nombre total de `` dans le tableau. -## Delegation example: actions in markup +## Exemple de délégation: actions dans le balisage -There are other uses for event delegation. +Il existe d'autres utilisations de la délégation d'événements. -Let's say, we want to make a menu with buttons "Save", "Load", "Search" and so on. And there's an object with methods `save`, `load`, `search`... How to match them? +Disons que nous voulons créer un menu avec les boutons "Save", "Load", "Search" et ainsi de suite. Et il y a un objet avec les méthodes `save`, `load`, `search`... Comment les faire correspondre? -The first idea may be to assign a separate handler to each button. But there's a more elegant solution. We can add a handler for the whole menu and `data-action` attributes for buttons that has the method to call: +La première idée peut être d'assigner un gestionnaire distinct à chaque bouton. Mais il existe une solution plus élégante. Nous pouvons ajouter un gestionnaire pour tout le menu et des attributs `data-action` pour les boutons qui ont la méthode à appeler: ```html ``` -The handler reads the attribute and executes the method. Take a look at the working example: +Le gestionnaire lit l'attribut et exécute la méthode. Jetez un œil à l'exemple suivant: ```html autorun height=60 run untrusted