Description Technique - Hinato15/Projet-8-DAF GitHub Wiki

Arborescence

L'image suivante montre l'arborescence de notre application.

  • On y retrouve le fichier index.html à la racine.

  • Le dossier js qui contient les fonctionnalités.

  • node_modules qui contient notre framework de test unitaire.

  • Et pour finir le dossier test qui contient nos tests unitaires.

arborescence


Descriptif Technique du dossier js

Cette partie explique le rôle et le fonctionnement de chaque fichier.

A noter que l'application est conçu selon le motif MVC ( Modèle-vue-contrôleur ).

app.js

C'est ici que notre application de todos est initialisée.

  • Todo récupère tout ce dont il a besoin pour générer notre application.

    • Les données stockées en LocalStorage ( s'il y en a ).
    • Le modèle
    • Le template qui sera passé à la vue
    • Le contrôleur
  • setView s'occupe de la gestion de la vue au chargement de la page.


controller.js

Le contrôleur est positionné entre le modèle et la vue et permet de modifier cette dernière en fonction des données.

  • Controller: Crée le lien entre le modèle et la vue.
  • setView : Charge et initialise la vue.
  • showAll : Affiche tous les todos.
  • showActive : Affiche les todos actifs.
  • showCompleted : Affiche les todos complétés.
  • addItem : Se charge d'ajouter un todo.
  • editItem : Lance la modification d'un todo.
  • editItemSave : Enregistrer la modification d'un todo.
  • editItemCancel : Annule la modification d'un todo.
  • removeItem : Supprime un todo du DOM et du Storage.
  • removeCompletedItems : Supprime tous les todos complétés du DOM et du Storage.
  • toggleComplete : Coche ou décoche un todo.
  • toggleAll : Coche ou décoche tous les todos.
  • _updateCount : Met à jour le nombre de todos.
  • _filter : Filtre les todos selon leur statut.
  • _updateFilterState : Mets à jour le statut des todos selon le filtre choisi.

helpers.js

Ce fichier est comme un framework sauf qu'il est beaucoup plus léger puis qu'il ne possède que quelques fonctions.

  • qs récupère un élément en utilisant un sélecteur css.
  • qsa récupère tous les éléments en utilisant un sélecteur css.
  • $on ajoute un addEventListener à un élément existant.
  • $delegate ajoute un gestionnaire d’événement à tous les éléments sélectionnés existant et/ou créer.
  • $parent trouve le parent d'un élément en utilisant son tag.
  • forEach permet de boucler sur plusieurs éléments sélectionnés.

model.js

Ce fichier est le modèle de notre application.

  • Model s'occupe de créé une nouvelle instance du modèle.
  • create s'occupe de créé un nouveau modèle.
  • read cherche et retourne un modèle dans le storage.
  • update met à jour un modèle en lui attribuant un ID.
  • remove supprime un modèle du storage.
  • removeAll supprime toutes les données du storage.
  • getCount retourne le nombre total de todos.

store.js

Il se charge de créer un nouvel objet de stockage côté client.

  • Store créé une base dans le LocalStorage.
  • find trouve un élément en fonction d'une requête.
  • findAll récupère tous les éléments.
  • save sauvegarde un élément.
  • remove supprime un élément.
  • drop supprime tous les éléments.

template.js

Il est utilisé par la vue pour générer l'affichage.

  • Template définit les valeurs par défaut.
  • show ajoute le(s) todo(s).
  • itemCounter affiche un compteur du nombre de todos.
  • clearCompletedButton ajoute le bouton Clear completed.

view.js

Il s'occupe de l'affichage de notre application.

  • View résume complètement le DOM du navigateur.
  • _removeItem surprime un todo.
  • _clearCompletedButton affiche ou masque le bouton Clear completed.
  • _setFilter ajoute une classe au filtre sélectionné.
  • _elementComplete ajoute un style à un todo validé ou le supprime.
  • _editItem gère le style lors de la modification d'un todo.
  • _editItemDone restaure le style par défaut après la modification.
  • _itemId récupère l'ID d'un todo.
  • _bindItemEditDone restaure le style par défaut lors de la perte du focus.
  • _bindItemEditCancel restaure le style par défaut lorsque la modification est annulée.
  • bind ajoute des événements.