2016-02-01 22:09:35 +00:00
|
|
|
DOM = {
|
|
|
|
WRAPPER: $('WRAPPER'),
|
|
|
|
HEADER: $('HEADER'),
|
|
|
|
MENUSIDE: $('MENU-SIDE'),
|
|
|
|
CONTAINER: $('CONTAINER')
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
/* [0] Instanciation
|
|
|
|
===========================================*/
|
|
|
|
var pageManager = new pageManagerClass();
|
2016-02-02 10:09:48 +00:00
|
|
|
pageManager.setPage(null, '/view', DOM.CONTAINER, ['dashboard', 'machines', 'users', 'sync', 'settings'] );
|
2016-02-01 22:09:35 +00:00
|
|
|
|
|
|
|
|
2016-02-02 10:09:48 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* [1] 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
|
2016-02-02 13:03:22 +00:00
|
|
|
if( target.getData('link') ){
|
|
|
|
DOM.HEADER.addClass('loading'); // Animation de chargement
|
|
|
|
|
2016-02-02 10:09:48 +00:00
|
|
|
pageManager.setPage( target.getData('link') );
|
|
|
|
|
2016-02-02 13:03:22 +00:00
|
|
|
pageManager.xhr[pageManager.xhr.length-1].onloadend = function(){ DOM.HEADER.remClass('loading'); }
|
|
|
|
}
|
|
|
|
|
2016-02-02 10:09:48 +00:00
|
|
|
}navMenu(pageManager.page);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* [2] Gestion de la navigation (physique)
|
2016-02-01 22:09:35 +00:00
|
|
|
===========================================*/
|
|
|
|
DOM.MENUSIDE.addEventListener('click', function(e){
|
|
|
|
var target = e.target;
|
|
|
|
|
|
|
|
// On remonte dans les parents au bon niveau
|
2016-02-02 10:09:48 +00:00
|
|
|
while( target != document.body && !target.getData('link') )
|
2016-02-01 22:09:35 +00:00
|
|
|
target = target.parentNode;
|
|
|
|
|
|
|
|
// Si on a trouve l'element, on l'utilise pour la page
|
2016-02-02 10:09:48 +00:00
|
|
|
if( target.getData('link') )
|
|
|
|
navMenu(target.getData('link'));
|
|
|
|
}, false);
|
|
|
|
|
|
|
|
|
|
|
|
|