diff options
Diffstat (limited to 'Statics')
| -rw-r--r-- | Statics/Js/index.js | 33 | ||||
| -rw-r--r-- | Statics/Js/main.js | 59 | ||||
| -rw-r--r-- | Statics/Js/message.js | 26 | ||||
| -rw-r--r-- | Statics/Js/userinfo.js | 106 |
4 files changed, 170 insertions, 54 deletions
diff --git a/Statics/Js/index.js b/Statics/Js/index.js new file mode 100644 index 0000000..1c89567 --- /dev/null +++ b/Statics/Js/index.js @@ -0,0 +1,33 @@ + +// **************************************************************************** +// INDEX +// **************************************************************************** + +// Slideshow +function start_slideshow() { + let imageNumber = 1; + let images = [ + "/Medias/Images/slide0.jpg", + "/Medias/Images/slide1.jpg", + "/Medias/Images/slide2.jpg" + ]; + + setInterval(() => { + // Changement del'image de fond de de la div + document.getElementById("slideshow").style.backgroundImage = `url("${images[imageNumber]}")`; + // Untoggle les précedents + // Utilisation de ternary, utilisation: condition ? Sivrai : Sifaux + document.getElementById(`textSlide${imageNumber !== 0 ? imageNumber - 1 : images.length - 1}`).classList.toggle("show"); + document.getElementById(`indicatorSlide${imageNumber !== 0 ? imageNumber - 1 : images.length - 1}`).classList.toggle("slideSelected"); + // Toggle le nouveau texte & selecteur + document.getElementById(`textSlide${imageNumber}`).classList.toggle("show"); + document.getElementById(`indicatorSlide${imageNumber}`).classList.toggle("slideSelected") + // +1 sauf si fin + if(imageNumber < images.length - 1) { + imageNumber++; + } else { + imageNumber = 0; + } + } + ,5000); +} diff --git a/Statics/Js/main.js b/Statics/Js/main.js index 120bfb3..b4d0894 100644 --- a/Statics/Js/main.js +++ b/Statics/Js/main.js @@ -1,61 +1,12 @@ -// +// **************************************************************************** +// Main +// **************************************************************************** + // Site web utilisés pour JS: // https://www.w3schools.com/js/default.asp -// https://stackoverflow.com/ -// +// https://stackoverflow.com/ // Changement de langue document.getElementById("langSel").addEventListener("change", () => { document.getElementById("langForm").submit(); }); - -// Redirection -function redirect(page) { - window.location.href = `${page}.php`; -} - -// Timer pour message -function start_timer() { - // var -> global, let -> local{} - let seconds = 3; - let text = document.getElementById("redirect").innerHTML; - setInterval(() => { - if (seconds > 0) { - document.getElementById("redirect").innerHTML = `${text} ${seconds}.`; - seconds --; - } else { - document.getElementById("redirect").innerHTML = `${text} ${seconds}.`; - redirect("/index"); - } - }, - 1000); -} - -// Slideshow -function start_slideshow() { - let imageNumber = 1; - let images = [ - "/Medias/Images/slide0.jpg", - "/Medias/Images/slide1.jpg", - "/Medias/Images/slide2.jpg" - ]; - - setInterval(() => { - // Changement del'image de fond de de la div - document.getElementById("slideshow").style.backgroundImage = `url("${images[imageNumber]}")`; - // Untoggle les précedents - // Utilisation de ternary, utilisation: condition ? Sivrai : Sifaux - document.getElementById(`textSlide${imageNumber !== 0 ? imageNumber - 1 : images.length - 1}`).classList.toggle("show"); - document.getElementById(`indicatorSlide${imageNumber !== 0 ? imageNumber - 1 : images.length - 1}`).classList.toggle("slideSelected"); - // Toggle le nouveau texte & selecteur - document.getElementById(`textSlide${imageNumber}`).classList.toggle("show"); - document.getElementById(`indicatorSlide${imageNumber}`).classList.toggle("slideSelected") - // +1 sauf si fin - if(imageNumber < images.length - 1) { - imageNumber++; - } else { - imageNumber = 0; - } - } - ,5000); -} diff --git a/Statics/Js/message.js b/Statics/Js/message.js new file mode 100644 index 0000000..55eff48 --- /dev/null +++ b/Statics/Js/message.js @@ -0,0 +1,26 @@ + +// **************************************************************************** +// MESSAGES +// **************************************************************************** + +// Redirection +function redirect(page) { + window.location.href = `/${page}.php`; +} + +// Timer pour message +function start_timer(page) { + // var -> global, let -> local{} + let seconds = 1; + let text = document.getElementById("redirect").innerHTML; + setInterval(() => { + if (seconds > 0) { + document.getElementById("redirect").innerHTML = `${text} ${seconds}.`; + seconds --; + } else { + document.getElementById("redirect").innerHTML = `${text} ${seconds}.`; + redirect(page); + } + }, + 1000); +} diff --git a/Statics/Js/userinfo.js b/Statics/Js/userinfo.js new file mode 100644 index 0000000..6b4c1d9 --- /dev/null +++ b/Statics/Js/userinfo.js @@ -0,0 +1,106 @@ + +// **************************************************************************** +// USERINFO +// **************************************************************************** +// Mes sources pour créer cette partie: +// https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript +// https://stackoverflow.com/questions/47951287/dynamically-add-li-to-ul-javascript +// https://developer.mozilla.org/en-US/docs/Web/API/Document/createTextNode +// https://www.encodedna.com/javascript/how-to-get-all-li-elements-in-ul-using-javascript.htm +// https://www.geeksforgeeks.org/javascript-convert-an-array-to-json/ +// https://stackoverflow.com/questions/17785592/difference-between-json-stringify-and-json-parse +// https://www.w3docs.com/snippets/javascript/how-to-remove-an-element-from-an-array-in-javascript.html +// On passe par du JSON pour passer la liste des emplois du pro + +// **************************************************************************** +// GLOBAL +// **************************************************************************** +var payload = []; +var dictJobs = {}; + +// **************************************************************************** +// FONCTIONS ANNEXES +// **************************************************************************** +// Récupération des possibles emplois et stockage dans une variable +function init_dict_jobs() { + // Récupération des emplois disponibles + let selJob = document.getElementById("jobsSel"); + + // Pour chaque emploi disponible + for (i = 0; i < selJob.length; i ++) { + if (selJob[i].value !== "") { + // Création d'un dictionnaire -> "Nom Emploi": "ID" + dictJobs[selJob[i].text] = selJob[i].value; + } + } +} + +// Création et ajout d'un bouton "supprimmer" +function add_bouton_rm(li, jobsId) { + // Création et configuration du bouton + let buttonDel = document.createElement("button"); + buttonDel.type = "button"; + buttonDel.innerHTML = "<i class=\"fas fa-ban\"></i>"; + buttonDel.onclick = () => {remove(li, jobsId);}; + + // Ajout du boutton au "li" passé en argument + li.appendChild(buttonDel); +} + +// **************************************************************************** +// FONCTIONS PRINCIPALES +// **************************************************************************** +// Initiation +function init() { + // Peuplement du dictionnaire des emploies "Nom Emploi": "ID" + init_dict_jobs(); + + // Récupération des emplois déja présent + let jobs = document.getElementById("jobsList").getElementsByTagName("li"); + + // Pour chaque emploi déja enregistré + for (i = 0; i < jobs.length; i ++) { + // Ajout de chaques choix à la liste final "payload" + payload.push(dictJobs[jobs[i].innerHTML]); + // Ajout d'un id et d'un bouton remove à chaque "li". + jobs[i].id = "jobId_" + dictJobs[jobs[i].innerHTML]; + add_bouton_rm(jobs[i], dictJobs[jobs[i].innerHTML]); + } + + // Transformation de la liste des emplois choisis en JSON + // et inscription de ce dernier dans la "value" de l'input "jobs". + document.getElementById("jobs").value = JSON.stringify(payload); +} + +// Ajout d'un emploi +function add() { + // Récupération du nom du choix dans le "select" des emplois + let jobName = document.getElementById("jobsSel").options[jobsSel.selectedIndex].text; + + // Si l'emploi n'est pas deja dans "payload" + // et si il fait bien partie du dictionnaire de tous les emplois + if (jobName in dictJobs && !payload.includes(dictJobs[jobName])) { + // Ajout à payload + payload.push(dictJobs[jobName]); + // Création, configuration et ajout du nouveau "li" + let li = document.createElement("li"); + li.id = "jobId_" + dictJobs[jobName]; + li.appendChild(document.createTextNode(jobName)); + add_bouton_rm(li, dictJobs[jobName]); + document.getElementById("jobsList").appendChild(li); + // Transformation de la liste des emplois choisis en JSON + // et inscription de ce dernier dans la "value" de l'input "jobs". + document.getElementById("jobs").value = JSON.stringify(payload); + } +} + +// Suppression d'un emploi +function remove(li, jobsId) { + // Suppression de l'emploi dans "payload" + payload.splice(payload.indexOf(jobsId), 1); + // Suppression du "li" de l'emploi + document.getElementById("jobsList").removeChild(li); + // Transformation de la liste des emplois choisis en JSON + // et inscription de ce dernier dans la "value" de l'input "jobs". + document.getElementById("jobs").value = JSON.stringify(payload); +} |