MediaWiki:Common.js
Révision datée du 11 septembre 2024 à 17:30 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 VERSION OK*/
$(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'));
});
});
/* VERSION INVERSEE:les boutons disparaissent*/
/*
$(window).on("load", 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);
// Récupérer le thème sauvegardé dans localStorage
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('État actuel du thème (isDarkTheme):', isDarkTheme);
if (isDarkTheme) {
// Si le thème sombre est activé, on passe au thème clair
console.log('Passage au thème clair');
$('body').removeClass('dark-theme');
themeButton.text('Passer au thème sombre');
themeButton.attr('aria-pressed', 'false');
localStorage.setItem('theme', 'light');
} else {
// Si le thème clair est activé, on passe au thème sombre
console.log('Passage au thème sombre');
$('body').addClass('dark-theme');
themeButton.text('Passer au thème clair');
themeButton.attr('aria-pressed', 'true');
localStorage.setItem('theme', 'dark');
}
// Afficher l'état du bouton après changement
console.log('Thème après clic:', $(this).attr('aria-pressed'));
console.log('Classe appliquée au body:', $('body').attr('class'));
});
});
*/
/* 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'));
});
*/
/*
$(window).on("load", 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);
// Récupérer le thème sauvegardé dans localStorage
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('État actuel du thème (isDarkTheme):', isDarkTheme);
if (isDarkTheme) {
// Si le thème sombre est activé, on passe au thème clair
console.log('Passage au thème clair');
$('body').removeClass('dark-theme');
themeButton.text('Passer au thème sombre');
themeButton.attr('aria-pressed', 'false');
localStorage.setItem('theme', 'light');
} else {
// Si le thème clair est activé, on passe au thème sombre
console.log('Passage au thème sombre');
$('body').addClass('dark-theme');
themeButton.text('Passer au thème clair');
themeButton.attr('aria-pressed', 'true');
localStorage.setItem('theme', 'dark');
}
// Afficher l'état du bouton après changement
console.log('Thème après clic:', $(this).attr('aria-pressed'));
console.log('Classe appliquée au body:', $('body').attr('class'));
});
});
*/
// Attendre que la page soit complètement chargée
window.onload = function() {
console.log('Page complètement chargée');
// Votre code JavaScript ici
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);
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('État actuel du thème (isDarkTheme):', isDarkTheme);
if (isDarkTheme) {
console.log('Passage au thème clair');
$('body').removeClass('dark-theme');
themeButton.text('Passer au thème sombre');
themeButton.attr('aria-pressed', 'false');
localStorage.setItem('theme', 'light');
} else {
console.log('Passage au thème sombre');
$('body').addClass('dark-theme');
themeButton.text('Passer au thème clair');
themeButton.attr('aria-pressed', 'true');
localStorage.setItem('theme', 'dark');
}
console.log('Thème après clic:', $(this).attr('aria-pressed'));
console.log('Classe appliquée au body:', $('body').attr('class'));
});
};
/*js avec css pour mode sombre dans dossier vector>skinStyles:custom-dark-mode.css*/
/*
(function() {
var modeButton = document.createElement('button');
modeButton.textContent = 'Mode sombre';
modeButton.onclick = function() {
document.body.dataset.mode = document.body.dataset.mode === 'dark' ? 'light' : 'dark';
if (document.body.dataset.mode === 'dark') {
document.getElementById('custom-dark-mode-stylesheet').setAttribute('href', mw.util.getUrl('skins/Vector/styles/custom-dark-mode.css'));
} else {
document.getElementById('custom-dark-mode-stylesheet').setAttribute('href', '');
}
};
document.getElementById('p-personal').appendChild(modeButton);
})();
*/
/*code modifié js avec css pour mode sombre dans dossier vector>skinStyles:custom-dark-mode.css*/
(function() {
var modeButton = document.createElement('button');
modeButton.textContent = 'Toggle Dark Mode';
modeButton.onclick = function() {
var isDarkMode = document.body.classList.toggle('dark-mode');
if (isDarkMode) {
localStorage.setItem('darkMode', 'true');
} else {
localStorage.setItem('darkMode', 'false');
}
updateStyles(isDarkMode);
};
document.getElementById('p-personal').appendChild(modeButton);
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/styles/custom-dark-mode.css');
document.head.appendChild(darkModeStylesheet);
}
} else {
if (darkModeStylesheet) {
darkModeStylesheet.remove();
}
}
}
// Load saved mode from localStorage
document.addEventListener('DOMContentLoaded', function() {
var darkMode = localStorage.getItem('darkMode') === 'true';
if (darkMode) {
document.body.classList.add('dark-mode');
updateStyles(true);
}
});
})();