MediaWiki:Common.js: Difference between revisions

Jump to navigation Jump to search

MediaWiki:Common.js (view source)

Revision as of 08:28, 24 November 2023

4,384 bytes added ,  24 November 2023
no edit summary
imported>Hb1290
No edit summary
imported>Hb1290
No edit summary
 
(24 intermediate revisions by 3 users not shown)
Line 320: Line 320:
/* End of mw.loader.using callback */
/* End of mw.loader.using callback */
} );
} );
//<nowiki>
/*Discord widget*/
$( "#discord-widget" ).html('<iframe src="https://discord.com/widget?id=333345832059273216&theme=dark" width="100%" height="255px" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>');
/**
* Enables or disables the dark-mode gadget.
*
* Authors: [[User:SD0001]], [[User:Nardog]]
*/


// This method will resize elements that have a class name of "js-proportional-resize" by
// 'Dark mode' and 'Light mode' messages must match the ::before content in
// changing the font-size (%) based on a viewing area width of 900px being the baseline,
// [[MediaWiki:Gadget-dark-mode-toggle-pagestyles.css]] and [[MediaWiki:Gadget-dark-mode.css]], respectively.
// i.e. 450px width=font size 50%, 900px width=font size 100%, 1800px width=font size 200%.
// Don't overwrite existing messages, if already set on a foreign wiki prior to loading this file
function proportionalResize() {
if (!mw.messages.get('darkmode-turn-on-label')) {
var EXPECTED_PAGE_WIDTH = 900.00;
mw.messages.set({
$('.js-proportonal-resize').each(function() {
'darkmode-turn-on-label': 'Dark mode',
var fontSizeCss= (($(this).width() / EXPECTED_PAGE_WIDTH) * 100.00) + '%';
'darkmode-turn-on-tooltip': 'Turn dark mode on',
$(this).css("font-size", fontSizeCss);
'darkmode-turn-off-label': 'Light mode',
'darkmode-turn-off-tooltip': 'Turn dark mode off',
});
});
}
}


$(document).ready(function(e) {
var isOn = mw.loader.getState('ext.gadget.dark-mode') === 'ready';
    $('img[usemap]').rwdImageMaps();
 
    proportionalResize();
var broadcastChannel = new BroadcastChannel('gadget-dark-mode');
});
 
$(window).on('load', function() {
function setThemeColor() {
// the main page carousel text boxes aren't being initialized to the
// Update the theme-color used by some browsers for coloration of the tab headers and surrounding UI
// correct size on IE, so add a second resize post-DOM-ready
$('meta[name="theme-color"]').attr('content', isOn ? '#000000' : '#eaecf0');
proportionalResize();
}
});
 
$(window).resize(function(e) {
function setHtmlClass() {
    proportionalResize();
// CSS class for externally styling elements in dark mode via TemplateStyles (or CSS from other gadgets or common.css)
});
// A brief flash of the original styles will occur, so this is only suitable for style changes for which flashes are tolerable.
//<nowiki>
// For others, update Gadget-dark-mode.css directly which is loaded without FOUCs
$(function() {
$(document.documentElement).toggleClass('client-dark-mode', isOn);
    var nighttime = 'on' === mw.storage.get('nightpedia'),
}
        cssLoaded = nighttime ? lightsOff() : false;
 
function vectorStickyCallback() {
mw.hook('vector.page_title_scroll').remove(vectorStickyCallback);
if (document.getElementById('pt-darkmode-sticky-header')) return;
makePortletLink('p-personal-sticky-header', 'pt-darkmode-sticky-header', '#pt-watchlist-sticky-header');
}
 
function addPortlets() {
makePortletLink('p-personal', 'pt-darkmode', '#pt-watchlist');
 
if (mw.config.get('skin') === 'vector-2022') {
mw.hook('vector.page_title_scroll').add(vectorStickyCallback);
}
}
 
function getMsg(suffix) {
var key = 'darkmode-turn-' + (isOn ? 'off' : 'on') + '-' + suffix;
return mw.msg(key);
}
 
function makePortletLink(portletId, portletLinkId, nextnode) {
var label = getMsg('label');
var tooltip = getMsg('tooltip');
$(mw.util.addPortletLink(portletId, '#', label, portletLinkId, tooltip, '', nextnode))
.children().on('click', function (e) {
e.preventDefault();
toggleMode();
});
}
 
function togglePortlets() {
var labelSelector;
switch (mw.config.get('skin')) {
case 'vector':
case 'vector-2022':
case 'minerva':
labelSelector = '#pt-darkmode span:not(.mw-ui-icon), #pt-darkmode-sticky-header span:not(.mw-ui-icon)';
break;
default:
labelSelector = '#pt-darkmode a';
}
$(labelSelector).text(getMsg('label'));
$('#pt-darkmode a, #pt-darkmode-sticky-header a')
.attr('title', getMsg('tooltip'));
}
 
function actuallyToggleDarkMode() {
// Modify the <link> element on the page to include/exclude dark-mode styles
// We can't use mw.loader as it doesn't work both ways (see talk page)
var scriptPath = mw.util.wikiScript('load');
var $gadgetsLink = $('link[rel="stylesheet"][href^="' + scriptPath + '?"][href*="ext.gadget."]');
if ($gadgetsLink.length) {
var uri = new mw.Uri($gadgetsLink.prop('href'));
if (isOn) {
uri.query.modules += ',dark-mode';
} else {
if (uri.query.modules === 'ext.gadget.dark-mode') {
// dark-mode is the only module in this link
$gadgetsLink.remove();
return;
}
uri.query.modules = uri.query.modules
.replace('ext.gadget.dark-mode,', 'ext.gadget.') // dark-mode is first in the gadget list
.replace(/,dark-mode(,|$)/, '$1'); // dark-mode is in middle or end of the list
}
$gadgetsLink.prop('href', uri.getRelativePath());
} else {
// No gadget-containing styles are enabled
$('<link>').attr({
rel: 'stylesheet',
href: scriptPath + '?lang=' + mw.config.get('wgUserLanguage') +
'&modules=ext.gadget.dark-mode&only=styles&skin=' + mw.config.get('skin')
}).appendTo(document.head);
}
}
 
function savePreference() {
new mw.Api().saveOption('gadget-dark-mode', isOn ? '1' : '0');
}
 
function savePreferenceLocally() {
mw.user.options.set('gadget-dark-mode', Number(isOn));
 
// In case the user navigates to another page too quickly
mw.storage.session.set('dark-mode-toggled', isOn ? '1' : '0');
}
 
function notifyOtherTabs() {
// Broadcast state change to other tabs
broadcastChannel.postMessage(isOn);
}
 
function toggleMode(offline) {
isOn = !isOn;
if (!offline) {
savePreference();
notifyOtherTabs();
}
setHtmlClass();
setThemeColor();
savePreferenceLocally();
togglePortlets();
actuallyToggleDarkMode();
}
 
function toggleBasedOnSystemColourScheme() {
var systemSchemeNow = matchMedia('(prefers-color-scheme: dark)').matches;
var systemSchemeLast = mw.storage.get('dark-mode-system-scheme') === '1';
 
if (systemSchemeNow !== systemSchemeLast) {
if (systemSchemeNow !== isOn) {
toggleMode();
}
mw.requestIdleCallback(function () {
mw.storage.set('dark-mode-system-scheme', systemSchemeNow ? '1' : '0');
});
}
}
 
 
$.when($.ready, mw.loader.using(['mediawiki.util', 'mediawiki.api', 'mediawiki.Uri', 'mediawiki.storage'])).then(function () {
setHtmlClass();
setThemeColor();
addPortlets();
 
// Recover state if the navigation was too quick
var storageState = mw.storage.session.get('dark-mode-toggled');
if (storageState && Number(storageState) !== Number(isOn)) {
toggleMode(true);
}


    mw.util.addPortletLink('p-personal', '#', nighttime ? 'Light Mode' : 'Dark Mode', 'pt-nightpedia', '', 'np', '#pt-watchlist');
// Listen to dark mode state change made on other tabs
broadcastChannel.onmessage = function (msg) {
if (msg.data !== isOn) {
toggleMode(true);
}
};


    $('#pt-nightpedia').on('click', function(e) {
if (window.wpDarkModeAutoToggle) {
        e.preventDefault();
toggleBasedOnSystemColourScheme();
        nighttime = !nighttime;
        if (nighttime) {
            lightsOff();
        } else {
            lightsOn();
        }
    });


    function lightsOn() {
// If system colour scheme changes while user is viewing, toggle immediately
        $('html').removeClass('nighttime');
var mediaQuery = matchMedia('(prefers-color-scheme: dark)');
        $('#pt-nightpedia a').text('Dark Mode');
if (mediaQuery.addEventListener) {
        mw.storage.set('nightpedia', 'off');
mediaQuery.addEventListener('change', toggleBasedOnSystemColourScheme);
    }
} else if (mediaQuery.addListener) { // Safari 13 and older
    function lightsOff() {
mediaQuery.addListener(toggleBasedOnSystemColourScheme);
        if(!cssLoaded) {
}
            $('head').append(mw.loader.load('https://en.wikipedia.org/w/index.php?title=User:MusikAnimal/nightpedia.css&action=raw&ctype=text/css', 'text/css'));
}
        }
        $('html').addClass('nighttime');
        $('#pt-nightpedia a').text('Light Mode');
        mw.storage.set('nightpedia', 'on');
        return true;
    }
});
});
//</nowiki>
Anonymous user
Retrieved from "https://avidwiki.mywikis.net/wiki/Special:MobileDiff/1147...1173"

Navigation menu