Utilisateur:Eliastik/common.js
Note : après avoir publié vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.
- Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou appuyez sur Ctrl + F5 ou Ctrl + R (⌘ + R sur un Mac).
- Google Chrome : appuyez sur Ctrl + Maj + R (⌘ + Shift + R sur un Mac).
- Edge : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl + F5.
/* 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
*/
//////////////////////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);
};
$(document).ready(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();
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 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 '+ mrTempsRefresh +' 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();
}
});