forked from tykayn/funky-framadate-front
101 lines
2.9 KiB
JavaScript
101 lines
2.9 KiB
JavaScript
'use strict'
|
|
|
|
const $ = selector => document.querySelector(selector)
|
|
const $$ = selector => document.querySelectorAll(selector)
|
|
|
|
const debugStorage = () => {
|
|
for(var i = 0; i < localStorage.length; i++) {
|
|
let key = localStorage.key(i)
|
|
console.debug(key, " = ", localStorage[key])
|
|
}
|
|
}
|
|
|
|
const useTextInsteadOfInputFor = (textField) => {
|
|
let $name = $(`#${textField.name}`);
|
|
$name.outerHTML = `<span id="${textField.name}" class="toggle-field">${$name.getAttribute('value')}</span>`;
|
|
return textField;
|
|
}
|
|
|
|
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 = () => {
|
|
$('body').removeChild($('.overlay'))
|
|
$('body').removeChild($('.modal'))
|
|
}
|
|
|
|
const createModal = (text) => {
|
|
const overlay = document.createElement('div')
|
|
const popin = document.createElement('div')
|
|
|
|
popin.innerHTML = text
|
|
popin.className = 'modal'
|
|
overlay.className = 'overlay'
|
|
$('body').appendChild(overlay)
|
|
$('body').appendChild(popin)
|
|
|
|
overlay.addEventListener('click', removeOverlay)
|
|
$('body').insertBefore(overlay, $('main'))
|
|
|
|
$("#submitTextField").addEventListener("click", (e) => {
|
|
$(`#${e.target.dataset.reference}`).innerHTML = $(`#${e.target.dataset.reference}UpdateField`).value
|
|
removeOverlay()
|
|
});
|
|
}
|
|
|
|
$$('input').forEach((inputElement) => {
|
|
inputElement.addEventListener("change", () => {
|
|
localStorage[inputElement.name] = inputElement.value
|
|
});
|
|
});
|
|
|
|
if($("#add-response-choice")) {
|
|
$("#add-response-choice").addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
let response = document.createElement("li");
|
|
let text = document.createTextNode("Blabla");
|
|
response.appendChild(text);
|
|
|
|
$("#responses").appendChild(response);
|
|
});
|
|
}
|
|
|
|
$$(".next").forEach((button) => {
|
|
button.addEventListener("click", (e) => {
|
|
$$(".toggle-field").forEach((field) => {
|
|
localStorage.setItem(field.id, field.innerText);
|
|
});
|
|
});
|
|
});
|
|
|
|
if(document.getElementById("type_sondage")) {
|
|
type_sondage.addEventListener('change', function() {
|
|
let typeSondage = this.options[this.selectedIndex].text;
|
|
if(typeSondage == "classique") {
|
|
localStorage.setItem('type_sondage', this.options[this.selectedIndex].text);
|
|
$('#next').href = "responses.html";
|
|
} else {
|
|
localStorage.setItem('type_sondage', 'dates');
|
|
$('#next').href = "dates.html";
|
|
}
|
|
})
|
|
}
|
|
|
|
if(document.getElementById("startButton")) {
|
|
startButton.addEventListener('click', function () {
|
|
localStorage.clear()
|
|
localStorage.setItem('type_sondage', 'classique');
|
|
});
|
|
}
|
|
|
|
debugStorage();
|