diff --git a/css/header.css b/css/header.css
index f4bc6b7..aee88bc 100755
--- a/css/header.css
+++ b/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 */
diff --git a/css/header.scss b/css/header.scss
index e69de29..ef9c8bd 100755
--- a/css/header.scss
+++ b/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%;
+}
diff --git a/css/layout.css b/css/layout.css
index 52c997f..bddf5c3 100755
--- a/css/layout.css
+++ b/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 */
diff --git a/css/layout.scss b/css/layout.scss
index 5dd4849..46858d4 100755
--- a/css/layout.scss
+++ b/css/layout.scss
@@ -124,6 +124,7 @@ $theme-color: #5395f9;
background-color: #2a2a2a;
color: #e2e2e2;
+ white-space: nowrap;
transition: transform .1s;
diff --git a/js/action-script.js b/js/action-script.js
index 805d1e0..f48d709 100755
--- a/js/action-script.js
+++ b/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);
diff --git a/js/lib/page-manager.js b/js/lib/page-manager.js
index 9f68f73..2c1e21d 100644
--- a/js/lib/page-manager.js
+++ b/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)
- cssPath: '_CSS_', // le chemin du dossier contenant les feuilles de style (.css)
+ jsPath: 'js', // le chemin du dossier contenant les scripts (.js)
+ 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;
}
}
\ No newline at end of file
diff --git a/src/static/loader.svg b/src/static/loader.svg
new file mode 100644
index 0000000..71c0a24
--- /dev/null
+++ b/src/static/loader.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/static/loader2.svg b/src/static/loader2.svg
new file mode 100644
index 0000000..1b36c21
--- /dev/null
+++ b/src/static/loader2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/todo.md b/todo.md
index bf5a748..0db43d4 100644
--- a/todo.md
+++ b/todo.md
@@ -10,8 +10,8 @@
# EN COURS #
############
- [.] Design de structure (layout)
- - [.] Header
- - [.] Menu-side
+ - [x] Header
+ - [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
diff --git a/view.php b/view.php
index 6dd6e39..b251a92 100755
--- a/view.php
+++ b/view.php
@@ -41,11 +41,11 @@
diff --git a/view/dashboard.php b/view/dashboard.php
index 7603066..4e2a8f8 100644
--- a/view/dashboard.php
+++ b/view/dashboard.php
@@ -1,12 +1,12 @@
-blabla
\ No newline at end of file
+Bienvenue sur le DASHBOARD
\ No newline at end of file
diff --git a/view/machines.php b/view/machines.php
new file mode 100644
index 0000000..2ee22b5
--- /dev/null
+++ b/view/machines.php
@@ -0,0 +1,12 @@
+
+
+
+
+Bienvenue sur la page de gestion des MACHINES
\ No newline at end of file
diff --git a/view/settings.php b/view/settings.php
new file mode 100644
index 0000000..df3e067
--- /dev/null
+++ b/view/settings.php
@@ -0,0 +1,12 @@
+
+
+
+
+Bienvenue sur la page des PARAMETRES
\ No newline at end of file
diff --git a/view/sync.php b/view/sync.php
new file mode 100644
index 0000000..f8159f1
--- /dev/null
+++ b/view/sync.php
@@ -0,0 +1,12 @@
+
+
+
+
+Bienvenue sur la page de SYNCHRONISATION
\ No newline at end of file
diff --git a/view/users.php b/view/users.php
new file mode 100644
index 0000000..73ce4f3
--- /dev/null
+++ b/view/users.php
@@ -0,0 +1,12 @@
+
+
+
+
+Bienvenue sur la page de gestion des UTILISATEURS
\ No newline at end of file