feat(anchor-menu): add anchor-menu component #15
Conversation
| } | ||
| }); | ||
|
|
||
| const elements = document.getElementsByTagName('h2'); |
There was a problem hiding this comment.
Dans Angular c'est conseillé de ne pas accéder au document directement. Cela permet de générer les pages côtés serveurs (SSR).
Ici je te proposerais une méthode différente soit d'accéder au host de ta composante et de limiter la recherche à l'intérieur de celui-ci
constructor(
private activatedRoute: ActivatedRoute,
private elementRef: ElementRef
) {}
ngAfterContentInit(): void {
...
const elements = (this.elementRef.nativeElement as HTMLElement).getElementsByTagName('h2');
...
}
There was a problem hiding this comment.
En intégrant ceci, this.elementRef.nativeElement retourne le html du composant et non de la page en entier. Est-ce qu'il faudrait plutôt que j'impante ceci dans la démo et qu'on passe this.elementRef.nativeElement en input au composant?
There was a problem hiding this comment.
Pour que ce soit fonctionnel la composante sdg-anchor-menu devrait englober le contenu et utiliser la projection via le ng-content
<sdg-anchor-menu>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
</p>
<h2 id="section1">Section 1</h2>
...
</sdg-anchor-menu>
There was a problem hiding this comment.
Ok je comprends mieux mainteant, mais il me semble que ça fait drôle quand même de mettre tout le contenu de la page dans le composant
There was a problem hiding this comment.
On pourrait p-t permettre à cette composante d'être au deux controllé et non-controllé. Si l'input anchors est détecté, on gère les valeurs de l'input sinon on recherche dans le contenu projeté les tags h2...?
Parce que la logique d'affaire de cette composante est toujours la même seulement les tags h2 avec un id doivent être utilisé comme "anchor" alors je vois quand même une pertinence qu'elle soit non-controllé. Qu'en pense tu? si non on analysera le besoin s'il se présente
There was a problem hiding this comment.
À mon avis, je le gérerais seulement par input finalement pour deux raisons:
- Comme j'ai dit plus haut, je trouve ça bizarre de mettre tout le contenu de la page entre les balises
<sdg-anchor-menu>. Plus clean d'avoir seulement la ligne:
- C'est mentionné que seulement des tags h2 peuvent être des anchors, mais pas nécessairement que TOUS les h2 DOIVENT être des anchors si le composant est présent. Donc en ayant en input on peut éventuellement créer un array
Anchor[]manuellement en spécifiant les titres et les ids qu'on voudrait, si on veut pas le faire auto.
| } | ||
|
|
||
| private jumpToSection(id: string) { | ||
| document.getElementById(id)?.scrollIntoView(); |
There was a problem hiding this comment.
Pour le document ici:
import { DOCUMENT } from '@angular/common';
...
constructor(
@Inject(DOCUMENT) private document: Document
) {}
private jumpToSection(id: string) {
this.document.getElementById(id)?.scrollIntoView();
}
| @@ -0,0 +1,4 @@ | |||
| export interface Anchor { | |||
| text: string | undefined; | |||
| htmlElementId: string | undefined; | |||
There was a problem hiding this comment.
Le htmlElementId doit toujours être défini si c'est un anchor?
There was a problem hiding this comment.
En faisant les petits changements ce n'est pas nécessaire en effet.
|
Faudrait penser au changement de langue, pour raffraichir les titres? Est-ce que c'est pertinent ou nos sites Québec sont seulement en français? |
Vigilance est seulement en français (pas d'intentions de le faire bilingue), je ne sais pas c'était quoi les plans pour QAL, mais j'imagine que ça va être bilingue. La démo je la laisserais seulement en français, mias les composants réutilisables pourraient être bilingues? Je pourrais regarder ça dans un PR à part |
| this.anchors = Array.from(elements).map((element) => ({ | ||
| text: element.innerText, | ||
| htmlElementId: element.id | ||
| })); |
There was a problem hiding this comment.
Vu qu'on y va pour une composante non controllé, on pourrait offrir aux assembleurs un utilitaire pour aller chercher les tags. Au moins si on a des changements de logique on pourrait controllés une partie des changements via l'utilitaire.
fuction findTitleAnchors(containerElement: HTMLElement): Anchor[] {
const elements = (
this.elementRef.nativeElement as HTMLElement
).getElementsByTagName('h2');
return Array.from(elements).map((element) => ({
text: element.innerText,
htmlElementId: element.id
}));
}
|
🎉 This PR is included in version 1.0.0-next.20 🎉 The release is available on:
Your semantic-release bot 📦🚀 |
Nouveau composant de menu d'ancres. Ajout à la démo