MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

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

// 3. Simple Image Lightbox
$(function() {
    $('a.image').on('click', function(e) {
        e.preventDefault();
        
        var imgUrl = $(this).attr('href');
        if ($(this).find('img').length > 0) {
            // Get original image url by stripping /thumb/ and the filename at the end
            var thumbSrc = $(this).find('img').attr('src');
            if (thumbSrc.indexOf('/images/thumb/') !== -1) {
                var parts = thumbSrc.split('/');
                parts.pop(); // remove the scaled filename like 300px-Scouts.png
                imgUrl = parts.join('/').replace('/images/thumb/', '/images/');
            } else {
                imgUrl = thumbSrc;
            }
        }
        
        var overlay = $('<div id="osrs-lightbox" style="position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); z-index:999999; display:flex; align-items:center; justify-content:center; cursor:pointer;"></div>');
        var img = $('<img src="' + imgUrl + '" style="max-width:95%; max-height:95%; box-shadow:0 0 20px rgba(0,0,0,0.8); border:2px solid #b3a07d;" />');
        
        var loading = $('<div style="color:white; font-family:sans-serif; position:absolute;">Loading...</div>');
        overlay.append(loading);
        
        img.on('load', function() {
            loading.remove();
        });
        
        overlay.append(img);
        
        overlay.on('click', function() {
            $(this).fadeOut(200, function() {
                $(this).remove();
            });
        });
        
        $('body').append(overlay);
        overlay.hide().fadeIn(200);
    });
});