From e7abe6443c7e950d1f91d2254840a8789db3a1f4 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Tue, 2 Feb 2016 11:09:48 +0100 Subject: [PATCH] - [x] Gestion complete de la navigation de niveau 0 - [x] Autoloader avec namespace - [x] Adaptation de page-manager.js avec le Router.php --- index.php | 37 +++++++++++++------- js/action-script.js | 66 ++++++++++++++++++++++++++++++++---- js/lib/page-manager.js | 19 ++++++++--- js/lib/reset.js | 77 +++++++++++++++++++++++++++++++++++++----- todo.md | 5 +-- view.php | 4 +-- view/dashboard.php | 4 ++- 7 files changed, 177 insertions(+), 35 deletions(-) diff --git a/index.php b/index.php index f6b39e1..5f163b9 100644 --- a/index.php +++ b/index.php @@ -10,24 +10,37 @@ /* [1] On cree les regles de routage ===================================================*/ - $R->get('/?', function(){ header('Location: dashboard'); }); + $R->get('/?', function(){ header('Location: /dashboard/'); }); - $R->get('dashboard/:submenu/?', function($sm){ $subMenu = $sm; include __ROOT__.'/view.php'; }); - $R->get('machines/:submenu/?', function($sm){ $subMenu = $sm; include __ROOT__.'/view.php'; }); - $R->get('users/:submenu/?', function($sm){ $subMenu = $sm; include __ROOT__.'/view.php'; }); - $R->get('sync/:submenu/?', function($sm){ $subMenu = $sm; include __ROOT__.'/view.php'; }); - $R->get('settings/:submenu/?', function($sm){ $subMenu = $sm; include __ROOT__.'/view.php'; }); + $R->get('dashboard/(?::submenu/)*', function($sm){ var_dump(func_get_args()); $subMenu = $sm; include __ROOT__.'/view.php'; }); + $R->get('machines/(?::submenu/)*', function($sm){ $subMenu = $sm; include __ROOT__.'/view.php'; }); + $R->get('users/(?::submenu/)*', function($sm){ $subMenu = $sm; include __ROOT__.'/view.php'; }); + $R->get('sync/(?::submenu/)*', function($sm){ $subMenu = $sm; include __ROOT__.'/view.php'; }); + $R->get('settings/(?::submenu/)*', function($sm){ $subMenu = $sm; include __ROOT__.'/view.php'; }); + + $R->get('dashboard', function(){ header('Location: /dashboard/'); }); + $R->get('machines', function(){ header('Location: /machines/'); }); + $R->get('users', function(){ header('Location: /users/'); }); + $R->get('sync', function(){ header('Location: /sync/'); }); + $R->get('settings', function(){ header('Location: /settings/'); }); + + $R->get('dashboard/', function(){ include __ROOT__.'/view.php'; }); + $R->get('machines/', function(){ include __ROOT__.'/view.php'; }); + $R->get('users/', function(){ include __ROOT__.'/view.php'; }); + $R->get('sync/', function(){ include __ROOT__.'/view.php'; }); + $R->get('settings/', function(){ include __ROOT__.'/view.php'; }); + + // Correction d' + $R->get('.+', function(){ header('Location: /dashboard/'); }); - $R->get('dashboard/?', function(){ $subMenu = 'index'; include __ROOT__.'/view.php'; }); - $R->get('machines/?', function(){ $subMenu = 'index'; include __ROOT__.'/view.php'; }); - $R->get('users/?', function(){ $subMenu = 'index'; include __ROOT__.'/view.php'; }); - $R->get('sync/?', function(){ $subMenu = 'index'; include __ROOT__.'/view.php'; }); - $R->get('settings/?', function(){ $subMenu = 'index'; include __ROOT__.'/view.php'; }); $R->post('.*', function(){ - echo 'Acces POST'; + var_dump( 'Acces POST : '.$_GET['url'] ); }); + + + /* [2] On lance le routeur ===================================================*/ $R->run(); diff --git a/js/action-script.js b/js/action-script.js index 893332b..805d1e0 100755 --- a/js/action-script.js +++ b/js/action-script.js @@ -9,19 +9,73 @@ DOM = { /* [0] Instanciation ===========================================*/ var pageManager = new pageManagerClass(); -pageManager.setPage(null, 'view', DOM.CONTAINER, ['dashboard', 'machines', 'users', 'sync', 'settings'] ); +pageManager.setPage(null, '/view', DOM.CONTAINER, ['dashboard', 'machines', 'users', 'sync', 'settings'] ); -/* [1] Gestion de la navigation + + + +/* [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 + if( target.getData('link') ) + pageManager.setPage( target.getData('link') ); + +}navMenu(pageManager.page); + + + + + + +/* [2] 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 && !getData(target, 'link') ) + while( target != document.body && !target.getData('link') ) target = target.parentNode; // Si on a trouve l'element, on l'utilise pour la page - if( getData(target, 'link') ) - pageManager.setPage(target.dataset.link); -}, false); \ No newline at end of file + if( target.getData('link') ) + navMenu(target.getData('link')); +}, false); + + + diff --git a/js/lib/page-manager.js b/js/lib/page-manager.js index 9f1c5fb..b94ac08 100644 --- a/js/lib/page-manager.js +++ b/js/lib/page-manager.js @@ -93,7 +93,7 @@ pageManagerClass.prototype = { explodeURL: function(url_data){ url_data = (arguments.length >= 1) ? url_data : document.URL; // si pageList est correct et que l'URL correspond à un schéma de page => continue [sinon] return null - if( this.pagelist != null && /^(?:.+)\/([a-z0-9_]+)\/?(?:\/((?:.+\/)+)\/?)?$/i.test(url_data) ){ + if( this.pagelist != null && /^(?:(?:http:\/\/)?[^\/]+)\/([a-z0-9_]+)\/?(?:\/((?:.+\/)+)\/?)?$/i.test(url_data) ){ // si la page récupérée dans l'url est dans la liste => renvoi de l'objet [sinon] null var vars = RegExp.$2.split('/'); while( vars[vars.length-1] == '' ) // on supprime les dernières entrées vides @@ -132,7 +132,7 @@ pageManagerClass.prototype = { ptrPageManagerClass.depCSS.href = ptrPageManagerClass.path+'/_CSS/'+ptrPageManagerClass.page+'.css'; document.head.appendChild(ptrPageManagerClass.depCSS); }else - console.log('[loadDependencies_Error] - ('+ptrPageManagerClass.path+'/_CSS/'+ptrPageManagerClass.page+'.css)'); + console.warn('[loadDependencies_Error] - ('+ptrPageManagerClass.path+'/_CSS/'+ptrPageManagerClass.page+'.css)'); }); // si le fichier js existe @@ -143,7 +143,7 @@ pageManagerClass.prototype = { ptrPageManagerClass.depJS.src = ptrPageManagerClass.path+'/_JS/'+ptrPageManagerClass.page+'.js'; document.head.appendChild(ptrPageManagerClass.depJS); }else - console.log('[loadDependencies_Error] - ('+ptrPageManagerClass.path+'/_JS/'+ptrPageManagerClass.page+'.js)'); + console.warn('[loadDependencies_Error] - ('+ptrPageManagerClass.path+'/_JS/'+ptrPageManagerClass.page+'.js)'); }); }, @@ -250,7 +250,18 @@ pageManagerClass.prototype = { this.setPage(this.pagelist[0]); } }else - console.log('pagelist et container manquant'); + console.warn('pagelist et container manquant'); + }, + + + + /* Rechargement de la page courante + * + * @action Recharge la page en cours en conservant les variables + * + */ + reload: function(){ + this.setPage(this.page); } } \ No newline at end of file diff --git a/js/lib/reset.js b/js/lib/reset.js index 2f8bd71..75be58a 100644 --- a/js/lib/reset.js +++ b/js/lib/reset.js @@ -1,19 +1,80 @@ +/* SELECTEUR SIMPLIFIE +* +* @ifOrClass L'id ou la classe de l'element cible +* +* @return element Retourne l'element de cet ID ou cette classe si trouve +* @return null Retourne null si rien n'est trouve +* +*/ function $(idOrClass){ var byId = document.querySelectorAll('#'+idOrClass); var byClass = document.querySelectorAll('.'+idOrClass); if( byId.length > 0 ) return byId[0]; - else return byClass; + else return byClass[0]; } -function getData(element, attribute){ - // On verifie qu'il s'agit bien d'un element du DOM - if( !(element instanceof Element) ) - return false; +/* Retourne un data-* attribute d'un element (surcharge de l'ELEMENT natif) +* +* @attribute L'attribut qui nous interesse +* +* @return value Retourne la valeur si l'attribut existe +* @return false Retourne FALSE si rien n'a ete trouve +* +* +*/ +Element.prototype.getData = function(attribute){ // On verifie qu'un data-* attribute existe - if( typeof element.dataset == 'undefined' ) + if( typeof this.dataset == 'undefined' ) return false; - return ( element.dataset.hasOwnProperty(attribute) ) ? element.dataset[attribute] : false; -} \ No newline at end of file + return ( this.dataset.hasOwnProperty(attribute) ) ? this.dataset[attribute] : false; +} + + + +/* Ajout de classe pour un element (surcharge de l'ELEMENT natif) +* +* @className Classe a ajouter a l'element +* +*/ +Element.prototype.addClass = function(className){ + /* [1] On transforme la classe actuelle en tableau + ====================================================*/ + var classArray = this.className.split(' '); + + /* [2] On ajoute la classe si elle n'y est pas deja + ====================================================*/ + if( classArray.indexOf(className) > -1 ) return; // La classe y est deja + + classArray.push(className); + + /* [3] On reformatte tout + ====================================================*/ + this.className = classArray.join(' ').trim(); +}; + + +/* Suppression de classe pour un element (surcharge de l'ELEMENT natif) +* +* @className Classe a supprimer a l'element +* +*/ +Element.prototype.remClass = function(className){ + /* [1] On transforme la classe actuelle en tableau + ====================================================*/ + var classArray = this.className.split(' '); + + /* [2] On retire la classe si elle y est + ====================================================*/ + var index = classArray.indexOf(className); + + if( index == -1 ) return; // La classe n'y est pas + + classArray = classArray.slice(0,index).concat( classArray.slice(index+1) ); + + /* [3] On reformatte tout + ====================================================*/ + this.className = classArray.join(' ').trim(); +}; \ No newline at end of file diff --git a/todo.md b/todo.md index 2394093..bf5a748 100644 --- a/todo.md +++ b/todo.md @@ -5,7 +5,6 @@ - [ ] Creation de la base des managers et de l'API - [ ] Conception des managers et de l'API - [ ] Conception BDD + ameliorations -- [ ] Autoloader avec namespace ############ # EN COURS # @@ -15,12 +14,14 @@ - [.] Menu-side - [.] Submenu-side - [.] Gestion JS de la navigation - - [.] Gestion de liens+URL du menu + - [x] Gestion de liens+URL du menu - [ ] Gestion des liens+URL du submenu ######## # FAIT # ######## +- [x] Gestion complete de la navigation de niveau 0 +- [x] Autoloader avec namespace - [x] Adaptation de page-manger.js - [x] Conception et dev routeur - [x] Initialiser le github.com/git diff --git a/view.php b/view.php index a7f2c21..6dd6e39 100755 --- a/view.php +++ b/view.php @@ -21,9 +21,9 @@ - + - + diff --git a/view/dashboard.php b/view/dashboard.php index a55650d..7603066 100644 --- a/view/dashboard.php +++ b/view/dashboard.php @@ -7,4 +7,6 @@ - \ No newline at end of file + + +blabla \ No newline at end of file