From ed2985a17079f822013aa0f81fedc86af62db9f0 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Wed, 3 Feb 2016 10:53:41 +0100 Subject: [PATCH] - [x] Gestion JS de la navigation - [x] Gestion de liens+URL du menu - [x] Gestion des liens+URL du submenu - [x] onload du xhr, on lance le script sur le DOM - [x] Refactor page-manager pour recuperer instance XHR active - [x] Gestion de la navigation du sub-menu-side --- js/action-script.js | 87 ++++++++++++++++++++++++++++++++++++++++-- js/lib/page-manager.js | 4 ++ todo.md | 14 +++++-- 3 files changed, 98 insertions(+), 7 deletions(-) diff --git a/js/action-script.js b/js/action-script.js index f48d709..9b679ec 100755 --- a/js/action-script.js +++ b/js/action-script.js @@ -14,8 +14,56 @@ pageManager.setPage(null, '/view', DOM.CONTAINER, ['dashboard', 'machines', 'use +/* [1] Toggle du sub-menu-side <-> navigation +===========================================*/ +function navSubMenu(subsection){ + /* [1] Format du param + ------------------------------------------------*/ + // Contient l'element courant + var current = document.querySelector('#CONTAINER > .sub-menu-side > span[data-sublink="'+pageManager.vars[0]+'"]'); -/* [1] Toggle du side-menu <-> navigation + // 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('#CONTAINER > .sub-menu-side > span[data-sublink="'+subsection+'"]') : target; + + // Si rien trouve, on prend le premier element correspondant a la premiere page + target = (target == null) ? document.querySelector('#CONTAINER > .sub-menu-side > span[data-sublink]') : target; + console.log( 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 met a jour la variable page-manager si data-link trouve + if( target.getData('sublink') ) + pageManager.vars[0] = target.getData('sublink'); + +} + + + + + + +/* [2] Toggle du side-menu <-> navigation ===========================================*/ function navMenu(section){ /* [1] Format du param @@ -58,7 +106,26 @@ function navMenu(section){ pageManager.setPage( target.getData('link') ); - pageManager.xhr[pageManager.xhr.length-1].onloadend = function(){ DOM.HEADER.remClass('loading'); } + pageManager.activeXHR.addEventListener('loadend', function(){ + + // On retire l'icone de chargement + DOM.HEADER.remClass('loading'); + + // On gere la navigation du sous-menu + navSubMenu(null); + + // GESTION DE LA NAVIGATION DU SOUS-MENU + document.querySelector('#CONTAINER > .sub-menu-side').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); + + }, false); } }navMenu(pageManager.page); @@ -68,7 +135,21 @@ function navMenu(section){ -/* [2] Gestion de la navigation (physique) + + + + + + + + + + + + + + +/* [4] Gestion de la navigation (physique) ===========================================*/ DOM.MENUSIDE.addEventListener('click', function(e){ var target = e.target; diff --git a/js/lib/page-manager.js b/js/lib/page-manager.js index 2c1e21d..bffdf33 100644 --- a/js/lib/page-manager.js +++ b/js/lib/page-manager.js @@ -18,6 +18,7 @@ pageManagerClass.prototype = { depJS: null, // la dépendance javascript depCSS: null, // la dépendance css xhr: [], // tableau d'objets pour les requêtes ajax + activeXHR: null, // Contiendra l'instance XHR (ajax) en cours page: null, // l'indice de la page courante dans pagelist vars: [], // les variables suivant le nom de la page dans l'URL path: '', // le chemin du dossier contenant les pages (.php) @@ -47,6 +48,9 @@ pageManagerClass.prototype = { else // IE5, IE6 index = this.xhr.push( new ActiveXObject('Microsoft.XMLHttpRequest') ) -1; + // On definit un pointeur sur l'instance XHR active (ajax) + this.activeXHR = this.xhr[index]; + var ptrPageManagerClass = this; this.xhr[index].onreadystatechange = function(){ if( ptrPageManagerClass.xhr[index].readyState == 4 ) // si la requête est terminée diff --git a/todo.md b/todo.md index 6da5c72..b59da8d 100644 --- a/todo.md +++ b/todo.md @@ -14,14 +14,20 @@ # EN COURS # ############ -- [.] Gestion JS de la navigation - - [x] Gestion de liens+URL du menu - - [ ] Gestion des liens+URL du submenu - - [ ] onload du xhr, on lance le script sur le DOM + + +- [ ] Gestion JS/PHP de la navigation + - [ ] Gestion de l'affichage des pages en fonction du sous-menu ######## # FAIT # ######## +- [x] Gestion JS de la navigation + - [x] Gestion de liens+URL du menu + - [x] Gestion des liens+URL du submenu + - [x] onload du xhr, on lance le script sur le DOM + - [x] Refactor page-manager pour recuperer instance XHR active + - [x] Gestion de la navigation du sub-menu-side - [x] Configuration JSON du dispatcher - [x] Simplification de 2 tableaux lies par indice en 1 - [x] Configuration JSON du dispatcher