sid/js/action-script.js

493 lines
17 KiB
JavaScript
Executable File

/***********************************************************
* *
* SCRIPT POST-HTML - SCRIPT PRINCIPAL *
* *
************************************************************
* *
* [0] Variables *
* [1] Gestionnaires de navigation *
* [a] pageManager.js *
* [b] API.js *
* [2] Gestion des liens *
* [a] catégories *
* [b] sous-parties *
* [3] Gestion de l'authentification *
* [4] Gestion des formulaires *
* [5] Gestion des SHORTCUTs *
* [6] Gestion des liens spécifiques *
* *
* *
* *
* *
* *
* *
* *
* *
* *
***********************************************************/
/* [0] VARIABLES
==============================================================*/
/* shortcut-manager */
var sm = new ShortcutManager();
/* pageManager */
var pageM;
/* API */
var API;
/* Structure de la page */
var DOM = {
DRAGNDROP : document.querySelector('#DRAGNDROP'),
WRAPPER : document.querySelector('#WRAPPER'),
MENU : document.querySelector('#MENU'),
CURRENTYEAR: document.querySelector('#MENU > #CURRENTYEAR'),
HEADER : document.querySelector('#HEADER'),
SUBHEADER : document.querySelector('#SUBHEADER'),
SUBSECTIONS : document.querySelector("#HEADER > nav.subsections"),
CONTAINER : document.querySelector('#CONTAINER'),
AUTH : document.querySelector('#AUTH'),
LOGOUT : document.querySelector('#HEADER #LOGOUT'),
NOTIFBTN : document.querySelector('#HEADER > .notifbar > .notification')
};
/* VRAI = utilisateur connecté */
function connected(){
var udata = document.querySelector('.userdata');
if( udata == null ) return false;
if( udata.innerHTML == 'Connexion' ) return false;
// si on est connecté, on retourne les droits
return udata.dataset.droits.split(',');
}
/* [1] GESTIONNAIRES DE NAVIGATION
==============================================================*/
/* [a] pageManager.js
==============================================================*/
pageM = new pageManager(); // instance principale
/* initialisation du gestionnaire */
pageM.setPage(null, 'page', DOM.CONTAINER, ['home', 'groups', 'modules', 'career', 'settings'] );
/* ON REMPLACE "F5" par le rechargement manuel */
// window.addEventListener('keydown', function(e){
// if( e.keyCode == 116 ){ // F5
// e.preventDefault();
// reload();
// }
// }, false);
/* [b] API.js
==============================================================*/
API = new APIClass();
/* [c] gestion des classes
================================================*/
// function addClass(el, pClass){
// if( el.className.length > 0 && el.className != pClass ) el.className = el.className + ' ' + pClass;
// else el.className = pClass;
// }
// function remClass(el, pClass){
// if( el.className.indexOf(pClass) > -1 ) // si la class de l'élement contient la classe à enlever
// el.className = el.className.substr(0, el.className.indexOf(pClass)) + '' + el.className.substr(el.className.indexOf(pClass)+pClass.length);
// }
/* [2] GESTION DES LIENS
==============================================================*/
/* [a] CATÉGORIES
==============================================================*/
/* GESTION DES CATEGORIES (SECTIONS)
*
* @param section<Element> l'élément à activer
* @param clearParam<Boolean> VRAI si on doit supprimer les variables de l'URL
*
* [1] selectionne l'élément, l'affichage de la page associée est géré par pageManager.js
* [2] déselectionne l'élément précédemment selectioné
*
*/
function selectSection(section, clearParam){
// si la section est une string, on essaie de trouver l'élémnent associé
if( typeof section == 'string' )
section = document.querySelector('#MENU span[data-link='+section+']');
// si @subSection est un <Element> de type <li> qui a la propriété "data-link" [ET] section pas déjà active
if( section instanceof Element && section.tagName == 'SPAN' && section.dataset.hasOwnProperty('link') ){
if( clearParam === true ) // si clearParam est vrai
pageM.vars = new Array(pageM.vars[0]); // on efface les paramètres de l'URL
// avant de charger la page, on affiche le loader
DOM.WRAPPER.style.backgroundImage = 'url(../src/loader.svg)';
// on charge la page
pageM.setPage( section.dataset.link );
/* on active les sous-parties */
pageM.xhr[pageM.xhr.length-1].addEventListener('load', function(){
// on récupère les sections du document
var sections = document.querySelectorAll('#CONTAINER section[name][data-title]');
if( sections != null ){ // si on en trouve
DOM.SUBSECTIONS.innerHTML = ""; // on efface le #SUBHEADER > nav <=> les liens des sous-parties
for( var i = 0 ; i < sections.length ; i++ ) // pour chaque section, on créé un lien correspondant
if( i == 0 ) // on active le premier
DOM.SUBSECTIONS.innerHTML += "<span data-sectname='" +sections[i].getAttribute('name')+ "' class='active'>" +sections[i].getAttribute('data-title')+ "</span>";
else // pas les autres
DOM.SUBSECTIONS.innerHTML += "<span data-sectname='" +sections[i].getAttribute('name')+ "'>" +sections[i].getAttribute('data-title')+ "</span>";
}
// si dans pageManager.js, on a une sous-partie et qu'elle existe physiquement
var selectedSubSectionFromURL = document.querySelector('#HEADER > nav.subsections > span[data-sectname='+pageM.vars[0]+']');
if( selectedSubSectionFromURL != null ) // si on trouve, on charge la sous-partie
selectSubSection( selectedSubSectionFromURL );
else // sinon, on selectionne celle définie dans le HTML
selectSubSection( document.querySelector('#HEADER > nav.subsections > span.active') );
DOM.WRAPPER.style.backgroundImage = 'none';
}, false);
// on récupère la section déja selectionnée si elle existe
var last = document.querySelector('#MENU span.active');
if( last != null ) // si une section est déjà activée
remClass(last, 'active'); // on désactive la courante
addClass(section, 'active'); // on active @section
}else // sinon on affiche l'erreur
console.log("[selectSection_Error] - ("+section+")");
}
// permet de recharger la page courante
function reload(){ selectSection(pageM.page); }
/* activation au chargement en fonction de la page courante de pageManager.js */
var lastSection = document.querySelector('#MENU span[data-link='+pageM.page+']');
if( lastSection != null )
selectSection(lastSection); // on l'active
/* Gestion des liens du menu */
DOM.MENU.addEventListener('click', function(e){ selectSection( e.target, true); }, false);
/* [b] SOUS-PARTIES
==============================================================*/
/* GESTION DES SOUS-PARTIES (SOUS-CATÉGORIES)
*
* @param subSection<Element> l'élément à activer
*
* [1] selectionne l'élément, l'affichage de la page associée est géré en CSS3
* [2] déselectionne l'élément précédemment selectioné
*
*/
function selectSubSection(subSection){
// si la subSection est une string, on essaie de trouver l'élémnent associé
if( typeof subSection == 'string' )
subSection = document.querySelector('#HEADER > nav.subsections > span[data-sectname='+subSection+']');
// si @subSection est un <Element> de type HGROUP [ET]
if( subSection instanceof Element && subSection.tagName == 'SPAN' && subSection.dataset.hasOwnProperty('sectname') ){
// on essaie de récupérer l'ancien "lien"
var lastActive = document.querySelector('#HEADER > nav.subsections > span.active');
if( lastActive != null ) // si on a trouvé qqch
remClass(lastActive, 'active'); // on le désactive
// on essaie de récupérer l'ancienne section active
var lastSection = document.querySelector('#CONTAINER section.active');
if( lastSection != null ) // si on a trouvé qqch
remClass(lastSection, 'active'); // on la désactive
// on active la page associée
var target = document.querySelector('#CONTAINER section[name='+subSection.dataset.sectname+'][data-title]');
if( target != null )
addClass(target, 'active');
// on définit la sous-page de pageManager.js
pageM.vars[0] = subSection.dataset.sectname;
pageM.updateURL();
addClass(subSection, 'active'); // on active @subSection
}
}
/* gestion du clic sur les sous-parties */
DOM.SUBSECTIONS.addEventListener('click', function(e){ selectSubSection(e.target); }, false);
/* [3] GESTION DE L'AUTHENTIFICATION
==============================================================*/
// ferme l'interface d'authentification quand clic autre part que sur zone AUTH
DOM.WRAPPER.addEventListener('mousedown', function(e){ remClass(DOM.WRAPPER, 'blurred'); }, false);
// ouvre l'interface d'authentification quand click sur bouton prévu à cet effet
DOM.LOGOUT.addEventListener('mouseup', function(e){ addClass(DOM.WRAPPER, 'blurred'); DOM.AUTH.children[1].focus(); }, false);
if( !connected() ) // sur zone verte si pas connecté
DOM.MENU.children[0].addEventListener('mouseup', function(e){ addClass(DOM.WRAPPER, 'blurred'); DOM.AUTH.children[1].focus(); }, false);
else // sinon amène sur le profil
DOM.MENU.children[0].addEventListener('mouseup', function(e){
pageM.vars[0] = 'myprofile';
selectSection( document.querySelector('#MENU > span[data-link=settings]') );
}, false);
/* [4] GESTION DES FORMULAIRES
==============================================================*/
/* INITIALISE UN FORMULAIRE POUR QU'IL INTERPRETE UN OBJET LORS DE SA SOUMISSIONS
*
* @param pForm<Element> le formulaire cible
* @param pHandler<Function> fonction exécutée lors de la soumission du formulaire
*
* [1] parcourt les élements du formulaire @pForm et active un évènement lors du "submit"
* [2] retourne l'objet à @pHandler lors du "submit"
*
*
* @example
*
* <form id='nomFormulaire'>
*
* <input type='text' name='nomDuChamp1' value='valeurDuChamp1'>
* <input type='mail' name='nomduChamp2' value='valeurDuChamp2'>
*
* <input type='submit' value='VALIDER'>
*
* </form>
*
* @explaination
*
* Lors du clic sur le bouton [VALIDER], la fonction @pHandler s'exécutera avec pour paramètre un objet
* OBJ{ id: nomFormulaire, nomDuChamp1: valeurDuChamp1, nomDuChamp2: valeurDuChamp2 }
*
*/
function initForm(pForm, pHandler){
// vérification des arguments
var isForm = pForm instanceof Element && pForm.tagName == 'FORM';
var isFunc = pHandler instanceof Function;
// si les arguments sont corrects
if( pForm instanceof Element && pForm.tagName == 'FORM' ){
var submitButton = null; // contiendra le bouton d'envoi du formulaire
for( var i = 0 ; i < pForm.children.length ; i++ )
if( pForm.children[i].type == 'button' ){
submitButton = pForm.children[i]; // on définit le bouton
break; // on sort du for
}
// on définit l'évènement de validation du formulaie
function submitEvent(){
var obj = {} // on créé l'objet qui va être envoyé
for( var i = 0 ; i < pForm.children.length ; i++ ) // on parcourt les enfants
if( pForm.children[i].tagName == 'INPUT' && pForm.children[i].type != 'button' ) // si c'est un champ et que c'est pas le bouton
obj[pForm.children[i].name] = pForm.children[i].value; // alors on enregistre le champ dans l'objet
// on exécute la fonction @pHandler en lui envoyant les arguments
pHandler(obj);
}
// on définit l'évènement du clic sur le bouton
submitButton.addEventListener('click', function(e){
submitEvent(e.target.parentNode); // on envoie le formulaire
}, false);
// on définit l'évènement de l'appui sur la touche [ENTRER]
pForm.addEventListener('keydown', function(e){
if(e.keyCode==13) submitEvent(e.target); // si c'est la bonne touche, on submit le formulaire
}, false);
}else
console.log('[initForm_Error] - ('+pForm+', '+pHandler+')');
}
initForm( // initialisation du formulaire de connection
DOM.AUTH, // formulaire (élément DOM)
function(request){ // handler
// ajout d'informations à la requête
request.level_0 = 'user';
request.level_1 = (connected()) ? 'exit' : 'authentification';
API.send(request, function(response){
if( response.request == 'success' )// si connection ok
document.location = '';
else
document.querySelector('#AUTH .errorbox').innerHTML = 'Identifiants incorrects.';
});
}
);
/* [5] Gestion des SHORTCUTs
==============================================================*/
/* LISTE DES RACCOURCIS
*
* ctrl+alt+n ouvre les notifications
*
* ctrl+alt+e ouvre l'interface de connection/déconnection
*
* ctrl+alt+NUM ouvre la section numéro "NUM"
*
* alt+haut ouvre la section suivante
* alt+bas ouvre la section précédente
*
* alt+droite ouvre la sous-section suivante
* alt+gauche ouvre la sous-section précédente
*
*
*
*
*/
sm.append('ctrl+alt+n', function(){
pageM.vars[0] = 'notifications';
selectSection( document.querySelector('#MENU > span[data-link=home]') );
});
sm.append('ctrl+alt+e', function(){
addClass(DOM.WRAPPER, 'blurred');
DOM.AUTH.children[1].focus();
});
sm.append('alt+up', function(){// on récupère la section courante
var cSection = document.querySelector('#MENU span[data-link='+pageM.page+']');
if( cSection != null ){ // si on a trouvé la section
var parentChildren = cSection.parentNode.children;
var prevIndex = parentChildren.indexOf( cSection ) - 1;
// si il y a une section avant, on la charge
if( prevIndex > 0 )
selectSection( parentChildren[prevIndex] );
}
});
sm.append('alt+down', function(){// on récupère la section courante
var cSection = document.querySelector('#MENU span[data-link='+pageM.page+']');
if( cSection != null ){ // si on a trouvé la section
var parentChildren = cSection.parentNode.children;
var nextIndex = parentChildren.indexOf( cSection ) + 1;
// si il y a une section après, on la charge
if( nextIndex < parentChildren.length )
selectSection( parentChildren[nextIndex] );
}
});
sm.append('alt+right', function(){
// on récupère la sous-section courante
var cSubSection = document.querySelector('#HEADER > nav.subsections > span[data-sectname='+pageM.vars[0]+']');
if( cSubSection != null ){ // si on a trouvé la sous-section
var parentChildren = cSubSection.parentNode.children;
var nextIndex = parentChildren.indexOf( cSubSection ) + 1;
// si il y a une section après, on la charge
if( nextIndex < parentChildren.length )
selectSubSection( parentChildren[nextIndex] );
}
});
sm.append('alt+left', function(){
// on récupère la sous-section courante
var cSubSection = document.querySelector('#HEADER > nav.subsections > span[data-sectname='+pageM.vars[0]+']');
if( cSubSection != null ){ // si on a trouvé la sous-section
var parentChildren = cSubSection.parentNode.children;
var prevIndex = parentChildren.indexOf( cSubSection ) - 1;
// si il y a une section avant, on la charge
if( prevIndex >= 0 )
selectSubSection( parentChildren[prevIndex] );
}
});
// on active les raccourcis
sm.listen();
/* [6] GESTION DES LIENS SPÉCIFIQUES
==============================================================*/
if( DOM.NOTIFBTN != null )
DOM.NOTIFBTN.addEventListener('click', function(e){
pageM.vars[0] = 'notifications';
selectSection( document.querySelector('#MENU > span[data-link=home]') );
}, false);
// modification de l'année scolaire en cours
function updateCurrentYear(y){
y = parseInt(y);
var anneeScolaire = y+' - '+(y+1);
DOM.CURRENTYEAR.children[1].innerHTML = anneeScolaire;
}
/* GESTION DE LA RECHERCHE */
var searchbar = document.querySelector('.searchbar');
if( searchbar != null ){
searchbar.addEventListener('keyup', function(e){
// admin/référent
if( connected() && ( connected().indexOf('admin') > -1 || connected().indexOf('master') < -1 ) ){
pageM.page = 'home';
pageM.vars = ['search', e.target.value];
reload();
}
}, false);
}