ResourceLoader/Core modules

This page intends to list, document, explain and give examples for all the libraries, plugins and scripts present in MediaWiki's /resources by default, as found in the latest development version of MediaWiki ("git master"). This may vary from the stable release version of MediaWiki.

The order of the modules should be kept similar to their definition in Resources.php. And the order of the headings within the modules either by order within the script file or by alphabet (whichever makes sense)

mediaWiki
This is the main JavaScript library. Defined in. Alias  is available everywhere and should be used.

mediaWiki.config

 * For a complete list of configuration values in, check out Manual:Interface/JavaScript.

An instance of the Map class that is global by default for backwards compatibility (in 1.17) and contains the wgVars such as wgSiteName, wgArticleId etc.

mw.config.get( 'wgIsMainPage' )
This variable is true if the current page is an action of the wiki's main page (eg. view, history, edit etc.) and null (inexistent) otherwise.

mediaWiki.html

 * mw.html.escape: Escape a string for HTML. Converts special characters to HTML entities.


 * mw.html.element: Creates an HTML string, with safe escaping.

mediaWiki.message
Returns a new instance of Message. is a shortcut to this with output as a plain string. See Localisation for information about using PLURAL, GENDER, and more advanced message features in JavaScript.


 * key: Key of the message
 * parameter_1: (optional) this argument and any later ones will be passed to the Message constructor as the parameter array (to do replaces for $1, $2 etc.)

mediaWiki.msg
This is a shortcut for creating an instance of Message via  and returning

mediaWiki.loader
"" "" Note: mediaWiki.loader do not accept relative urls (see bug 34036) and differently from jQuery.getScript, it doesn't support callback functions (bug 25962).
 * mw.loader.addSource  Keep track of origin in the client-side registry of ResourceLoader by adding an internal source id (lowercase a-z string, first parameter) for a given given loadscript property (second parameter). The internal registry will have an origin-key for each module (just like it has for groups). The execute-function will use the right loader-script as needed. And split up requests per module source.
 * mw.loader.getModuleNames
 * mw.loader.getState
 * mw.loader.getVersion</tt>
 * mw.loader.go</tt> No longer needed, mw.loader.load</tt> takes an array to load multiple modules in one request.
 * mw.loader.implement</tt>
 * mw.loader.load</tt> is the loader for modules and other sources. It can be called with one or more modules by name. It can also load an external script or style URI beginning with either "http://", "https://" or "//" and a mime-type in the second argument (either "text/css" or "text/javascript"). If no mime-type is provided, "text/javascript" is assumed. mw.loader.load creates an asynchronous request, so if you need to run code that depends on a module, use mw.loader.using instead. If you want to load another script use jquery.getScript.

""
 * mw.loader.register</tt>
 * mw.loader.state</tt>
 * mw.loader.using</tt> can be called with two or three arguments (dependencies, function to execute when modules are successfully loaded, function on error). The error function takes two arguments, the error, and an array of dependencies that caused it.(?).
 * mw.loader.version</tt> Use mw.loader.getVersion</tt>.
 * mw.loader.work</tt>

mediaWiki.Map
A reusable class to store, get and set a set of variables. The core uses this for  and

When making an instance the function takes one parameter which affects whether the set will be made globally available (ie. as items of ) or local. By default this is false (not global) and will thus not not overwrite any global variables with the same name.


 * .values</tt>: An object containing all the variables. If 'global' was true during initialization, this is an alias to the  object.
 * .exists(key)</tt>: Function returns true if an entry with the key(s) exists, false otherwise
 * .get(key, fallback)</tt>: Returns the value of the key(s) or (optionally) the value of the second argument if the key does not exist (returns null if it doesn't exist and no fallback was provided)
 * .set(key, value)</tt>: Creates / Modifies one or multiple values

Examples

Address Book example

anonymous
Since version 1.20, use mw.user.isAnon instead.

getName
Function returns the username if the user is logged in, or null if anonymous (logged out).

id
Function returns the username if the user is logged in; if the user is anonymous, it tries to read the id from the cookie named mediaWiki.user.id</tt>. If no such cookie exists, a new random 32-character alphanumeric string is created, stored in the cookie, and returned to caller.

isAnon
Function returns boolean indicating whether the user is anonymous (true) or logged in (false).

name
Since version 1.20, use mw.user.getName instead.

options
Contains the preferences of the user, or the defaults when logged out. (<tt>mw.user.options</tt> is an instance of the mw.Map constructor)

sessionId
When called for the first time generates a sessionId and sets a domain-wide cookie and returns the sessionId. When it's set already (ie. after calling it, or when it was set earlier this session on another page) returns just the sessionId.

tokens
Is pre-populated with api tokens. Currently editToken and watchToken

See a live example from the mediawiki.api.watch.js module.

mediaWiki.log
Do not add this as a dependency. Rather, it is automatically loaded (only) in debug-mode (can be enabled with debug=true in the URL) and is an alternative to calling console.log which would cause errors in browsers that don't have a console or don't have it enabled.

mw.log
Calling this either pushes the messages to console if its available and have a logging facility, or adds it to an #mw-log-console if not (the element is created on the first call) Note that different browsers and extensions may enable or disable different consoles and different logging facilities, and that they may or may not be visible even if they are used for logging purposes.

addCSS
Adds a  element to the HEAD and returns the CSSStyleSheet object.

The CSSStyleSheet object can be used to disable the css rules at any later time and re-enable them as well. This can be done through the 'disabled' attribute. When setting this to true, the rules no longer apply. When setting to false, the rules apply again.

See also W3 on CSSStyleSheet for more info.

addPortletLink
This function is ported from the legacy wikibits keeping it fully backwards compatible, with a few adjustments that support all core skins and with added support for a CSS-selector as.

Only the first three arguments are required.

In case you need to execute a custom function when the user clicks on a portlet, do not use ' ' for the href of the portlet. Instead, use the jQuery(...).click to specify the code which should be executed.

$content
A jQuery object for a page's overall content area regardless of the skin used. This is, for example,  in the Vector-skin (before 1.20 it was  ). This variable is initialized from the  module. Make sure to either add it to your dependencies or wrap it inline in

This does not refer to the area where the page content goes. If you wish to work with that area of the page instead of the overall content area you should use  instead.

Here is a more advanced example involving loading in extra content with an AJAX request. Run this example on a page other than the main page.

getParamValue
This function returns the value of the specified URL parameter. By default it uses the current window's address. Optionally you can pass it a custom location.

It returns  if the parameter is not present. Returns an empty string if it was an empty parameter (such as

jsMessage
This function is ported from the legacy wikibits keeping it fully backwards compatible, with a few adjustments and with added support to hide the message by calling with no arguments or when passing null.

rawurlencode
This function returns an encoded string in its raw form for use in urls.

For building query strings, you may want to use jQuery.param instead:

validateEmail
Returns true if its string parameter is a valid e-mail address according to HTML5 specification, false if not, and null if passed an empty string.

wikiUrlencode
This function returns an "pretty" version of a URL encoded wiki page name. It keeps slashes and colons unencoded. The same way  encodes page names for usage in urls in PHP. If

wikiGetlink
This function returns the address to a local wiki page.

wikiScript
This function returns the location of a script on the current wiki. Much like  in GlobalFunctions.php.

Parameters: <tt>str</tt> - Name of the script (eg. 'api'), defaults to 'index'.

mediaWiki.Api
The  module (and its plugins) return a promise. This is just like  (and its derivatives such as ,   and  ).

A promise provides three important methods that can be used to register a callback:,   and. In general you should always either have the first two or the latter.

The base  plugin provides two methods that take a raw API query:
 * api.get
 * api.post
 * List of plugins

There are various plugins for this module that make it more convenient to use certain API actions actions by abstracting the input and output. An example for :

api.post
Like, takes a raw API query, but prepares   internally for a POST request instead.

api.ajax
This is the base method from which all others are derived. Should not be used directly.

mediaWiki.Title
Basic example

mediaWiki.Uri
Basic examples

jQuery
More information about jQuery's presence in MediaWiki, see jQuery. For more about jQuery in general and all its core functions, refer to http://api.jquery.com/

jQuery.async

 * Plugin documentation

jQuery.badge
This is a JQuery module that allows you to put a red "badge" on an item on the page. 'Badge' in this case should be considered a verb rather than a noun, as the function returns the parent, not the badge itself.

Usage

 * <tt>text</tt> can be a number or a string. If the value is falsey (0, null, false, '', etc.), any existing badge will be removed.
 * <tt>inline</tt> determines whether or not to display the badge inline. The default is to overlay the badge over the corner of the parent element. Set this parameter to true to display the badge inline instead.

jQuery.checkboxShiftClick
This single-function plugin can be called to add this functionality to any number of checkboxes. By default (onload) it's applied to all  elements that have a type of checkbox, excluding any with a class of 'noshiftselect'. As it has a built-in prevention to avoid binding the CheckboxShiftClick twice to the same element you can simply run the line below under "Default" again at any time if you want to enable dynamically added checkboxes in the page to be shift-selectable as well. Or alternatively run it on the specific selector of choise (see second example below).

jQuery.client
A plugin that extracts information about the client's browser, layout engine and operating system. Use this instead of jQuery.browser, which is deprecated and will be removed from jQuery in the near future.

Profile
The profile function is the main function here and returns (and caches) all the information in an object in. All possible values (except for version numbers) are predefined. A typical return looks like this:

Here a few examples Check jquery.client.js for possible values of browser names, layout engines and platforms.

Test
...

jQuery.collapsibleTabs
Used by the Vector extension.

jQuery.colorUtil

 * getRGB
 * colors
 * rgbToHsl
 * hslToRgb
 * getColorBrightness

jQuery.cookie
This plugin allows you to set, get and delete cookies.

When deleting a cookie, you must use the same path and domain used when the cookie was set.

jQuery.json
Provides JSON encoding to old browsers which do not support JSON.stringify:

jquery.jStorage
Project home page

jQuery.makeCollapsible

 * See also Manual:Collapsible elements.

Plugin makes all passed elements collapsible. It supports lots of variations such as:
 * Simple: Add " " to an element (a for example) with some content and save the page. The inner content of this element will be treated as collapsible content. Prepended to the element, before the collapsible content, is a toggle-link with a localized label (collapsible-expand, collapsible-collapse)
 * Initial state: Adding '" '" as additional class will cause the element to be initially collapsed when the page is loaded.
 * Custom label:HTML5 only Using the <tt>data-collapsetext</tt> and <tt>data-expandtext</tt> attributes one can define a custom text for the toggle labels added by the script. When added in wikitext these could populated by a localized message like:


 * Remote toggle: If you don't want the script to put the default toggle link (wether or not with a custom label) in your element, you can make one of your own. This could reside anywhere inside or outside the collapsible element. It's relationship to the collapsible element is detected by using the prefix  and   for the collapsible element and the togglelink respectively.

Example: Simple collapsible div or table

Input:

Output:

This is text is collapsible.

Example: Hide the collapsible element by default, the toggle element resides outside of it

For other live examples, see Test Wikipedia - Collapsing Testpage.

jQuery.placeholder
This plugin adds support for placeholder texts in input fields for browsers that don't support the HTML5 attribute yet. If the attribute is not supported it's applied to all input elements with a 'placeholder' attribute, on-load.

It has a built-in check for browser support, but for efficiency it's best to do this check (also) wrapped around to call.

jQuery QUnit
Testing framework. See http://qunitjs.com.

jQuery QUnit CompletenessTest
Assesses the completeness (coverage) of test suites for object oriented javascript libraries. Written to be used in environments with jQuery and QUnit.

This is also used by MediaWiki core when running the QUnit test suite with the  option enabled.

jQuery.suggestions
There is also jquery.ui.autocomplete.js with similar functionality.

Real world examples: ajaxCategories.js, ext.vector.simpleSearch.js

Example shows suggestions for the summary-line:

jQuery.tipsy
Example page; JQuery project page

jQuery mwExtension
There are several methods added to the jQuery object for older browsers serving as backwards-compatibility for new native prototypes in newer browser. Also several other convenience functions have been created such as isEmpty and escapeRE. In MediaWiki 1.17 and 1.18 these methods were part of the "jquery.mwPrototypes" module. In MediaWiki 1.19 this module was renamed to "jquery.mwExtension" (see 94227).


 * trimLeft: Trims whitespace from the left side of the string
 * trimRight: Trims whitespace from the right of the string
 * ucFirst: Returns the string with the first character capitalized
 * escapeRE: Returns a string for literal use in a regular expressions by escaping characters that have a special meaning in a regex.
 * byteLength: Return the size of a string in bytes. will be greater than string.length for multibyte strings. available since ??
 * isDomElement: Check whether a passed a variable is a direct link to an element.
 * isEmpty: This function checks if a variable is empty. Supports strings, booleans, arrays and objects. The string "0" is considered empty. A string containing only whitespace (ie. " ") is considered not empty.
 * compareArray: Compares two arrays and returns a boolean for whether they are in fact the same
 * compareObject: Compares two objects for it's properties and values (recursive)

jQuery UI
For more information on and demos for jQuery UI, refer to http://jqueryui.com/

The following components are included:
 * jquery.ui.accordion.js
 * jquery.ui.autocomplete.js
 * jquery.ui.button.js
 * jquery.ui.core.js
 * jquery.ui.datepicker.js
 * jquery.ui.dialog.js
 * jquery.ui.draggable.js
 * jquery.ui.droppable.js
 * jquery.ui.mouse.js
 * jquery.ui.position.js
 * jquery.ui.progressbar.js
 * jquery.ui.resizable.js
 * jquery.ui.selectable.js
 * jquery.ui.slider.js
 * jquery.ui.sortable.js
 * jquery.ui.tabs.js
 * jquery.ui.widget.js