MediaWiki:Common.js: Difference between revisions

From Winds Of Valen Wiki
Jump to navigation Jump to search
OSRS Calculator Loader and Reader Mode
Add always-visible reader mode escape button
Line 15: Line 15:
$(function() {
$(function() {
     var isReaderMode = localStorage.getItem('osrs-reader-mode') === 'true';
     var isReaderMode = localStorage.getItem('osrs-reader-mode') === 'true';
      
 
     function applyReaderMode() {
        $('body').toggleClass('reader-mode-active', isReaderMode);
        $('#reader-mode-escape').toggle(isReaderMode);
    }
 
     function toggleReaderMode() {
     function toggleReaderMode() {
         isReaderMode = !isReaderMode;
         isReaderMode = !isReaderMode;
         localStorage.setItem('osrs-reader-mode', isReaderMode);
         localStorage.setItem('osrs-reader-mode', String(isReaderMode));
        $('body').toggleClass('reader-mode-active', isReaderMode);
         applyReaderMode();
    }
   
    if (isReaderMode) {
         $('body').addClass('reader-mode-active');
     }
     }
   
 
     // Insert toggle button into personal nav
     // Insert toggle button into personal nav (in the header)
     var btn = $('<li><a href="#" id="pt-reader-mode">Toggle Reader Mode</a></li>');
     var btn = $('<li><a href="#" id="pt-reader-mode">Toggle Reader Mode</a></li>');
     btn.on('click', function(e) {
     btn.on('click', function(e) {
Line 33: Line 34:
     });
     });
     $('#p-personal ul').prepend(btn);
     $('#p-personal ul').prepend(btn);
    // Also inject a fixed escape button that is ALWAYS visible in reader mode
    var escapeBtn = $('<div id="reader-mode-escape" style="' +
        'display:none; position:fixed; top:10px; left:10px; z-index:99999;' +
        'background:rgba(0,0,0,0.7); color:#fff; padding:8px 14px;' +
        'border-radius:6px; cursor:pointer; font-size:13px; font-weight:bold;' +
        'box-shadow:0 2px 8px rgba(0,0,0,0.4);">&#x2715; Exit Reader Mode</div>');
    escapeBtn.on('click', function() {
        toggleReaderMode();
    });
    $('body').append(escapeBtn);
    // Apply state on page load
    applyReaderMode();
});
});

Revision as of 14:07, 11 July 2026

/* OSRS Custom JS Framework */

// 1. Asynchronous Calculator Loader
$(function() {
    if ($('.jcConfig').length > 0) {
        // Asynchronously pull in calculator scripts
        mw.loader.getScript('/resources/assets/calc.js').then(function() {
            mw.loader.load('/resources/assets/calc.css', 'text/css');
            console.log("OSRS calculators loaded.");
        });
    }
});

// 2. Reader Mode Toggle
$(function() {
    var isReaderMode = localStorage.getItem('osrs-reader-mode') === 'true';

    function applyReaderMode() {
        $('body').toggleClass('reader-mode-active', isReaderMode);
        $('#reader-mode-escape').toggle(isReaderMode);
    }

    function toggleReaderMode() {
        isReaderMode = !isReaderMode;
        localStorage.setItem('osrs-reader-mode', String(isReaderMode));
        applyReaderMode();
    }

    // Insert toggle button into personal nav (in the header)
    var btn = $('<li><a href="#" id="pt-reader-mode">Toggle Reader Mode</a></li>');
    btn.on('click', function(e) {
        e.preventDefault();
        toggleReaderMode();
    });
    $('#p-personal ul').prepend(btn);

    // Also inject a fixed escape button that is ALWAYS visible in reader mode
    var escapeBtn = $('<div id="reader-mode-escape" style="' +
        'display:none; position:fixed; top:10px; left:10px; z-index:99999;' +
        'background:rgba(0,0,0,0.7); color:#fff; padding:8px 14px;' +
        'border-radius:6px; cursor:pointer; font-size:13px; font-weight:bold;' +
        'box-shadow:0 2px 8px rgba(0,0,0,0.4);">&#x2715; Exit Reader Mode</div>');
    escapeBtn.on('click', function() {
        toggleReaderMode();
    });
    $('body').append(escapeBtn);

    // Apply state on page load
    applyReaderMode();
});