MediaWiki:Gadget-skinTogglesNew-prompt.js

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