From 105b98388573ba5d6a1abe91a9e5b67db51c9169 Mon Sep 17 00:00:00 2001
From: Yannick Francois <yaf@elsif.fr>
Date: Sat, 20 Oct 2018 00:41:25 +0200
Subject: [PATCH] =?UTF-8?q?G=C3=A9n=C3=A9ralise=20l'usage=20du=20champs=20?=
 =?UTF-8?q?text?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/parametres.html |  4 ++--
 public/script.js       | 23 +++++++++++++++++------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/public/parametres.html b/public/parametres.html
index 266eee0f..f565d049 100644
--- a/public/parametres.html
+++ b/public/parametres.html
@@ -19,13 +19,13 @@
 
     <section>
       <p>
-      Je m'appelle <input type="text" name="name" id="name" value="Henri">
+      Je m'appelle <input type="text" name="name" id="name" value="Henri" class="nfl-textfield">
       et le titre de ce sondage
       <select id="type_sondage">
         <option>classique</option>
         <option>special dates</option>
       </select>
-      est <input type="text" name="titre">.
+      est «&nbsp;<input type="text" id="title" name="title" value="Repas des amies" class="nfl-textfield">&nbsp;».
       </p>
       <p>
       Si je devais le décrire pour les autres personnes, je dirais
diff --git a/public/script.js b/public/script.js
index 65431fa2..b99786cd 100644
--- a/public/script.js
+++ b/public/script.js
@@ -10,11 +10,22 @@ const debugStorage = () => {
   }
 }
 
-$("#name").outerHTML = `<span id="name" class="toggle-field">${$("#name").getAttribute('value')}</span>`;
+const useTextInsteadOfInputFor = (textField) => {
+  let $name = $(`#${textField.name}`);
+  $name.outerHTML = `<span id="${textField.name}" class="toggle-field">${$name.getAttribute('value')}</span>`;
+  return textField;
+}
 
-$("#name").addEventListener("click", (e) => {
-  e.preventDefault();
-  createModal(`<input type="text" name="name" id="nameUpdateField" value="${e.target.textContent}"><button id="submitTextField" data-reference="name">></button>`);
+const createUpdateModalOnClickFor = (textField) => {
+  let $name = $(`#${textField.name}`);
+  $name.addEventListener("click", (e) => {
+    e.preventDefault();
+    createModal(`<input type="text" name="${textField.name}" id="${textField.name}UpdateField" value="${e.target.textContent}"><button id="submitTextField" data-reference="${textField.name}">></button>`);
+  });
+}
+
+$$(".nfl-textfield").forEach((textField) => {
+  createUpdateModalOnClickFor(useTextInsteadOfInputFor(textField));
 });
 
 const removeOverlay = () => {
@@ -35,8 +46,8 @@ const createModal = (text) => {
   overlay.addEventListener('click', removeOverlay)
   $('body').insertBefore(overlay, $('main'))
 
-  $("#submitTextField").addEventListener("click", () => {
-    $("#name").innerHTML = $("#nameUpdateField").value
+  $("#submitTextField").addEventListener("click", (e) => {
+    $(`#${e.target.dataset.reference}`).innerHTML = $(`#${e.target.dataset.reference}UpdateField`).value
     removeOverlay()
   });
 }