MediaWiki:Common.js: Difference between revisions
No edit summary |
No edit summary |
||
Line 2: | Line 2: | ||
mw.loader.using(['mediawiki.api', 'mediawiki.util'], function() { | mw.loader.using(['mediawiki.api', 'mediawiki.util'], function() { | ||
// Debug mode - set to true to always show the popup | // Debug mode - set to true to always show the popup | ||
var debugMode = | var debugMode = true; | ||
// Check if user has seen the warning before (or if in debug mode) | // Check if user has seen the warning before (or if in debug mode) | ||
if (debugMode || !mw.cookie.get('spoilerWarningShown')) { | if (debugMode || !mw.cookie.get('spoilerWarningShown')) { | ||
// Create styles for light/dark mode | |||
var style = document.createElement('style'); | |||
style.textContent = '@media (prefers-color-scheme: dark) { ' + | |||
'.spoiler-warning { background: #202020 !important; color: #ffffff !important; }' + | |||
'.spoiler-warning .subtext { color: #999999 !important; }' + | |||
'} ' + | |||
'@media (prefers-color-scheme: light) { ' + | |||
'.spoiler-warning { background: #ffffff !important; color: #000000 !important; }' + | |||
'.spoiler-warning .subtext { color: #666666 !important; }' + | |||
'}'; | |||
document.head.appendChild(style); | |||
// Create popup container | // Create popup container | ||
var popup = document.createElement('div'); | var popup = document.createElement('div'); | ||
popup.className = 'spoiler-warning'; | |||
popup.style.position = 'fixed'; | popup.style.position = 'fixed'; | ||
popup.style. | popup.style.bottom = '0'; | ||
popup.style.left = ' | popup.style.left = '0'; | ||
popup.style. | popup.style.right = '0'; | ||
popup.style.padding = '15px'; | |||
popup.style.padding = ' | popup.style.textAlign = 'center'; | ||
popup.style. | |||
popup.style.zIndex = '10000'; | popup.style.zIndex = '10000'; | ||
popup.style. | popup.style.cursor = 'pointer'; | ||
popup.style. | popup.style.borderTop = '1px solid rgba(128, 128, 128, 0.2)'; | ||
// Create | // Create the main text with "spoilers" in normal weight | ||
var | var message = document.createElement('div'); | ||
message.style.marginBottom = '5px'; | |||
message.style.fontSize = '14px'; | |||
var textBefore = document.createTextNode('This wiki contains '); | |||
var spoilersSpan = document.createElement('span'); | |||
spoilersSpan.textContent = 'spoilers'; | |||
var textAfter = document.createTextNode(' for the manga until the latest chapter.'); | |||
message.appendChild(textBefore); | |||
message.appendChild(spoilersSpan); | |||
message.appendChild(textAfter); | |||
// Create | // Create subtext | ||
var | var subMessage = document.createElement('div'); | ||
subMessage.textContent = 'By continuing, you agree to accept the risk of spoilers.'; | |||
subMessage.style.fontSize = '12px'; | |||
subMessage.className = 'subtext'; | |||
subMessage.style.marginBottom = '5px'; | |||
// Create | // Create "click anywhere" text | ||
var | var clickText = document.createElement('div'); | ||
clickText.textContent = 'Click anywhere to continue.'; | |||
clickText.style.fontSize = '12px'; | |||
clickText.className = 'subtext'; | |||
// Function to close popup and set cookie | // Function to close popup and set cookie | ||
Line 60: | Line 65: | ||
path: '/' | path: '/' | ||
}); | }); | ||
// Remove popup and | // Remove popup and style | ||
document.body.removeChild(popup); | document.body.removeChild(popup); | ||
document. | document.head.removeChild(style); | ||
} | } | ||
// Add click | // Add click handler | ||
popup.onclick = closePopup; | |||
// Add debug text if in debug mode | // Add debug text if in debug mode | ||
if (debugMode) { | if (debugMode) { | ||
var debugText = document.createElement(' | var debugText = document.createElement('div'); | ||
debugText.textContent = '(Debug Mode Active)'; | debugText.textContent = '(Debug Mode Active)'; | ||
debugText.style.fontSize = ' | debugText.style.fontSize = '10px'; | ||
debugText. | debugText.className = 'subtext'; | ||
popup.appendChild(debugText); | popup.appendChild(debugText); | ||
} | } | ||
Line 81: | Line 85: | ||
popup.appendChild(message); | popup.appendChild(message); | ||
popup.appendChild(subMessage); | popup.appendChild(subMessage); | ||
popup.appendChild( | popup.appendChild(clickText); | ||
document.body.appendChild(popup); | document.body.appendChild(popup); | ||
} | } | ||
}); | }); |
Revision as of 01:32, 8 February 2025
/* Add spoiler warning popup for first-time visitors */
mw.loader.using(['mediawiki.api', 'mediawiki.util'], function() {
// Debug mode - set to true to always show the popup
var debugMode = true;
// Check if user has seen the warning before (or if in debug mode)
if (debugMode || !mw.cookie.get('spoilerWarningShown')) {
// Create styles for light/dark mode
var style = document.createElement('style');
style.textContent = '@media (prefers-color-scheme: dark) { ' +
'.spoiler-warning { background: #202020 !important; color: #ffffff !important; }' +
'.spoiler-warning .subtext { color: #999999 !important; }' +
'} ' +
'@media (prefers-color-scheme: light) { ' +
'.spoiler-warning { background: #ffffff !important; color: #000000 !important; }' +
'.spoiler-warning .subtext { color: #666666 !important; }' +
'}';
document.head.appendChild(style);
// Create popup container
var popup = document.createElement('div');
popup.className = 'spoiler-warning';
popup.style.position = 'fixed';
popup.style.bottom = '0';
popup.style.left = '0';
popup.style.right = '0';
popup.style.padding = '15px';
popup.style.textAlign = 'center';
popup.style.zIndex = '10000';
popup.style.cursor = 'pointer';
popup.style.borderTop = '1px solid rgba(128, 128, 128, 0.2)';
// Create the main text with "spoilers" in normal weight
var message = document.createElement('div');
message.style.marginBottom = '5px';
message.style.fontSize = '14px';
var textBefore = document.createTextNode('This wiki contains ');
var spoilersSpan = document.createElement('span');
spoilersSpan.textContent = 'spoilers';
var textAfter = document.createTextNode(' for the manga until the latest chapter.');
message.appendChild(textBefore);
message.appendChild(spoilersSpan);
message.appendChild(textAfter);
// Create subtext
var subMessage = document.createElement('div');
subMessage.textContent = 'By continuing, you agree to accept the risk of spoilers.';
subMessage.style.fontSize = '12px';
subMessage.className = 'subtext';
subMessage.style.marginBottom = '5px';
// Create "click anywhere" text
var clickText = document.createElement('div');
clickText.textContent = 'Click anywhere to continue.';
clickText.style.fontSize = '12px';
clickText.className = 'subtext';
// Function to close popup and set cookie
function closePopup() {
// Set cookie to expire in 365 days
mw.cookie.set('spoilerWarningShown', '1', {
expires: 365 * 24 * 60 * 60,
path: '/'
});
// Remove popup and style
document.body.removeChild(popup);
document.head.removeChild(style);
}
// Add click handler
popup.onclick = closePopup;
// Add debug text if in debug mode
if (debugMode) {
var debugText = document.createElement('div');
debugText.textContent = '(Debug Mode Active)';
debugText.style.fontSize = '10px';
debugText.className = 'subtext';
popup.appendChild(debugText);
}
// Assemble and show popup
popup.appendChild(message);
popup.appendChild(subMessage);
popup.appendChild(clickText);
document.body.appendChild(popup);
}
});