MediaWiki:Common.js
Révision datée du 11 septembre 2024 à 10:55 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.
/* 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'));
});
});