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

Version du 13 septembre 2024 à 13:59

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

    // Ajouter les boutons de filtrage pour la galerie
    (function() {
        // Fonction pour charger la galerie en fonction de l'ordre de tri
        function loadGallery(order) {
            var query = '{{#ask: [[Category:Projets]] [[A image principale::+]] ' +
                        '|?A redirect ' +
                        '|?A description courte ' +
                        '|?A image principale ' +
                        '|?Modification date ' +
                        '|?A titre ' +
                        '|?A légende ' +
                        '|redirects=A redirect ' +
                        '|widths=100 ' +
                        '|heights=100 ' +
                        '|limit=50 ' +
                        '|transpose=yes ' +
                        '|imageproperty=A image principale ' +
                        '|autocaptions=no ' +
                        '|captionproperty=A légende ' +
                        '|overlay=no ' +
                        '|searchlabel=Autres résultats ' +
                        '|format=template ' +
                        '|template=ResponsivePolaroidImages ' +
                        '|headers=hide ' +
                        '|link=none ' +
                        '|offset= ' +
                        '|order=' + order + ' ' +
                        '}}';

            var xhr = new XMLHttpRequest();
            xhr.open('POST', mw.util.wikiScript('api'), true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onload = function () {
                if (xhr.status >= 200 && xhr.status < 400) {
                    document.getElementById('gallery-container').innerHTML = xhr.responseText;
                } else {
                    console.error('Erreur lors de la récupération de la galerie.');
                }
            };
            xhr.send('action=parse&format=json&text=' + encodeURIComponent(query));
        }

        // Fonction pour filtrer la galerie en fonction de l'ordre de tri
        window.filterGallery = function(order) {
            loadGallery(order);
        }

        // Ajouter les boutons de filtrage lorsque le DOM est prêt
        $(document).ready(function () {
            // Ajouter les boutons de filtrage au contenu
            var filterContainer = $('<div></div>').attr('id', 'filter-buttons');
            filterContainer.html(`
                <button onclick="filterGallery('title')">Par ordre alphabétique</button>
                <button onclick="filterGallery('modification')">Par date de modification</button>
                <button onclick="filterGallery('creation')">Par date de création</button>
            `);

            // Ajouter le conteneur pour la galerie
            var galleryContainer = $('<div></div>').attr('id', 'gallery-container');
            
            // Ajouter les éléments après le contenu principal
            $('#mw-content-text').append(filterContainer, galleryContainer);

            // Charger la galerie avec l'ordre par défaut
            loadGallery('ascending');
        });
    })();
});