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

Version du 8 juillet 2017 à 19:50

/* common.js de Eliastik (v. 2.2 du 30/6/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 8/7/2017 : Fonction Assombrir la page plus rapide, simplification du code (plus de variables globales)
Modification précédente - le 14/4/2017 : support de l'élément kbd (éléments des raccourcis clavier) - adaptation par rapport à ma version Wikipédia ( https://fr.wikipedia.org/wiki/Utilisateur:Pokemon59/common.js )
Modification précédente 2 - 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 3 - le 10/9/2016 à 21h59 : modification de la palette de couleurs de la fonction "Assombrir la page" et petits ajustements

{{Catégorisation JS}}
*/

//////////////////////ZONE PERSONNALISABLE//////////////////////
var mrTempsRefresh = 20; // Le nombre de secondes avant de recharger la page des Modifications récentes
var apBackgroundColorContrast = "#142634"; // le code de la couleur de l'arrière-plan
var apColorTextContrast = "#BDC7C1"; // le code de la couleur des textes
var apColorLinkContrast = "#7288D4"; // couleur des liens
var apColorLinkRedContrast = "#D48872"; // le code de la couleur des liens rouges
/////////////////FIN DE LA ZONE PERSONNALISABLE/////////////////

// 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;
};
window.eraseCookie = function(name) {
    window.setCookie(name, "", -1);
};

(function(){
    // 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" style="font-size: 10pt; padding:0; cursor:pointer; display:inline;">Assombrir la page</button>';

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

    function execReady() {
        if (document.body) return assombrirPage("cookieVerif");
        timeOutAP = setTimeout(execReady, 50);
    }

    execReady();

    $(document).ready(function ($) {
        var intervalRefreshMR = null;
        var NomPage = document.location.href.substring(document.location.href.lastIndexOf( "/" )+1); // ne pas modifier ! Nom de la page visitée
        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);

        // append assombrir la page - retient le choix - crée un élément dans la liste des outils personnels
        document.getElementById("outilsPersoList").appendChild(elAssomPage);

        // eclaircit la page lors du clic sur le lien prévu pour cela
        $("#eclaircirPageOP").click(function(){
            assombrirPage("eclaircir");
        });

        // assombrit la page lors du clic sur le lien prévu pour cela
        $("#assombrirPageOP").click(function(){
            assombrirPage("assombrir");
        });

        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.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;";
            elIndicRefresh.setAttribute("id", "labelModRecR");
            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() }, mrTempsRefresh * 1000);
                window.setCookie("cjs_stopRefresh", "Non", 3600);

                $("#disableRefreshOP").click(function(){
                    desactiverRefresh();
                })
            }
        };

        // 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);

                $("#enableRefreshOP").click(function(){
                    refreshPage();
                })
            }
        };

        // on lit le cookie
        if(window.getCookieVal("cjs_stopRefresh") !== "Oui") {
            refreshPage();
        }
        else {
            desactiverRefresh();
        }
    });
});