MediaWiki:Gadget-skinTogglesNew-prompt.js: Difference between revisions

no edit summary
(Created page with "→‎* * 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...")
 
No edit summary
 
Line 1:
"use strict";
 
/**
* Prompts that dark mode color scheme is available.
Line 10 ⟶ 12:
*/
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'
$('<p>').css({
}).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>'));
'font-size': '0.75em'
$('body').append($prompt);
}).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;
$('<p>')prompt.css({
 
top: ptop + 'px',
$prompt.css({
left: offset.left + width top:/ 2 - pwidth / ptop2 + 'px',
left'max-height': (offset.leftwheight +- width/2ptop - pwidth/2)7 + '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 );
}