.custom-button {
font-size: 14px;
line-height: 17px;
padding: 13px 29px;
margin: 10px 5px; /* Espacement ajouté pour les boutons */
background: #3697c3;
color: #ffffff;
border-color: #105378;
font-family: PT Sans;
font-weight: 400;
font-style: normal;
letter-spacing: 0;
border-width: 0;
border-style: solid;
border-radius: 0;
text-transform: uppercase;
transition: all 0.2s;
cursor: pointer;
}
/* 1. On masque TOUTES nos étapes de base */
fieldset.fs-formulaire {
display: none;
}
/* 2. On affiche UNIQUEMENT la première étape (celle qui suit directement la barre de progression) */
ul#progressbar + fieldset.fs-formulaire {
display: block;
}
/*progressbar*/
#progressbar {
margin: 24px 20px 42px;
overflow: hidden;
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: rgb(0, 0, 0);
text-transform: uppercase;
font-size: 11px;
width: 33.33%;
float: left;
position: relative;
text-align: center;
}
#progressbar li:before {
content: counter(step) " étape";
counter-increment: step;
width: fit-content; /* Permet au bloc de s'adapter au texte */
padding: 2px 14px; /* Ajoute du bleu autour du texte */
line-height: 20px;
display: block;
font-size: 13px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px;
}
/*progressbar connectors*/
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1;
}
#progressbar li:first-child:after {
content: none;
}
/*marking active/completed steps green*/
#progressbar li.active:before,
#progressbar li.active:after {
background: #3697C3;
color: white;
}
#progressbar li.current {
font-size: 21px;
font-weight: bold;
}
/* Titres */
h2.titre-2 {
border-style: solid;
border-width: thin;
text-align: center;
padding-left: 20px;
}
h3.titre-3 {
font-weight: 500;
padding-left: 20px;
}
div.titre-under {
font-size: 1.7rem;
text-decoration: underline;
padding: 20px;
}
span.titre-under {
font-size: 1.7rem;
text-decoration: underline;
}
/* Petites écritures */
.mini-font {
font-size: 14px;
margin-bottom: 10px;
}
/* checkbox réagencement */
.wpcf7-list-item {
display: block;
}
span#section-sport .wpcf7-list-item {
padding: 20px 0 0;
}
span#section-sport .wpcf7-list-item:nth-child(1) {
padding: 0;
}
/* ************ APA-SS ********************/
#APA-SS {
content: "\a";
white-space: pre;
}
span#apa-ss-id > span:first-child {
padding-bottom: 20px;
}
p.intervenant {
font-size: 1.8rem;
}
.indented {
padding-left: 20px;
}
.titre-under.indented {
padding-left: 20px;
}
.hidden {
height: 0;
width: 0;
visibility: hidden;
padding: 0;
margin: 0;
float: right;
}
div.lastDiv {
border-style: groove;
margin: 20px 0;
padding: 20px;
}
.lastDiv p {
font-style: italic;
padding: 0 20px;
}
/* ========================================= */
/* RESPONSIVE MOBILE */
/* ========================================= */
@media screen and (max-width: 768px) {
/* On retire les marges de la barre pour gagner de l'espace */
#progressbar {
margin: 15px 0 30px 0;
padding: 0;
}
/* Textes des étapes plus petits */
#progressbar li {
font-size: 10px;
}
/* Sur mobile, on évite le zoom géant de 21px qui casse tout */
#progressbar li.current {
font-size: 14px;
}
/* ASTUCE : Sur mobile, on retire le mot "étape" pour ne garder que le chiffre (1, 2, 3) dans un mini-cercle */
#progressbar li:before {
content: counter(step);
width: 25px;
padding: 2px 0;
border-radius: 50%; /* Un vrai rond */
font-size: 12px;
}
/* On réaligne la ligne de fond */
#progressbar li:after {
top: 11px;
}
/* On réduit automatiquement la taille des gros titres pour les petits écrans */
div.titre-under, span.titre-under {
font-size: 1.4rem;
padding: 10px;
}
p.intervenant {
font-size: 1.4rem;
}
.custom-button {
padding: 10px 20px; /* Boutons un peu plus compacts */
width: 100%; /* S'ils ont besoin de s'empiler, ils prennent la largeur */
margin: 5px 0;
}
}
// On utilise le mode noConflict natif de WordPress
jQuery(document).ready(function ($) { // Mode Production : logs désactivés pour garder la console propre
var parameters = {
'logs': false
};
var current_fs,
next_fs,
previous_fs;
var left,
opacity,
scale;
var animating;
var warned = false;
let sizeInMo = 2;
var sizeInOctets = sizeInMo * 1024 * 1024;
let _log = function (print_msg, optional_param, error) {
parameters['logs'] && (! error ? console.log(print_msg, optional_param !== undefined ? optional_param : ' ') : console.error(print_msg, optional_param || ""));
}
$(".next").click(function () {
var IDs = getAllIdsOfRequiredFields();
var IDsCheckboxes = getAllIdsOfRequiredCheckboxes();
var tabIDsSize = getAllIdsOfTypeFile();
removeWarnings([IDs, IDsCheckboxes, tabIDsSize]);
if (currentIsValid(IDs, IDsCheckboxes, tabIDsSize)) {
if (animating)
return false;
animating = true;
warned = false;
current_fs = $(this).closest(".fs-formulaire");
next_fs = $(this).closest(".fs-formulaire").next(".fs-formulaire");
// On limite bien aux étapes
// Correction de l'index de la progressbar (cibler uniquement les ft-formulaire)
$("#progressbar li").eq($("fieldset.fs-formulaire").index(next_fs)).addClass("active current");
$("#progressbar li").eq($("fieldset.fs-formulaire").index(current_fs)).removeClass("current");
next_fs.show();
current_fs.animate({
opacity: 0
}, {
step: function (now, mx) {
scale = 1 - (1 - now) * 0.2;
left = (now * 50) + "%";
opacity = 1 - now;
current_fs.css({
'transform': 'scale(' + scale + ')'
});
next_fs.css({'left': left, 'opacity': opacity});
},
duration: 200,
complete: function () {
current_fs.hide();
animating = false;
},
easing: 'easeInOutBack'
});
document.querySelector('.fusion-page-title-wrapper') ?. scrollIntoView();
} else {
showWarnings(IDs, IDsCheckboxes, tabIDsSize);
}
});
$(".previous").click(function () {
if (animating)
return false;
animating = true;
current_fs = $(this).closest(".fs-formulaire");
previous_fs = $(this).closest(".fs-formulaire").prev(".fs-formulaire");
// Correction de l'index de la progressbar pour le retour en arrière
$("#progressbar li").eq($("fieldset.fs-formulaire").index(current_fs)).removeClass("active current");
$("#progressbar li").eq($("fieldset.fs-formulaire").index(previous_fs)).addClass("current");
previous_fs.show();
current_fs.animate({
opacity: 0
}, {
step: function (now, mx) {
scale = 0.8 + (1 - now) * 0.2;
left = ((1 - now) * 50) + "%";
opacity = 1 - now;
current_fs.css({'left': left});
previous_fs.css({
'transform': 'scale(' + scale + ')',
'opacity': opacity
});
},
duration: 200,
complete: function () {
current_fs.hide();
animating = false;
},
easing: 'easeInOutBack'
});
document.querySelector('.fusion-page-title-wrapper') ?. scrollIntoView();
var IDs = getAllIdsOfRequiredFields();
var IDsCheckboxes = getAllIdsOfRequiredCheckboxes();
removeWarnings([IDs, IDsCheckboxes]);
});
// Remplacements HTML
$("#professionel-APS > span > label > span").html("Enseignant en Activité Physique Adaptée (les personnes titulaires d’une Licence STAPS (Sciences et Techniques des Activités Physiques et Sportives) APA (Activité Physique Adaptée) / APA-S (Activité Physique Adaptée et Santé) délivré conformément aux dispositions de l’article L. 613-1 du code de l’éducation (dans sa version applicable en Polynésie française).");
$("#educateur-id > span > label > span").html("Educateur sportif titulaire du certificat complémentaire “sport-santé” (les personnes titulaires d’une qualification professionnelle d’éducateur sportif de niveau IV ou supérieur et du certificat complémentaire « sport-santé » institué par l’arrêté n° 508 CM du 4 avril 2019 ).");
$("#kine-masseur > span > label > span").html("Masseur-Kinésithérapeute (encadrement de la pratique de la gymnastique hygiénique d’entretien ou préventive).");
let textApaSs = "J’accepte que mon adresse mail soit utilisée par la Direction de la santé pour recevoir des informations relatives à l’APA et au sport-santé.";
let textCharteStep1 = "J'ai lu et j'accepte les conditions de référencement.";
let textprosante1 = "Enseignant en Activité Physique Adaptée (les personnes titulaires d’une Licence STAPS (Sciences et Techniques des Activités Physiques et Sportives) APA (Activité Physique Adaptée) / APA-S (Activité Physique Adaptée et Santé) délivré conformément aux dispositions de l’article L. 613-1 du code de l’éducation (dans sa version applicable en Polynésie française).";
let textprosante2 = "Éducateur sportif titulaire du certificat complémentaire “sport-santé” (les personnes titulaires d’une qualification professionnelle d’éducateur sportif de niveau IV ou supérieur et du certificat complémentaire « sport-santé » institué par l’arrêté n° 508 CM du 4 avril 2019 ).";
$("#charte-id-APA > span > label > span").html(textApaSs);
$("#charte-id-SS > span > label > span").html(textApaSs);
$("#charte-step-1 > span > label > span").html(textCharteStep1);
$("span#section-sport.wpcf7-form-control.wpcf7-radio .wpcf7-list-item:nth-child(2) label span").html(textprosante1);
$("span#section-sport.wpcf7-form-control.wpcf7-radio .wpcf7-list-item:nth-child(3) label span").html(textprosante2);
function getAllIdsOfRequiredFields() {
let IDs = [];
$('input:visible.wpcf7-validates-as-required,textarea:visible.wpcf7-validates-as-required,select:visible.wpcf7-validates-as-required').each(function () {
if (this.id)
IDs.push(this.id);
});
return IDs;
}
function getAllIdsOfRequiredCheckboxes() {
let IDs = [];
$('span:visible.wpcf7-validates-as-required').each(function () {
if (this.id)
IDs.push(this.id);
});
return IDs;
}
let getAllIdsOfTypeFile = () => {
let IDs = [];
$('input[type=file]').each(function () {
if (this.id && $(`#${
this.id
}`).is(":visible") && $(`#${
this.id
}`).hasClass("wpcf7-validates-as-required")) {
IDs.push(this.id);
}
});
return IDs;
}
let isFieldsValid = (tabIDs) => {
for (let i = 0; i {
for (let i = 0; i {
for (let i = 0; i 0) {
if (htmlElement.files[0].size > sizeInOctets) {
return false;
}
}
}
return true;
}
let removeWarning = (id) => {
$(`#${id} + .warning`).hide();
}
let showWarnings = (tabIDs, tabIDsCheckboxes, tabIDsSize) => {
tabIDs.forEach((e) => {
removeWarning(e);
if (! $(`#${e}`).val() && isValidEmailOrNotAnEmail(e) && isValidPhoneOrNotPhone(e) && isValidDateOrNotADate(e)) {
$(`#${e}`).after('Ce champ est obligatoire. ')
} else if (!isValidEmailOrNotAnEmail(e)) {
$(`#${e}`).after('Champ email non valide. ')
} else if (!isValidPhoneOrNotPhone(e)) {
$(`#${e}`).after('Champ téléphone non valide. ')
} else if (!isValidDateOrNotADate(e)) {
$(`#${e}`).after('Votre carte professionnelle a expiré.')
}
});
tabIDsCheckboxes.forEach((e) => {
removeWarning(e);
if (! $(`#${e} input[type=checkbox]:checked`).length) {
$(`#${e}`).after('Ce champ est obligatoire. ')
}
});
tabIDsSize.forEach((e) => {
removeWarning(e);
let htmlElement = document.querySelector(`#${e}`);
if ($(`#${e}`).val() === '') {
$(`#${e}`).after('Ce champ est obligatoire');
} else if (htmlElement && htmlElement.files && htmlElement.files.length > 0 && htmlElement.files[0].size > sizeInOctets) {
$(`#${e}`).after('Ce fichier est trop volumineux. ');
}
});
}
let removeWarnings = (containerOfTabs) => {
containerOfTabs.forEach((tabId) => {
tabId.forEach((e) => {
removeWarning(e);
})
})
}
let validatePhone = (str) => {
const regexPhoneNumber = /^\+?\d{1,4}?[-.\s]?\(?\d{1,3}?\)?[-.\s]?\d{1,4}[-.\s]?\d{1,4}[-.\s]?\d{1,9}$/;
return str.match(regexPhoneNumber) !== null;
}
let validateDate = (d1) => {
return d1 > formatDate(new Date());
}
function formatDate(date) {
var d = new Date(date),
month = '' + (
d.getMonth() + 1
),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2)
month = '0' + month;
if (day.length {
if ($(`#${e}`).is('input[type="date"]')) {
return validateDate($(`#${e}`).val());
}
return true;
}
let isValidPhoneOrNotPhone = (e) => {
if ($(`#${e}`).is('input[type="tel"]')) {
return validatePhone($(`#${e}`).val());
}
return true;
}
let isValidEmailOrNotAnEmail = (e) => {
if ($(`#${e}`).is('input[type="email"]')) {
return validateEmail($(`#${e}`).val());
}
return true;
}
function validateEmail(email) {
return email.match(/^(([^()[\]\\.,;:\s@\"]+(\.[^()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/) !== null;
}
});
