NxTIC/js/action-script.js

/* [-1] On attend le chargement du document
=========================================================*/
// document.onload = function(){



	DOM = {
		WRAPPER:       $('WRAPPER'),
			HEADER:    $('HEADER'),
			MENUSIDE:  $('MENU-SIDE'),
			CONTAINER: $('CONTAINER')
	};
		


	/* [0] Instanciation
	===========================================*/
	var pageManager = new pageManagerClass();
	pageManager.setPage(null, '/view', DOM.CONTAINER, ['dashboard', 'input', 'analytics', 'charts', 'settings'] );

	var 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);
		}

	}navMenu(pageManager.page);


















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

	// Ouverture de la page de login
	LOGIN.show.addEventListener('click', function(e){ LOGIN.page.className = 'active'; }, false);

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


// }