Différences entre versions de « MediaWiki:Common.js »

De wikiup
Sauter à la navigation Sauter à la recherche
 
(41 versions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
/* 2 boutons augmenter et diminuer la taille du texte aparaissant sous le titre de la page
 
 
$(document).ready(function() {
 
$(document).ready(function() {
     // Créer des boutons d'ajustement de la taille des polices
+
     // Nettoyer les anciens boutons
    var increaseFontButton = $('<button>Augmenter la taille du texte</button>').attr('id', 'increaseFont');
+
     $('#mw-content-text').find('#fontSizeButton, #themeButton').remove();
    var decreaseFontButton = $('<button>Réduire la taille du texte</button>').attr('id', 'decreaseFont');
+
     $('#fontSizeMenu').remove();
   
 
    // 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');
 
        }
 
    });
 
});
 
  
*/
+
    // Créer un bouton pour changer la taille du texte via un menu déroulant
 
 
 
 
/*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>')
 
     var fontSizeButton = $('<button>Changer la taille du texte</button>')
 
         .attr('id', 'fontSizeButton')
 
         .attr('id', 'fontSizeButton')
Ligne 72 : Ligne 44 :
 
     $('#mw-content-text').prepend(fontSizeButton, fontSizeMenu);
 
     $('#mw-content-text').prepend(fontSizeButton, fontSizeMenu);
  
     // Fonction pour afficher/masquer le menu
+
     // Fonction pour afficher/masquer le menu de taille de texte
 
     fontSizeButton.click(function() {
 
     fontSizeButton.click(function() {
 
         var isExpanded = $(this).attr('aria-expanded') === 'true';
 
         var isExpanded = $(this).attr('aria-expanded') === 'true';
Ligne 88 : Ligne 60 :
 
         }
 
         }
 
     });
 
     });
});
 
 
 
 
  
/*Code JavaScript pour le Bouton de Changement de Thème*/
 
/*
 
$(document).ready(function() {
 
 
     // Créer un bouton pour changer le thème
 
     // Créer un bouton pour changer le thème
 
     var themeButton = $('<button>Changer le thème</button>')
 
     var themeButton = $('<button>Changer le thème</button>')
Ligne 104 : Ligne 69 :
  
 
     // Ajouter le bouton au début du contenu
 
     // 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);
 
     $('#mw-content-text').prepend(themeButton);
  
 
     // Appliquer le thème par défaut basé sur le stockage local
 
     // Appliquer le thème par défaut basé sur le stockage local
 
     var savedTheme = localStorage.getItem('theme');
 
     var savedTheme = localStorage.getItem('theme');
    console.log('Thème sauvegardé:', savedTheme);
 
 
 
     if (savedTheme === 'dark') {
 
     if (savedTheme === 'dark') {
 
         $('body').addClass('dark-theme');
 
         $('body').addClass('dark-theme');
Ligne 164 : Ligne 85 :
 
     themeButton.click(function() {
 
     themeButton.click(function() {
 
         var isDarkTheme = $(this).attr('aria-pressed') === 'true';
 
         var isDarkTheme = $(this).attr('aria-pressed') === 'true';
        console.log('Changement de thème:', isDarkTheme);
 
 
         if (isDarkTheme) {
 
         if (isDarkTheme) {
 
             $('body').removeClass('dark-theme');
 
             $('body').removeClass('dark-theme');
Ligne 177 : Ligne 97 :
 
         }
 
         }
 
     });
 
     });
});
 
 
*/
 
 
/*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);
+
     // Assurer le chargement correct du CSS pour le mode sombre
 
+
     (function() {
     // Appliquer le thème par défaut basé sur le stockage local
+
        function updateStyles(isDarkMode) {
     var savedTheme = localStorage.getItem('theme');
+
            var darkModeStylesheet = document.getElementById('dark-theme-stylesheet');
    console.log('Thème sauvegardé:', savedTheme);
+
            if (isDarkMode) {
 
+
                if (!darkModeStylesheet) {
    if (savedTheme === 'dark') {
+
                    darkModeStylesheet = document.createElement('link');
        $('body').addClass('dark-theme');
+
                    darkModeStylesheet.id = 'dark-theme-stylesheet';
        themeButton.text('Passer au thème clair');
+
                    darkModeStylesheet.rel = 'stylesheet';
        themeButton.attr('aria-pressed', 'true');
+
                    darkModeStylesheet.href = mw.util.getUrl('/skins/Vector/skinStyles/custom-dark-mode.css');
    } else {
+
                    document.head.appendChild(darkModeStylesheet);
        $('body').removeClass('dark-theme');
+
                }
        themeButton.text('Passer au thème sombre');
+
             } else {
        themeButton.attr('aria-pressed', 'false');
+
                if (darkModeStylesheet) {
    }
+
                    darkModeStylesheet.remove();
 
+
                }
    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'));
 
    });
 
});
 
  
 
+
        // Charger le mode sauvegardé depuis localStorage
 
+
        document.addEventListener('DOMContentLoaded', function() {
/* debogage*/
+
            var darkMode = localStorage.getItem('darkMode') === 'true';
 
+
            if (darkMode) {
/*
+
                document.body.classList.add('dark-theme');
themeButton.click(function() {
+
                updateStyles(true);
    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() {
+
/*mettre le menu en 1er en navigation par tab/lecteur d'écran*/
     console.log('JavaScript chargé');
+
$(document).ready(function() {
 +
     // Sélectionne et modifie le tabindex des éléments de navigation principaux
 +
    var menus = [
 +
        '#p-Menu',
 +
        '#p-Créer/Fabriquer',
 +
        '#p-Projets et supports pédagogiques par état d\'avancement',
 +
        '#p-Catégorie',
 +
        '#p-Infos pratiques Humanlab Rennes',
 +
        '#p-Réseau des Humanlabs',
 +
        '#p-tb'
 +
    ];
  
     var themeButton = $('<button>Changer le thème</button>')
+
     menus.forEach(function(menu, index) {
        .attr('id', 'themeButton')
+
         var element = document.querySelector(menu);
        .attr('aria-pressed', 'false')
+
        if (element) {
         .attr('aria-label', 'Changer le thème entre clair et sombre')
+
            element.setAttribute('tabindex', index + 1); // Attribue un tabindex en fonction de l'ordre
        .attr('role', 'button');
+
             console.log("Tabindex ajouté à " + menu);
 
 
    $('#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 {
 
         } else {
            // Si le thème clair est activé, on passe au thème sombre
+
             console.error(menu + " non trouvé.");
             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'));
 
    });
 
};
 

Version actuelle datée du 27 septembre 2024 à 11:27

$(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);
            }
        });
    })();
});


/*mettre le menu en 1er en navigation par tab/lecteur d'écran*/
$(document).ready(function() {
    // Sélectionne et modifie le tabindex des éléments de navigation principaux
    var menus = [
        '#p-Menu',
        '#p-Créer/Fabriquer',
        '#p-Projets et supports pédagogiques par état d\'avancement',
        '#p-Catégorie',
        '#p-Infos pratiques Humanlab Rennes',
        '#p-Réseau des Humanlabs',
        '#p-tb'
    ];

    menus.forEach(function(menu, index) {
        var element = document.querySelector(menu);
        if (element) {
            element.setAttribute('tabindex', index + 1); // Attribue un tabindex en fonction de l'ordre
            console.log("Tabindex ajouté à " + menu);
        } else {
            console.error(menu + " non trouvé.");
        }
    });
});