tykayn/funky-framadate-front
1
1
Fork 1
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git synced 2023-08-25 13:53:14 +02:00
Code Issues Projects Releases Wiki Activity

Généralise l'usage du champs text

Browse Source
This commit is contained in:
Yannick Francois 2018-10-20 00:41:25 +02:00
parent bf23bee282
commit 105b983885
2 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/parametres.html
View File

@ -19,13 +19,13 @@
<section> <section>
<p> <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 et le titre de ce sondage
<select id="type_sondage"> <select id="type_sondage">
<option>classique</option> <option>classique</option>
<option>special dates</option> <option>special dates</option>
</select> </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>
<p> <p>
Si je devais le décrire pour les autres personnes, je dirais Si je devais le décrire pour les autres personnes, je dirais

23
public/script.js
View File

@ -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) => { const createUpdateModalOnClickFor = (textField) => {
e.preventDefault(); let $name = $(`#${textField.name}`);
createModal(`<input type="text" name="name" id="nameUpdateField" value="${e.target.textContent}"><button id="submitTextField" data-reference="name">></button>`); $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 = () => { const removeOverlay = () => {
@ -35,8 +46,8 @@ const createModal = (text) => {
overlay.addEventListener('click', removeOverlay) overlay.addEventListener('click', removeOverlay)
$('body').insertBefore(overlay, $('main')) $('body').insertBefore(overlay, $('main'))
$("#submitTextField").addEventListener("click", () => { $("#submitTextField").addEventListener("click", (e) => {
$("#name").innerHTML = $("#nameUpdateField").value $(`#${e.target.dataset.reference}`).innerHTML = $(`#${e.target.dataset.reference}UpdateField`).value
removeOverlay() removeOverlay()
}); });
} }