301 lines
10 KiB
JavaScript
Executable File
301 lines
10 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 de l'authentification *
|
|
* [4] Gestion des formulaires *
|
|
* *
|
|
* *
|
|
* *
|
|
* *
|
|
* *
|
|
* *
|
|
* *
|
|
* *
|
|
* *
|
|
***********************************************************/
|
|
|
|
|
|
/* [0] VARIABLES
|
|
==============================================================*/
|
|
/* pageManager */
|
|
var pageM;
|
|
/* API */
|
|
var API;
|
|
|
|
/* Structure de la page */
|
|
var DOM = {
|
|
WRAPPER : document.querySelector('#WRAPPER'),
|
|
MENU : document.querySelector('#MENU'),
|
|
HEADER : document.querySelector('#HEADER'),
|
|
SUBHEADER : document.querySelector('#SUBHEADER'),
|
|
SUBSECTIONS : document.querySelector("#SUBHEADER > nav"),
|
|
CONTAINER : document.querySelector('#CONTAINER'),
|
|
AUTHFILTER : document.querySelector('#AUTH_FILTER'),
|
|
AUTH : document.querySelector('#AUTH'),
|
|
LOGOUT : document.querySelector('#HEADER #LOGOUT')
|
|
|
|
};
|
|
|
|
/* VRAI = utilisateur connecté */
|
|
var connected = !( DOM.AUTH.children[0].innerHTML == 'Connection' );
|
|
|
|
|
|
/* [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 == 'SPAN' && section.dataset.hasOwnProperty('link') ){
|
|
|
|
// on charge la page
|
|
pageM.setPage( section.dataset.link );
|
|
|
|
/* on active les sous-parties */
|
|
pageM.xhr[pageM.xhr.length-1].addEventListener('load', function(){
|
|
|
|
// on récupère les sections du document
|
|
var sections = document.querySelectorAll('#CONTAINER section[name]');
|
|
if( sections != null ){ // si on en trouve
|
|
|
|
DOM.SUBSECTIONS.innerHTML = ""; // on efface le #SUBHEADER > nav <=> les liens des sous-parties
|
|
|
|
for( var i = 0 ; i < sections.length ; i++ ) // pour chaque section, on créé un lien correspondant
|
|
if( i == 0 ) // on active le premier
|
|
DOM.SUBSECTIONS.innerHTML += "<span data-sectname='" +sections[i].getAttribute('name')+ "' class='active'>" +sections[i].title+ "</span>";
|
|
else // pas les autres
|
|
DOM.SUBSECTIONS.innerHTML += "<span data-sectname='" +sections[i].getAttribute('name')+ "'>" +sections[i].title+ "</span>";
|
|
}
|
|
|
|
selectSubSection( document.querySelector('#SUBHEADER > nav > span.active') );
|
|
|
|
}, false);
|
|
|
|
|
|
// on récupère la section déja selectionnée si elle existe
|
|
var last = document.querySelector('#MENU span.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 */
|
|
var lastSection = document.querySelector('#MENU span[data-link='+pageM.page+']');
|
|
if( lastSection != null )
|
|
selectSection(lastSection); // 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 == 'SPAN' && subSection.dataset.hasOwnProperty('sectname') ){
|
|
|
|
// on essaie de récupérer l'ancien "lien"
|
|
var lastActive = document.querySelector('#SUBHEADER > nav > span.active');
|
|
if( lastActive != null ) // si on a trouvé qqch
|
|
lastActive.className = ''; // on le désactive
|
|
|
|
// on essaie de récupérer l'ancienne section active
|
|
var lastSection = document.querySelector('#CONTAINER section.active');
|
|
if( lastSection != null ) // si on a trouvé qqch
|
|
lastSection.className = ''; // on la désactive
|
|
|
|
// on active la page associée
|
|
var target = document.querySelector('#CONTAINER section[name='+subSection.dataset.sectname+']');
|
|
if( target != null )
|
|
target.className = 'active';
|
|
|
|
subSection.className = 'active'; // on active @subSection
|
|
}
|
|
|
|
}
|
|
|
|
/* gestion du clic sur les sous-parties */
|
|
DOM.SUBSECTIONS.addEventListener('click', function(e){ selectSubSection(e.target); }, false);
|
|
|
|
|
|
|
|
/* [3] GESTION DE L'AUTHENTIFICATION
|
|
==============================================================*/
|
|
|
|
// ouvre l'interface d'authentification quand click
|
|
DOM.LOGOUT.addEventListener('click', function(e){ // sur bouton
|
|
DOM.AUTHFILTER.className = 'active';
|
|
}, false);
|
|
|
|
if( !connected ) // sur zone verte si pas connecté
|
|
DOM.MENU.children[0].addEventListener('click', function(e){
|
|
DOM.AUTHFILTER.className = 'active';
|
|
}, false);
|
|
|
|
|
|
|
|
// ferme l'interface d'authentification quand clic sur filtre
|
|
DOM.AUTHFILTER.addEventListener('click', function(e){
|
|
DOM.AUTHFILTER.className = '';
|
|
}, false);
|
|
|
|
|
|
|
|
|
|
/* [4] 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' ){
|
|
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].type != 'button' ) // 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+')');
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
initForm( // initialisation du formulaire de connection
|
|
DOM.AUTH, // formulaire (élément DOM)
|
|
function(request){ // handler
|
|
// ajout d'informations à la requête
|
|
request.level_0 = 'user';
|
|
request.level_1 = (connected) ? 'exit' : 'authentification';
|
|
|
|
API.send(request, function(response){
|
|
if( response.request == 'success' )// si connection ok
|
|
document.location = '';
|
|
});
|
|
}
|
|
);
|