MediaWiki:Common.js: Difference between revisions

From Medalist Wiki
No edit summary
No edit summary
Line 2: Line 2:
// MediaWiki:Common.js
// MediaWiki:Common.js
$(document).ready(function() {
$(document).ready(function() {
     // Create toggle button
     // Add toggle buttons to the page
     var toggleHtml = `
     const toggleContainer = $('<div class="toggle-container">' +
        <div class="content-toggle">
        '<div class="toggle-label">Select version:</div>' +
            <span>Anime</span>
        '<button class="toggle-button anime-toggle">Anime</button>' +
            <label class="toggle-switch">
        '<button class="toggle-button manga-toggle active">Manga</button>' +
                <input type="checkbox" id="contentToggle">
        '</div>');
                <span class="slider"></span>
   
            </label>
    // Insert the toggle container after the first heading
             <span>Manga</span>
    $('#firstHeading').after(toggleContainer);
         </div>
   
     `;
    // Set initial state
     $('body').append(toggleHtml);
    $('body').addClass('show-manga');
 
   
    // Toggle functionality
    $('.anime-toggle').click(function() {
        $('.toggle-button').removeClass('active');
        $(this).addClass('active');
        $('body')
             .removeClass('show-manga')
            .addClass('show-anime');
        // Save preference in localStorage
         localStorage.setItem('contentPreference', 'anime');
     });
      
    $('.manga-toggle').click(function() {
        $('.toggle-button').removeClass('active');
        $(this).addClass('active');
        $('body')
            .removeClass('show-anime')
            .addClass('show-manga');
        // Save preference in localStorage
        localStorage.setItem('contentPreference', 'manga');
    });
   
     // Load saved preference
     // Load saved preference
     var isMangaMode = localStorage.getItem('mangaMode') === 'true';
     const savedPreference = localStorage.getItem('contentPreference');
     $('#contentToggle').prop('checked', isMangaMode);
     if (savedPreference === 'anime') {
    updateContent(isMangaMode);
         $('.anime-toggle').click();
 
     }
    // 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);
}

Revision as of 18:07, 6 February 2025

/* Any JavaScript here will be loaded for all users on every page load. */
// MediaWiki:Common.js
$(document).ready(function() {
    // Add toggle buttons to the page
    const toggleContainer = $('<div class="toggle-container">' +
        '<div class="toggle-label">Select version:</div>' +
        '<button class="toggle-button anime-toggle">Anime</button>' +
        '<button class="toggle-button manga-toggle active">Manga</button>' +
        '</div>');
    
    // Insert the toggle container after the first heading
    $('#firstHeading').after(toggleContainer);
    
    // Set initial state
    $('body').addClass('show-manga');
    
    // Toggle functionality
    $('.anime-toggle').click(function() {
        $('.toggle-button').removeClass('active');
        $(this).addClass('active');
        $('body')
            .removeClass('show-manga')
            .addClass('show-anime');
        // Save preference in localStorage
        localStorage.setItem('contentPreference', 'anime');
    });
    
    $('.manga-toggle').click(function() {
        $('.toggle-button').removeClass('active');
        $(this).addClass('active');
        $('body')
            .removeClass('show-anime')
            .addClass('show-manga');
        // Save preference in localStorage
        localStorage.setItem('contentPreference', 'manga');
    });
    
    // Load saved preference
    const savedPreference = localStorage.getItem('contentPreference');
    if (savedPreference === 'anime') {
        $('.anime-toggle').click();
    }
});