Alex at 11:06, 20 October 2024

2024-10-20T11:06:21Z

← Older revision		Revision as of 13:06, 20 October 2024
Line 1:		Line 1:
			"use strict";

	/**		/**
	* Prompts that dark mode color scheme is available.		* Prompts that dark mode color scheme is available.
Line 10:		Line 12:
	*/		*/
	var $portletLink = $('#pt-skin-toggles'),		var $portletLink = $('#pt-skin-toggles'),
	$prompt		$prompt;

	function init() {		function init() {
	$prompt = $('<div>').addClass('rsw-color-scheme-prompt').css( 'display', 'none' ).append(		$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.		// Set initial position before showing the prompt.
	resizeEvent()		resizeEvent();
	$prompt.show()		$prompt.show();

	// Reposition prompt on window resize.		// Reposition prompt on window resize.
	$(window).resize(resizeEvent)		$(window).resize(resizeEvent);

	// Close prompt when anywhere is clicked.		// Close prompt when anywhere is clicked.
	$(document).click(function() {		$(document).click(function () {
	$prompt.hide()		$prompt.hide();
	})		});

	// Set localStorage key so we don't prompt them again.		// Set localStorage key so we don't prompt them again.
	$( '#rsw-color-scheme-opt-out' ).click( function() {		$('#rsw-color-scheme-opt-out').click(function () {
	localStorage.setItem('dark_prompt', 'true')		localStorage.setItem('dark_prompt', 'true');
	$prompt.hide()		$prompt.hide();
	} )		});
	}		}

	function resizeEvent() {		function resizeEvent() {
	var offset = $portletLink.offset(),		var offset = $portletLink.offset(),
	height = $portletLink.outerHeight(),		height = $portletLink.outerHeight(),
	width = $portletLink.outerWidth(),		width = $portletLink.outerWidth(),
	pwidth = $prompt.outerWidth(),		pwidth = $prompt.outerWidth(),
	wheight = $(window).height(),		wheight = $(window).height(),
	ptop = offset.top + height + 15		ptop = offset.top + height + 15;
		⚫	$prompt.css({

			top: ptop + 'px',
	$prompt.css({
	~~top:~~ ~~ptop~~ + 'px',		left: offset.left + width / 2 - pwidth / 2 + 'px',
	~~left~~: ~~(offset.left~~ + ~~width/2~~ - ~~pwidth/2)~~ + 'px',		'max-height': wheight - ptop - 7 + 'px'
		⚫	});
	'max-height': (wheight - ptop - 7) + 'px'
	})
	}		}

	// Wait for #pt-skin-toggles's position to be finalised.		// Wait for #pt-skin-toggles's position to be finalised.
	if ( document.readyState === 'complete' ) {		if (document.readyState === 'complete') {
	init()		init();
	} else {		} else {
	window.addEventListener('load', init )		window.addEventListener('load', init);
	}		}

Alex: 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 = $('
').addClass('rsw-color-scheme-prompt').css( 'display', 'none' ).append( $('
').css({ 'font-size': '0.75em' }).html('Your device..."

2024-10-13T00:44:25Z

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..."

New page

/**
* 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 )
}

MediaWiki:Gadget-skinTogglesNew-prompt.js - Revision history

Alex at 11:06, 20 October 2024