MediaWiki:Common.js: Difference between revisions
mNo edit summary |
m sidebar toggle for small screens |
||
| (27 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* | /* MediaWiki:Common.js | ||
Global JS for the wiki. | |||
- Keeps FAQ expand/collapse handlers. | |||
- Adds reliable body classes (mw-user / mw-anonuser) using mw.config.get('wgUserId'). | |||
- Lightweight and safe; fails silently if mw or mw.config is unavailable. | |||
*/ | |||
/* Expand/Collapse all for FAQList */ | |||
mw.hook('wikipage.content').add(function ($content) { | |||
// Expand all | |||
$content.on('click', '.faq-expand-all', function () { | |||
$('.faq-list details').attr('open', true); | |||
}); | |||
// Collapse all | |||
$content.on('click', '.faq-collapse-all', function () { | |||
$('.faq-list details').removeAttr('open'); | |||
}); | |||
}); | |||
/* Helper: ensure body has mw-user or mw-anonuser so CSS can target logged-in vs anon reliably. | |||
Uses mw.config.get('wgUserId') which is present in all ResourceLoader contexts. | |||
*/ | |||
(function () { | |||
try { | |||
if ( typeof mw === 'undefined' || !mw.config || typeof mw.config.get !== 'function' ) { | |||
// mw or mw.config not available yet — try again after DOM ready | |||
document.addEventListener('DOMContentLoaded', function () { | |||
try { | |||
var uid = (window.mw && mw.config && mw.config.get) ? mw.config.get('wgUserId') : null; | |||
if (!uid) { | |||
document.body.classList.add('mw-anonuser'); | |||
document.body.classList.remove('mw-user'); | |||
} else { | |||
document.body.classList.add('mw-user'); | |||
document.body.classList.remove('mw-anonuser'); | |||
} | |||
} catch (e) { | |||
if (window.console && console.warn) console.warn('Common.js body class helper (deferred) failed', e); | |||
} | |||
}, { once: true }); | |||
return; | |||
} | |||
// If body exists now, set classes immediately; otherwise wait for DOMContentLoaded | |||
function setBodyClass() { | |||
try { | |||
var uid = mw.config.get('wgUserId'); | |||
if (!uid || uid === 0 || uid === '') { | |||
document.body.classList.add('mw-anonuser'); | |||
document.body.classList.remove('mw-user'); | |||
} else { | |||
document.body.classList.add('mw-user'); | |||
document.body.classList.remove('mw-anonuser'); | |||
} | |||
} catch (e) { | |||
if (window.console && console.warn) console.warn('Common.js body class helper failed', e); | |||
} | |||
} | |||
if (document.body) { | |||
setBodyClass(); | |||
} else { | |||
if ( | document.addEventListener('DOMContentLoaded', setBodyClass, { once: true }); | ||
} | |||
} catch (e) { | |||
if (window.console && console.warn) console.warn('Common.js initialization failed', e); | |||
} | |||
}()); | |||
// Add a simple sidebar toggle for small screens | |||
( function () { | |||
if ( mw.config.get('skin') && window.matchMedia('(max-width: 800px)').matches ) { | |||
var btn = document.createElement('button'); | |||
btn.className = 'sidebar-toggle'; | |||
btn.textContent = '☰'; | |||
document.body.appendChild(btn); | |||
btn.addEventListener('click', function () { | |||
var sb = document.querySelector('.vector-sidebar, .mw-sidebar, #mw-panel'); | |||
if ( sb ) sb.classList.toggle('open'); | |||
}); | }); | ||
} | |||
} | }() ); | ||
}); | |||