From 9b2e530a720b4a9d7362acf1be5433c46e5d0b68 Mon Sep 17 00:00:00 2001 From: Vincent Clipet Date: Mon, 24 Mar 2025 11:14:52 +0100 Subject: [PATCH] feat: Translated the remaining 80% of 'Custom elements' page, + exercise, + solution --- .../1-live-timer/solution.md | 6 +- .../1-live-timer/solution.view/live-timer.js | 2 +- .../1-live-timer/source.view/live-timer.js | 2 +- .../2-custom-elements/1-live-timer/task.md | 14 +- 8-web-components/2-custom-elements/article.md | 208 +++++++++--------- 5 files changed, 112 insertions(+), 120 deletions(-) diff --git a/8-web-components/2-custom-elements/1-live-timer/solution.md b/8-web-components/2-custom-elements/1-live-timer/solution.md index a9eacc880..64e836f3e 100644 --- a/8-web-components/2-custom-elements/1-live-timer/solution.md +++ b/8-web-components/2-custom-elements/1-live-timer/solution.md @@ -1,4 +1,4 @@ -Please note: -1. We clear `setInterval` timer when the element is removed from the document. That's important, otherwise it continues ticking even if not needed any more. And the browser can't clear the memory from this element and referenced by it. -2. We can access current date as `elem.date` property. All class methods and properties are naturally element methods and properties. +Veuillez noter: +1. On nettoie le timer `setInterval` quand l'élément est supprimé du document. C'est important, car sans ça, il continuera à s'éxécuter même si il ne sert plus à rien. Et le navigateur ne pourra pas vider la mémoire associée et référencée par cet élément. +2. On peut accéder à la date actuelle via la propriété `elem.date`. Toutes les méthodes et propriétés de classe sont aussi des méthodes et propriétés d'élement. diff --git a/8-web-components/2-custom-elements/1-live-timer/solution.view/live-timer.js b/8-web-components/2-custom-elements/1-live-timer/solution.view/live-timer.js index a53d72e00..5a12935a2 100644 --- a/8-web-components/2-custom-elements/1-live-timer/solution.view/live-timer.js +++ b/8-web-components/2-custom-elements/1-live-timer/solution.view/live-timer.js @@ -24,7 +24,7 @@ class LiveTimer extends HTMLElement { } disconnectedCallback() { - clearInterval(this.timer); // important to let the element be garbage-collected + clearInterval(this.timer); // important pour permettre à l'élément d'être supprimé de la mémoire } } diff --git a/8-web-components/2-custom-elements/1-live-timer/source.view/live-timer.js b/8-web-components/2-custom-elements/1-live-timer/source.view/live-timer.js index e2fe2b69f..691d0bd7d 100644 --- a/8-web-components/2-custom-elements/1-live-timer/source.view/live-timer.js +++ b/8-web-components/2-custom-elements/1-live-timer/source.view/live-timer.js @@ -1,6 +1,6 @@ class LiveTimer extends HTMLElement { - /* your code here */ + /* Votre code ici */ } diff --git a/8-web-components/2-custom-elements/1-live-timer/task.md b/8-web-components/2-custom-elements/1-live-timer/task.md index 1feb7490a..4cc7abea2 100644 --- a/8-web-components/2-custom-elements/1-live-timer/task.md +++ b/8-web-components/2-custom-elements/1-live-timer/task.md @@ -1,14 +1,14 @@ # Live timer element -We already have `` element to show a nicely formatted time. +Nous avons déjà un élément `` pour afficher l'heure proprement. -Create `` element to show the current time: -1. It should use `` internally, not duplicate its functionality. -2. Ticks (updates) every second. -3. For every tick, a custom event named `tick` should be generated, with the current date in `event.detail` (see chapter ). +Créez l'élément `` pour afficher l'heure actuelle: +1. Il doit réutiliser `` en interne, pas dupliquer ses fonctionnalités. +2. Tick (mise à jour) toutes les secondes. +3. Pour chaque tick, un évènement personnalisé appelé `tick` devrait être généré, avec la date/heure actuelle accessible via `event.detail` (Voir le chapitre ). -Usage: +Utilisation: ```html @@ -18,6 +18,6 @@ Usage: ``` -Demo: +Démo: [iframe src="solution" height=40] diff --git a/8-web-components/2-custom-elements/article.md b/8-web-components/2-custom-elements/article.md index 3f0ccd100..903b5be2f 100644 --- a/8-web-components/2-custom-elements/article.md +++ b/8-web-components/2-custom-elements/article.md @@ -3,85 +3,79 @@ Nous pouvons créer des éléments HTML personnalisés, définis par nos classes, avec leur propres méthodes et propriétés, gestionnaires d'événement, etc. -Une fois qu'un élément personnalisé est définit, nous pouvons l'utiliser au même titre qu'un élément HTML classique. +Une fois qu'un élément personnalisé est défini, nous pouvons l'utiliser au même titre qu'un élément HTML classique. -C'est parfait, sachant que le dictionnaire HTML est riche, mais pas infini. Il n'y a pas de ``, ``, ``... Pensez un instant à toute les balises dont nous pourrions avoir besoin. +C'est parfait, sachant que le dictionnaire HTML est riche, mais pas infini. Il n'y a pas de ``, ``, ``... Pensez à toutes les balises dont nous pourrions avoir besoin. -Nous pouvons les définir avec une classe spéciale, et les utiliser comme des balises HTML classique. +Nous pouvons les définir avec une classe spéciale, et les utiliser comme des balises HTML classiques. Il y a deux sortes d'éléments personnalisés : -2. **Éléments personnalisés autonome** -- les nouveaux éléments, qui étendent la classe abstraite `HTMLElement`. - -**Éléments personnalisés intégrés** -- ils étendent les éléments déjà intégrés au navigateur, comme un bouton personnalisé, basé sur `HTMLButtonElement`. +1. **Éléments personnalisés autonomes** -- les nouveaux éléments, qui étendent la classe abstraite `HTMLElement`. +2. **Éléments personnalisés intégrés** -- les éléments personnalisés qui étendent les éléments natifs du navigateur, comme un bouton personnalisé basé sur `HTMLButtonElement`. - -Nous allons voir les éléments personnalisés autonome dans un premier temps, puis nous passerons aux éléments personnalisés déjà intégrés au navigateur. +Nous allons dans un premier temps voir les éléments personnalisés autonomes, puis nous passerons aux éléments personnalisés intégrés. - -Pour créer un élément personnalisé, nous allons devoir donner quelques détails au navigateur : Comment le montrer, que faire lorsque cet élément est chargé dans le DOM, ect... +Pour créer un élément personnalisé, nous allons devoir donner quelques détails au navigateur : Comment l'afficher, que faire lorsque cet élément est ajouté ou supprimé de la page, etc... - -C'est possible en créant une classe avec des méthodes spéciales. C'est facile, sachant qu'il n'y seulement que quelques méthodes, et elles sont toutes optionnelles. +C'est possible en créant une classe avec des méthodes spéciales. C'est plutôt facile, sachant qu'il n'y seulement que quelques méthodes, et elles sont toutes optionnelles. - -Voici la classe et toute ses méthodes : +Voici le squelette d'une classe, avec toutes ses méthodes : ```js class MyElement extends HTMLElement { constructor() { super(); - // créer l'élément + // crée l'élément } connectedCallback() { // le navigateur appelle cette méthode lorsque l'élément est ajouté au document - // elle peut-être appelé autant de fois que lélément est ajouté ou supprimé) + // (elle peut-être appelée autant de fois que l'élément est ajouté/supprimé) } disconnectedCallback() { // le navigateur appelle cette méthode lorsque l'élément est supprimé du document - // elle peut-être appelé autant de fois que lélément est ajouté ou supprimé) + // (elle peut-être appelée autant de fois que lélément est ajouté/supprimé) } static get observedAttributes() { - return [/* tableau listant les attributs dont les changements sont à surveiller */]; + return []; /* tableau listant les attributs dont les changements sont à surveiller */ } attributeChangedCallback(name, oldValue, newValue) { - // appelé lorsque l'un des attributs listé par la méthode ci-dessus est modifié + // appelé lorsque l'un des attributs listés par la méthode ci-dessus est modifié } adoptedCallback() { - // méthode appelé lorsque l'élément est envoyé vers un nouveau document - // (utilisé très rarement avec document.adoptNode) + // méthode appelé lorsque l'élément est déplacé vers un nouveau document + // (se passe dans document.adoptNode; très rarement utilisé) } - // vous pouvez ajouter d'autres méthodes ou propriétées + // vous pouvez ajouter d'autres méthodes ou propriétés } ``` - Après ça, nous devons enregistrer cet élément : ```js -// let the browser know that is served by our new class +// Indique au navigateur que est géré par notre classe customElements.define("my-element", MyElement); ``` -Now for any HTML elements with tag ``, an instance of `MyElement` is created, and the aforementioned methods are called. We also can `document.createElement('my-element')` in JavaScript. +A partir de maintenant, pour chaque élement HTML ``, une instance de `MyElement` est créée, et les méthodes listées ci-dessus sont appelées. On peut aussi utiliser `document.createElement('my-element')` pour créer l'élément en JavaScript. -```smart header="Custom element name must contain a hyphen `-`" -Custom element name must have a hyphen `-`, e.g. `my-element` and `super-button` are valid names, but `myelement` is not. +```smart header="Les élements personnalisés doivent contenir un tiret `-`" +Les élements personnalisés doivent impérativement contenir un `-`, ex. `my-element` et `super-button` sont des noms valides, mais pas `myelement`. -That's to ensure that there are no name conflicts between built-in and custom HTML elements. +C'est pour s'assurer de n'avoir aucun conflit de nommage entre les éléments HTML natifs et les éléments personnalisés. ``` -## Example: "time-formatted" +## Exemple: "time-formatted" -For example, there already exists `