MediaWiki:Gadget-skinTogglesNew-prompt.js

"use strict";

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