264 lines
8.2 KiB
JavaScript
Executable File
264 lines
8.2 KiB
JavaScript
Executable File
|
|
/***********************************************************
|
|
* *
|
|
* SCRIPT POST-HTML - SCRIPT PRINCIPAL *
|
|
* *
|
|
************************************************************
|
|
* *
|
|
* [0] Variables *
|
|
* [1] Gestionnaires de navigation *
|
|
* [a] pageManager.js *
|
|
* [b] API.js *
|
|
* [2] Gestion des liens *
|
|
* [a] catégories *
|
|
* [b] sous-parties *
|
|
* [3] Gestion des formulaires *
|
|
* [4] Gestion de la messageBox *
|
|
* *
|
|
* *
|
|
* *
|
|
* *
|
|
* *
|
|
* *
|
|
* *
|
|
* *
|
|
* *
|
|
***********************************************************/
|
|
|
|
|
|
/* [0] VARIABLES
|
|
==============================================================*/
|
|
var msgBoxTimeout = null;
|
|
|
|
/* pageManager */
|
|
var pageM;
|
|
/* API */
|
|
var API;
|
|
|
|
/* Structure de la page */
|
|
var DOM = {
|
|
menu : document.getElementById('MENU'),
|
|
container : document.getElementById('CONTAINER'),
|
|
msgBox : document.getElementById('MSGBOX')
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* [1] GESTIONNAIRES DE NAVIGATION
|
|
==============================================================*/
|
|
|
|
|
|
/* [a] pageManager.js
|
|
==============================================================*/
|
|
pageM = new pageManager(); // instance principale
|
|
|
|
/* initialisation du gestionnaire */
|
|
pageM.setPage(null, 'page', DOM.container, ['home', 'groups', 'ue', 'modules', 'marks', 'auth', 'settings'] );
|
|
|
|
|
|
/* [b] API.js
|
|
==============================================================*/
|
|
API = new APIClass();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* [2] GESTION DES LIENS
|
|
==============================================================*/
|
|
|
|
|
|
/* [a] CATÉGORIES
|
|
==============================================================*/
|
|
/* GESTION DES CATEGORIES (SECTIONS)
|
|
*
|
|
* @param section<Element> l'élément à activer
|
|
*
|
|
* [1] selectionne l'élément, l'affichage de la page associée est géré par pageManager.js
|
|
* [2] déselectionne l'élément précédemment selectioné
|
|
*
|
|
*/
|
|
function selectSection(section){
|
|
|
|
// si @subSection est un <Element> de type <li> qui a la propriété "data-link" [ET] section pas déjà active
|
|
if( section instanceof Element && section.tagName == 'LI' && section.dataset.hasOwnProperty('link') && section.className != 'active' ){
|
|
|
|
// on charge la page
|
|
pageM.setPage( section.dataset.link );
|
|
|
|
// on récupère la section déja selectionnée si elle existe
|
|
var last = document.querySelector('#MENU li.active');
|
|
|
|
if( last != null ) // si une section est déjà activée
|
|
last.className = ''; // on désactive la courante
|
|
|
|
section.className = 'active'; // on active @section
|
|
|
|
}else // sinon on affiche l'erreur
|
|
console.log("[selectSection_Error] - ("+section+")");
|
|
|
|
}
|
|
|
|
/* activation au chargement en fonction de la page courante de pageManager.js */
|
|
lastSection = document.querySelector('[data-link='+pageM.page+']');
|
|
lastSection.className = 'active'; // on l'active
|
|
|
|
/* Gestion des liens du menu */
|
|
DOM.menu.addEventListener('click', function(e){ selectSection( e.target ); }, false);
|
|
|
|
|
|
/* [b] SOUS-PARTIES
|
|
==============================================================*/
|
|
/* GESTION DES SOUS-PARTIES (SOUS-CATÉGORIES)
|
|
*
|
|
* @param subSection<Element> l'élément à activer
|
|
*
|
|
* [1] selectionne l'élément, l'affichage de la page associée est géré en CSS3
|
|
* [2] déselectionne l'élément précédemment selectioné
|
|
*
|
|
*/
|
|
function selectSubSection(subSection){
|
|
|
|
// si @subSection est un <Element> de type HGROUP [ET]
|
|
if( subSection instanceof Element && subSection.tagName == 'HGROUP' ){
|
|
|
|
if( subSection.className != 'active' ){ // si @subSection pas déjà active
|
|
|
|
// on récupère la sous-partie selectionnée en cours
|
|
var last = document.querySelector('hgroup.active');
|
|
|
|
if( last != null ) // si un sous-partie est déjà selectionnée
|
|
last.className = ''; // on la désactive
|
|
|
|
subSection.className = 'active'; // on active @subSection
|
|
|
|
}else // sinon on affiche l'erreur
|
|
console.log("[selectSubSection_Error] - ("+subSection+")");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
/* gestion du clic sur les sous-parties */
|
|
DOM.container.addEventListener('click', function(e){ selectSubSection(e.target); }, false);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* [3] GESTION DES FORMULAIRES
|
|
==============================================================*/
|
|
/* INITIALISE UN FORMULAIRE POUR QU'IL INTERPRETE UN OBJET LORS DE SA SOUMISSIONS
|
|
*
|
|
* @param pForm<Element> le formulaire cible
|
|
* @param pHandler<Function> fonction exécutée lors de la soumission du formulaire
|
|
*
|
|
* [1] parcourt les élements du formulaire @pForm et active un évènement lors du "submit"
|
|
* [2] retourne l'objet à @pHandler lors du "submit"
|
|
*
|
|
*
|
|
* @example
|
|
*
|
|
* <form id='nomFormulaire'>
|
|
*
|
|
* <input type='text' name='nomDuChamp1' value='valeurDuChamp1'>
|
|
* <input type='mail' name='nomduChamp2' value='valeurDuChamp2'>
|
|
*
|
|
* <input type='submit' value='VALIDER'>
|
|
*
|
|
* </form>
|
|
*
|
|
* @explaination
|
|
*
|
|
* Lors du clic sur le bouton [VALIDER], la fonction @pHandler s'exécutera avec pour paramètre un objet
|
|
* OBJ{ id: nomFormulaire, nomDuChamp1: valeurDuChamp1, nomDuChamp2: valeurDuChamp2 }
|
|
*
|
|
*/
|
|
function initForm(pForm, pHandler){
|
|
|
|
// vérification des arguments
|
|
var isForm = pForm instanceof Element && pForm.tagName == 'FORM';
|
|
var isFunc = pHandler instanceof Function;
|
|
|
|
// si les arguments sont corrects
|
|
if( pForm instanceof Element && pForm.tagName == 'FORM' ){
|
|
|
|
var submitButton = null; // contiendra le bouton d'envoi du formulaire
|
|
|
|
for( var i = 0 ; i < pForm.children.length ; i++ )
|
|
if( pForm.children[i].type == 'button' && pForm.children[i].name == 'submit' ){
|
|
submitButton = pForm.children[i]; // on définit le bouton
|
|
break; // on sort du for
|
|
}
|
|
|
|
|
|
// on définit l'évènement de validation du formulaie
|
|
function submitEvent(){
|
|
|
|
var obj = {} // on créé l'objet qui va être envoyé
|
|
|
|
for( var i = 0 ; i < pForm.children.length ; i++ ) // on parcourt les enfants
|
|
if( pForm.children[i].tagName == 'INPUT' && pForm.children[i].name != 'submit' ) // si c'est un champ et que c'est pas le bouton
|
|
obj[pForm.children[i].name] = pForm.children[i].value; // alors on enregistre le champ dans l'objet
|
|
|
|
// on exécute la fonction @pHandler en lui envoyant les arguments
|
|
pHandler(obj);
|
|
|
|
}
|
|
|
|
// on définit l'évènement du clic sur le bouton
|
|
submitButton.addEventListener('click', function(e){
|
|
submitEvent(e.target.parentNode); // on envoie le formulaire
|
|
}, false);
|
|
|
|
// on définit l'évènement de l'appui sur la touche [ENTRER]
|
|
pForm.addEventListener('keydown', function(e){
|
|
if(e.keyCode==13) submitEvent(e.target); // si c'est la bonne touche, on submit le formulaire
|
|
}, false);
|
|
|
|
|
|
|
|
}else
|
|
console.log('[initForm_Error] - ('+pForm+', '+pHandler+')');
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* [4] GESTION DE LA MESSAGEBOX
|
|
==============================================================*/
|
|
function messageBox(message, type){
|
|
|
|
/* on affecte le message */
|
|
DOM.msgBox.innerHTML = message;
|
|
|
|
/* on définit le style s'il est correct */
|
|
if( ['success', 'info', 'warning', 'error'].indexOf(type) > -1 )
|
|
DOM.msgBox.className = type;
|
|
else
|
|
DOM.msgBox.className = 'info';
|
|
|
|
|
|
|
|
if( msgBoxTimeout != null ) // si une autre message box est en cours, on arrête son timeout
|
|
clearTimeout(msgBoxTimeout);
|
|
|
|
msgBoxTimeout = setTimeout( function(){
|
|
DOM.msgBox.className = '';
|
|
}, 2000);
|
|
|
|
} |