FANDOM


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.

Variables

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

Elements

Add an html element to the page content

Adds a Html element to the end of the page content:

var element = document.createElement("p"); //"p" is the type of element that will be created
element.style = "color:blue"; //to modify attributes to the element that will be created, just type element.(attribute you want to modify) = "whatever value"
element.contentText = "Paragraph text";//this sets the innerHTML of the element that will be created to "Paragraph text"
document.getElementById('mw-content-text').appendChild(para);//this adds the element to the page content

Input

Input Box

The following adds a input box to the end of the page 'Example Page':

if(mw.config.get('Example_Page')){
  //if the page currently loaded on the wiki is named 'Example Page' this code will be ran
  var inputBox = document.createElement("div");//create the a div element that will store the input box
  var input = document.createElement("input");//create a input element that will get the input entered
  input.id = "input";//set the id to the input element to "input"
  input.style.display = "inline-block";//set the style.display to "inline-block" so it will all be in one line
  var textParagraph = document.createElement("p");//create a text paragraph
  textParagraph.innerHTML = "times two is: ";//set the default text to the paragraph
  textParagraph.style.display="inline-block";//set the style.display to "inline-block" so it will all be in one line
  textParagraph.id = "textParagraph";//set the id to the textParagraph element to "textParagraph"
  var newLine = document.createElement("br");//create a br element to start a new line
  var getAnswer = document.createElement("button");//create the check button
  getAnswer.innerHTML = "Check";//set the text on the button to "Check"
  getAnswer.addEventListener("click", function(){
  document.getElementById("textParagraph").innerHTML= "times two is: "+document.getElementById("input").value*2;
  });//add a event listener to the button that will set the text to the textParagraph element to "times two is: (whatever it is)" when it is clicked 
  inputBox.appendChild(textParpendChild(input);//add the input element to the input box
  inputBox.appendChild(textParagraph);//add the textParagraph element to the input box
  inputBox.appendChild(newLine);//add the new line element to the input box
  inputBox.appendChild(getAnswer);//add the getAnswer button element to the input box
  document.getElementById("mw-content-text").appendChild(inputBox);//add the input box to the main page content
}

Execution

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('dev.chat.render').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

Community content is available under CC-BY-SA unless otherwise noted.