If you use JavaScript at 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.


Caching api

Caches a reference to an mw.Api object instance. For more info, see MediaWiki documentation.

var api = new mw.Api();

Caching config

Caches configuration variables.

var config = mw.config.get([


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() {
    var bgColor = $('#WikiaPageBackground').css('background-color');
    if (bgColor === 'transparent') {
        bgColor = $('#WikiaPage').css('background-color');
    if (bgColor === 'transparent') {
        bgColor = $('#EditPageHeader').css('background-color');
    return bgColor;


After DOM

Runs the code once the DOM has finished loading, using a jQuery ready callback.

$(function() {
    // code to run

After MW API

Runs the code once the MediaWiki API JavaScript library has finished loading.

mw.loader.using('mediawiki.api', function() {
    // code to run

After MW Utilities

Runs the code once the MediaWiki Utilities JavaScript Library has finished loading.

mw.loader.using('mediawiki.util', function() {
    // code to run

After MW API and Utilities

Runs the code once the MediaWiki API and Utilities libraries have finished loading.

mw.loader.using(['mediawiki.util', 'mediawiki.api'], function() {
    // code to run

After Chat

Runs the code once the chat has finished loading

mw.hook('').add(function(mainRoom) {
    // code goes here
importArticle({ type: 'script', article: 'u:dev:Chat-js.js' });

After content

Runs the code once the contents inside mw.util.$content (DOM element containing the actual article) are loaded.

mw.hook("wikipage.content").add(function() {
    // code to run

Start a Discussion Discussions about JavaScript Cookbook