MediaWiki:Common.js: Difference between revisions
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)); | ||
applyReaderMode(); | |||
} | } | ||
// 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);">✕ 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);">✕ Exit Reader Mode</div>');
escapeBtn.on('click', function() {
toggleReaderMode();
});
$('body').append(escapeBtn);
// Apply state on page load
applyReaderMode();
});