HTML5 / Tout doux

Date de première publication : 2016/05/03

Le but de cet exercice est de faire une liste de choses à faire. La liste doit être sauvegardée en local par le navigateur.

Une liste éditable

Pour l'exercice, il faut une page avec les composants suivants :

• Une liste vide éditable avec contenteditable="true". Si la liste n'est pas éditable, ça marche aussi mais on ne pourra pas modifier aussi facilement la liste déjà saisie.
• Une zone de texte pour faire la saisir de nouveaux items
• Un bouton pour ajouter une ligne.
• Un bouton pour effacer la liste.

Voici un peu d'aide si vous voulez que la touche ENTREE soit prise en compte et que vous ne voyez pas comment faire :

Pour pouvoir ajouter un élément en appuyant sur la touche ENTREE, il faut mettre un formulaire sur la page et que le bouton d'ajout soit un bouton de type submit. Bien entendu, il faudra désactiver le comportement par défaut car on ne veut pas de rechargement de page.

Pour ajouter un élément, il suffit de le taper dans le champ texte mais il est aussi possible d'appuyer sur entree dans la liste.

Pour compter le nombre d'éléments de la liste, il est possible de compter le nombre d'enfant(s) ou de jouer avec les sélecteurs comme par exemple :

document.querySelectorAll("#liste > li").length
document.getElementById("liste").childNodes.length

Ajout de la persistance

HTML5 propose l'objet localStorage. Si l'objet est disponible, voilà les méthodes qui vous intéresseront :

clear()

Effacer la zone mémoire locale

getItem(clé)

Récupère la valeur locale associée à la clé donnée en paramètres

setItem(clé, valeur)

Changer la valeur locale associée à la clé

Pour la sauvegarde, je vous propose d'y aller franchement avec le innerHTML de la liste. Une autre possibilité est d'utiliser l'objet JSON et la méthode stringify()

L'appel à localStorage se fait naturellement :

• au chargement de la page pour peupler la liste si c'est pertinent
• quand la liste a un nouvel élément par le bouton "ajouter"
• pour vider la liste par le bouton "effacer"
• à chaque appui de touche sur la modification de la liste éditable !

Interaction avec un "web service"

Ajouter un bouton pour aller chercher en AJAX une action à faire disponible à l'adresse https://perso.isima.fr/loic/html/afaire.php. La page renvoie du texte simple (plain text). Cela ne devrait pas marcher pour une erreur de limitation de domaine (afaire_cors.php va marcher)

Voici le bout de code que j'avais donné dans le cours jQuery et que je vous laisse adapter :

function texte_a_recuperer() {
   $.ajax({
   url : "html.php",
   complete : function (xhr, result) {
     if (result!= "success") return;
     var response = xhr.responseText;
     $(response).appendTo("body");
     }
   });
}

Je laisse tomber XMLHttpRequest() à cause de la détection du navigateur que l'utilisation de cette fonction induit. Voici un morceau de code de la fonctionnalité Fetch

function texte_a_recuperer() {
	fetch("https://perso.isima.fr/loic/html/afaire_cors.php")
    .then(function(response) {
 		if(response.ok) {
 		 	return response.text();
  		} else
  		    throw new Error('Network response was not ok.');
	})
	.then(function(texte) {
     		console.log(texte);
	});

Cette fonctionnalité utilise des "promesses" (Promises).

Aller plus loin ...

• Permettre d'effacer une seule tâche
• Ajouter un statut ou une date à la tâche

Pour éviter les bogues, on peut enlever le caractère d'éditabilité de la liste quand elle est vide !