Installation

Téléchargez la dernière version du projet ou clonez le sur votre machine avec la commande git clone https://github.com/Gigeone/PROJET-8-OC-TO-DO-LIST.git.
Une fois les fichiers installés dans un repertoire, allez dans ce repertoire et lancer la commande npm install pour y installer les dépendances.
Lancez le fichier index.html qui se trouve à la racine du projet.

Vue d'ensemble

L'application utilise une architecture MVC qui apporte de réels avantages:

• Une conception claire et efficace grâce à la séparation des données de la vue et du contrôleur
• Un gain de temps de maintenance et d’évolution du site
• Une plus grande souplesse pour organiser le développement du site entre différents développeurs (indépendance des données, de l’affichage (webdesign) et des actions)

Fonctionnement technique de l'application

app.js

C'est ici que l'application s'initialisera, avec sa base de données, son controller, etc... C'est également dans ce fichier qu'est géré la mise à jour de la view au chargement de la page ou à chaque changement d'url (grâce à la fonction $on qui a été définit dans le fichier helpers.js)

• Todo : met en place la todo-list qui sera stockée dans le LocalStorage du navigateur. Elle crée une instance du model qui permettra d'intéragir avec les données (créer, lire, mettre à jour, efface). Le template html de base d'un todo est définit ici, et la view par défaut est attachée à ce template. (dans ce projet, la viewne contient pas de HTML, tout est dans le template.js) Le controller fait alors le lien entre le model et la view.
• setView : gère le chargement de la view en fonction de l'url actuelle. Cette fonction est appelée au chargement de la page, mais également lorsque le hashtag de l'url change.

controller.js

C'est dans ce fichier que les données de la base (Model) et l'affichage du site (View) seront mis en relation en fonction des actions de l'utilisateur. Quand une action sera effectuée, le controller fera en sorte que cela affecte à la fois les données et l'affichage.

• Controller : Crée le lien entre le model et la view.
• Controller.prototype.setView : Initialise la vue.
• Controller.prototype.showAll : Affiche tous les todos.
• Controller.prototype.showActive : Affiche les todos actifs.
• Controller.prototype.showCompleted : Affiche les todos complétés.
• Controller.prototype.addItem : Ajoute un todo.
• Controller.prototype.editItem : Modifie le titre d'un todo.
• Controller.prototype.editItemSave : Enregistrer un todo dont le titre a été modifié.
• Controller.prototype.editItemCancel : Annule la modification du titre d'un todo.
• Controller.prototype.removeItem : Supprime un todo.
• Controller.prototype.removeCompletedItems : Supprime tous les todos complétés.
• Controller.prototype.toggleComplete : Coche ou décoche un todo.
• Controller.prototype.toggleAll : Coche ou décoche tous les todos.
• Controller.prototype._updateCount : Met à jour le nombre de todos.
• Controller.prototype._filter : Filtre les todos selon leur statut.
• Controller.prototype._updateFilterState : Mets à jour le statut coché selon l'url.

helpers.js

Le fichier helpers.js rassemble des fonctions permettant de sélectionner des éléments dans le DOM, d'ajouter ou supprimer des eventListeners à des éléments donnés, et de trouver le parent d'un élément html.

• qs : Nommé ainsi pour querySelector, récupère le premier élément html d'après un sélecteur à l'intérieur d'un autre * élement (scope).
• qsa : Nommé ainsi pour query SelectorAll, récupère tous les éléments html d'après un sélecteur à l'intérieur d'un autre élement (scope).
• $on : Attache un addEventListener à un élément existant.
• $delegate : Attache un gestionnaire d’événements à un élément existant ou qui sera créé par la suite.
• $parent : Permet de récupérer le parent d'un élément html.

model.js

Le model.js permet les actions suivantes:

• Model.prototype.create : Créé un nouveau model de todo.
• Model.prototype.read : Récupère un ou plusieurs models de stockage existant.
• Model.prototype.update : Met à jour un model.
• Model.prototype.remove : Supprime un model du stockage.
• Model.prototype.removeAll : Supprime tous les models du stockage.
• Model.prototype.getCount : Compte le nombre de todos.

Ce fichier est responsable de récupérer et de gérer les informations dans la base.

store.js

Ce fichier va créer un nouvel objet qui sera la base de données et qui sera stocké dans le LocalStorage du navigateur. Plusieurs fonctions permettent d'effectuer diverses actions:

• store - Créé une nouvelle base de données dans le LocalStorage du navigateur, si elle n'existe pas déjà.
• save - enregistre un nouvel item, ou met à jour un item déjà existant.
• find - permet de trouver un item en fonction d'un Id donné.
• findAll - retourne tous les items de la base.
• remove - supprime un item de la base.
• drop - efface toute la base.

template.js

Contrairement au modèle classique de MVC, le code HTML n'est pas géré dans la view mais dans le fichier template.js. Nous allons décrire la fonction Template et ses méthodes appelées seulement dans les fichiers template.js et view.js.

• Template : Fourni un template par défaut.
• Template.prototype.show : Récupère le template par défaut et y injecte les informations du todo.
• Template.prototype.itemCounter : Gère l'affichage du nombre de todos.
• Template.prototype.clearCompletedButton : Gère l'affichage du bouton "Clear completed".

view.js

Ce fichier va se concentrer sur l'affichage. Les fonctions vont se charger de prendre les données qu'on lui donne (depuis model.js via controller.js) et de les afficher en se servant du template qu'on aura défini dans template.js.

Bien qu'il n'y ai pas de code HTML (comme dit précédemment, cette partie est dans le fichier template.js), c'est pourtant bien le code HTML de la page qui sera modifiée à travers les fonctions de ce fichier.

Il y a deux methodes principales liée à la fonction View : bind et render. Toutes les autres sont utilisées par ces deux methodes. Nous allons tout détaillé, dans l'ordre d'écriture du code :

• View : Définit le template à utiliser et prépare les éléments à cibler via les class CSS.
• View.prototype._removeItem : Supprimer un todo.
• View.prototype._clearCompletedButton : Affiche ou cache le bouton "Clear completed".
• View.prototype._setFilter : "Active" visuellement le bouton de filtre sélectionné.
• View.prototype._elementComplete : Raye ou déraye un todo.
• View.prototype._editItem : Gère l'affichage lors de l'édition du titre d'un todo existante.
• View.prototype._editItemDone : Remet un affichage normal au todo qui vient d'être modifié.
• View.prototype.render : Va, selon les paramètres utilisés, lancé une des fonctions suivantes.
• showEntries : affiche les todos.
• removeItem : retire un todo.
• updateElementCount : met à jour le nombre de todos.
• clearCompletedButton : mets à jour le bouton Clear completed.
• contentBlockVisibility : affiche ou masque le "footer" de la todo-list.
• toggleAll : Check tous les éléments.
• setFilter : Gère l'affichage des filtres.
• clearNewTodo : Vide le champ texte principal de la todo-list.
• elementComplete : Gère l'affichage d'un todo complété.
• editItem : Gère l'affichage d'un todo en cours de modification.
• editItemDone : Gère l'affichage d'un todo dont la modification vient d'être terminée.
• View.prototype._itemId : Récupère l'ID d'un todo.
• View.prototype._bindItemEditDone : Gère l'affichage lors de la perte de focus du todo en cours d'édition.
• View.prototype._bindItemEditCancel : Gère l'affichage du todo dont la modification est annulée.
• View.prototype.bind : Attache un gestionnaire d'évènement, avec des évènements javascript associées qui permettront d'effectuer le rendu.