MediaWiki:Gadget-themeSelector.js

In other languages

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

Google Chrome, Firefox, Microsoft Edge, and Safari: Hold down the key and click the Reload toolbar button.
For details and instructions about other browsers, see Wikipedia:Bypass your cache.

consti18n={
en:{
autoModeTitle:'Automatic dark/light mode',
darkModeTitle:'Dark mode',
lightModeTitle:'Light mode',
widthFullTitle:'Full width',
widthFixedTitle:'Fixed width',
widthMediumTitle:'Medium width',
gadgetFailedToastTitle:'Theme selector',
gadgetFailedToast:'Could not save theme preference.',
themeDialogTitle:'Theme settings',
themeDialogDone:'Done',
anonWarning:'You are currently not logged in. Because of this, it may take a moment for your theme settings to take effect after loading a wiki page.',
defaultThemeName:'Default',
defaultThemeDesc:'The regular look and feel of the wiki',
halloweenThemeName:'Halloween',
halloweenThemeDesc:'A scary theme for the spooky season',
winterThemeName:'Winter',
winterThemeDesc:'A snowy wiki theme',
netherThemeName:'Nether',
netherThemeDesc:'A Nether wiki theme; light mode is a crimson, and dark mode a warped forest',
cherryThemeName:'Cherry Grove',
cherryThemeDesc:'A theme based on the Cherry Grove',
palegardenThemeName:'Pale Garden',
palegardenThemeDesc:'A theme based on the Pale Garden',
classicThemeName:'Classic',
classicThemeDesc:'The previous look of the wiki from Gamepedia',
oreuiThemeName:'OreUI',
oreuiThemeDesc:'An alternative wiki skin based on the Bedrock Edition UI style',
halloweenSeasonalThemeName:'Halloween',
halloweenSeasonalThemeDesc:'Usually enabled during October and beginning of November',
winterSeasonalThemeName:'Winter',
winterSeasonalThemeDesc:'Usually enabled during December and January',
updateSeasonalThemeName:'Updates',
updateSeasonalThemeDesc:'Dedicated skins for major updates or other special occasions',
dungeonsNamespaceThemeName:'Minecraft Dungeons',
earthNamespaceThemeName:'Minecraft Earth',
legendsNamespaceThemeName:'Minecraft Legends',
storymodeNamespaceThemeName:'Minecraft: Story Mode',
tutorialNamespaceThemeName:'Tutorials',
}
};
consti18nLang=i18n.en;
constwidths={
'full':{title:'widthFullTitle',icon:'fit_page_width',nextPref:'fixed',cssWidth:'100vw'},
'fixed':{title:'widthFixedTitle',icon:'width_normal',nextPref:'medium',gadget:'widthFixed',oldCookie:'fixedWidth',cssWidth:'1200px'},
'medium':{title:'widthMediumTitle',icon:'width_wide',nextPref:'full',gadget:'widthMedium',cssWidth:'1600px'},
};
constmodes={
'auto':{title:'autoModeTitle',icon:'routine',nextPref:'dark'},
'dark':{title:'darkModeTitle',icon:'dark_mode',nextPref:'light'},
'light':{title:'lightModeTitle',icon:'light_mode',nextPref:'auto'},
};
constthemes={
'default':{},
'halloween':{gadget:'halloweenTheme'},
'winter':{gadget:'winterTheme'},
'nether':{gadget:'netherTheme'},
// 'cherry': { gadget: 'cherryTheme' },
'palegarden':{gadget:'palegardenTheme'},
'classic':{gadget:'hydraTheme'},
'oreui':{gadget:'oreuiTheme'},
};
constseasonalThemes={
'halloween':{gadget:'halloweenSeasonalTheme'},
'winter':{gadget:'winterSeasonalTheme'},
'update':{gadget:'updateSeasonalTheme'},
};
constnamespaceThemes={
'dungeons':{gadget:'dungeonsNamespaceTheme'},
'earth':{gadget:'earthNamespaceTheme'},
'legends':{gadget:'legendsNamespaceTheme'},
'storymode':{gadget:'storymodeNamespaceTheme'},
'tutorial':{gadget:'tutorialNamespaceTheme'},
};
constcustomizationOptions={
'stickyHeader':{gadget:'stickyHeader'},
};
mw.loader.using(['oojs-ui-windows']).then(()=>{
constdialogFactory=newOO.Factory();
constwindowManager=newOO.ui.WindowManager({
factory:dialogFactory,
});
setupThemeDialog();
constwglThemeCookie='theme';
letwglTheme=$.cookie(wglThemeCookie)==='dark'?'dark':'light';
functionsetWglTheme(theme){
$.cookie(wglThemeCookie,theme,{expires:365,path:'/'});
if(theme==='dark'){
mw.loader.using(['wgl.theme.dark']).then(function(){
$('body').addClass('wgl-theme-dark');
$('body').removeClass('wgl-theme-light');
mw.hook('wgl.themeChanged').fire('dark');
});
}else{
$('body').addClass('wgl-theme-light');
$('body').removeClass('wgl-theme-dark');
mw.hook('wgl.themeChanged').fire('light');
}
wglTheme=theme;
}
constmcwModePreferenceCookie='mcw-mode-preference';
letmodePreference='auto';
setModePreference($.cookie(mcwModePreferenceCookie)||'auto');
functionsetModePreference(newPref){
modePreference=['auto','dark','light'].includes(newPref)?newPref:'auto';
$.cookie(mcwModePreferenceCookie,modePreference,{expires:365,path:'/'});
refreshTheme();
}
// Refresh dark/light mode if preference changed
functionrefreshTheme(){
if(modePreference==='auto'){
constdevicePreference=window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';
if(devicePreference!==wglTheme){
setWglTheme(devicePreference);
}
}elseif(modePreference!==wglTheme){
setWglTheme(modePreference);
}
}
if(window.matchMedia){
// refresh dark/light mode when device preference changes
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change',event=>{
refreshTheme();
});
}
functiongetGadget(name,oldCookieName){
if(oldCookieName&&oldCookieName){
constoldCookieValue=$.cookie(oldCookieName);
letvalue=oldCookieValue==='true'?true:oldCookieValue==='false'?false:undefined;
if(value){
setGadget(name,value);
returnvalue;
}
}
returnmw.user.isAnon()?$.cookie(`mcw-gadget-${name}`)==='true':mw.user.options.get(`gadget-${name}`);
}
functionsetGadget(name,value){
// Only update preferences when they got actually changed
// Loosely equal used because the option might be a string
if(mw.user.options.get(`gadget-${name}`)!=value?1:0){
mw.user.options.set(`gadget-${name}`,value?1:0);
if(mw.user.isAnon()){
$.cookie(`mcw-gadget-${name}`,value,{expires:365,path:'/'});
}else{
newmw.Api().saveOption(`gadget-${name}`,value?1:0).fail(function(){
mw.user.options.set(`gadget-${name}`,value?0:1);
mw.notify(i18nLang.gadgetFailedToast,{
title:i18nLang.gadgetFailedToastTitle,
type:'warn',
tag:'themeSelector'
});
});
}
}
if(value){
mw.loader.using([`ext.gadget.${name}`]);
}
}
letwidth=getGadget('widthFixed','fixedWidth')?'fixed':getGadget('widthMedium')?'medium':'full';
setWidth(width);
functionsetWidth(newWidth){
for(constwofObject.keys(widths)){
if(widths[w].gadget){
setGadget(widths[w].gadget,w===newWidth);
}
}
document.documentElement.style.setProperty('--mcw-width',widths[newWidth].cssWidth||'100vw');
width=newWidth;
$(window).trigger('resize');
setTimeout(()=>$(window).trigger('resize'),500);
}
constisMobile=mw.config.get('wgMFMode')!==null;
if(isMobile){
addMinervaThemeToggle();
}else{
addVectorThemeToggle();
}
lettheme='default';
(()=>{
theme=getTheme();
updateTheme();
})();
functiongetTheme(){
for(consttofObject.keys(themes)){
if(themes[t].gadget&&getGadget(themes[t].gadget)){
returnt;
}
}
return'default';
}
functionsetTheme(newTheme){
theme=newTheme;
updateTheme();
}
functionupdateTheme(){
for(consttofObject.keys(themes)){
if(t!=='default'){
constthemeEnabled=t===theme;
if(themes[t].gadget){
setGadget(themes[t].gadget,themeEnabled);
}
$('body').toggleClass(`mcw-theme-disable-${t}`,!themeEnabled);
}
}
}
functionaddMinervaThemeToggle(){
constportletLink=mw.util.addPortletLink(
'p-navigation',
'',
i18nLang[modes[modePreference].title],
'pt-mode-selector',
i18nLang[modes[modePreference].title],
null,
$('#pt-userpage, #pt-anonuserpage, #pt-createaccount')[0]
);
$(portletLink).find('a').click(function(e){
e.preventDefault();
// TODO set and update icon
letnewModePref=modes[modePreference].nextPref;
setModePreference(newModePref);
$('#pt-mode-selector a').attr('title',i18nLang[modes[newModePref].title]);
$('#pt-mode-selector .toggle-list-item__label').text(i18nLang[modes[newModePref].title]);
});
}
functionmakeAnonWarning(){
letmessage=newOO.ui.MessageWidget({
type:'warning',
label:i18nLang.anonWarning,
showClose:true,
});
returnmessage.$element.css('margin-bottom','1em');
}
functionaddVectorThemeToggle(){
functionmakeThemeBtn(cls,title,icon,onclick){
return$('<div>').addClass('mcw-theme-btn '+cls).attr('title',title).append(
$('<div>').addClass('mcw-theme-symbol').text(icon)
).click(onclick);
}
$('#p-logo').after(
$('<nav>').attr('id','p-theme').addClass('vector-menu mw-portlet mw-portlet-theme vector-menu-portal portal').append(
$('<div>').addClass('vector-menu-content').append(
$('<div>').addClass('mcw-theme-selector').append(
makeThemeBtn('width',i18nLang[widths[width].title],widths[width].icon,()=>{
letnewWidth=widths[width].nextPref;
setWidth(newWidth);
$('.mcw-theme-btn.width').attr('title',i18nLang[widths[newWidth].title]);
$('.mcw-theme-btn.width .mcw-theme-symbol').text(widths[newWidth].icon);
}),
makeThemeBtn('mode',i18nLang[modes[modePreference].title],modes[modePreference].icon,()=>{
letnewModePref=modes[modePreference].nextPref;
setModePreference(newModePref);
$('.mcw-theme-btn.mode').attr('title',i18nLang[modes[newModePref].title]);
$('.mcw-theme-btn.mode .mcw-theme-symbol').text(modes[newModePref].icon);
}),
makeThemeBtn('settings',i18nLang['themeDialogTitle'],'format_paint',()=>{
windowManager.openWindow('themeDialog');
})
)
)
)
);
}
functionsetupThemeDialog(){
functionThemeDialog(config){
ThemeDialog.super.call(this,config);
}
OO.inheritClass(ThemeDialog,OO.ui.ProcessDialog);
ThemeDialog.static.name='themeDialog';
ThemeDialog.static.title=i18nLang['themeDialogTitle'];
ThemeDialog.static.actions=[
{action:'done',label:i18nLang['themeDialogDone'],flags:['primary','progressive']},
];
ThemeDialog.prototype.getBodyHeight=function(){
return400;
};
ThemeDialog.prototype.getSize=()=>'large';
functionThemeLayout(name,config){
ThemeLayout.super.call(this,name,config);
if(mw.user.isAnon()){
this.$element.append(makeAnonWarning());
}
constradioSelect=newOO.ui.RadioSelectWidget({
items:Object.keys(themes).map((themeName)=>{
returnnewOO.ui.RadioOptionWidget({
data:themeName,
label:`${i18nLang[themeName+'ThemeName']}: ${i18nLang[themeName+'ThemeDesc']}`
});
})
}).on('choose',(option)=>{
console.log('setting theme',option)
setTheme(option.data);
}).selectItemByData(theme);
this.$element.append(radioSelect.$element);
}
OO.inheritClass(ThemeLayout,OO.ui.TabPanelLayout);
ThemeLayout.prototype.setupTabItem=function(){
this.tabItem.setLabel('General');
};
functionSeasonalLayout(name,config){
SeasonalLayout.super.call(this,name,config);
if(mw.user.isAnon()){
this.$element.append(makeAnonWarning());
}
constthemeSelect=newOO.ui.FieldsetLayout({
items:Object.entries(seasonalThemes).map(([themeName,themeData])=>{
returnnewOO.ui.FieldLayout(
newOO.ui.ToggleSwitchWidget({
value:true,// TODO
}),
{
label:`${i18nLang[themeName+'SeasonalThemeName']}: ${i18nLang[themeName+'SeasonalThemeDesc']}`,
align:'left',
}
);
})
});
this.$element.append(themeSelect.$element);
}
OO.inheritClass(SeasonalLayout,OO.ui.TabPanelLayout);
SeasonalLayout.prototype.setupTabItem=function(){
this.tabItem.setLabel('Seasonal');
};
functionNamespaceLayout(name,config){
NamespaceLayout.super.call(this,name,config);
if(mw.user.isAnon()){
this.$element.append(makeAnonWarning());
}
constthemeSelect=newOO.ui.FieldsetLayout({
items:Object.entries(namespaceThemes).map(([themeName,themeData])=>{
returnnewOO.ui.FieldLayout(
newOO.ui.ToggleSwitchWidget({
value:true,// TODO
}),
{
label:`${i18nLang[themeName+'NamespaceThemeName']}`,
align:'left',
}
);
})
});
this.$element.append(themeSelect.$element);
}
OO.inheritClass(NamespaceLayout,OO.ui.TabPanelLayout);
NamespaceLayout.prototype.setupTabItem=function(){
this.tabItem.setLabel('Namespaces');
};
functionCustomizeLayout(name,config){
CustomizeLayout.super.call(this,name,config);
if(mw.user.isAnon()){
this.$element.append(makeAnonWarning());
}
constthemeSelect=newOO.ui.FieldsetLayout({
items:Object.keys(customizationOptions).map((name)=>{
returnnewOO.ui.FieldLayout(
newOO.ui.ToggleSwitchWidget({
value:true,// TODO
}),
{
label:name,
align:'left',
}
);
})
});
this.$element.append(themeSelect.$element);
}
OO.inheritClass(CustomizeLayout,OO.ui.TabPanelLayout);
CustomizeLayout.prototype.setupTabItem=function(){
this.tabItem.setLabel('Customize');
};
ThemeDialog.prototype.initialize=function(){
ThemeDialog.super.prototype.initialize.apply(this,arguments);
this.indexLayout=newOO.ui.IndexLayout();
this.panels=[
newThemeLayout('theme'),
newSeasonalLayout('seasonal'),
newNamespaceLayout('namespace'),
newCustomizeLayout('customize'),
];
this.indexLayout.addTabPanels(this.panels);
this.$body.append(this.indexLayout.$element);
};
ThemeDialog.prototype.getActionProcess=function(action){
if(action==='done'){
returnnewOO.ui.Process(()=>{
this.close({action});
});
}
returnThemeDialog.super.prototype.getActionProcess.call(this,action);
};
dialogFactory.register(ThemeDialog);
$(document.body).append(windowManager.$element);
}
});