MediaWiki:Gadget-skinTogglesNew-prompt.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

 1 /**
 2  * Prompts that dark mode color scheme is available.
 3  * 
 4  * @author Elessar2
 5  * @author Gaz Lloyd
 6  * @author JaydenKieran
 7  * @author TehKittyCat
 8  *
 9  * Positioning logic adapted from [[MediaWiki:Gadget-rsnews.js]].
10  */
11 var $portletLink = $('#pt-skin-toggles'),
12     $prompt
13 
14 function init() {
15     $prompt = $('<div>').addClass('rsw-color-scheme-prompt').css( 'display', 'none' ).append(
16         $('<p>').css({
17             'font-size': '0.75em'
18         }).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>')
19     )
20     $('body').append($prompt)
21 
22     // Set initial position before showing the prompt.
23     resizeEvent()
24     $prompt.show()
25 
26     // Reposition prompt on window resize.
27     $(window).resize(resizeEvent)
28 
29     // Close prompt when anywhere is clicked.
30     $(document).click(function() {
31         $prompt.hide()
32     })
33 
34     // Set localStorage key so we don't prompt them again.
35     $( '#rsw-color-scheme-opt-out' ).click( function() {
36         localStorage.setItem('dark_prompt', 'true')
37         $prompt.hide()
38     } )
39 }
40 
41 function resizeEvent() {
42     var offset = $portletLink.offset(),
43         height = $portletLink.outerHeight(),
44         width = $portletLink.outerWidth(),
45         pwidth = $prompt.outerWidth(),
46         wheight = $(window).height(),
47         ptop = offset.top + height + 15
48 
49     $prompt.css({
50         top: ptop + 'px',
51         left: (offset.left + width/2 - pwidth/2) + 'px',
52         'max-height': (wheight - ptop - 7) + 'px'
53     })
54 }
55 
56 // Wait for #pt-skin-toggles's position to be finalised.
57 if ( document.readyState === 'complete' ) {
58 	init()
59 } else {
60 	window.addEventListener('load', init )
61 }