Différences entre versions de « MediaWiki:Common.js »
Sauter à la navigation
Sauter à la recherche
Ligne 1 : | Ligne 1 : | ||
$(document).ready(function() { | $(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 | // Créer un bouton pour changer la taille du texte via un menu déroulant | ||
var fontSizeButton = $('<button>Changer la taille du texte</button>') | var fontSizeButton = $('<button>Changer la taille du texte</button>') |
Version du 11 septembre 2024 à 19:54
$(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-mode-stylesheet'); if (isDarkMode) { if (!darkModeStylesheet) { darkModeStylesheet = document.createElement('link'); darkModeStylesheet.id = 'dark-mode-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-mode'); updateStyles(true); } }); })(); });