MediaWiki:Gadget-skinTogglesNew-prompt.js
After saving, you may need to bypass your browser's cache to see the changes. For further information, see Wikipedia:Bypass your cache.
- In most Windows and Linux browsers: Hold down Ctrl and press F5.
- In Safari: Hold down ⇧ Shift and click the Reload button.
- In Chrome and Firefox for Mac: Hold down both ⌘ Cmd+⇧ Shift and press R.
/**
* Prompts that dark mode color scheme is available.
*
* @author Elessar2
* @author Gaz Lloyd
* @author JaydenKieran
* @author TehKittyCat
*
* Positioning logic adapted from [[MediaWiki:Gadget-rsnews.js]].
*/
var $portletLink = $('#pt-skin-toggles'),
$prompt
function init() {
$prompt = $('<div>').addClass('rsw-color-scheme-prompt').css( 'display', 'none' ).append(
$('<p>').css({
'font-size': '0.75em'
}).html('Your device is using dark mode. You can click here to enable the wiki\'s dark mode!<br><a id="rsw-color-scheme-opt-out" href="#">Don\'t show this again</a>')
)
$('body').append($prompt)
// Set initial position before showing the prompt.
resizeEvent()
$prompt.show()
// Reposition prompt on window resize.
$(window).resize(resizeEvent)
// Close prompt when anywhere is clicked.
$(document).click(function() {
$prompt.hide()
})
// Set localStorage key so we don't prompt them again.
$( '#rsw-color-scheme-opt-out' ).click( function() {
localStorage.setItem('dark_prompt', 'true')
$prompt.hide()
} )
}
function resizeEvent() {
var offset = $portletLink.offset(),
height = $portletLink.outerHeight(),
width = $portletLink.outerWidth(),
pwidth = $prompt.outerWidth(),
wheight = $(window).height(),
ptop = offset.top + height + 15
$prompt.css({
top: ptop + 'px',
left: (offset.left + width/2 - pwidth/2) + 'px',
'max-height': (wheight - ptop - 7) + 'px'
})
}
// Wait for #pt-skin-toggles's position to be finalised.
if ( document.readyState === 'complete' ) {
init()
} else {
window.addEventListener('load', init )
}