MediaWiki:Common.js: Difference between revisions
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(); | |||
}); | }); | ||