Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests Activity

Changement du nom, sans javascript, ou avec

Browse Source 
Sans javascript, il manque encore l'aspect formulaire et enregistrement serveur à chaque passage de page
This commit is contained in:
Yannick Francois 2018-10-20 00:12:58 +02:00
parent 053d24c158
commit bf23bee282
4 changed files with 16 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
public/name_form.html
View File

@ -1,28 +0,0 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="referrer" content="same-origin">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Framadate</title>
<meta name="description" content=" ">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link crossorigin="anonymous" rel="stylesheet" href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap-reboot.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<form>
<label>Nom :
<input type="text" name="name" placeholder="Bob"/>
</label>
<button type="submit">Valider</button>
<p class="example">Par exemple : Stéphane ou Caroline</p>
</form>
</body>
</html>

2
public/parametres.html
View File

@ -19,7 +19,7 @@
<section> <section>
<p> <p>
Je m'appelle <a href="name_form.html" id="name">henri</a> Je m'appelle <input type="text" name="name" id="name" value="Henri">
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>

18
public/script.js
View File

@ -10,14 +10,16 @@ const debugStorage = () => {
} }
} }
var nameFieldLink = $("#name").addEventListener("click", (e) => { $("#name").outerHTML = `<span id="name" class="toggle-field">${$("#name").getAttribute('value')}</span>`;
$("#name").addEventListener("click", (e) => {
e.preventDefault(); e.preventDefault();
console.log("click sur le name"); createModal(`<input type="text" name="name" id="nameUpdateField" value="${e.target.textContent}"><button id="submitTextField" data-reference="name">></button>`);
createModal("truc");
}); });
const removeOverlay = () => { const removeOverlay = () => {
$('body').removeChild($('.overlay')) $('body').removeChild($('.overlay'))
$('body').removeChild($('.modal'))
} }
const createModal = (text) => { const createModal = (text) => {
@ -27,11 +29,17 @@ const createModal = (text) => {
popin.innerHTML = text popin.innerHTML = text
popin.className = 'modal' popin.className = 'modal'
overlay.className = 'overlay' overlay.className = 'overlay'
overlay.appendChild(popin) $('body').appendChild(overlay)
$('body').appendChild(popin)
overlay.addEventListener('click', removeOverlay) overlay.addEventListener('click', removeOverlay)
$('body').insertBefore(overlay, $('main')) $('body').insertBefore(overlay, $('main'))
}
$("#submitTextField").addEventListener("click", () => {
$("#name").innerHTML = $("#nameUpdateField").value
removeOverlay()
});
}
$$('input').forEach((inputElement) => { $$('input').forEach((inputElement) => {
inputElement.addEventListener("change", () => { inputElement.addEventListener("change", () => {

2
public/style.css
View File

@ -58,10 +58,12 @@ input[type="text"], input[type="email"] {
width: 100%; width: 100%;
z-index: 5; z-index: 5;
} }
.modal { .modal {
background: #fff; background: #fff;
top: 10%; top: 10%;
left: 40%; left: 40%;
padding: 10px; padding: 10px;
position: absolute; position: absolute;
z-index: 10;
} }