- [x] Gestion complete de la navigation de niveau 0
- [x] Autoloader avec namespace - [x] Adaptation de page-manager.js avec le Router.php
This commit is contained in:
xdrm-brackets
parent
83dbc88f92
commit
e7abe6443c
37
index.php
37
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();
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
if( target.getData('link') )
|
||||
navMenu(target.getData('link'));
|
||||
}, false);
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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();
|
||||
};
|
||||
5
todo.md
5
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
|
||||
|
|
|
|||
4
view.php
4
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>
|
||||
|
|
|
|||
|
|
@ -8,3 +8,5 @@
|
|||
<span></span>
|
||||
<span></span>
|
||||
</nav>
|
||||
|
||||
blabla
|
||||
Loading…
Reference in New Issue