|
|
| Line 1: |
Line 1: |
| /* OSRS Custom JS Framework */
| | $(document).ready(function() { |
| | | $('#ca-nstab-main a').text('Article'); |
| // 1. Asynchronous Calculator Loader
| | $('#ca-history a').text('History'); |
| $(function() {
| | $('#ca-view a').text('Read'); |
| 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);">✕ 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);
| |
| });
| |
| }); | | }); |