Commit 8afe8b88 authored by root's avatar root

separate JS and HTML/PHP in different files

parent 55bda179
//liste des blocs qui peuvent être affichés / cachés
var blocks = ["link", "paraSecondSelection", "cotisation", "informationsCollectivite", "formulaireEPCIMutualisant", "boutonEnvoyer"];
function displayMask(display) {
//fonction qui affiche / cache les formulaires / informations en fonction des données entrées dans les formulaires
for (var h = 0; h < blocks.length; h++) {
if (isWordIn(blocks[h], display)) {
document.getElementById(blocks[h]).style.display = "block";
} else {
document.getElementById(blocks[h]).style.display = "none";
}
}
}
function displayMaskOptions(display) {
//sert à afficher / cacher les options du 2e select menu
var toutesLesOptions =document.getElementsByName("optionSelect2");
for (var j = 0; j < toutesLesOptions.length; j++) {
//boucle for qui va parcourir la liste des classes des options disponibles
if (display === toutesLesOptions[j].getAttribute("class")) {
//si l'element en cours est celui de la classe recherchée
console.log(display + "===" + toutesLesOptions[j].getAttribute("class"));
if(toutesLesOptions[j].getAttribute("value")==="none"){
toutesLesOptions[j].selected = true;
}
toutesLesOptions[j].hidden = false;
}
else {
console.log(display + "=/=" + toutesLesOptions[j].getAttribute("class"));
toutesLesOptions[j].hidden = true;
}
}
}
function firstAction() {
//fonction effectuée lorsque le premier select est validé
//on recup ce qui a été cliqué
var e = document.getElementById("firstSelect");
var strUser = e.options[e.selectedIndex].value;
//on reagit en fonction
//si il a cliqué sur individu, redirigé vers helloasso
if (strUser === "Individu") {
linkRedirection("https://helloasso.com", "Redirection vers HelloAsso");
displayMask(["link"]);
}
//si il a cliqué sur association
else if (strUser === "Association") {
setCotisation("Association");
displayMask(["cotisation", "informationsCollectivite", "boutonEnvoyer"]);
document.getElementById("secondSelection").required = false;
setEPCIRequired(false);
} else if (strUser === "EPCIMutualisant") {
//formulaire contenant la formule spécifique à EPCI mutualisant
displayMask(["formulaireEPCIMutualisant"]);
setEPCIRequired(true);
} else if (strUser === "none") {
//premier choix avec des tirets
displayMask([""]);
}
//si il a cliqué sur autre chose : on cherche à connaitre la taille de la collectivité, on affiche le 2e select
else {
displayMaskOptions(strUser);
document.getElementById("secondSelection").required = true;
displayMask(["paraSecondSelection"]);
setEPCIRequired(false);
}
}
function isWordIn(word, list) {
//le word est il contenu dans list ?
for (a = 0; a < list.length; a++) {
if (word === list[a]) {
return true
}
}
return false
}
function linkRedirection(link, title) {
//définit le lien de redirection et son titre
document.getElementById("linkRedirection").setAttribute("href", link);
document.getElementById("linkRedirection").setAttribute("title", title);
}
function prepareDocument(){
displayMask([""]);
document.getElementById("firstSelect").setAttribute("onchange", "firstAction()");
document.getElementById("boutonValiderNombresEPCI").setAttribute("onclick", "traitementEPCIMutualisant()");
document.getElementById("secondSelection").setAttribute("onchange", "secondAction()");
setCotisation("");
}
function secondAction() {
//fonction exécutée lorsque le 2e select est cliqué
var e = document.getElementById("secondSelection");
if (e.options[e.selectedIndex].value !== "none") {
//s'il a sélectionné autre chose que les tirets
var selectedTranch = e.options[e.selectedIndex].getAttribute("id");
setCotisation(selectedTranch);
displayMask(["paraSecondSelection", "cotisation", "informationsCollectivite", "boutonEnvoyer"]);
} else {
displayMask(["paraSecondSelection"]);
}
}
function setCotisation(id, x = 0) {
//définit la cotisation à afficher, l'option x sert uniquement pour le tarif EPCI mutualisant qui varie.
var paragraphCotList = document.getElementsByClassName("PCOT");
var research = "PCOT-" + id;
for (var b = 0; b < paragraphCotList.length; b++) {
if (paragraphCotList[b].getAttribute("id") === research) {
console.log(paragraphCotList[b].getAttribute("id") + "===" + research);
paragraphCotList[b].style.display = "block";
if (x > 0) {
document.getElementById("montantCotisation").innerHTML = x;
}
} else {
paragraphCotList[b].style.display = "none";
console.log(paragraphCotList[b].getAttribute("id") + "=/=" + research);
}
}
}
function setEPCIRequired(boolean) {
//le formulaire EPCI est il requis ? cela varie selon les choix faits par l'utilisateur
document.getElementById("nombreHabitantsEPCI").required = boolean;
document.getElementById("nombreCommunesMembresEPCI").required = boolean;
}
function traitementEPCIMutualisant() {
//lorsque l'utilisateur valide les 2 nombres entrés pour l'EPCI, les traitements nécessaires sont ici
var nombreHabitants = document.getElementById("nombreHabitantsEPCI").value;
var nombreCommunesMembres = document.getElementById("nombreCommunesMembresEPCI").value;
if (nombreHabitants !== "") {
if (nombreCommunesMembres !== "") {
var resultat = (0.035 * nombreHabitants) + (15 * nombreCommunesMembres) + 1200;
resultat = Math.round(resultat);
//cette fonction arrondit le nombre en fonction du nombre après la virgule.
//exemple :
// Math.round(20,4999) donnera 20
// Math.round(20,5) donnera 21
if (resultat > 15000) {
//le plafond est fixé à 15000
resultat = 15000;
}
setCotisation("EPCIMutualisant", resultat);
displayMask(["cotisation", "informationsCollectivite", "formulaireEPCIMutualisant", "boutonEnvoyer"]);
}
}
}
<html lang="fr">
<head>
<title>Renouvellement d'adhésion</title>
<meta charset="UTF-8">
<?php
$grillePath = $_SERVER["CONTEXT_DOCUMENT_ROOT"] . '/wp-content/themes/twentyseventeen-child/twentynineteen-child/grille.csv';
$JSPath = '/wp-content/themes/twentyseventeen-child/twentynineteen-child/adhesionForm.js';
?>
<script type="text/javascript" src="<?php echo $JSPath ?>"></script>
</head>
<body>
<?php
/*
Template Name: Test
*/
/*
Template Name: Test
*/
get_header();
//chemin d'accès de grille.csv
$grillePath = $_SERVER["CONTEXT_DOCUMENT_ROOT"] . '/wp-content/themes/twentyseventeen-child/twentynineteen-child/grille.csv';
$fichier = fopen($grillePath, 'r');
$ligne = fgetcsv($fichier, 1024, ";");
......@@ -46,7 +55,7 @@ function createNameClass($variable)
//fonction qui nettoie la chaine pour pouvoir l'utiliser en tant que nom de classe
$chars = array(
//tous les caractères susceptibles d'être remplacés
//tous les caractères susceptibles d'être remplacés
"é" => "e",
"è" => "e",
"ê" => "e",
......@@ -150,221 +159,7 @@ sort($classSelectMenuExtended);
?>
<script>
var secondSelectList = [
<?php
//on génère la variable secondSelectList avec php
for ($a = 0; $a < count($classSelectMenu); $a++) {
echo "'" . $classSelectMenu[$a] . "'";
if (($a + 1) < $classSelectMenu) {
echo ",\n";
}
}
?>
];
//liste des blocs qui peuvent être affichés / cachés
var blocks = ["link", "paraSecondSelection", "cotisation", "informationsCollectivite", "formulaireEPCIMutualisant", "boutonEnvoyer"];
function displayMask(display) {
//fonction qui affiche / cache les formulaires / informations en fonction des données entrées dans les formulaires
for (var h = 0; h < blocks.length; h++) {
if (isWordIn(blocks[h], display)) {
document.getElementById(blocks[h]).style.display = "block";
} else {
document.getElementById(blocks[h]).style.display = "none";
}
}
}
function displayMaskOptions(display) {
//sert à afficher / cacher les options du 2e select menu
var tousLesElements = undefined;
for (var j = 0; j < secondSelectList.length; j++) {
//boucle for qui va parcourir la liste des classes des options disponibles
if (display === secondSelectList[j]) {
//si l'element en cours est celui de la classe recherchée
tousLesElements = document.getElementsByClassName(display);
for (var g = 0; g < tousLesElements.length; g++) {
if (g === 0) {
//on passe la première option disponible en selected pour éviter un bug d'affichage
tousLesElements[g].selected = true;
}
tousLesElements[g].hidden = false;
}
} else {
tousLesElements = document.getElementsByClassName(secondSelectList[j]);
for (var h = 0; h < tousLesElements.length; h++) {
tousLesElements[h].hidden = true;
}
}
}
}
function firstAction() {
//fonction effectuée lorsque le premier select est validé
//on recup ce qui a été cliqué
var e = document.getElementById("firstSelect");
var strUser = e.options[e.selectedIndex].value;
//on reagit en fonction
//si il a cliqué sur individu, redirigé vers helloasso
if (strUser === "Individu") {
linkRedirection("https://helloasso.com", "Redirection vers HelloAsso");
displayMask(["link"]);
}
//si il a cliqué sur association
else if (strUser === "Association") {
setCotisation("Association");
displayMask(["cotisation", "informationsCollectivite", "boutonEnvoyer"]);
document.getElementById("secondSelection").required = false;
setEPCIRequired(false);
} else if (strUser === "EPCIMutualisant") {
//formulaire contenant la formule spécifique à EPCI mutualisant
displayMask(["formulaireEPCIMutualisant"]);
setEPCIRequired(true);
} else if (strUser === "none") {
//premier choix avec des tirets
displayMask([""]);
}
//si il a cliqué sur autre chose : on cherche à connaitre la taille de la collectivité, on affiche le 2e select
else {
displayMaskOptions(strUser);
document.getElementById("secondSelection").required = true;
displayMask(["paraSecondSelection"]);
setEPCIRequired(false);
}
}
function isWordIn(word, list) {
//le word est il contenu dans list ?
for (a = 0; a < list.length; a++) {
if (word === list[a]) {
return true
}
}
return false
}
function linkRedirection(link, title) {
//définit le lien de redirection et son titre
document.getElementById("linkRedirection").setAttribute("href", link);
document.getElementById("linkRedirection").setAttribute("title", title);
}
function secondAction() {
//fonction exécutée lorsque le 2e select est cliqué
var e = document.getElementById("secondSelection");
if (e.options[e.selectedIndex].value !== "none") {
//s'il a sélectionné autre chose que les tirets
var selectedTranch = e.options[e.selectedIndex].getAttribute("id");
setCotisation(selectedTranch);
displayMask(["paraSecondSelection", "cotisation", "informationsCollectivite", "boutonEnvoyer"]);
} else {
displayMask(["paraSecondSelection"]);
}
}
function setCotisation(id, x = 0) {
//définit la cotisation à afficher, l'option x sert uniquement pour le tarif EPCI mutualisant qui varie.
var paragraphCotList = document.getElementsByClassName("PCOT");
var research = "PCOT-" + id;
for (var b = 0; b < paragraphCotList.length; b++) {
if (paragraphCotList[b].getAttribute("id") === research) {
console.log(paragraphCotList[b].getAttribute("id") + "===" + research);
paragraphCotList[b].style.display = "block";
if (x > 0) {
document.getElementById("montantCotisation").innerHTML = x;
}
} else {
paragraphCotList[b].style.display = "none";
console.log(paragraphCotList[b].getAttribute("id") + "=/=" + research);
}
}
}
function setEPCIRequired(boolean) {
//le formulaire EPCI est il requis ? cela varie selon les choix faits par l'utilisateur
document.getElementById("nombreHabitantsEPCI").required = boolean;
document.getElementById("nombreCommunesMembresEPCI").required = boolean;
}
function traitementEPCIMutualisant() {
//lorsque l'utilisateur valide les 2 nombres entrés pour l'EPCI, les traitements nécessaires sont ici
var nombreHabitants = document.getElementById("nombreHabitantsEPCI").value;
var nombreCommunesMembres = document.getElementById("nombreCommunesMembresEPCI").value;
if (nombreHabitants !== "") {
if (nombreCommunesMembres !== "") {
var resultat = (0.035 * nombreHabitants) + (15 * nombreCommunesMembres) + 1200;
resultat = Math.round(resultat);
//cette fonction arrondit le nombre en fonction du nombre après la virgule.
//exemple :
// Math.round(20,4999) donnera 20
// Math.round(20,5) donnera 21
if (resultat > 15000) {
//le plafond est fixé à 15000
resultat = 15000;
}
setCotisation("EPCIMutualisant", resultat);
displayMask(["cotisation", "informationsCollectivite", "formulaireEPCIMutualisant", "boutonEnvoyer"]);
}
}
}
</script>
<h1>Formulaire de renouvellement d'adhésion</h1>
<p>
......@@ -387,7 +182,6 @@ sort($classSelectMenuExtended);
<?php
}
?>
......@@ -433,7 +227,7 @@ sort($classSelectMenuExtended);
$classInTreatment = $actualClass;
?>
<option class="<?php echo $classInTreatment ?>" value="none">---</option>
<option class="<?php echo $classInTreatment ?>" value="none" name="optionSelect2">---</option>
<?php
}
......@@ -442,7 +236,7 @@ sort($classSelectMenuExtended);
?>
<option class="<?php echo $classInTreatment ?>" id="<?php echo $tranch ?>"
value="<?php echo $actualLine[1] ?>"><?php echo $actualLine[1] ?></option>
value="<?php echo $actualLine[1] ?>" name="optionSelect2"><?php echo $actualLine[1] ?></option>
<?php
......@@ -538,12 +332,10 @@ sort($classSelectMenuExtended);
<script>
displayMask([""]);
document.getElementById("firstSelect").setAttribute("onchange", "firstAction()");
document.getElementById("boutonValiderNombresEPCI").setAttribute("onclick", "traitementEPCIMutualisant()");
document.getElementById("secondSelection").setAttribute("onchange", "secondAction()");
setCotisation("");
prepareDocument();
</script>
<?php /*get_footer();*/?>
<?php get_footer();?>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment