MediaWiki:Common.js
Révision datée du 13 septembre 2024 à 13:59 par Delphine (discussion | contributions)
Note : après avoir enregistré 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 pressez Ctrl-F5 ou Ctrl-R (⌘-R sur un Mac).
- Google Chrome : appuyez sur Ctrl-Maj-R (⌘-Shift-R sur un Mac).
- Internet Explorer : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl-F5.
- Opera : allez dans Menu → Settings (Opera → Préférences sur un Mac) et ensuite à Confidentialité et sécurité → Effacer les données d’exploration → Images et fichiers en cache.
$(document).ready(function() {
// Nettoyer les anciens boutons
$('#mw-content-text').find('#fontSizeButton, #themeButton').remove();
$('#fontSizeMenu').remove();
// Créer un bouton pour changer la taille du texte via un menu déroulant
var fontSizeButton = $('<button>Changer la taille du texte</button>')
.attr('id', 'fontSizeButton')
.attr('aria-haspopup', 'true')
.attr('aria-expanded', 'false')
.attr('aria-controls', 'fontSizeMenu')
.attr('role', 'button');
// Créer le menu déroulant invisible par défaut
var fontSizeMenu = $('<ul></ul>')
.attr('id', 'fontSizeMenu')
.attr('role', 'menu')
.attr('aria-hidden', 'true')
.css({
'list-style': 'none',
'padding': '5px',
'border': '1px solid #ccc',
'display': 'none',
'position': 'absolute',
'background-color': '#fff'
});
// Ajouter des options pour différentes tailles de police
var fontSizes = [12, 14, 16, 18, 20, 24, 28, 32, 36, 40, 44, 48];
fontSizes.forEach(function(size) {
var listItem = $('<li></li>')
.attr('role', 'menuitem')
.css('cursor', 'pointer')
.text(size + ' px')
.click(function() {
$('body').css('font-size', size + 'px');
$('#fontSizeMenu').hide(); // Fermer le menu après sélection
fontSizeButton.attr('aria-expanded', 'false');
});
fontSizeMenu.append(listItem);
});
// Ajouter le bouton et le menu déroulant au début du contenu
$('#mw-content-text').prepend(fontSizeButton, fontSizeMenu);
// Fonction pour afficher/masquer le menu de taille de texte
fontSizeButton.click(function() {
var isExpanded = $(this).attr('aria-expanded') === 'true';
$('#fontSizeMenu').toggle(!isExpanded); // Affiche ou cache le menu
$(this).attr('aria-expanded', !isExpanded);
fontSizeMenu.attr('aria-hidden', isExpanded);
});
// Fermer le menu si l'utilisateur clique ailleurs
$(document).click(function(e) {
if (!$(e.target).closest('#fontSizeButton, #fontSizeMenu').length) {
$('#fontSizeMenu').hide();
fontSizeButton.attr('aria-expanded', 'false');
fontSizeMenu.attr('aria-hidden', 'true');
}
});
// Créer un bouton pour changer le thème
var themeButton = $('<button>Changer le thème</button>')
.attr('id', 'themeButton')
.attr('aria-pressed', 'false')
.attr('aria-label', 'Changer le thème entre clair et sombre')
.attr('role', 'button');
// Ajouter le bouton au début du contenu
$('#mw-content-text').prepend(themeButton);
// Appliquer le thème par défaut basé sur le stockage local
var savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
$('body').addClass('dark-theme');
themeButton.text('Passer au thème clair');
themeButton.attr('aria-pressed', 'true');
} else {
$('body').removeClass('dark-theme');
themeButton.text('Passer au thème sombre');
themeButton.attr('aria-pressed', 'false');
}
themeButton.click(function() {
var isDarkTheme = $(this).attr('aria-pressed') === 'true';
if (isDarkTheme) {
$('body').removeClass('dark-theme');
themeButton.text('Passer au thème sombre');
themeButton.attr('aria-pressed', 'false');
localStorage.setItem('theme', 'light');
} else {
$('body').addClass('dark-theme');
themeButton.text('Passer au thème clair');
themeButton.attr('aria-pressed', 'true');
localStorage.setItem('theme', 'dark');
}
});
// Assurer le chargement correct du CSS pour le mode sombre
(function() {
function updateStyles(isDarkMode) {
var darkModeStylesheet = document.getElementById('dark-theme-stylesheet');
if (isDarkMode) {
if (!darkModeStylesheet) {
darkModeStylesheet = document.createElement('link');
darkModeStylesheet.id = 'dark-theme-stylesheet';
darkModeStylesheet.rel = 'stylesheet';
darkModeStylesheet.href = mw.util.getUrl('/skins/Vector/skinStyles/custom-dark-mode.css');
document.head.appendChild(darkModeStylesheet);
}
} else {
if (darkModeStylesheet) {
darkModeStylesheet.remove();
}
}
}
// Charger le mode sauvegardé depuis localStorage
document.addEventListener('DOMContentLoaded', function() {
var darkMode = localStorage.getItem('darkMode') === 'true';
if (darkMode) {
document.body.classList.add('dark-theme');
updateStyles(true);
}
});
})();
// Ajouter les boutons de filtrage pour la galerie
(function() {
// Fonction pour charger la galerie en fonction de l'ordre de tri
function loadGallery(order) {
var query = '{{#ask: [[Category:Projets]] [[A image principale::+]] ' +
'|?A redirect ' +
'|?A description courte ' +
'|?A image principale ' +
'|?Modification date ' +
'|?A titre ' +
'|?A légende ' +
'|redirects=A redirect ' +
'|widths=100 ' +
'|heights=100 ' +
'|limit=50 ' +
'|transpose=yes ' +
'|imageproperty=A image principale ' +
'|autocaptions=no ' +
'|captionproperty=A légende ' +
'|overlay=no ' +
'|searchlabel=Autres résultats ' +
'|format=template ' +
'|template=ResponsivePolaroidImages ' +
'|headers=hide ' +
'|link=none ' +
'|offset= ' +
'|order=' + order + ' ' +
'}}';
var xhr = new XMLHttpRequest();
xhr.open('POST', mw.util.wikiScript('api'), true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function () {
if (xhr.status >= 200 && xhr.status < 400) {
document.getElementById('gallery-container').innerHTML = xhr.responseText;
} else {
console.error('Erreur lors de la récupération de la galerie.');
}
};
xhr.send('action=parse&format=json&text=' + encodeURIComponent(query));
}
// Fonction pour filtrer la galerie en fonction de l'ordre de tri
window.filterGallery = function(order) {
loadGallery(order);
}
// Ajouter les boutons de filtrage lorsque le DOM est prêt
$(document).ready(function () {
// Ajouter les boutons de filtrage au contenu
var filterContainer = $('<div></div>').attr('id', 'filter-buttons');
filterContainer.html(`
<button onclick="filterGallery('title')">Par ordre alphabétique</button>
<button onclick="filterGallery('modification')">Par date de modification</button>
<button onclick="filterGallery('creation')">Par date de création</button>
`);
// Ajouter le conteneur pour la galerie
var galleryContainer = $('<div></div>').attr('id', 'gallery-container');
// Ajouter les éléments après le contenu principal
$('#mw-content-text').append(filterContainer, galleryContainer);
// Charger la galerie avec l'ordre par défaut
loadGallery('ascending');
});
})();
});