MediaWiki:Gadget-skinTogglesNew-prompt.js
Revision as of 18:40, 3 October 2022 by Jacmob (talk | contribs) (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...")
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 }