MediaWiki:Common.js: Difference between revisions

From Medalist Wiki
No edit summary
No edit summary
Line 1: Line 1:
/* Any JavaScript here will be loaded for all users on every page load. */
/* Any JavaScript here will be loaded for all users on every page load. */
// MediaWiki:Common.js
// MediaWiki:Common.js
mw.loader.using(['mediawiki.api', 'mediawiki.util'], function() {
$(document).ready(function() {
     $(function() {
     // Create toggle button
        // Create a prominent button-style mode selector
    var toggleHtml = `
        var $modeSelector = $(
        <div class="content-toggle">
            '<div class="mode-selector-container">' +
            <span>Anime</span>
                '<button class="mode-toggle-button">' +
            <label class="toggle-switch">
                    '<span class="current-mode-label">Currently viewing: </span>' +
                 <input type="checkbox" id="contentToggle">
                    '<span class="current-mode">Anime</span> content' +
                <span class="slider"></span>
                    '<span class="toggle-arrow">▼</span>' +
            </label>
                 '</button>' +
            <span>Manga</span>
                '<div class="mode-menu">' +
        </div>
                    '<div class="mode-menu-header">Select Content Mode:</div>' +
    `;
                    '<a class="mode-option" data-mode="anime">' +
    $('body').append(toggleHtml);
                        '<span class="mode-title">Anime Mode</span>' +
                        '<span class="mode-description">Show content up to the latest anime episode</span>' +
                    '</a>' +
                    '<a class="mode-option" data-mode="manga">' +
                        '<span class="mode-title">Manga Mode</span>' +
                        '<span class="mode-description">Show all content including manga spoilers</span>' +
                    '</a>' +
                '</div>' +
            '</div>'
        );


        // Insert it at the top of the navigation area
    // Load saved preference
        $('#mw-navigation').prepend($modeSelector);
    var isMangaMode = localStorage.getItem('mangaMode') === 'true';
       
    $('#contentToggle').prop('checked', isMangaMode);
        // Initialize from stored preference
    updateContent(isMangaMode);
        var currentMode = localStorage.getItem('contentMode') || 'anime';
        updateContentDisplay(currentMode);
       
        // Handle mode selection
        $('.mode-option').on('click', function(e) {
            e.preventDefault();
            var mode = $(this).data('mode');
            localStorage.setItem('contentMode', mode);
            updateContentDisplay(mode);
            $('.mode-menu').removeClass('visible');
        });


        // Toggle menu visibility
    // Handle toggle changes
        $('.mode-toggle-button').on('click', function(e) {
    $('#contentToggle').change(function() {
            e.preventDefault();
        var isMangaMode = $(this).is(':checked');
            $('.mode-menu').toggleClass('visible');
         localStorage.setItem('mangaMode', isMangaMode);
            $(this).toggleClass('active');
        updateContent(isMangaMode);
            $('.toggle-arrow').text($('.mode-menu').hasClass('visible') ? '▲' : '▼');
         });
 
        // Close menu when clicking elsewhere
        $(document).on('click', function(e) {
            if (!$(e.target).closest('.mode-selector-container').length) {
                $('.mode-menu').removeClass('visible');
                $('.mode-toggle-button').removeClass('active');
                $('.toggle-arrow').text('▼');
            }
        });
     });
     });
});
});


function updateContentDisplay(mode) {
function updateContent(isMangaMode) {
     // Update content visibility
     $('.manga-only').toggle(isMangaMode);
    $('.manga-content, .anime-content').hide();
     $('.anime-only').toggle(!isMangaMode);
    if (mode === 'manga') {
        $('.manga-content, .anime-content').show();
     } else {
        $('.anime-content').show();
    }
   
    // Update the mode display text
    $('.current-mode').text(mode.charAt(0).toUpperCase() + mode.slice(1));
   
    // Update active state in menu
    $('.mode-option').removeClass('active');
    $('.mode-option[data-mode="' + mode + '"]').addClass('active');
}
}

Revision as of 18:04, 6 February 2025

/* Any JavaScript here will be loaded for all users on every page load. */
// MediaWiki:Common.js
$(document).ready(function() {
    // Create toggle button
    var toggleHtml = `
        <div class="content-toggle">
            <span>Anime</span>
            <label class="toggle-switch">
                <input type="checkbox" id="contentToggle">
                <span class="slider"></span>
            </label>
            <span>Manga</span>
        </div>
    `;
    $('body').append(toggleHtml);

    // Load saved preference
    var isMangaMode = localStorage.getItem('mangaMode') === 'true';
    $('#contentToggle').prop('checked', isMangaMode);
    updateContent(isMangaMode);

    // Handle toggle changes
    $('#contentToggle').change(function() {
        var isMangaMode = $(this).is(':checked');
        localStorage.setItem('mangaMode', isMangaMode);
        updateContent(isMangaMode);
    });
});

function updateContent(isMangaMode) {
    $('.manga-only').toggle(isMangaMode);
    $('.anime-only').toggle(!isMangaMode);
}
Retrieved from "https://medalist.wiki/index.php?title=MediaWiki:Common.js&oldid=66"