Update TODO + debut CSS submenu et correction menu (nowrap :after)

css/header.css

@@ -1,2 +1,2 @@
-
+#WRAPPER>#HEADER.loading>.icon{background-image:url("../src/static/loader2.svg");background-size:70% 70%}
 /*# sourceMappingURL=header.css.map */

css/header.scss

@@ -0,0 +1,5 @@
+/* Animation de chargement qudnd chargement ajax */
+#WRAPPER > #HEADER.loading > .icon{
+	background-image: url('../src/static/loader2.svg');
+	background-size: 70% 70%;
+}

css/layout.css

@@ -1,2 +1,2 @@
-#WRAPPER{display:block;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#edf0f5;font-family:'Ubuntu'}#WRAPPER>#HEADER{display:block;position:absolute;top:0;left:0;width:100%;height:calc( 4em - 1px );border-bottom:1px solid #2277f7;background-color:#5395f9;z-index:10}#WRAPPER>#HEADER>.icon{display:block;position:absolute;top:0;left:0;width:4em;height:4em;background-color:#2277f7;background-image:url("../src/static/icon.svg");background-position:center center;background-repeat:no-repeat;background-size:50% 50%;cursor:pointer;transition:all .3s}#WRAPPER>#HEADER>.icon:hover{background-color:#0967f6}#WRAPPER>#MENU-SIDE{display:block;position:absolute;top:4em;left:0;width:4em;height:100%;box-shadow:2px 1px 3px #ddd;background-color:#fff;transition:all .3s;z-index:9}#WRAPPER>#MENU-SIDE>span[data-link]{display:block;position:relative;width:calc( 4em - 2*.7em - 2*.55em - 2*.01em );height:calc( 4em - 2*.7em - 2*.55em - 2*.01em );margin:2em .7em;padding:.55em;border:.01em solid transparent;border-radius:2px;color:#a2a2a2;line-height:calc( 4em - 2*.7em - 2*.55em - 2*.01em );transition:color .3s, border .3s;cursor:pointer}#WRAPPER>#MENU-SIDE>span[data-link] svg,#WRAPPER>#MENU-SIDE>span[data-link] svg *{width:1.5em;height:1.5em;stroke:none !important;fill:#444 !important;transition:fill .3s}#WRAPPER>#MENU-SIDE>span[data-link][data-desc]:after{content:attr(data-desc);display:block;position:absolute;top:calc( .7em - 2*.3em );left:calc( 4.6em - 2*.3em );padding:.3em;border-radius:3px;background-color:#2a2a2a;color:#e2e2e2;transition:transform .1s;transform-origin:0 0;transform:scaleX(0)}#WRAPPER>#MENU-SIDE>span[data-link]:hover{border-color:#e6e6e6;box-shadow:inset 0 0 .5em #eee}#WRAPPER>#MENU-SIDE>span[data-link]:hover:after{transform:scaleX(1);color:#fff}#WRAPPER>#MENU-SIDE>span[data-link]:hover svg,#WRAPPER>#MENU-SIDE>span[data-link]:hover svg *{fill:#5395f9 !important}#WRAPPER>#MENU-SIDE>span[data-link].active{border-color:#e6e6e6}#WRAPPER>#MENU-SIDE>span[data-link].active svg,#WRAPPER>#MENU-SIDE>span[data-link].active svg *{fill:#5395f9 !important}#WRAPPER>#MENU-SIDE>span[data-link]:hover{color:#565656}#WRAPPER>#CONTAINER{display:block;position:absolute;top:4em;left:4em;width:calc( 100% - 4em - 2*1em );height:calc( 100% - 4em - 2*1em );padding:1em;overflow-x:none;overflow-y:auto}
+#WRAPPER{display:block;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#edf0f5;font-family:'Ubuntu'}#WRAPPER>#HEADER{display:block;position:absolute;top:0;left:0;width:100%;height:calc( 4em - 1px );border-bottom:1px solid #2277f7;background-color:#5395f9;z-index:10}#WRAPPER>#HEADER>.icon{display:block;position:absolute;top:0;left:0;width:4em;height:4em;background-color:#2277f7;background-image:url("../src/static/icon.svg");background-position:center center;background-repeat:no-repeat;background-size:50% 50%;cursor:pointer;transition:all .3s}#WRAPPER>#HEADER>.icon:hover{background-color:#0967f6}#WRAPPER>#MENU-SIDE{display:block;position:absolute;top:4em;left:0;width:4em;height:100%;box-shadow:2px 1px 3px #ddd;background-color:#fff;transition:all .3s;z-index:9}#WRAPPER>#MENU-SIDE>span[data-link]{display:block;position:relative;width:calc( 4em - 2*.7em - 2*.55em - 2*.01em );height:calc( 4em - 2*.7em - 2*.55em - 2*.01em );margin:2em .7em;padding:.55em;border:.01em solid transparent;border-radius:2px;color:#a2a2a2;line-height:calc( 4em - 2*.7em - 2*.55em - 2*.01em );transition:color .3s, border .3s;cursor:pointer}#WRAPPER>#MENU-SIDE>span[data-link] svg,#WRAPPER>#MENU-SIDE>span[data-link] svg *{width:1.5em;height:1.5em;stroke:none !important;fill:#444 !important;transition:fill .3s}#WRAPPER>#MENU-SIDE>span[data-link][data-desc]:after{content:attr(data-desc);display:block;position:absolute;top:calc( .7em - 2*.3em );left:calc( 4.6em - 2*.3em );padding:.3em;border-radius:3px;background-color:#2a2a2a;color:#e2e2e2;white-space:nowrap;transition:transform .1s;transform-origin:0 0;transform:scaleX(0)}#WRAPPER>#MENU-SIDE>span[data-link]:hover{border-color:#e6e6e6;box-shadow:inset 0 0 .5em #eee}#WRAPPER>#MENU-SIDE>span[data-link]:hover:after{transform:scaleX(1);color:#fff}#WRAPPER>#MENU-SIDE>span[data-link]:hover svg,#WRAPPER>#MENU-SIDE>span[data-link]:hover svg *{fill:#5395f9 !important}#WRAPPER>#MENU-SIDE>span[data-link].active{border-color:#e6e6e6}#WRAPPER>#MENU-SIDE>span[data-link].active svg,#WRAPPER>#MENU-SIDE>span[data-link].active svg *{fill:#5395f9 !important}#WRAPPER>#MENU-SIDE>span[data-link]:hover{color:#565656}#WRAPPER>#CONTAINER{display:block;position:absolute;top:4em;left:4em;width:calc( 100% - 4em - 2*1em );height:calc( 100% - 4em - 2*1em );padding:1em;overflow-x:none;overflow-y:auto}
 /*# sourceMappingURL=layout.css.map */

css/layout.scss

@@ -124,6 +124,7 @@ $theme-color: #5395f9;
 				background-color: #2a2a2a;
 
 				color: #e2e2e2;
+				white-space: nowrap;
 
 				transition: transform .1s;
 				

js/action-script.js

@@ -53,9 +53,14 @@ function navMenu(section){
 	var page = null;
 
 	// On charge la page si data-link trouve
-	if( target.getData('link') )
+	if( target.getData('link') ){
+		DOM.HEADER.addClass('loading'); // Animation de chargement
+
 		pageManager.setPage( target.getData('link') );
 
+		pageManager.xhr[pageManager.xhr.length-1].onloadend = function(){ DOM.HEADER.remClass('loading'); }
+	}
+
 }navMenu(pageManager.page);
 
 

js/lib/page-manager.js

@@ -21,8 +21,8 @@ pageManagerClass.prototype = {
 	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)
-	jsPath:  '_JS_',  // le chemin du dossier contenant les scripts (.js)
+	jsPath:  'js',  // le chemin du dossier contenant les scripts (.js)
-	cssPath: '_CSS_', // le chemin du dossier contenant les feuilles de style (.css)
+	cssPath: 'css', // le chemin du dossier contenant les feuilles de style (.css)
 	pagelist: null,  // la liste des pages pouvant être chargées
 	container: null, // élément DOM qui contiendra le contenu des pages à charger
 	/* =======================================================================
@@ -64,6 +64,8 @@ pageManagerClass.prototype = {
 
 		this.xhr[index].open( method, pLink, true );
 		this.xhr[index].send( form );
+
+		return this;
 	},
 	/***************************************************** [APPLICATION] Ajax() ******************************************************/
 	// EXEMPLES DE FONCTIONS POUR pHandler //
@@ -253,6 +255,8 @@ pageManagerClass.prototype = {
 			}
 		}else
 			console.warn('pagelist et container manquant');
+
+		return this;
 	},
 
 
@@ -264,6 +268,8 @@ pageManagerClass.prototype = {
 	*/
 	reload: function(){
 		this.setPage(this.page);
+
+		return this;
 	}
 
 }

src/static/loader.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg width='176px' height='176px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ring-alt"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><circle cx="50" cy="50" r="40" stroke="#ffffff" fill="none" stroke-width="10" stroke-linecap="round"></circle><circle cx="50" cy="50" r="40" stroke="#5395F9" fill="none" stroke-width="6" stroke-linecap="round"><animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"></animate><animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="100.4 150.6;1 250;100.4 150.6"></animate></circle></svg>

src/static/loader2.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg width='198px' height='198px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ring-alt"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><circle cx="50" cy="50" r="40" stroke="#5395f9" fill="none" stroke-width="10" stroke-linecap="round"></circle><circle cx="50" cy="50" r="40" stroke="#ffffff" fill="none" stroke-width="6" stroke-linecap="round"><animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"></animate><animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="100.4 150.6;1 250;100.4 150.6"></animate></circle></svg>

todo.md

@@ -10,8 +10,8 @@
 # EN COURS #
 ############
 - [.] Design de structure (layout)
-	- [.] Header
+	- [x] Header
-	- [.] Menu-side
+	- [x] Menu-side
 	- [.] Submenu-side
 - [.] Gestion JS de la navigation
 	- [x] Gestion de liens+URL du menu
@@ -21,6 +21,7 @@
 # FAIT #
 ########
 - [x] Gestion complete de la navigation de niveau 0
+	- [x] Ajout d'un loader pour page-manager.js
 - [x] Autoloader avec namespace
 - [x] Adaptation de page-manger.js
 - [x] Conception et dev routeur

view.php

@@ -41,11 +41,11 @@
 
 			<!-- MENU DE LA PAGE -->
 			<nav id='MENU-SIDE'>
-				<span data-link='dashboard' data-desc='Dashboard'      ><?php include __ROOT__.'/src/static/menu-dashboard.svg'; ?></span>
+				<span data-link='dashboard' data-desc='Tableau de bord' ><?php include __ROOT__.'/src/static/menu-dashboard.svg'; ?></span>
-				<span data-link='machines'  data-desc='Véhicules'      ><?php include __ROOT__.'/src/static/menu-machines.svg';  ?></span>
+				<span data-link='machines'  data-desc='Véhicules'       ><?php include __ROOT__.'/src/static/menu-machines.svg';  ?></span>
-				<span data-link='users'     data-desc='Utilisateurs'   ><?php include __ROOT__.'/src/static/menu-users.svg';     ?></span>	
+				<span data-link='users'     data-desc='Utilisateurs'    ><?php include __ROOT__.'/src/static/menu-users.svg';     ?></span>	
-				<span data-link='sync'      data-desc='Synchronisation'><?php include __ROOT__.'/src/static/menu-sync.svg';      ?></span>
+				<span data-link='sync'      data-desc='Synchronisation' ><?php include __ROOT__.'/src/static/menu-sync.svg';      ?></span>
-				<span data-link='settings'  data-desc='Paramètres'     ><?php include __ROOT__.'/src/static/menu-settings.svg';  ?></span>
+				<span data-link='settings'  data-desc='Paramètres'      ><?php include __ROOT__.'/src/static/menu-settings.svg';  ?></span>
 			</nav>
 
 

view/dashboard.php

@@ -1,12 +1,12 @@
 <!-- [1] Gestion du sous-menu de gauche -->
 
 <nav class='inside-menu'>
-	<span></span>
+	<span>menu item 1</span>
-	<span></span>
+	<span>menu item 2</span>
-	<span></span>
+	<span>menu item 3</span>
-	<span></span>
+	<span>menu item 4</span>
-	<span></span>
+	<span>menu item 5</span>
-	<span></span>
+	<span>menu item 6</span>
 </nav>
 
-blabla
+Bienvenue sur le DASHBOARD

view/machines.php

@@ -0,0 +1,12 @@
+<!-- [1] Gestion du sous-menu de gauche -->
+
+<nav class='inside-menu'>
+	<span>menu item 1</span>
+	<span>menu item 2</span>
+	<span>menu item 3</span>
+	<span>menu item 4</span>
+	<span>menu item 5</span>
+	<span>menu item 6</span>
+</nav>
+
+Bienvenue sur la page de gestion des MACHINES

view/settings.php

@@ -0,0 +1,12 @@
+<!-- [1] Gestion du sous-menu de gauche -->
+
+<nav class='inside-menu'>
+	<span>menu item 1</span>
+	<span>menu item 2</span>
+	<span>menu item 3</span>
+	<span>menu item 4</span>
+	<span>menu item 5</span>
+	<span>menu item 6</span>
+</nav>
+
+Bienvenue sur la page des PARAMETRES

view/sync.php

@@ -0,0 +1,12 @@
+<!-- [1] Gestion du sous-menu de gauche -->
+
+<nav class='inside-menu'>
+	<span>menu item 1</span>
+	<span>menu item 2</span>
+	<span>menu item 3</span>
+	<span>menu item 4</span>
+	<span>menu item 5</span>
+	<span>menu item 6</span>
+</nav>
+
+Bienvenue sur la page de SYNCHRONISATION

view/users.php

@@ -0,0 +1,12 @@
+<!-- [1] Gestion du sous-menu de gauche -->
+
+<nav class='inside-menu'>
+	<span>menu item 1</span>
+	<span>menu item 2</span>
+	<span>menu item 3</span>
+	<span>menu item 4</span>
+	<span>menu item 5</span>
+	<span>menu item 6</span>
+</nav>
+
+Bienvenue sur la page de gestion des UTILISATEURS