MediaWiki:Common.js: відмінності між версіями

Матеріал з darnytsa_hero
Перейти до навігації Перейти до пошуку
Немає опису редагування
Немає опису редагування
Рядок 1: Рядок 1:
$(function () {
$(function () {
    // =======================
     // Теми
     // Теми
    // =======================
     var themes = {
     var themes = {
         light: '/w/index.php?title=MediaWiki:Light.css&action=raw&ctype=text/css',
         light: '/w/index.php?title=MediaWiki:Light.css&action=raw&ctype=text/css',
Рядок 6: Рядок 8:
     };
     };


    // =======================
    // Кнопка Темна/Світла тема
    // =======================
     var theme = localStorage.getItem('selectedTheme');
     var theme = localStorage.getItem('selectedTheme');
     if (!theme) {
     if (!theme) {
Рядок 17: Рядок 16:
     }
     }


     var $themeBtn = $('<button>')
     // =======================
        .text(theme === 'dark' ? 'Світла тема ☀️' : 'Темна тема 🌙')
    // Функція створення кнопки
        .attr('title', 'Змінити тему')
    // =======================
        .css({
    function createButton(text, bottom, onClick, title) {
        var $btn = $('<button>').text(text).attr('title', title).css({
             position: 'fixed',
             position: 'fixed',
             bottom: '10px',
             bottom: bottom + 'px',
             right: '10px',
             right: '10px',
             padding: '10px 16px',
             padding: '10px 16px',
Рядок 36: Рядок 36:
             boxShadow: '0 2px 6px rgba(0,0,0,0.3)',
             boxShadow: '0 2px 6px rgba(0,0,0,0.3)',
             whiteSpace: 'nowrap'
             whiteSpace: 'nowrap'
         })
         }).click(onClick);
         .click(function () {
         $('body').append($btn);
        return $btn;
    }
 
    // =======================
    // Кнопка Темна/Світла тема
    // =======================
    var $themeBtn = createButton(
        theme === 'dark' ? 'Світла тема ☀️' : 'Темна тема 🌙',
        10,
        function () {
             var newTheme = theme === 'dark' ? 'light' : 'dark';
             var newTheme = theme === 'dark' ? 'light' : 'dark';
             localStorage.setItem('selectedTheme', newTheme);
             localStorage.setItem('selectedTheme', newTheme);
             location.reload();
             location.reload();
         });
         },
 
        'Змінити тему'
     $('body').append($themeBtn);
     );


     // =======================
     // =======================
     // Кнопка Доступність
     // Кнопка Доступність
     // =======================
     // =======================
     var $accessBtn = $('<button>')
     var $accessBtn = createButton(
         .text('Доступність ♿')
         'Доступність ♿',
        .attr('title', 'Увімкнути режим доступності')
         70,
         .css({
         function () {
            position: 'fixed',
            bottom: '70px', // над кнопкою теми
            right: '10px',
            padding: '10px 16px',
            border: 'none',
            borderRadius: '25px',
            background: '#1a73e8',
            color: '#ffffff',
            fontWeight: 'bold',
            fontSize: '14px',
            cursor: 'pointer',
            zIndex: 9999,
            textAlign: 'center',
            boxShadow: '0 2px 6px rgba(0,0,0,0.3)',
            whiteSpace: 'nowrap'
        })
         .click(function () {
             if (!$('body').hasClass('accessibility-mode')) {
             if (!$('body').hasClass('accessibility-mode')) {
                 $('body').addClass('accessibility-mode');
                 $('body').addClass('accessibility-mode');
Рядок 76: Рядок 69:
                 localStorage.setItem('accessibilityMode', 'off');
                 localStorage.setItem('accessibilityMode', 'off');
             }
             }
         });
         },
        'Увімкнути режим доступності'
    );


    $('body').append($accessBtn);
    // Вмикаємо збережений режим доступності
     if (localStorage.getItem('accessibilityMode') === 'on') {
     if (localStorage.getItem('accessibilityMode') === 'on') {
         $('body').addClass('accessibility-mode');
         $('body').addClass('accessibility-mode');
    }
    // =======================
    // Лупа + / -
    // =======================
    var fontSize = parseInt($('body').css('font-size'), 10);
    createButton('🔍 +', 130, function () {
        fontSize += 2;
        $('body').css('font-size', fontSize + 'px');
        localStorage.setItem('fontSize', fontSize);
    }, 'Збільшити шрифт');
    createButton('🔍 -', 170, function () {
        fontSize -= 2;
        if (fontSize < 12) fontSize = 12;
        $('body').css('font-size', fontSize + 'px');
        localStorage.setItem('fontSize', fontSize);
    }, 'Зменшити шрифт');
    // Встановлюємо збережений розмір шрифту
    if (localStorage.getItem('fontSize')) {
        fontSize = parseInt(localStorage.getItem('fontSize'), 10);
        $('body').css('font-size', fontSize + 'px');
     }
     }
});
});

Версія за 15:48, 23 вересня 2025

$(function () {
    // =======================
    // Теми
    // =======================
    var themes = {
        light: '/w/index.php?title=MediaWiki:Light.css&action=raw&ctype=text/css',
        dark: '/w/index.php?title=MediaWiki:Dark.css&action=raw&ctype=text/css'
    };

    var theme = localStorage.getItem('selectedTheme');
    if (!theme) {
        theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    }
    if (themes[theme]) {
        mw.loader.load(themes[theme], 'text/css');
    }

    // =======================
    // Функція створення кнопки
    // =======================
    function createButton(text, bottom, onClick, title) {
        var $btn = $('<button>').text(text).attr('title', title).css({
            position: 'fixed',
            bottom: bottom + 'px',
            right: '10px',
            padding: '10px 16px',
            border: 'none',
            borderRadius: '25px',
            background: '#1a73e8',
            color: '#ffffff',
            fontWeight: 'bold',
            fontSize: '14px',
            cursor: 'pointer',
            zIndex: 9999,
            textAlign: 'center',
            boxShadow: '0 2px 6px rgba(0,0,0,0.3)',
            whiteSpace: 'nowrap'
        }).click(onClick);
        $('body').append($btn);
        return $btn;
    }

    // =======================
    // Кнопка Темна/Світла тема
    // =======================
    var $themeBtn = createButton(
        theme === 'dark' ? 'Світла тема ☀️' : 'Темна тема 🌙',
        10,
        function () {
            var newTheme = theme === 'dark' ? 'light' : 'dark';
            localStorage.setItem('selectedTheme', newTheme);
            location.reload();
        },
        'Змінити тему'
    );

    // =======================
    // Кнопка Доступність
    // =======================
    var $accessBtn = createButton(
        'Доступність ♿',
        70,
        function () {
            if (!$('body').hasClass('accessibility-mode')) {
                $('body').addClass('accessibility-mode');
                localStorage.setItem('accessibilityMode', 'on');
            } else {
                $('body').removeClass('accessibility-mode');
                localStorage.setItem('accessibilityMode', 'off');
            }
        },
        'Увімкнути режим доступності'
    );

    if (localStorage.getItem('accessibilityMode') === 'on') {
        $('body').addClass('accessibility-mode');
    }

    // =======================
    // Лупа + / -
    // =======================
    var fontSize = parseInt($('body').css('font-size'), 10);

    createButton('🔍 +', 130, function () {
        fontSize += 2;
        $('body').css('font-size', fontSize + 'px');
        localStorage.setItem('fontSize', fontSize);
    }, 'Збільшити шрифт');

    createButton('🔍 -', 170, function () {
        fontSize -= 2;
        if (fontSize < 12) fontSize = 12;
        $('body').css('font-size', fontSize + 'px');
        localStorage.setItem('fontSize', fontSize);
    }, 'Зменшити шрифт');

    // Встановлюємо збережений розмір шрифту
    if (localStorage.getItem('fontSize')) {
        fontSize = parseInt(localStorage.getItem('fontSize'), 10);
        $('body').css('font-size', fontSize + 'px');
    }
});