Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests 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>
<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

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) => {
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()
});
}