ResourceLoader/Core modules

This page lists modules that ship with MediaWiki core by default. It reflects the current development version of MediaWiki and may vary from the latest stable release.

The order of the modules should be kept similar to.

The modules  and   together form the base environment ("startup") and are always present. They should not (and in fact, can not) be loaded as modules or dependencies. is what provides the loader client itself. jQuery and the other base utilities provided by  are internal dependencies of the ResourceLoader client.

mediawiki

 * API Documentation

This is the MediaWiki base module. It initialises the  global object.

mw.config
For a complete list of configuration values in, check out Manual:Interface/JavaScript. By default, keys here are also reflected as global variables for backwards compatibility (since MediaWiki 1.17). A console message will be shown when the global variables are used, as they are deprecated. The keys are identical to the variables beginning in, such as  ,   etc.
 * API Documentation

mw.hook
A framework for registering and firing events in JavaScript (as opposed to doing everything on document ready). For example, the snippet below provides a message once the categories on a page load:
 * API Documentation

mw.html
Helper functions for escaping and creating strings of HTML.
 * API Documentation

mw.loader

 * API Documentation

mw.loader.load
Load one or more modules, a script or a stylesheet. To load an external script or stylesheet, the URL must start with either " ", " " or " " (protocol-relative), or " " (local path). Provide a MIME-type as second parameter (either " " or " "). If no MIME-type is provided, the default " " is assumed. creates an asynchronous request, if you need to run code that depends on a module, use mw.loader.using instead (which provides a callback). If you need a callback from an external script, use mw.loader.getScript (or ).

Loader instructions represent the intent that a module by that name should be loaded. It will not load the same module a second time if has already been loaded previously. This does not apply to scripts and stylesheets – they will be loaded each time, even if loaded previously. If a script defines, you can use   to check if that script has already been loaded.

mw.loader.using
Loads modules and then executes a callback function. You may call  with two or three arguments: dependencies, a callback function to execute when modules are successfully loaded, and a callback function to execute on error. Or you can call it with one argument and use a jQuery promise object returned by this function (since MediaWiki 1.23) to specify callbacks.

Only modules and local gadgets can be loaded by calling. Trying to load other scripts or stylesheets will result in an "Unknown dependency" error. If you need a callback from another script, use mw.loader.getScript instead.

mw.loader.getScript
Load a script by URL. Returns a jQuery promise object which can be used to specify callbacks.

Example: To get a single callback from multiple promises, use  or Promise.all

mw.loader.inspect
Lazy-loads the  module and executes its main method.

Shows an ordered list of all ResourceLoader modules that are loaded on the page, sorted by the total size of each module's JavaScript, CSS, Mustache templates, and string assets. Can show CSS usage individually using.

In MediaWiki 1.32 this function has been renamed to.

mw.log
Collection of methods to help log messages to the console.
 * API Documentation

mw.message

 * API Documentation
 * ''See also Manual:Messages API

If the  module is loaded, the behaviour of this module changes significantly. See above link.

mw.now
Get the current time, measured in milliseconds since January 1, 1970 (UTC).

On browsers that implement the Navigation Timing API, this function will produce floating-point values with microsecond precision that are guaranteed to be monotonic. On all other browsers, it will fall back to using.

mw.track
Track an analytic event.

This method provides a generic means for MediaWiki JavaScript code to capture state information for analysis. Each logged event specifies a string topic name that describes the kind of event that it is. Topic names consist of dot-separated path components, arranged from most general to most specific. Each path component should have a clear and well-defined purpose. Data handlers are registered via `mw.trackSubscribe`, and receive the full set of events that match their subscription, including those that fired before the handler was bound.

The WikimediaEvents extension demonstrates how to add a subscriber for the "timing" and "counter" topics (example).

mediawiki.user

 * API Documentation

Module that represents information about the current user.

mw.user.options
Contains the preferences of the user, or the defaults when logged out.

This module is loaded asynchronously and may depend on a separate HTTP request for the  module. Always declare the relevant dependencies for your module, or use.

mw.user.tokens
Is pre-populated with api tokens. Currently editToken, watchToken, and patrolToken.

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

mediawiki.api

 * API Documentation

This module provides the  constructor. The main methods of the  object are ,  , and. The  module (and its plugins) return a  – similar to   (and its derivatives such as ,   and  ).

Before MediaWiki 1.32, the methods were part of separate modules named under. These have been merged into the main module, so you only have to depend on that module. The submodules have been deprecated with warnings. These submodules have been removed in MediaWiki 1.33.

Examples of methods that are available:


 * - Edit an existing page.
 * - Changes one or more user preferences.
 * - Add a given title (or titles) to the user's watchlist.

Browse mw.Api Documentation

mediawiki.cookie

 * API Documentation

Cookie module that follows most of MediaWiki's cookie settings (except ). Simple examples:

This module prepends the cookie names with  (e.g. "enwikiname=value"). If you use this module only you shouldn't encounter issues, but you might do if you mix it with other cookie handling codes.

See the API documentation for available options.

mediawiki.debug

 * API Documentation

mediawiki.feedback

 * API Documentation

User interface for collecting feedback, particularly on new features. This sets the  constructor. Example:

mw.Feedback.setup
Sets up feedback GUI.

mw.Feedback.display
Displays a particular part of the feedback interface.

mw.Feedback.displaySubmitting
Shows that the feedback is being added.

mw.Feedback.displayBugs
Shows information about bug tracker

mw.Feedback.displayThanks
Shows thank you message.

mw.Feedback.displayForm
Displays the feedback form, with optional pre-filled contents.

mw.Feedback.displayError
Shows given error message.

mw.Feedback.cancel
Dismisses feedback form.

mw.Feedback.submit
Submits feedback form using.

mw.Feedback.launch
Main entry point for displaying the feedback form, with optional pre-filled contents.

mediawiki.inspect

 * API Documentation

The  function lazy-loads this module and executes its main method.

mediawiki.jqueryMsg

 * See also Manual:Messages API
 * See also Manual:Messages API

This module sets the  object. This is used for advanced message parsing. Use it only when  does not meet your needs. For example,  is required for plural and gender support, the int: magic word and links.

mediawiki.notify
Creates bubble notifications. Basic examples:
 * (entry point)
 * (main code)

mediawiki.storage
Wrapper for HTML5 Web Storage.

If you need to replace, be aware   saves only string values, so you must additonal use something like   and   or  /.

mediawiki.ui


Please use OOUI instead.

UI module developed as part of the Agora project. It defines  CSS styles. It is used in the Login and Create account forms and several extensions. It provides one appearance for Vector and another for the rest of the skins.

mediawiki.widgets

 * API documentation

mediawiki.util

 * API Documentation

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 use the jQuery(...).on('click', .. ) on returned Element object to attach a callback that runs the code that should be executed.

See the for details.

$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 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.

This property is populated on document ready. To use it, wait for  and be sure to have a module dependency on   which will ensure your document ready handler fires after initialization.

Because of the lazy-initialised nature of this property, you are discouraged from using it.

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

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

jsMessage
Use  instead.

This function was ported from the legacy wikibits module, with full backwards compatibility, with a few improvements and with added support for hiding pre-existing messages by calling the method without arguments (or 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 a "pretty" version of a URL encoded wiki page name. It keeps slashes and colons unencoded. The behavior differs from  on the PHP side.

wikiGetlink
Use  instead.

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

Parameters:  - Name of the script (eg. 'api'), defaults to 'index'.

mw.RegExp.escape
Returns a string for literal use in a regular expressions by escaping characters that have a special meaning in a regex.

mediawiki.Title

 * API Documentation

This sets the  constructor, which has several methods in its prototype. Basic example:

mediawiki.Uri
Basic examples:
 * API Documentation

oojs

 * API Documentation

OOjs is an API module which provides a consistent way of implementing object-oriented design in JS.

oojs-ui

 * API Documentation

OOUI uses OOjs to implement a UI toolkit. is the legacy name for the module.

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/

ResourceLoader provides jQuery as part of its base environment (the loader client uses jQuery internally), therefore this module is always loaded and should not (and in fact can not) be loaded through ResourceLoader (as dependency or otherwise).

jquery.accessKeyLabel

 * API Documentation

jquery.async

 * Plugin documentation
 * Plugin documentation

jquery.badge
(T178450)

The code is still available at https://github.com/wikimedia/jquery-badge. Also, some wikis have it hacked in as a gadget, such as Wikimedia Commons.

This is a jQuery module that allows you to put a red notification "badge" on an item on the page.

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 choice (see second example below).

jquery.chosen
“Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly.” — harvesthq.github.io

In fact, it turns a select into a combo box with autocomplete functionality by default but also supports grouping, and "tagging" (i.e. multiple values).

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.

jQuery.client.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 for possible values of browser names, layout engines and platforms.

jQuery.client.test
...

jquery.collapsibleTabs
Used by the Vector extension.

jquery.colorUtil

 * getRGB
 * colors
 * rgbToHsl
 * hslToRgb
 * getColorBrightness
 * getColorBrightness

jquery.cookie
You can use jquery.cookie or you can use  instead in new code, since it takes into account MediaWiki's cookie configuration settings for you.

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.

Note that when MediaWiki server-side code sets a cookie it usually prefixes it with the database name; this prefix is available to JavaScript code as the  variable.

Note that users will likely get separate cookies for  and   paths in page URLs if you do not specify the extra option   when setting a cookie.

jquery.json
Provides JSON encoding to old browsers which do not support. Deprecated since MediaWiki 1.24. Removed in MediaWiki 1.25, use the "json" module instead (which lazy-loads the json2.js polyfill).
 * Plugin documentation

jquery.jStorage
Please use.
 * Project home page (archive link) - Project on GitHub
 * Project home page (archive link) - Project on GitHub

jquery.localize

 * API Documentation

Please use  instead.

Localizes the elements in a jQuery collection.

jquery.makeCollapsible

 * See also Manual:Collapsible elements.


 * API Documentation

Makes 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  and   attributes one can define a custom text for the toggle labels added by the script. When added in wikitext these could be populated by a localized message like:


 * Remote toggle: If you don't want the script to put the default toggle link (whether 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. Its relationship to the collapsible element is detected by using an ID attribute with the prefix  and a corresponding class attribute with prefix   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

Input:

Output:

Click here to toggle the element Lorem ipsum dolor sit amet... Clicking will toggle it also!

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.

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 when running the QUnit test suite with the   option enabled.

jquery.suggestions

 * API Documentation

jquery.spinner

 * API Documentation

jquery.textSelection

 * API documentation

jquery.tipsy
The library will be available for the forseeable future, but overlaps with functionality within OOUI and provides a suboptimal experience to mobile users. Where jQuery.tipsy is being used, we encourage developers to inspect OOUI and feedback on how the library might be improved to support the usecase that jquery.tipsy provides.

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 " " module. In MediaWiki 1.19 this module has been renamed to " " (see 94227).

jQuery.trimLeft
Trims whitespace from the left side of the string. Use instead:

jQuery.trimRight
Trims whitespace from the right of the string. Use instead:

jQuery.ucFirst
Returns the string with the first character capitalized. Use instead:

jQuery.escapeRE
Returns a string for literal use in a regular expressions by escaping characters that have a special meaning in a regex. In ≥ 1.26 use  instead.

jQuery.isDomElement
Check whether a passed a variable is a direct link to an element.

jQuery.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.

jQuery.compareArray
Compares two arrays and returns a boolean for whether they are in fact the same

jQuery.compareObject
Compares two objects for it's properties and values (recursive).

jQuery UI


Please use OOUI instead.

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

The following components are available as individual ResourceLoader modules:


 * 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

The module name of each jQuery UI component is the script name, without the  extension. For example:  for the   script.