« Utilisateur:Eliastik/common.js » : différence entre les versions

Version du 14 avril 2017 à 00:56

/* common.js de Eliastik (v. 2.1.1 du 3/4/2017) - possibilité de reprendre le code, n'hésitez pas ;)
Inclus de nouveaux gadgets :
- Rafraîchissement automatique toutes les 20 secondes (durée paramétrable) des Modifications récentes
- Mode "Assombrir la page" (palette de couleurs personnalisable)
***********
Dernière modification - le 3/4/2017 : support de l'élément kbd (éléments des raccourcis clavier)
Modification précédente - le 24/2/2017 à 16h35 : utilisation des fonctions de gestion des cookies par défaut disponibles dans MediaWiki:Common.js, ce qui permet d'alléger le code, amélioration de la présentation du texte dans les modifications récentes, petits ajustements
Modification précédente 2 - le 10/9/2016 à 21h59 : modification de la palette de couleurs de la fonction "Assombrir la page" et petits ajustements
*/
// Fonctions de cookies - extrait du MediaWiki:Common.js de Wikipédia
window.setCookie = function ( nom, valeur, duree ) {
	var expDate = new Date();
	expDate.setTime(expDate.getTime() + ( duree * 24 * 60 * 60 * 1000));
	document.cookie = nom + "=" + escape(valeur) + ";expires=" + expDate.toGMTString() + ";path=/";
};
window.getCookieVal = function ( name ) {
	var cookiePos = document.cookie.indexOf(name + "=");
	var cookieValue = false;
	if (cookiePos > -1) {
		cookiePos += name.length + 1;
		var endPos = document.cookie.indexOf(";", cookiePos);
		if (endPos > -1) {
			cookieValue = document.cookie.substring(cookiePos, endPos);
		} else {
			cookieValue = document.cookie.substring(cookiePos);
		}
	}
	return cookieValue;
};
// Fin fonctions de cookies
(function(){
	// Vous pouvez modifier les paramètres suivants selon vos préférences en modifiant leur valeur
    var tempsRefreshMR = 20; // Le nombre de secondes avant de recharger la page des Modifications récentes
    var backgroundColorContrast = "#142634"; // le code de la couleur de l'arrière-plan
    var colorTextContrast = "#BDC7C1"; // le code de la couleur des textes
    var colorLinkContrast = "#7288D4"; // couleur des liens
    var colorLinkRedContrast = "#D48872"; // le code de la couleur des liens rouges
    // fin des paramètres pouvant être modifiés
    // pour que les variables et les fonctions deviennent globales
    assombrirPagePOE = "";
    desactiverRefresh = "";
    refreshPage = "";
    intervalRefreshMR = "";
    var NomPage = document.location.href.substring(document.location.href.lastIndexOf( "/" )+1); // ne pas modifier ! Nom du fichier visité
    var dateObj = new Date(); // nouvel objet date
    var fullHour = dateObj.getHours() + ":" + dateObj.getMinutes() + ":" + dateObj.getSeconds(); // heure
    var fullDate = dateObj.getDate() + "/" + (dateObj.getMonth() + 1) + "/" + dateObj.getFullYear(); // date

    // Crée une liste d'outils personnels
    var elAP = document.createElement("div");
    elAP.setAttribute("class", "portal");
    elAP.setAttribute("id", "panel-outils-personnels");
    elAP.innerHTML = '<h3>Outils personnalisés</h3><div class="body"><ul id="outilsPersoList"></ul></div>';
    document.getElementById("mw-panel").appendChild(elAP);
	
    // assombrir la page - retient le choix - crée un élément dans la liste des outils personnels
    var elAssomPage = document.createElement("li");
    elAssomPage.setAttribute("id", "panel-OP-assombrirPage");
    elAssomPage.innerHTML = '<button id="assombrirPageOP" onclick="assombrirPagePOE(\'assombrir\')" style="font-size: 10pt; padding:0; cursor:pointer; display:inline;">Assombrir la page</button>';
    document.getElementById("outilsPersoList").appendChild(elAssomPage);

    /* fonction permet de supprimer un cookie
    @param {string} name : nom du cookie à supprimer
    @return {undefined} */
    window.eraseCookie = function(name) {
	  window.setCookie(name, "", -1);
    };
	
	if(NomPage.indexOf("Sp%C3%A9cial:Modifications_r%C3%A9centes") != -1 || NomPage.indexOf("Special:RecentChanges") != -1) {
		/* Rafraîchissement des Modifications récentes - crée un élément indiquant cela dans les Modifications récentes en dessous du titre
	           Possibilité de stopper cette fonctionnalité avec un lien + un cookie */
		elIndicRefresh = document.createElement("div");
		elIndicRefresh.setAttribute("id", "labelModRecR");
		elIndicRefresh.style.cssText = "margin: 0 0 18px;padding: 0.5em;border: 1px solid #ddddf7;border-left: 10px solid #ddddf7;font-size: 10.5pt;font-weight: bold;";
		document.getElementById("contentSub").style.margin = "0";
		document.getElementById("contentSub").appendChild(elIndicRefresh);
	}

    // fonction qui active le refresh auto
    refreshPage = function() {
		if(NomPage.indexOf("Sp%C3%A9cial:Modifications_r%C3%A9centes") != -1 || NomPage.indexOf("Special:RecentChanges") != -1) {
			elIndicRefresh.innerHTML = 'Les modifications récentes sont rechargées toutes les '+ tempsRefreshMR +' secondes (via votre common.js). <button onclick="desactiverRefresh()" style="color:dodgerblue; padding:0; cursor:pointer; display:inline;">Désactiver cette fonctionnalité</button>.<ul><li>Dernier rafraîchissement : le '+ fullDate +' à '+ fullHour + '</li></ul>';
			intervalRefreshMR = setInterval(function(){ location.reload() }, tempsRefreshMR * 1000);
			window.setCookie("cjs_stopRefresh", "Non", 3600);
		}
    };

    // fonction qui désactive le refresh auto
    desactiverRefresh = function() {
		if(NomPage.indexOf("Sp%C3%A9cial:Modifications_r%C3%A9centes") != -1 || NomPage.indexOf("Special:RecentChanges") != -1) {
			window.setCookie("cjs_stopRefresh", "Oui", 3600);
			elIndicRefresh.innerHTML = 'Les modifications récentes sont censées être rechargées toutes les '+ tempsRefreshMR +' secondes (via votre common.js), mais vous avez désactivé cette fonctionnalité. <button onclick="refreshPage()" style="color:dodgerblue; padding:0; cursor:pointer; display:inline;">Réactiver cette fonctionnalité</button>.<ul><li>Dernier rafraîchissement : le '+ fullDate +' à '+ fullHour + '</li></ul>';
			clearInterval(intervalRefreshMR);
		}
    };
	
    // on lit le cookie
	if(window.getCookieVal("cjs_stopRefresh") !== "Oui") {
        refreshPage();
    }
    else {
        desactiverRefresh();
    }

    // la fonction d'assombrissement de la page
    assombrirPagePOE = function(type) {
       if(type == "assombrir") {
            window.setCookie("cjs_assombrirPage", "Oui", 3600); // crée le cookie
            elAssomPage.innerHTML = '<button id="assombrirPageOP" onclick="assombrirPagePOE(\'eclaircir\')" style="font-size: 10pt; padding:0; cursor:pointer; display:inline;">Éclaircir la page</button>'; // change le lien du gadget
            // on boucle tous les éléments pour leur donner un style sombre avec la fonction restyleElement (voir plus bas)
            restyleElement("div", backgroundColorContrast, colorTextContrast);
            restyleElement("a", null, colorLinkContrast);
            restyleElement("span", backgroundColorContrast, colorTextContrast);
            restyleElement("input", backgroundColorContrast, colorTextContrast);
            restyleElement("textarea", backgroundColorContrast, colorTextContrast);
            restyleElement("select", "grey", colorTextContrast);
            restyleElement("pre", backgroundColorContrast, colorTextContrast);
            restyleElement("table", backgroundColorContrast, colorTextContrast);
            restyleElement("td", backgroundColorContrast, colorTextContrast);
            restyleElement("th", backgroundColorContrast, colorTextContrast);
            restyleElement("h1", null, colorTextContrast);
            restyleElement("h2", null, colorTextContrast);
            restyleElement("h3", null, colorTextContrast);
            restyleElement("h4", null, colorTextContrast);
            restyleElement("h5", null, colorTextContrast);
            restyleElement("h6", null, colorTextContrast);
            restyleElement("code", backgroundColorContrast, colorTextContrast);
            restyleElement("del", "red", colorTextContrast); // élément affiché lorsque l'on compare des modifs - éléments modifiés/effacés
            restyleElement("ins", "green", colorTextContrast); // élément affiché lorsque l'on compare des modifs - éléments ajoutés
            restyleElement("dd", backgroundColorContrast, colorTextContrast); // quotes
            restyleElement("dl", backgroundColorContrast, colorTextContrast); // quotes
            restyleElement("fieldset", backgroundColorContrast, colorTextContrast); // mods. récentes
            restyleElement("legend", backgroundColorContrast, colorTextContrast); // mods. récentes
            restyleElement("tt", backgroundColorContrast, colorTextContrast);
            restyleElement("ul", backgroundColorContrast, colorTextContrast);
            restyleElement("li", backgroundColorContrast, colorTextContrast);
            restyleElement("kbd", backgroundColorContrast, colorTextContrast); // raccourcis clavier
            // style pour la page et le contenu
            document.body.style.backgroundColor = backgroundColorContrast;
            document.body.style.color = colorTextContrast;
            document.getElementById("content").style.backgroundColor = backgroundColorContrast;
            document.getElementById("content").style.color = colorTextContrast;
            // autres re-stylage d'éléments avec des sélecteurs plus complexes (jQuery)
            jQuery( function() { $( 'div.vectorTabs span, #p-cactions, div.menu a' ).css( 'background', backgroundColorContrast ); } ); // les onglets actifs
            jQuery( function() { $( 'div.vectorTabs li.selected span, div.menu li.selected a' ).css( 'background', 'lightgrey' ); } ); // les onglets actifs
            jQuery( function() { $( 'div.vectorTabs li.new a' ).css( 'color', colorLinkRedContrast ); } ); // liens rouges onglets
            jQuery( function() { $( 'div#p-logo' ).css( 'background', 'grey' ); } ); // logo
            jQuery( function() { $( 'div#p-logo' ).css( 'border-radius', '15px' ); } ); // logo
            jQuery( function() { $( ':button, input[type=submit]' ).css( 'background', backgroundColorContrast ); } ); // les boutons
            jQuery( function() { $( ':button, input[type=submit]' ).css( 'color', colorTextContrast ); } ); // les boutons
            $("#ca-ve-edit").click(function() { assombrirPagePOE("assombrir") }); // lors du clic sur "Modifier", on re-exécute la fonction
            $("#mw-editsection-visualeditor").click(function() { assombrirPagePOE("assombrir") }); // pareil que la ligne précédente mais pour les sections
            // Liens rouges
            var aNewPageNb = document.getElementsByClassName("new");
            if(aNewPageNb !== null) {
              for (i=0;i<aNewPageNb.length;i++) {
                  aNewPageNb[i].style.color = colorLinkRedContrast;
              }
	    	}
        }
        // on vérifie le cookie
        else if(type == "cookieVerif" && window.getCookieVal("cjs_assombrirPage") == "Oui") {
            assombrirPagePOE("assombrir"); // on réexecute la fonction
        }
        // si on clique sur "éclaircir la page"
        else if(type == "eclaircir") {
            // on demande à l'utilisateur si il veut continuer
            if(confirm("Cela rechargera la page. Continuer ?")) {
                window.eraseCookie("cjs_assombrirPage"); // on supprime le cookie
                location.reload(); // on reload la page
            }
        }
    }

    // fonction pour restyler en masse un type d'éléments (via une boucle)
    function restyleElement(type, backgroundColorElem, colorElem) {
          var nbElements = document.getElementsByTagName(type);
          if(nbElements !== null && nbElements.length > 0) { // si il y a bien ce type d'éléments sur la page
                for (i=0;i<nbElements.length;i++)  { // on boucle les éléments et on les restyle
                    if(backgroundColorElem !== null) { // si le paramètre est bien renseigné
                       nbElements[i].style.backgroundColor = backgroundColorElem; // nouvel arrière-plan
                    }
                    if(colorElem !== null) { // si le paramètre est bien renseigné
                        nbElements[i].style.color = colorElem; // nouvelle couleur de texte
                    }
                }
            return true; // ça s'est bien passé, on retourne true
         }
         else { // si il n'y a pas ce type d'éléments sur la page
           return false; // on retourne false
         }
    }
}());
assombrirPagePOE("cookieVerif"); // vérification du cookie