Utilisateur:Pokemon59/common.js
Note : après avoir enregistré la page, vous devrez forcer le rechargement complet du cache de votre navigateur pour voir les changements.
Mozilla / Firefox / Konqueror / Safari : maintenez la touche Majuscule (Shift) en cliquant sur le bouton Actualiser (Reload) ou pressez Maj-Ctrl-R (Cmd-R sur Apple Mac) ;
Firefox (sur GNU/Linux) / Chrome / Internet Explorer / Opera : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl-F5./* common.js de Pokemon59 (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)
***********
Si vous souhaitez utiliser ce mod, vous pouvez copier-coller mon common.js dans le votre, ou vous pouvez copier-coller le bout de code suivant dans votre common.js :
importScript('Utilisateur:Pokemon59/common.js');
Ce bout de code vous permettra d'obtenir automatiquement les modifications que j'apporte à mon mod dans votre common.js, mais vous ne pourrez pas le personnaliser.
***********
Dernière modification - le 30/6/2017 : Fonction Assombrir la page plus rapide, simplification du code (plus de variables globales)
Modification précédente - le 3/4/2017 à 16h35 : support de l'élément kbd (éléments des raccourcis clavier, un exemple ici : https://fr.wikipedia.org/wiki/Aide:%C3%89diteurVisuel#Liste_compl.C3.A8te_des_interactions_avec_la_souris_ou_le_clavier )
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/////////////////
mw.loader.using('mediawiki.cookie', 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 = '<a href="#null" id="assombrirPageOP">Assombrir la page</a>';
// la fonction d'assombrissement de la page
function assombrirPage(type) {
if(type == "assombrir") {
mw.cookie.set("cjs_assombrirPage", "Oui", 10*365*24*3600); // crée le cookie
elAssomPage.innerHTML = '<a href="#null" id="eclaircirPageOP" style="color:'+ apColorLinkContrast +'">Éclaircir la page</a>'; // change le lien du gadget
$("#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" && mw.cookie.get("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 ?")) {
mw.cookie.set("cjs_assombrirPage", null); // 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 '+ mrTempsRefresh +' secondes (via <a href="Sp%C3%A9cial:Ma_page/common.js" style="color: dodgerblue;">votre common.js</a>). <a href="#" id="disableRefreshOP" style="color: dodgerblue;">Désactiver cette fonctionnalité</a>.<ul><li>Dernier rafraîchissement : le '+ fullDate +' à '+ fullHour + '</li></ul>';
intervalRefreshMR = setInterval(function(){ location.reload() }, mrTempsRefresh * 1000);
mw.cookie.set("cjs_stopRefresh", "Non", 10*365*24*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) {
mw.cookie.set("cjs_stopRefresh", "Oui", 10*365*24*3600);
elIndicRefresh.innerHTML = 'Les modifications récentes sont censées être rechargées toutes les '+ mrTempsRefresh +' secondes (via <a href="Sp%C3%A9cial:Ma_page/common.js" style="color: dodgerblue;">votre common.js</a>), mais vous avez désactivé cette fonctionnalité. <a href="#" id="enableRefreshOP" style="color: dodgerblue;">Réactiver cette fonctionnalité</a>.<ul><li>Dernier rafraîchissement : le '+ fullDate +' à '+ fullHour + '</li></ul>';
clearInterval(intervalRefreshMR);
$("#enableRefreshOP").click(function(){
refreshPage();
})
}
};
// on lit le cookie
if(mw.cookie.get("cjs_stopRefresh") !== "Oui") {
refreshPage();
}
else {
desactiverRefresh();
}
});
});