MediaWiki:Common.js
Style changes not showing up
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.
Documentation [ view ] [ talk ]
Overview
MediaWiki:Common.js is our main javascript that loads for every page. It's main purpose is to conditionally load other JavaScript modules based on the presence of specific CSS selectors on the current page. This was not done for performance, but to assure modularity and to keep scripts to their singular purpose. This solution is a temporary workaround until an upcoming module from wiki.gg automates this process.
This tactic was stolen, I mean inspired... Okay, it was copied over wholesale from the Ark Community Wiki Common.js and got ONI branding slapped on. It was written by Alex4401 who is a wiki.gg staffer, and can be contacted on the wiki.gg official Discord.
How it works
The ONI_ConditionalModules array contains objects that specify the CSS selector to check (sel) and the corresponding JavaScript pages to load (pages).
The ONI_ImportArticles function imports scripts with support for English and other languages. It strips the "en:" prefix for the English wiki or prepends "u:" for translations.
Conditionally Loaded Modules
The following Scripts are loaded conditionally:
- Tabber Building.js
- Tabber Overlay.js
- Calculator Metal Volcano Tamer.js
- Tooltip.js
- Tooltip Element.js
Javascript
/* Any JavaScript here will be loaded for all users on every page load. */
/*
Conditional Javascript Module loader
Author: Alex4401
Original: https://ark.wiki.gg/wiki/MediaWiki:Common.js
*/
// #id or .class dependant conditionally loaded modules
// Extracted into global scope, so translation wikis or gadgets can insert their own if needed in future.
window.ONI_ConditionalModules = (window.ONI_ConditionalModules||[]).concat( [
{ sel: '#tabber-buildings', pages: ['en:MediaWiki:Tabber_Building.js'] },
{ sel: '.tabber-overlay', pages: ['en:MediaWiki:Tabber_Overlay.js'] },
{ sel: '#metal_volcano_tamer', pages: ['en:MediaWiki:Calculator_Metal_Volcano_Tamer.js'] },
{ sel: '#oni-yaml2lua-elements', pages: ['en:MediaWiki:YAML2Lua_Elements.js']},
{ sel: '#oni-yaml2lua-strings', pages: ['en:MediaWiki:YAML2Lua_Strings.js']},
{ sel: '.filtertable', pages: ['en:MediaWiki:Filtertable.js']},
{ sel: '.geysertable', pages: ['en:MediaWiki:Geysertable.js']},
{ sel: '.druid-infobox', pages: ['en:MediaWiki:DRUID.js']}
] );
// #region importArticles with transparent EN interwiki support
// Strip "en:" prefix on EN wiki, or prepend "u:" on translations
window.ONI_IsEnglishWiki = mw.config.get('wgContentLanguage') == 'en';
window.ONI_ImportArticles = function ( articles ) {
var mLocal = [], mGlobal = [];
articles.forEach( function ( item ) {
if ( item.startsWith( 'en:' ) ) {
mGlobal.push( item.slice( 3 ) );
} else {
mLocal.push( item );
}
} );
if ( ONI_IsEnglishWiki ) {
mLocal = mLocal.concat( mGlobal );
mGlobal.length = 0;
}
// Load global modules
if ( mGlobal.length ) {
mw.loader.load( '/load.php?lang=en&modules=' + encodeURIComponent( mGlobal.join( '|' ) ) +
'&skin=vector&version=ztntf' + ( mw.config.get( 'debug' ) ? '&debug=1' : '' ) );
}
// Load local modules
if ( mLocal.length ) {
// Race warning: the ImportArticles extension script might be loaded after our script. Require it before executing the call.
mw.loader.using( 'ext.importarticles', function () {
importArticles( { type: 'script', articles: mLocal } );
} );
}
};
window.ONI_UsingArticles = function( articles, callback ) {
return mw.loader.using( articles.map( function ( item ) {
return item.startsWith( 'en:' ) ? item.slice( 3 ) : item;
} ), callback );
};
// #end Conditional Javascript Module loader
/* Large image recognizer */
// This recognizes images larger than 700px in width which have the potential to
// to grow wider than the screen (especially on mobile), and hands out the
// "large-image" class, so it can be handled with css
$('img[width]').each(function() {
if (parseInt($(this).attr('data-file-width'), 10) > 700)
$(this).addClass('large-image');
});
/* Implement */
$(function() {
ONI_ConditionalModules.forEach( function ( req ) {
if ( ( req.cond == null || req.cond ) &&
document.querySelectorAll( typeof( req.sel ) === 'string' ? req.sel : req.sel.join( ', ' ) ).length > 0 ) {
ONI_ImportArticles( req.pages );
}
} );
});