- [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

@@ -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('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('machines/(?::submenu/)*',  function($sm){ $subMenu = $sm; include __ROOT__.'/view.php'; });
-	$R->get('users/: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('sync/(?::submenu/)*',      function($sm){ $subMenu = $sm; include __ROOT__.'/view.php'; });
-	$R->get('settings/: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();

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') )
+	if( target.getData('link') )
-		pageManager.setPage(target.dataset.link);
+		navMenu(target.getData('link'));
 }, false);
+
+
+

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

js/lib/reset.js

@@ -1,19 +1,80 @@
+/* SELECTEUR SIMPLIFIE
+*
+* @ifOrClass<String>			L'id ou la classe de l'element cible
+*
+* @return element<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<String>			L'attribut qui nous interesse
+*
+* @return value<String>			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;
+	return ( this.dataset.hasOwnProperty(attribute) ) ? this.dataset[attribute] : false;
 }
+
+
+
+/* Ajout de classe pour un element (surcharge de l'ELEMENT natif)
+*
+* @className<String>				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<String>				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();
+};

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

view.php

@@ -21,9 +21,9 @@
 
 		<!-- Dépendences Javascript -->
 		<script type='text/javascript' src='/js/lib/reset.js'            ></script>  <!-- Corrections Javascript natif (ajouts) -->
-		<script type='text/javascript' src='/js/lib/API.js'              ></script>  <!-- Gestion des dialogues client/serveur  -->
+		<!-- <script type='text/javascript' src='/js/lib/API.js'              ></script>  Gestion des dialogues client/serveur  -->
 		<script type='text/javascript' src='/js/lib/page-manager.js'     ></script>  <!-- Gestion réseau/chargement/liens/URL   -->
-		<script type='text/javascript' src='/js/lib/shortcut-manager.js' ></script>  <!-- Gestion des raccourcis clavier        -->
+		<!-- <script type='text/javascript' src='/js/lib/shortcut-manager.js' ></script>  Gestion des raccourcis clavier        -->
 
 	</head>
 	<body>

view/dashboard.php

@@ -8,3 +8,5 @@
 	<span></span>
 	<span></span>
 </nav>
+
+blabla