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

Version du 11 septembre 2024 à 17:30

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