Updated page-manager for using only 1 instance of a page through links :
- edit [user+machine] - remove [user+machine] `refresh()` method of pageManager refactor: only 1 api call for current user/machine (to fill edit/remove)
This commit is contained in:
xdrm-brackets
parent
655a502a42
commit
ccabc2c4eb
|
|
@ -1,326 +1,19 @@
|
|||
/***************************************/
|
||||
/* */
|
||||
/* GESTIONNAIRE D'OPTIMISATION DES */
|
||||
/* RESSOURCES ET DE */
|
||||
/* NAVIGATION EN AJAX */
|
||||
/* */
|
||||
/* Développé par {xdrm} */
|
||||
/* */
|
||||
/* GITHUB github.com/xdrm-brackets/ */
|
||||
/* */
|
||||
/***************************************/
|
||||
|
||||
function pageManagerClass(){}
|
||||
|
||||
var ptrPageManagerClass; // pointeur global pour l'utilisation de fonctions de fonctions
|
||||
|
||||
pageManagerClass.prototype = {
|
||||
loaded: null, // la page chargée en ce moment
|
||||
depJS: null, // la dépendance javascript
|
||||
depCSS: null, // la dépendance css
|
||||
xhr: [], // tableau d'objets pour les requêtes ajax
|
||||
activeXHR: null, // Contiendra l'instance XHR (ajax) en cours
|
||||
page: null, // l'indice de la page courante dans pagelist
|
||||
vars: [], // les variables suivant le nom de la page dans l'URL
|
||||
root: '', // Racine du projet
|
||||
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)
|
||||
pagelist: null, // la liste des pages pouvant être chargées
|
||||
container: null, // élément DOM qui contiendra le contenu des pages à charger
|
||||
refresher: function(){}, // function appelée après refresh
|
||||
/* =======================================================================
|
||||
Cette fonction effectue une requête Ajax (compatible à partir de IE5)
|
||||
PARAMETRES:
|
||||
- pLink<string> le lien à charger
|
||||
- pHandler<function> une fonction qui s'éxécutera avec la réponse de la requête passée en paramètre (voir exemples dessous pour pHandler)
|
||||
- pMethod<string> type de méthode, vaut 'POST' ou 'GET' et vaut 'POST' par défaut ou s'il n'est pas renseigné
|
||||
- pForm<FormData> formulaire de type FormData() contenant les données à envoyer (uniquement en POST), si pForm vaut GET les données doivent être passées dans l'URL
|
||||
========================================================================== */
|
||||
ajax: function(pLink, pHandler, pMethod, pForm){
|
||||
// on efface les requêtes qui sont terminées et on push une nouvelle
|
||||
// for( var i = 0 ; i < this.xhr.length ; i++ ){
|
||||
// this.xhr = this.xhr.splice(i, 1); // suppression entrée
|
||||
// }
|
||||
|
||||
var index;
|
||||
|
||||
// IE7+, Firefox, Chrome, Opera, Safari
|
||||
// IE5, IE6
|
||||
index = this.xhr.push( window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHttpRequest') ) -1;
|
||||
|
||||
// On definit un pointeur sur l'instance XHR active (ajax)
|
||||
this.activeXHR = this.xhr[index];
|
||||
|
||||
this.xhr[index].addEventListener('readystatechange', function(i){
|
||||
|
||||
// si la requete a ete supprimee, on quitte
|
||||
if( this.xhr[i] == undefined )
|
||||
return;
|
||||
|
||||
// Si la requête est terminée
|
||||
if( this.xhr[i].readyState === 4 ){ // si la requête est terminée
|
||||
|
||||
if( [0,200].indexOf(this.xhr[i].status) > -1 ) // si fichier existe et reçu
|
||||
pHandler(this.xhr[i].responseText);
|
||||
else // si code d'erreur retourne null
|
||||
pHandler();
|
||||
|
||||
|
||||
// On supprime la requête
|
||||
this.xhr[i] = null;
|
||||
|
||||
// S'il n'y a plus de requête active, on supprime tout
|
||||
var empty = true;
|
||||
for( var i = 0 ; i < this.xhr.length ; i++ )
|
||||
if( this.xhr[i] !== null ){
|
||||
empty = false;
|
||||
break;
|
||||
}
|
||||
|
||||
// Si tout est vide, on efface
|
||||
empty && ( this.xhr = [] );
|
||||
}
|
||||
|
||||
}.bind(this, index), false);
|
||||
|
||||
// gestion de la méthode
|
||||
var method = ( typeof pMethod == 'string' && /^POST|GET$/i.test(pMethod) ) ? pMethod.toUpperCase() : 'POST';
|
||||
|
||||
// gestion du formulaire si la méthode est POST
|
||||
var form = ( method == 'POST' && typeof pForm == 'object' && pForm instanceof FormData ) ? pForm : null;
|
||||
|
||||
this.xhr[index].open( method, pLink, true );
|
||||
this.xhr[index].send( form );
|
||||
|
||||
return this;
|
||||
},
|
||||
/***************************************************** [APPLICATION] Ajax() ******************************************************/
|
||||
// EXEMPLES DE FONCTIONS POUR pHandler //
|
||||
// 1. var a = function(param){ alert(param); } // les deux notations 1 et 2 sont équivalents
|
||||
// 2. function a(param){ alert(param); } // les deux notations 1 et 2 sont équivalents
|
||||
|
||||
// ajax( 'index.php', a ); // utilisation d'une fonction définie
|
||||
|
||||
// ajax( 'index.php', alert ); // utilisation d'une fonction prédéfinie
|
||||
// ajax( 'index.php', alert, 'GET' ); // utilisation de méthode
|
||||
|
||||
// var fd = new FormData(); // création d'un formulaire
|
||||
// fd.append('var', 100); // ajout de la variable VAR qui vaut 100
|
||||
|
||||
// ajax( 'index.php', alert, null, fd ); // saut de paramètre avec null + envoi formulaire
|
||||
// ajax( 'index.php?var=10', alert, 'GET' ); // envoi formulaire en GET (dans l'url)
|
||||
// ajax( 'index.php?var=10', alert, 'POST', fd ); // envoi formulaire en GET (dans l'url) + en POST via le formulaire FD
|
||||
|
||||
|
||||
/* =======================================================================
|
||||
Cette fonction effectue une décomposition de l'URL sur le shéma spécifié dessous
|
||||
Renvoie pour http://www.exemple.com/dirA/dirB/#/NOMPAGE/VARPAGE
|
||||
- null si la page n'est pas référencée dans le tableau PAGELIST
|
||||
- null si le lien ne contient pas /#/NOMPAGE à la fin
|
||||
- null si NOMPAGE ne contient pas uniquement : lettres, chiffres, underscore
|
||||
- null si VARPAGE ne contient pas uniquement : lettres, chiffres, underscore
|
||||
- un objet contenant {page: valeur, var: valeur}
|
||||
========================================================================== */
|
||||
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 && /^(?:(?:https?:\/\/)?[^\/]+)\/([a-z0-9_]+)(?:\/|((?:\/\w+)+)\/?)?(#.*)?$/i.test(url_data) ){
|
||||
// si la page récupérée dans l'url est dans la liste => renvoi de l'objet [sinon] null
|
||||
// on supprime la première entrée vide
|
||||
var vars = RegExp.$2.split('/').slice(1);
|
||||
|
||||
return ( this.pagelist.indexOf(RegExp.$1) > -1 ) ? {page: RegExp.$1, var: vars} : null;
|
||||
}else
|
||||
return null;
|
||||
},
|
||||
/* =======================================================================
|
||||
Cette fonction ajoute des dépendances (un js et un css) situés dans le répertoire des pages.
|
||||
pageDir/
|
||||
_JS/
|
||||
page1.js
|
||||
page2.js
|
||||
_CSS/
|
||||
page1.css
|
||||
page2.css
|
||||
========================================================================== */
|
||||
loadDependencies: function(){
|
||||
// si depCSS est un élément du DOM c'est à dire qu'il contient le fichier de la page précédente et qu'il est enfant de <head>, on le détruit
|
||||
if( typeof this.depCSS == 'object' && this.depCSS instanceof Element && this.depCSS.parentNode == document.head )
|
||||
document.head.removeChild( this.depCSS );
|
||||
|
||||
// si depJS est un élément du DOM c'est à dire qu'il contient le fichier de la page précédente, on le détruit
|
||||
if( typeof this.depJS == 'object' && this.depJS instanceof Element && this.depJS.parentNode == document.head )
|
||||
document.head.removeChild( this.depJS );
|
||||
|
||||
// si le fichier css existe
|
||||
this.ajax(this.root+this.path+'/'+this.cssPath+'/'+this.page+'.css', function(e){
|
||||
if( e != null ){ // on charge la dépendance CSS si le fichier existe
|
||||
this.depCSS = document.createElement('link');
|
||||
this.depCSS.rel = 'stylesheet';
|
||||
this.depCSS.type = 'text/css';
|
||||
this.depCSS.href = this.root+this.path+'/'+this.cssPath+'/'+this.page+'.css';
|
||||
document.head.appendChild(this.depCSS);
|
||||
}else
|
||||
console.warn('[loadDependencies_Error] - ('+this.root+this.path+'/'+this.cssPath+'/'+this.page+'.css)');
|
||||
}.bind(this));
|
||||
|
||||
// si le fichier js existe
|
||||
this.ajax(this.root+this.path+'/'+this.jsPath+'/'+this.page+'.js', function(e){
|
||||
if( e != null ){ // on charge la dépendance JS si le fichier existe
|
||||
this.depJS = document.createElement('script');
|
||||
this.depJS.type = 'text/javascript';
|
||||
this.depJS.src = this.root+this.path+'/'+this.jsPath+'/'+this.page+'.js';
|
||||
document.head.appendChild(this.depJS);
|
||||
}else
|
||||
console.warn('[loadDependencies_Error] - ('+this.root+this.path+'/'+this.jsPath+'/'+this.page+'.js)');
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
/* =======================================================================
|
||||
Met à jour l'URL de la page en fonction de la page chargée et des
|
||||
variables associées (ne recharge aucune ressource)
|
||||
======================================================================= */
|
||||
updateURL: function(){
|
||||
if( this.vars.length > 0 ) // si il y a des variables
|
||||
window.history.pushState(this.page, this.page, this.root+'/'+this.page+'/'+this.vars.join('/')+'/');
|
||||
else // s'il n'y en a pas
|
||||
window.history.pushState(this.page, this.page, this.root+'/'+this.page+'/');
|
||||
|
||||
// on peut récupérer le nom de la page (quand on fait retour en arrière de l'historique)
|
||||
// dans la variable : window.history.state
|
||||
},
|
||||
|
||||
/* =======================================================================
|
||||
Cette fonction est celle qui gère les 2 autres et celle que l'utilisateur utilisera
|
||||
PARAMETRES:
|
||||
- pName<string> le nom de la page à charger (lettres, chiffres, underscore) (*)
|
||||
- pPath<string> chemin (relatif ou absolu) du dossier contenant les pages de même nom de fichier que le nom (extension .php)
|
||||
- pContainer<Element> l'élément du DOM qui contiendra la page chargée (**)
|
||||
- pPageList<Array<string>> tableau contenant la liste des pages sous forme de chaînes de caractères (**) (***)
|
||||
* Le chemin du dossier sans le '/' final si c'est le dossier actuel le chemin est une chaîne vide
|
||||
Si le dossier est 'page' et que l'on cherche la page 'accUe1l', la requête sera vers 'page/accUe1l.php'
|
||||
le nom de la page est sensible à la casse
|
||||
** 1. pPageList et pContainer doivent être mis en paramètres uniquement à la première utilisation
|
||||
et la première utilisation doit se faire au chargement de la page car elle permetra
|
||||
de mettre l'URL à jour et/ou charger la page de l'URL
|
||||
*** la première page du tableau est la page par défaut (qui est chargée si l'URL ne contient
|
||||
pas la page ou si la page de l'URL ne correspond à aucune page de la liste)
|
||||
========================================================================== */
|
||||
setPage: function(pName, pPath, pContainer, pPageList, pRoot){
|
||||
// liste de pages si c'est un tableau
|
||||
var pageList = ( typeof pPageList == 'object' && pPageList instanceof Array ) ? pPageList : null; // si this.pagelist n'est pas overwrite il vaut null
|
||||
|
||||
if( pageList != null ){ // si c'est un tableau
|
||||
for( var i = 0 ; i < pageList.length ; i++ ){ // on parcourt tout les éléments pour vérifier que chaque élément ne contient que : lettres, chiffres, underscore [non]> pageList = null
|
||||
pageList = ( typeof pageList[i] == 'string' && /^[a-z0-9_]+$/i.test(pageList[i]) ) ? pageList : null;
|
||||
if( pageList == null ) break; // si le tableau est null stoppe la boucle
|
||||
}
|
||||
}
|
||||
/* on attribue la variable temporaire pageList à l'attribut de l'objet si la variable pageList temporaire n'est pas nulle */
|
||||
this.pagelist = ( pageList != null ) ? pageList : this.pagelist;
|
||||
// affecte à l'attribut page la page par défaut (premier élément de pagelist)
|
||||
// this.page = this.pagelist[0];
|
||||
// Gestion de pRoot si racine autre que racine du vhost
|
||||
this.root = ( typeof pRoot == 'string' ) ? pRoot : this.root;
|
||||
// affecte pPath à l'attribut path s'il est renseigné
|
||||
this.path = ( typeof pPath == 'string' ) ? pPath : this.path;
|
||||
/* on attribue le paramètre pContainer à l'attribut si il est spécifié */
|
||||
this.container = ( typeof pContainer == 'object' && pContainer instanceof Element ) ? pContainer : this.container;
|
||||
|
||||
// si this.pagelist && this.container ne sont pas null
|
||||
if( this.pagelist && this.container ){
|
||||
|
||||
// Si on veut just `refresh` la page
|
||||
if( pName === true ){
|
||||
|
||||
// formulaire POST
|
||||
var fd = new FormData();
|
||||
for( var i = 0 ; i < this.vars.length ; i++ )
|
||||
fd.append(this.vars[i], null);
|
||||
|
||||
this.updateURL(); // can be useful for content or dep
|
||||
|
||||
this.ajax(this.root+this.path+'/'+this.page+'.php', function(e){
|
||||
this.container.innerHTML = e;
|
||||
this.loadDependencies();
|
||||
this.refresher.apply(this);
|
||||
this.updateURL(); // if updated in refresher
|
||||
}.bind(this), 'POST', fd);
|
||||
|
||||
return this;
|
||||
|
||||
// si le pName est renseigné et qu'il est dans pagelist
|
||||
}else if( typeof pName == 'string' && this.pagelist.indexOf(pName) > -1 ){
|
||||
// affecte pName à l'attribut page
|
||||
this.page = pName;
|
||||
|
||||
// formulaire POST
|
||||
var fd = new FormData();
|
||||
for( var i = 0 ; i < this.vars.length ; i++ )
|
||||
fd.append(this.vars[i], null);
|
||||
|
||||
this.ajax(this.root+this.path+'/'+this.page+'.php', function(e){
|
||||
this.container.innerHTML = e;
|
||||
this.loadDependencies();
|
||||
}.bind(this), 'POST', fd);
|
||||
|
||||
// change l'URL en conséquences(stateObj, titre, url)
|
||||
this.updateURL();
|
||||
|
||||
}else{ // si la page n'est pas spécifiée ou qu'elle n'est pas dans la liste des pages
|
||||
var urlGet = this.explodeURL();
|
||||
// si on a récupéré le numéro de la page dans l'URL et qu'elle fait partie de la liste des pages
|
||||
if( urlGet != null ){
|
||||
|
||||
// formulaire POST
|
||||
var fd = new FormData();
|
||||
this.vars.length = 0;
|
||||
|
||||
for( var i = 0 ; i < urlGet.var.length ; i++ ){ // replacing object variables with explodeURL variables
|
||||
this.vars[i] = urlGet.var[i];
|
||||
fd.append(this.vars[i], null);
|
||||
}
|
||||
|
||||
|
||||
// si différent de la page actuelle, on charge la page
|
||||
if( urlGet.page == this.page ){
|
||||
return this;
|
||||
}
|
||||
|
||||
this.page = urlGet.page;
|
||||
|
||||
this.ajax(this.root+this.path+'/'+this.page+'.php', function(e){
|
||||
this.container.innerHTML = e;
|
||||
this.loadDependencies();
|
||||
}.bind(this), 'POST', fd);
|
||||
|
||||
// change l'URL en conséquences(stateObj, titre, url)
|
||||
this.updateURL();
|
||||
|
||||
}else // si l'url ne contient rien, on charge la page par défaut
|
||||
this.setPage(this.pagelist[0]);
|
||||
}
|
||||
}else
|
||||
console.warn('pagelist et container manquant');
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
|
||||
/* Rechargement de la page courante
|
||||
*
|
||||
* @action Recharge la page en cours en conservant les variables
|
||||
*
|
||||
*/
|
||||
refresh: function(refresher){
|
||||
if( refresher instanceof Function ){
|
||||
this.refresher = refresher;
|
||||
return;
|
||||
}else
|
||||
return this.setPage(true);
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
function pageManagerClass(){}var ptrPageManagerClass
|
||||
pageManagerClass.prototype={loaded:null,depJS:null,depCSS:null,xhr:[],activeXHR:null,page:null,vars:[],root:"",path:"",jsPath:"js",cssPath:"css",pagelist:null,container:null,refresher:function(){},ajax:function(t,e,s,i){var h
|
||||
h=this.xhr.push(window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject("Microsoft.XMLHttpRequest"))-1,this.activeXHR=this.xhr[h],this.xhr[h].addEventListener("readystatechange",function(t){if(void 0!=this.xhr[t]&&4===this.xhr[t].readyState){[0,200].indexOf(this.xhr[t].status)>-1?e(this.xhr[t].responseText):e(),this.xhr[t]=null
|
||||
for(var s=!0,t=0;t<this.xhr.length;t++)if(null!==this.xhr[t]){s=!1
|
||||
break}s&&(this.xhr=[])}}.bind(this,h),!1)
|
||||
var n="string"==typeof s&&/^POST|GET$/i.test(s)?s.toUpperCase():"POST",a="POST"==n&&"object"==typeof i&&i instanceof FormData?i:null
|
||||
return this.xhr[h].open(n,t,!0),this.xhr[h].send(a),this},explodeURL:function(t){if(t=arguments.length>=1?t:document.URL,null!=this.pagelist&&/^(?:(?:https?:\/\/)?[^\/]+)\/([a-z0-9_]+)(?:\/|((?:\/\w+)+)\/?)?(#.*)?$/i.test(t)){var e=RegExp.$2.split("/").slice(1)
|
||||
return this.pagelist.indexOf(RegExp.$1)>-1?{page:RegExp.$1,var:e}:null}return null},loadDependencies:function(){"object"==typeof this.depCSS&&this.depCSS instanceof Element&&this.depCSS.parentNode==document.head&&document.head.removeChild(this.depCSS),"object"==typeof this.depJS&&this.depJS instanceof Element&&this.depJS.parentNode==document.head&&document.head.removeChild(this.depJS),this.ajax(this.root+this.path+"/"+this.cssPath+"/"+this.page+".css",function(t){null!=t?(this.depCSS=document.createElement("link"),this.depCSS.rel="stylesheet",this.depCSS.type="text/css",this.depCSS.href=this.root+this.path+"/"+this.cssPath+"/"+this.page+".css",document.head.appendChild(this.depCSS)):console.warn("[loadDependencies_Error] - ("+this.root+this.path+"/"+this.cssPath+"/"+this.page+".css)")}.bind(this)),this.ajax(this.root+this.path+"/"+this.jsPath+"/"+this.page+".js",function(t){null!=t?(this.depJS=document.createElement("script"),this.depJS.type="text/javascript",this.depJS.src=this.root+this.path+"/"+this.jsPath+"/"+this.page+".js",document.head.appendChild(this.depJS)):console.warn("[loadDependencies_Error] - ("+this.root+this.path+"/"+this.jsPath+"/"+this.page+".js)")}.bind(this))},updateURL:function(){this.vars.length>0?window.history.pushState(this.page,this.page,this.root+"/"+this.page+"/"+this.vars.join("/")+"/"):window.history.pushState(this.page,this.page,this.root+"/"+this.page+"/")},setPage:function(t,e,s,i,h){var n="object"==typeof i&&i instanceof Array?i:null
|
||||
if(null!=n)for(var a=0;a<n.length&&(n="string"==typeof n[a]&&/^[a-z0-9_]+$/i.test(n[a])?n:null,null!=n);a++);if(this.pagelist=null!=n?n:this.pagelist,this.root="string"==typeof h?h:this.root,this.path="string"==typeof e?e:this.path,this.container="object"==typeof s&&s instanceof Element?s:this.container,this.pagelist&&this.container){if(t===!0){for(var r=new FormData,a=0;a<this.vars.length;a++)r.append(this.vars[a],null)
|
||||
return this.updateURL(),this.ajax(this.root+this.path+"/"+this.page+".php",function(t){this.container.innerHTML=t,this.loadDependencies(),this.refresher.apply(this),this.updateURL()}.bind(this),"POST",r),this}if("string"==typeof t&&this.pagelist.indexOf(t)>-1){this.page=t
|
||||
for(var r=new FormData,a=0;a<this.vars.length;a++)r.append(this.vars[a],null)
|
||||
this.ajax(this.root+this.path+"/"+this.page+".php",function(t){this.container.innerHTML=t,this.loadDependencies()}.bind(this),"POST",r),this.updateURL()}else{var p=this.explodeURL()
|
||||
if(null!=p){var r=new FormData
|
||||
this.vars.length=0
|
||||
for(var a=0;a<p.var.length;a++)this.vars[a]=p.var[a],r.append(this.vars[a],null)
|
||||
if(p.page==this.page)return this
|
||||
this.page=p.page,this.ajax(this.root+this.path+"/"+this.page+".php",function(t){this.container.innerHTML=t,this.loadDependencies()}.bind(this),"POST",r),this.updateURL()}else this.setPage(this.pagelist[0])}}else console.warn("pagelist et container manquant")
|
||||
return this},refresh:function(t){return t instanceof Function?void(this.refresher=t):this.setPage(!0)}}
|
||||
|
|
|
|||
|
|
@ -1,224 +1,24 @@
|
|||
// TODO: Attendre que API soit chargée, sinon erreur: le CONTAINER prend comme contenu la dépendance JS
|
||||
DOM = {
|
||||
WRAPPER: $('WRAPPER'),
|
||||
HEADER: $('HEADER'),
|
||||
MENUSIDE: $('MENU-SIDE'),
|
||||
CONTAINER: $('CONTAINER')
|
||||
};
|
||||
|
||||
|
||||
/* [0] Instanciation
|
||||
===========================================*/
|
||||
var pageManager = new pageManagerClass();
|
||||
|
||||
|
||||
var api = new APIClass('/api/');
|
||||
|
||||
|
||||
/* [1] Toggle du sub-menu-side <-> navigation
|
||||
===========================================*/
|
||||
function navSubMenu(subsection){
|
||||
/* [1] Format du param
|
||||
------------------------------------------------*/
|
||||
// Contient l'element courant
|
||||
var current = document.querySelector('#CONTAINER > .sub-menu-side > span[data-sublink="'+pageManager.vars[0]+'"]');
|
||||
|
||||
// Contiendra l'element cible
|
||||
var target = null;
|
||||
|
||||
// si @subsection est un element, on le prends
|
||||
target = (subsection instanceof Element) ? subsection : null;
|
||||
|
||||
// Si string, on trouve l'element correspondant
|
||||
target = (typeof subsection == 'string') ? document.querySelector('#CONTAINER > .sub-menu-side > span[data-sublink="'+subsection+'"]') : target;
|
||||
|
||||
// Si rien trouve, on prend le premier element correspondant a la premiere page
|
||||
target = (target == null) ? document.querySelector('#CONTAINER > .sub-menu-side > span[data-sublink]') : 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 cache les sections visibles
|
||||
var visibleSections = document.querySelectorAll('#CONTAINER > section[data-sublink].active');
|
||||
for( var i = 0 ; i < visibleSections.length ; i++ )
|
||||
visibleSections[i].remClass('active');
|
||||
|
||||
// On active le nouveau
|
||||
if( target != null ){
|
||||
target.addClass('active');
|
||||
|
||||
// On affiche la section associee
|
||||
var targetSection = document.querySelector('#CONTAINER > section[data-sublink="'+target.getData('sublink')+'"]');
|
||||
if( targetSection != null )
|
||||
targetSection.addClass('active');
|
||||
|
||||
}
|
||||
|
||||
/* [3] Gestion de pageManager
|
||||
------------------------------------------------*/
|
||||
// Si element, on recupere le data-link
|
||||
var page = null;
|
||||
|
||||
// Si erreur, on retourne FALSE
|
||||
if( !target.getData('sublink') ) return false;
|
||||
|
||||
var mustRefresh = pageManager.vars[0] != target.getData('sublink');
|
||||
|
||||
// On met a jour la variable page-manager si data-link trouve
|
||||
pageManager.vars[0] = target.getData('sublink');
|
||||
|
||||
if( mustRefresh )
|
||||
// navMenu(pageManager.page);
|
||||
pageManager.updateURL();
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* [2] Toggle du side-menu <-> navigation
|
||||
===========================================*/
|
||||
function navMenu(section, persistence){
|
||||
|
||||
/* [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 || document.querySelector('#WRAPPER > #MENU-SIDE > span[data-link="'+pageManager.pagelist[0]+'"]');
|
||||
|
||||
// Si le param n'est toujours pas bon, on retourne une erreur
|
||||
if( target == null ) return false;
|
||||
|
||||
// Persistence de pageManager.vars (OPTIONNEL)
|
||||
persistence = (persistence===true) ? true : false;
|
||||
|
||||
/* [2] Gestion de l'affichage de l'element
|
||||
------------------------------------------------*/
|
||||
// On desactive l'element courant
|
||||
current && current.remClass('active');
|
||||
// On active le nouveau
|
||||
target && target.addClass('active');
|
||||
|
||||
/* [3] Gestion de pageManager
|
||||
------------------------------------------------*/
|
||||
// Si element, on recupere le data-link
|
||||
var page = null;
|
||||
|
||||
// Si on change de menu, on efface les données URL
|
||||
if( !persistence && current != target )
|
||||
pageManager.vars = [];
|
||||
|
||||
|
||||
// On charge la page si data-link trouve
|
||||
if( target.getData('link') ){
|
||||
DOM.HEADER.addClass('loading'); // Animation de chargement
|
||||
|
||||
|
||||
//pageManager.activeXHR.addEventListener('loadend',
|
||||
|
||||
var handlerX = function(){
|
||||
|
||||
|
||||
// On gere la navigation du sous-menu (si defini, utilise)
|
||||
var subSectionExists = pageManager.vars.length > 0 && document.querySelector('#CONTAINER > .sub-menu-side > [data-sublink="'+pageManager.vars[0]+'"]') != null;
|
||||
if( subSectionExists ) // Si le lien du menu associe existe
|
||||
navSubMenu(pageManager.vars[0]); // on charge la page associee
|
||||
else // sinon
|
||||
navSubMenu(null); // on charge le lien par defaut
|
||||
|
||||
|
||||
// GESTION DE LA NAVIGATION DU SOUS-MENU
|
||||
document.querySelector('#CONTAINER > .sub-menu-side').addEventListener('click', function(e){
|
||||
var target = e.target;
|
||||
|
||||
while( target != document.body && !target.getData('sublink') )
|
||||
target = target.parentNode;
|
||||
|
||||
if( target.getData('sublink') )
|
||||
navSubMenu(target);
|
||||
}, false);
|
||||
|
||||
DOM.HEADER.remClass('loading');
|
||||
|
||||
};
|
||||
|
||||
/* (x) Si première ou changement de page, on charge la nouvelle */
|
||||
pageManager.page != target.getData('link') && pageManager.setPage( target.getData('link') );
|
||||
|
||||
/* (x) Si on a `pageManager.activeXHR`, on met le handler, sinon on lance */
|
||||
pageManager.activeXHR ? pageManager.activeXHR.addEventListener('loadend', handlerX, false) : handlerX.call();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// init page-manager
|
||||
pageManager.setPage(null, '/view', DOM.CONTAINER, ['history', 'profile', 'machines', 'users', 'groups', 'analytics', 'settings'] );
|
||||
|
||||
// launch pageManager
|
||||
navMenu(pageManager.page);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// set default refresher
|
||||
pageManager.refresher = function(){
|
||||
/* (1) Loads page */
|
||||
navSubMenu( this.vars[0] );
|
||||
|
||||
/* (2) Set listener for sub-menu nav */
|
||||
document.querySelector('#CONTAINER > .sub-menu-side').addEventListener('click', function(e){
|
||||
var target = e.target;
|
||||
|
||||
while( target != document.body && !target.getData('sublink') )
|
||||
target = target.parentNode;
|
||||
|
||||
if( target.getData('sublink') )
|
||||
navSubMenu(target);
|
||||
}, false);
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
/* [4] 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 && !target.getData('link') )
|
||||
target = target.parentNode;
|
||||
|
||||
// Si on a trouve l'element, on l'utilise pour la page
|
||||
if( target.getData('link') )
|
||||
navMenu(target.getData('link'));
|
||||
}, false);
|
||||
function navSubMenu(e){var a=document.querySelector('#CONTAINER > .sub-menu-side > span[data-sublink="'+pageManager.vars[0]+'"]'),n=null
|
||||
if(n=e instanceof Element?e:null,n="string"==typeof e?document.querySelector('#CONTAINER > .sub-menu-side > span[data-sublink="'+e+'"]'):n,n=null==n?document.querySelector("#CONTAINER > .sub-menu-side > span[data-sublink]"):n,null==n)return!1
|
||||
null!=a&&a.remClass("active")
|
||||
for(var t=document.querySelectorAll("#CONTAINER > section[data-sublink].active"),r=0;r<t.length;r++)t[r].remClass("active")
|
||||
if(null!=n){n.addClass("active")
|
||||
var u=document.querySelector('#CONTAINER > section[data-sublink="'+n.getData("sublink")+'"]')
|
||||
null!=u&&u.addClass("active")}if(!n.getData("sublink"))return!1
|
||||
var l=pageManager.vars[0]!=n.getData("sublink")
|
||||
pageManager.vars[0]=n.getData("sublink"),l&&pageManager.updateURL()}function navMenu(e,a){var n=document.querySelector('#WRAPPER > #MENU-SIDE > span[data-link="'+pageManager.page+'"]'),t=null
|
||||
if(t=e instanceof Element?e:null,t="string"==typeof e?document.querySelector('#WRAPPER > #MENU-SIDE > span[data-link="'+e+'"]'):t,t=t||document.querySelector('#WRAPPER > #MENU-SIDE > span[data-link="'+pageManager.pagelist[0]+'"]'),null==t)return!1
|
||||
a=a===!0,n&&n.remClass("active"),t&&t.addClass("active")
|
||||
if(a||n==t||(pageManager.vars=[]),t.getData("link")){DOM.HEADER.addClass("loading")
|
||||
var r=function(){var e=pageManager.vars.length>0&&null!=document.querySelector('#CONTAINER > .sub-menu-side > [data-sublink="'+pageManager.vars[0]+'"]')
|
||||
navSubMenu(e?pageManager.vars[0]:null),document.querySelector("#CONTAINER > .sub-menu-side").addEventListener("click",function(e){for(var a=e.target;a!=document.body&&!a.getData("sublink");)a=a.parentNode
|
||||
a.getData("sublink")&&navSubMenu(a)},!1),DOM.HEADER.remClass("loading")}
|
||||
pageManager.page!=t.getData("link")&&pageManager.setPage(t.getData("link")),pageManager.activeXHR?pageManager.activeXHR.addEventListener("loadend",r,!1):r.call()}}DOM={WRAPPER:$("WRAPPER"),HEADER:$("HEADER"),MENUSIDE:$("MENU-SIDE"),CONTAINER:$("CONTAINER")}
|
||||
var pageManager=new pageManagerClass,api=new APIClass("/api/")
|
||||
pageManager.setPage(null,"/view",DOM.CONTAINER,["history","profile","machines","users","groups","analytics","settings"]),navMenu(pageManager.page),pageManager.refresher=function(){navSubMenu(this.vars[0]),document.querySelector("#CONTAINER > .sub-menu-side").addEventListener("click",function(e){for(var a=e.target;a!=document.body&&!a.getData("sublink");)a=a.parentNode
|
||||
a.getData("sublink")&&navSubMenu(a)},!1)},DOM.MENUSIDE.addEventListener("click",function(e){for(var a=e.target;a!=document.body&&!a.getData("link");)a=a.parentNode
|
||||
a.getData("link")&&navMenu(a.getData("link"))},!1)
|
||||
|
|
|
|||
|
|
@ -281,21 +281,6 @@ if( section.remove.element != null ){
|
|||
|
||||
}
|
||||
|
||||
// Gestion automatique au chargement de la page si ID_MACHINE dans url "/machines/remove/:id_machine:"
|
||||
if( pageManager.vars.length >= 2 && !isNaN(pageManager.vars[1]) ){
|
||||
|
||||
// On récupère la machine d'uid donné dans l'URL
|
||||
api.send({path:'machineDefault/getById', id_machine:pageManager.vars[1]}, function(response){
|
||||
// Si aucune erreur et un résultat
|
||||
if( response.ModuleError == 0 ){
|
||||
found_remove = [ response.machine ]; // On récupère le résultat
|
||||
searchindex_remove = 0; // On remet le compteur à 0
|
||||
autofill_remove(); // On auto-remplit
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* (3) Gestion de la recherche
|
||||
|
|
@ -497,22 +482,6 @@ if( section.edit.element != null ){
|
|||
|
||||
}
|
||||
|
||||
// Gestion automatique au chargement de la page si ID_MACHINE dans url "/machines/edit/:id_machine:"
|
||||
if( pageManager.vars.length >= 2 && !isNaN(pageManager.vars[1]) ){
|
||||
|
||||
// On récupère la machine d'uid donné dans l'URL
|
||||
api.send({path:'machineDefault/getById', id_machine:pageManager.vars[1]}, function(response){
|
||||
// Si aucune erreur et un résultat
|
||||
if( response.ModuleError == 0 ){
|
||||
found_edit = [ response.machine ]; // On récupère le résultat
|
||||
searchindex_edit = 0; // On remet le compteur à 0
|
||||
autofill_edit(); // On auto-remplit
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* (3) Gestion de la recherche
|
||||
---------------------------------------------------------*/
|
||||
|
|
@ -623,6 +592,37 @@ if( section.edit.element != null ){
|
|||
|
||||
|
||||
|
||||
/* [5] chargement de la machine courante (depuis url)
|
||||
=========================================================*/
|
||||
// gestion automatique au chargement de la page si id_user dans url "/machines/.+/:id_machine:"
|
||||
if( pageManager.vars.length >= 2 && !isNaN(pageManager.vars[1]) ){
|
||||
|
||||
// on récupère la machine d'uid donné dans l'url
|
||||
api.send({path:'machineDefault/getById', id_machine:pageManager.vars[1]}, function(response){
|
||||
|
||||
// si aucune erreur et un résultat
|
||||
if( response.ModuleError == 0 ){
|
||||
|
||||
/* (1) On pré-remplis le formulaire de modification */
|
||||
found_edit = [ response.machine ]; // on récupère le résultat
|
||||
searchindex_edit = 0; // on remet le compteur à 0
|
||||
autofill_edit(); // on auto-remplit
|
||||
|
||||
/* (2) On pré-remplis le formulaire de suppression */
|
||||
found_remove = [ response.machine ]; // on récupère le résultat
|
||||
searchindex_remove = 0; // on remet le compteur à 0
|
||||
autofill_remove(); // on auto-remplit
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ if( section.view.element != null ){
|
|||
var uid_list = [];
|
||||
for( var i = 0 ; i < result.users.length ; i++ )
|
||||
uid_list.push( result.users[i].id_user);
|
||||
|
||||
|
||||
// On recupere la liste des elements correspondants aux utilisateurs
|
||||
var user_list = document.querySelectorAll(section.view.text + '> article.inline-box[id]');
|
||||
|
||||
|
|
@ -235,6 +235,11 @@ if( section.create.element != null ){
|
|||
|
||||
/* [3] remove -> Suppression d'utilisateur
|
||||
=========================================================*/
|
||||
var lastkeywords_remove = '';
|
||||
var found_remove = [];
|
||||
var searchindex_remove = 0;
|
||||
|
||||
|
||||
if( section.remove.element != null ){
|
||||
|
||||
/* (1) Definition des champs */
|
||||
|
|
@ -255,11 +260,6 @@ if( section.remove.element != null ){
|
|||
submit: document.querySelector(section.remove.text + '#remove_submit')
|
||||
};
|
||||
|
||||
var lastkeywords_remove = '';
|
||||
var found_remove = [];
|
||||
var searchindex_remove = 0;
|
||||
|
||||
|
||||
|
||||
/* (2) Gestion de l'auto-remplissage par lien
|
||||
---------------------------------------------------------*/
|
||||
|
|
@ -313,25 +313,6 @@ if( section.remove.element != null ){
|
|||
|
||||
}
|
||||
|
||||
// Gestion automatique au chargement de la page si ID_MACHINE dans url "/users/remove/:id_user:"
|
||||
if( pageManager.vars.length >= 2 && !isNaN(pageManager.vars[1]) ){
|
||||
|
||||
console.log('init id', pageManager.vars);
|
||||
|
||||
// On récupère la user d'uid donné dans l'URL
|
||||
api.send({path:'userDefault/getById', id_user:pageManager.vars[1]}, function(response){
|
||||
console.warn('user to remove', response);
|
||||
// Si aucune erreur et un résultat
|
||||
if( response.ModuleError == 0 ){
|
||||
found_remove = [ response.user ]; // On récupère le résultat
|
||||
searchindex_remove = 0; // On remet le compteur à 0
|
||||
autofill_remove(); // On auto-remplit
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* (3) Gestion de la recherche
|
||||
---------------------------------------------------------*/
|
||||
|
|
@ -458,6 +439,11 @@ if( section.remove.element != null ){
|
|||
|
||||
/* [4] edit -> Modification d'utilisateur
|
||||
=========================================================*/
|
||||
var lastkeywords_edit = '';
|
||||
var found_edit = [];
|
||||
var searchindex_edit = 0;
|
||||
|
||||
|
||||
if( section.edit.element != null ){
|
||||
|
||||
// Definition des champs
|
||||
|
|
@ -481,11 +467,6 @@ if( section.edit.element != null ){
|
|||
submit: document.querySelector(section.edit.text + '#edit_submit')
|
||||
};
|
||||
|
||||
var lastkeywords_edit = '';
|
||||
var found_edit = [];
|
||||
var searchindex_edit = 0;
|
||||
|
||||
|
||||
|
||||
/* (2) Gestion de l'auto-remplissage par lien
|
||||
---------------------------------------------------------*/
|
||||
|
|
@ -548,21 +529,6 @@ if( section.edit.element != null ){
|
|||
|
||||
}
|
||||
|
||||
// Gestion automatique au chargement de la page si ID_MACHINE dans url "/users/edit/:id_user:"
|
||||
if( pageManager.vars.length >= 2 && !isNaN(pageManager.vars[1]) ){
|
||||
|
||||
// On récupère la user d'uid donné dans l'URL
|
||||
api.send({path:'userDefault/getById', id_user:pageManager.vars[1]}, function(response){
|
||||
// Si aucune erreur et un résultat
|
||||
if( response.ModuleError == 0 ){
|
||||
found_edit = [ response.user ]; // On récupère le résultat
|
||||
searchindex_edit = 0; // On remet le compteur à 0
|
||||
autofill_edit(); // On auto-remplit
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* (3) Gestion de la recherche
|
||||
|
|
@ -675,13 +641,39 @@ if( section.edit.element != null ){
|
|||
|
||||
|
||||
|
||||
/* [5] chargement de l'utilisateur courant (depuis url)
|
||||
=========================================================*/
|
||||
// gestion automatique au chargement de la page si id_user dans url "/users/.+/:id_user:"
|
||||
if( pageManager.vars.length >= 2 && !isNaN(pageManager.vars[1]) ){
|
||||
|
||||
// on récupère la user d'uid donné dans l'url
|
||||
api.send({path:'userDefault/getById', id_user:pageManager.vars[1]}, function(response){
|
||||
|
||||
// si aucune erreur et un résultat
|
||||
if( response.ModuleError == 0 ){
|
||||
|
||||
/* (1) On pré-remplis le formulaire de modification */
|
||||
found_edit = [ response.user ]; // on récupère le résultat
|
||||
searchindex_edit = 0; // on remet le compteur à 0
|
||||
autofill_edit(); // on auto-remplit
|
||||
|
||||
/* (2) On pré-remplis le formulaire de suppression */
|
||||
found_remove = [ response.user ]; // on récupère le résultat
|
||||
searchindex_remove = 0; // on remet le compteur à 0
|
||||
autofill_remove(); // on auto-remplit
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* [5] groups -> Groupes d'utilisateurs
|
||||
|
||||
|
||||
/* [6] groups -> Groupes d'utilisateurs
|
||||
=========================================================*/
|
||||
if( section.groups.element != null ){
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue