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

Affiche un texte par défaut, et propose une popup pour saisi

Browse Source 
Base de fonctionnement sans javascript
This commit is contained in:
Yannick Francois 2018-10-19 12:29:12 +02:00
parent 23902aca1f
commit 053d24c158
4 changed files with 84 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
public/name_form.html Normal file
View File

@ -0,0 +1,28 @@
<!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>

6
public/parametres.html
View File

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

34
public/script.js
View File

@ -1,3 +1,8 @@
'use strict'
const $ = selector => document.querySelector(selector)
const $$ = selector => document.querySelectorAll(selector)
const debugStorage = () => { const debugStorage = () => {
for(var i = 0; i < localStorage.length; i++) { for(var i = 0; i < localStorage.length; i++) {
let key = localStorage.key(i) let key = localStorage.key(i)
@ -5,7 +10,30 @@ const debugStorage = () => {
} }
} }
document.querySelectorAll('input').forEach((inputElement) => { var nameFieldLink = $("#name").addEventListener("click", (e) => {
e.preventDefault();
console.log("click sur le name");
createModal("truc");
});
const removeOverlay = () => {
$('body').removeChild($('.overlay'))
}
const createModal = (text) => {
const overlay = document.createElement('div')
const popin = document.createElement('div')
popin.innerHTML = text
popin.className = 'modal'
overlay.className = 'overlay'
overlay.appendChild(popin)
overlay.addEventListener('click', removeOverlay)
$('body').insertBefore(overlay, $('main'))
}
$$('input').forEach((inputElement) => {
inputElement.addEventListener("change", () => { inputElement.addEventListener("change", () => {
localStorage[inputElement.name] = inputElement.value localStorage[inputElement.name] = inputElement.value
}); });
@ -16,10 +44,10 @@ if(document.getElementById("type_sondage")) {
let typeSondage = this.options[this.selectedIndex].text; let typeSondage = this.options[this.selectedIndex].text;
if(typeSondage == "classique") { if(typeSondage == "classique") {
localStorage.setItem('type_sondage', this.options[this.selectedIndex].text); localStorage.setItem('type_sondage', this.options[this.selectedIndex].text);
document.querySelector('#next').href = "reponses.html"; $('#next').href = "reponses.html";
} else { } else {
localStorage.setItem('type_sondage', 'dates'); localStorage.setItem('type_sondage', 'dates');
document.querySelector('#next').href = "dates.html"; $('#next').href = "dates.html";
} }
debugStorage() debugStorage()
}) })

22
public/style.css
View File

@ -43,3 +43,25 @@ input[type="text"], input[type="email"] {
line-height:60%; line-height:60%;
} }
.toggle-field {
color: blue;
cursor: pointer;
text-decoration: underline;
}
.overlay {
background: rgba(1, 1, 1, .3);
height: 100%;
top: 0;
left: 0;
position: absolute;
width: 100%;
z-index: 5;
}
.modal {
background: #fff;
top: 10%;
left: 40%;
padding: 10px;
position: absolute;
}