NxTIC/js/action-script.js

/* [0] Initialisation des variables en local
=========================================================*/
var DOM = {
	WRAPPER:       $('WRAPPER'),
		HEADER:    $('HEADER'),
		MENUSIDE:  $('MENU-SIDE'),
		CONTAINER: $('CONTAINER')
	};
var pageManager;


// On cree une instance de l'api
api = new APIClass('/api/');





/* [1] Toggle du sub-menu-side <-> navigation
===========================================*/
function navSubMenu(subsection){
	/* [1] Format du param
	------------------------------------------------*/
	// Contient l'element courant
	var current = document.querySelector('#MENU-SIDE > span[data-link='+pageManager.page+'] + div.sub > span[data-sublink="'+pageManager.vars[0]+'"]');

	// Contiendra l'element cible
	var target = null;

	// si @subsection est un element, on le prends
	target = (subsection instanceof Element) ? subsection : null;

	// Si string, on trouve l'element correspondant
	target = (typeof subsection == 'string') ? document.querySelector('#MENU-SIDE > span[data-link='+pageManager.page+'] + div.sub > span[data-sublink="'+subsection+'"]') : target;

	// Si rien trouve, on prend le premier element correspondant a la premiere page
	target = (target == null) ? document.querySelector('#MENU-SIDE > span[data-link='+pageManager.page+'] + div.sub > span[data-sublink]') : target;

	// Si le param n'est toujours pas bon, on retourne une erreur
	if( target == null ) return false;

	/* [2] Gestion de l'affichage de l'element
	------------------------------------------------*/
	// On desactive l'element courant
	if( current != null )
		current.remClass('active');

	// On cache les sections visibles
	var visibleSections = document.querySelectorAll('#CONTAINER > section[data-sublink].active');
	for( var i = 0 ; i < visibleSections.length ; i++ )
		visibleSections[i].remClass('active');

	// On active le nouveau
	if( target != null ){
		target.addClass('active');

		// On affiche la section associee
		var targetSection = document.querySelector('#CONTAINER > section[data-sublink="'+target.getData('sublink')+'"]');
		if( targetSection != null )
			targetSection.addClass('active');

	}

	/* [3] Gestion de pageManager
	------------------------------------------------*/
	// Si element, on recupere le data-link
	var page = null;

	// Si erreur, on retourne FALSE
	if( !target.getData('sublink') ) return false

	var mustRefresh = pageManager.vars[0] != target.getData('sublink');

	// On met a jour la variable page-manager si data-link trouve
	pageManager.vars[0] = target.getData('sublink');

	if( mustRefresh )
		// navMenu(pageManager.page);
		pageManager.updateURL();

}


/* [4 Toggle du side-menu <-> navigation
===========================================*/
function navMenu(section){

	/* [1] Format du param
	------------------------------------------------*/
	// Contient l'element courant
	var current = document.querySelector('#WRAPPER > #MENU-SIDE > span[data-link="'+pageManager.page+'"]');

	// Contiendra l'element cible
	var target = null;

	// si @section est un element, on le prends
	target = (section instanceof Element) ? section : null;

	// Si string, on trouve l'element correspondant
	target = (typeof section == 'string') ? document.querySelector('#WRAPPER > #MENU-SIDE > span[data-link="'+section+'"]') : target;

	// Si rien trouve, on prend le premier element correspondant a la premiere page
	target = (target == null) ? document.querySelector('#WRAPPER > #MENU-SIDE > span[data-link="'+pageManager.pagelist[0]+'"]') : target;

	// Si le param n'est toujours pas bon, on retourne une erreur
	if( target == null ) return false;

	/* [2] Gestion de l'affichage de l'element
	------------------------------------------------*/
	// On desactive l'element courant
	if( current != null )
		current.remClass('active');
	// On active le nouveau
	if( target != null )
		target.addClass('active');

	/* [3] Gestion de pageManager
	------------------------------------------------*/
	// Si element, on recupere le data-link
	var page = null;

	// On charge la page si data-link trouve
	if( target.getData('link') ){
		DOM.HEADER.addClass('loading'); // Animation de chargement

		pageManager.setPage( target.getData('link') );

		pageManager.activeXHR.addEventListener('loadend', function(){

			// On gere la navigation du sous-menu (si defini, utilise)
			var subSectionExists = pageManager.vars.length >= 1 && document.querySelector('#CONTAINER > section[data-sublink="'+pageManager.vars[0]+'"]') != null;
			if( subSectionExists )               // Si le lien du menu associe existe
				navSubMenu(pageManager.vars[0]); // on charge la page associee
			else                                 // sinon
				navSubMenu(null);                // on charge le lien par defaut


			// GESTION DE LA NAVIGATION DU SOUS-MENU
			// si le sous-menu existe
			var smenu = document.querySelector('#MENU-SIDE > span[data-link='+pageManager.page+'] + div.sub');
			if( smenu != null )
				smenu.addEventListener('click', function(e){
					var target = e.target;

					while( target != document.body && !target.getData('sublink') )
						target = target.parentNode;

					if( target.getData('sublink') )
						navSubMenu(target);
				}, false);

			// On retire l'icone de chargement
			DOM.HEADER.remClass('loading');
		}, false);
	}

}


















/* [5] Gestion de la navigation (physique)
===========================================*/
DOM.MENUSIDE.addEventListener('click', function(e){
	var target = e.target;

	// On remonte dans les parents au bon niveau
	while( target != document.body && !target.getData('link') )
		target = target.parentNode;

	// Si on a trouve l'element, on l'utilise pour la page
	if( target.getData('link') )
		navMenu(target.getData('link'));
}, false);



/* [6] Gestion du rechargement de page
=========================================================*/
function reload(){ navMenu( pageManager.page ); }

/* [7] Gestion du toggle de la page de login
=========================================================*/
var LOGIN = {
	show:     document.getElementById('user-data'),
	hide:     document.getElementById('login-close'),
	page:     document.getElementById('LOGIN')
};

/* (1) Gestion de l'affichage de la page de login */
LOGIN.show.addEventListener('click', function(e){ LOGIN.page.className = 'active'; }, false);

/* (2) Gestion de la fermeture de la page de login */
LOGIN.hide.addEventListener('click', function(e){ LOGIN.page.className = ''; }, false);




/* [7] On recupere la liste des pages et on lance pageManager
=========================================================*/
pageManagerClass.prototype.ajax('/f/json/menu/conf', function(pagelistSerialized){
	// On initialise la liste des pages
	var pagelist = [];

	// On deserialise le bordel
	var pagelistObject = JSON.parse(pagelistSerialized);

	// On recupere chaque page
	for( var i = 0 ; i < pagelistObject.length; i++ )
		pagelist.push( pagelistObject[i]['attributes']['data-link'] );

	/* (1) On initialisa pageManager */
	pageManager = new pageManagerClass();
	pageManager.setPage(null, '/view', DOM.CONTAINER, pagelist );

	/* (2) On charge la premiere page */
	navMenu(pageManager.page);
}, 'GET');