Composante de base

La structure proposée ici est celle qui devrait être utilisée comme base pour toutes vos composantes TimTools afin d'être cohérentes.

La structure sera découpée, puis expliquée.

Exemple

La composante sera instanciée par la ComponentFactory dans laquelle vous devrez effectuer 2 tâches pour utiliser une nouvelle composante.

1. Importer la référence à votre composante
2. Ajouter le nom de votre composante dans l'objet componentList

Explications

this.element

Le paramètre element est passé par la ComponentFactory lors de la création de l'instance et représente l'élément HTML qui contient l'attribut data-component ainsi que tout les enfants qu'il contient. Il est ensuite mis dans une variable globale pour pouvoir l'utiliser de n'importe où à l'intérieur de l'instance.

Afin de respecter l'encasulation de l'approche composante, la grande majorité des requêtes utilisant querySelector ou querySelectorAll dans une composante devrait utiliser this.element et non pas document .

LES OPTIONS

L'objet d'options devrait contenir les paramètres par défaut de votre composante qui pourraient être modifiés par des attributs data. Par exemple, ici, un paramètre de répétition qui serait à true par défaut. Cet objet devrait être défini tout de suite sous this.element dans le contructor.

Ensuite, selon la présence (ou non) d'un attribut data sur l'élément HTML de la composante, il sera possible de modifier un paramètre de l'objet d'options. Cette modification ne sera alors propre qu'à cette instance de la composante et pas aux autres. Au tout début de la méthode init , on appelle la méthode setOptions() et cette dernière s'occupe de vérifier la présences d'attributs sur la composante (this.element) afin de modifier la valeur de certains paramètres.

Dans l'exemple ci-dessous, la méthode setOptions effectue la vérification de la simple présence de l'attribut data-no-repeat sur this.element et ce, sans tenir compte de la valeur. Lorsque ce paramètre est présent, il assigne la valeur false au paramètre repeat.

Il est alors possible d'effectuer une condition en vérifiant le paramètre ailleur dans le code.