sid/js/actionScript.js

	/***********************************************************
	*                                                          *
	*           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                              *
	*                                                          *
	*                                                          *
	*                                                          *
	*                                                          *
	*                                                          *
	*                                                          *
	*                                                          *
	*                                                          *
	*                                                          *
	***********************************************************/


/* [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'),

};


/* [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].onload = function(){
				selectSubSection( document.querySelector('#SUBHEADER > nav > span.active') );
			};
			// 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
			console.log( document.querySelector('#CONTAINER section[name=home]') );
			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 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+')');


}