From 544e5464c87a06a4b730f11033ba63381824fa84 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Fri, 15 Apr 2016 12:19:18 +0200 Subject: [PATCH] Correction action-script.js. --- js/action-script.js | 433 ++++++++++++++++++++++---------------------- 1 file changed, 218 insertions(+), 215 deletions(-) diff --git a/js/action-script.js b/js/action-script.js index b32e321..9f038b3 100755 --- a/js/action-script.js +++ b/js/action-script.js @@ -1,4 +1,216 @@ -/* [-1] On recupere la liste des pages +/* [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 @@ -11,219 +223,10 @@ pageManagerClass.prototype.ajax('/f/json/menu/conf', function(pagelistSerialized for( var i = 0 ; i < pagelistObject.length; i++ ) pagelist.push( pagelistObject[i]['attributes']['data-link'] ); - - - - DOM = { - WRAPPER: $('WRAPPER'), - HEADER: $('HEADER'), - MENUSIDE: $('MENU-SIDE'), - CONTAINER: $('CONTAINER') - }; - - - - /* [0] Instanciation - ===========================================*/ - var pageManager = new pageManagerClass(); + /* (1) On initialisa pageManager */ + pageManager = new pageManagerClass(); pageManager.setPage(null, '/view', DOM.CONTAINER, pagelist ); - 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') - }; - - /* (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); - - -}, 'GET') \ No newline at end of file + /* (2) On charge la premiere page */ + navMenu(pageManager.page); +}, 'GET'); \ No newline at end of file