Différences entre versions de « MediaWiki:Common.js »
Sauter à la navigation
Sauter à la recherche
Ligne 181 : | Ligne 181 : | ||
*/ | */ | ||
− | |||
//debug changement de thème pour passer en mode sombre*/ | //debug changement de thème pour passer en mode sombre*/ | ||
$(document).ready(function() { | $(document).ready(function() { | ||
Ligne 226 : | Ligne 225 : | ||
}); | }); | ||
− | + | ||
Version du 11 septembre 2024 à 11:12
/* 2 boutons augmenter et diminuer la taille du texte aparaissant sous le titre de la page $(document).ready(function() { // Créer des boutons d'ajustement de la taille des polices var increaseFontButton = $('<button>Augmenter la taille du texte</button>').attr('id', 'increaseFont'); var decreaseFontButton = $('<button>Réduire la taille du texte</button>').attr('id', 'decreaseFont'); // Ajouter les boutons au début du contenu $('#mw-content-text').prepend(increaseFontButton, decreaseFontButton); // Définir une taille de police initiale var currentFontSize = 16; // Taille de base $('body').css('font-size', currentFontSize + 'px'); // Fonction pour augmenter la taille de la police $('#increaseFont').click(function() { currentFontSize += 2; $('body').css('font-size', currentFontSize + 'px'); }); // Fonction pour réduire la taille de la police $('#decreaseFont').click(function() { if (currentFontSize > 10) { // Empêche la taille de devenir trop petite currentFontSize -= 2; $('body').css('font-size', currentFontSize + 'px'); } }); }); */ /*1 seul bouton pour déterminer la taille de la police jusquà 48px*/ $(document).ready(function() { // Créer un bouton qui ouvrira le menu de sélection de taille de police 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 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'); } }); }); /*Code JavaScript pour le Bouton de Changement de Thème*/ /* $(document).ready(function() { // 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 if (localStorage.getItem('theme') === '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'); } // Fonction pour basculer entre les thèmes clair et sombre 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'); // Sauvegarder le thème clair } else { $('body').addClass('dark-theme'); themeButton.text('Passer au thème clair'); themeButton.attr('aria-pressed', 'true'); localStorage.setItem('theme', 'dark'); // Sauvegarder le thème sombre } }); }); */ /*Code identique avec debug*/ /* $(document).ready(function() { console.log('JavaScript chargé'); 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'); $('#mw-content-text').prepend(themeButton); // Appliquer le thème par défaut basé sur le stockage local var savedTheme = localStorage.getItem('theme'); console.log('Thème sauvegardé:', savedTheme); 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'; console.log('Changement de thème:', isDarkTheme); 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'); } }); }); */ //debug changement de thème pour passer en mode sombre*/ $(document).ready(function() { console.log('JavaScript chargé'); 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'); $('#mw-content-text').prepend(themeButton); // Appliquer le thème par défaut basé sur le stockage local var savedTheme = localStorage.getItem('theme'); console.log('Thème sauvegardé:', savedTheme); 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'; console.log('Changement de thème:', isDarkTheme); 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'); } console.log('État du bouton après clic:', $(this).attr('aria-pressed')); }); }); /* debogage*/ themeButton.click(function() { console.log('Avant changement de thème:', $('body').attr('class')); 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'); } console.log('Après changement de thème:', $('body').attr('class')); });