JavaScript Cookbook

== For script developers ==
If you use JavaScript on Fandom a lot, you'll find yourself using the same functions again and again. Let's make a collection of those functions you copy-paste from project to message wall to forum post to project and back.
=== Variables ===
==== Caching API ====
Caches a reference to an mw.Api object instance. For more info, see MediaWiki documentation.
var api = new mw.Api();
==== Caching configuration ====
Caches configuration variables.
var config = mw.config.get([
 'wgAction',
 'wgArticlePath',
 'wgCanonicalSpecialPageName',
 'wgPagename',
 'wgTitle',
 'wgSiteName'
]);
=== Colors ===
==== Determine brightness ====
Determines whether a color is bright. Can be used to find out if a fore or background color is bright or dark. That enables you to pick a high-contrast color for back- or foreground.
When supplied the color parameter in a RGB or hexadecimal format returns a boolean representing whether the supplied color is bright.
function isBright(color) {
 var m = color.match(/(?:([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2}))|(?:(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3}))/);
 if (!m) return false;
 var rgb = m[1] ? { r: parseInt(m[1], 16), g: parseInt(m[2], 16), b: parseInt(m[3], 16) }
 : { r: parseInt(m[4], 10), g: parseInt(m[5], 10), b: parseInt(m[6], 10) };
 return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000 >= 128;
}
==== Get background color ====
Determines the article area's background color and returns it as a string in the format of a CSS color value.
function getBackgroundColor() {
 return getComputedStyle(document.body).getPropertyValue('--theme-page-background-color');
}
=== Elements ===
==== Add an HTML element to the page content ====
Adds a HTML element to the end of the page content:
Tip: You can replace 'mw-content-text' with the ID of the desired element on the page.
=== Input ===
==== Input box ====
The following adds a input box to the end of the page 'Example Page':
Tip: You can replace 'mw-content-text' with the ID of the desired element on the page.
=== Execution ===
==== After DOM ====
Runs the code once the DOM has finished loading, using a jQuery ready callback.
==== After MW API ====
Runs the code once the MediaWiki API JavaScript library has finished loading.
==== After MW utilities ====
Runs the code once the MediaWiki utilities JavaScript library has finished loading.
==== After MW API and utilities ====
Runs the code once the MediaWiki API and Utilities libraries have finished loading.
==== After content ====
Runs the code when wiki content is being added to the DOM. This includes the ready event on a page load (including post-edit loads) and when content has been previewed.
== For users ==
=== Adding target titles to redlinks ===
Wiki links have a their target page stored in the title attribute, which on many browsers is displayed as a tooltip when hovering over the link. The following snippet (by HumansCanWinElves) adds such titles to redlinks too.
mw.loader.using('mediawiki.Uri').then(function() {
 $('.main-container').on('mouseover', 'a.new:not([title])[href]', function() {
 var regExp = /(?<=\/wiki\/)([^?]+)(?=(\?.+)?)/,
 match = regExp.exec($(this).attr('href')),
 title;
 if (match) {
 title = mw.Uri.decode(match[0]).replace(/_/g, ' ');
 $(this).attr('title', title);
 }
 }); 
});
=== Using a different theme for a certain wiki ===
Special:Preferences allows choosing between light or dark theme, but the selection is network-wide, with the only dynamic option to defer to the theme defined as the default one by the admins of each wiki. Sometimes you want to use different themes for different wikis based on your own choosing.
Some notes:
* This should have been mostly possible by just CSS, if the built-in theme stylesheets weren't being weirdly added below the user stylesheets. As it is now, JavaScript is required, with the cost of a little delay on each page load when the default theme is displayed until the new theme takes over.
* The script ThemeSelector already allows presetting a theme for a certain wiki, but the need to import the script makes the delay longer and therefore more annoying, so putting some code directly on your JS page may be preferrable.
* As other customizations, it wouldn't work on the Discussions area.
To switch to dark theme on a certain wiki, add the following code to your local personal Special:Mypage/common.js page on that wiki (expand to see the code):
(function setDarkTheme() {
	var themeSheet1 = document.createElement('link'),
	 themeSheet2 = document.createElement('link');
 themeSheet1.rel = 'stylesheet';
 themeSheet2.href = '/wikia.php?controller=ThemeApi&method=themeVariables&variant=dark';
 themeSheet2.rel = 'stylesheet';
 themeSheet2.href = '/load.php?fandomdesktop=1&lang=en&modules=' +
	 	'ext.fandom.GlobalComponents.GlobalComponentsTheme.dark.css%7C' +
	 	'ext.fandom.GlobalComponents.GlobalNavigationTheme.dark.css' +
	 	'&only=styles&skin=fandomdesktop';
	document.head.appendChild(themeSheet1);
	document.head.appendChild(themeSheet2);
	document.body.classList.remove('theme-fandomdesktop-light');
	document.body.classList.add('theme-fandomdesktop-dark');
	mw.config.set('isDarkTheme', true);
})();
To switch to light theme on a certain wiki, add the following code to your local personal Special:Mypage/common.js page on that wiki (expand to see the code):
(function setLightTheme() {
	var themeSheet1 = document.createElement('link'),
	 themeSheet2 = document.createElement('link');
 themeSheet1.rel = 'stylesheet';
 themeSheet2.href = '/wikia.php?controller=ThemeApi&method=themeVariables&variant=light';
 themeSheet2.rel = 'stylesheet';
 themeSheet2.href = '/load.php?fandomdesktop=1&lang=en&modules=' +
	 	'ext.fandom.GlobalComponents.GlobalComponentsTheme.light.css%7C' +
	 	'ext.fandom.GlobalComponents.GlobalNavigationTheme.light.css' +
	 	'&only=styles&skin=fandomdesktop';
	document.head.appendChild(themeSheet1);
	document.head.appendChild(themeSheet2);
	document.body.classList.remove('theme-fandomdesktop-dark');
	document.body.classList.add('theme-fandomdesktop-light');
	mw.config.set('isDarkTheme', false);
})();
Alternatively, add the following code to your global JS page and put the wikis you want to change the theme for in the lines that begin with case:, replacing the example wikis (expand to see the code):
Category:JavaScript