ResourceLoader/Core modules

This page intends to list, document, explain and give examples for all the libraries, plugins and scripts present in MediaWiki's [//svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/resources/ /resources] by default as of the current SVN HEAD.

The order of the modules should be kept similar to [//svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/resources/Resources.php?view=markup 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)

This may or may not correspond to the state in MediaWiki 1.17.

[//svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/resources/mediawiki/mediawiki.js?view=markup mediaWiki]
This is the main JavaScript library. Defined in. Alias  is available everywhere and should be used.

[//svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/resources/mediawiki/mediawiki.js?view=markup#l398 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) other wise.

[//svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/resources/mediawiki/mediawiki.js?view=markup#l1109 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.

[//svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/resources/mediawiki/mediawiki.js?view=markup#l244 mediaWiki.message]
Returns a new instance of Message. is a shortcut to this.


 * 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.)

[//svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/resources/mediawiki/mediawiki.js?view=markup#;265 mediaWiki.msg]
This is a shortcut for creating an instance of Message via  and returning

[//svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/resources/mediawiki/mediawiki.js?view=markup#l289 mediaWiki.loader]
"" ""
 * mw.loader.go
 * mw.loader.implement
 * mw.loader.load 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.
 * 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)
 * mw.loader.version</tt>
 * mw.loader.work</tt>

[//svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/resources/mediawiki/mediawiki.js?view=markup#l136 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
Function returns boolean on whether the user is anonymous (true) or logged in (false).

name
Function returns the username or null if logged out.

options
Contains the preferences of the user, or the defaults when logged out. (Instance of the Map class)

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 [//svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/resources/mediawiki.action/mediawiki.action.watch.ajax.js?view=markup&pathrev=88554#l117 mediawiki.action.watch.ajax.js] module.

[//svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/resources/mediawiki/mediawiki.log.js?view=markup mediaWiki.log]
This script is loaded 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.

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 content body regardless of the skin used. This is, for example, #bodyContent in the Vector-skin.

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 can be passed a custom location.

It returns  if 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:

wikiUrlencode
This function returns an article/page name in its encoded form.

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.

[//svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/resources/jquery/jquery.js?view=markup jQuery]
jQuery 1.7.1 is loaded. 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/

[//svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/resources/jquery.ui/jquery.ui.core.js?view=markup jQuery UI]
jQuery UI 1.8.17: http://jqueryui.com/demos/ 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
 * i18n

[//svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/resources/jquery/jquery.async.js?view=markup jQuery.async]

 * Plugin documentation

[//svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/resources/jquery/jquery.checkboxShiftClick.js?view=markup 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).

[//svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/resources/jquery/jquery.client.js?view=markup jQuery.client]
A plugin that extracts information about the client's browser, layout engine and operating system.

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 [//svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/resources/jquery/jquery.client.js?view=markup jquery.client.js] for possible values of browser names, layout engines and platforms.

Test
...

On load
When this module is initialized it adds the four classes to the : For example:
 * client- profile.name
 * client- profile.name - profile.versionBase
 * client- profile.layout
 * client- profile.platform

[//svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/resources/jquery/jquery.collapsibleTabs.js?view=markup jQuery.collapsibleTabs]
Used by the Vector extension.

[//svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/resources/jquery/jquery.colorUtil.js?view=markup jQuery.colorUtil]

 * getRGB
 * colors
 * rgbToHsl
 * hslToRgb
 * getColorBrightness

[//svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/resources/jquery/jquery.makeCollapsible.js?view=markup 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 data-collapsetext</tt> and 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.

If you want your custom collapse/expand toggles to appear like normal (Vector skin) links, put the following CSS in your MediaWiki:Common.css: /* For custom mw-collapsible toggles to make them look like regular links */ /* :visited, :hover, and :active must always be in that order! */	 .pseudolink { cursor:pointer; color:#0645AD; } .pseudolink:visited { color:#0B0080; } .pseudolink:hover { text-decoration:underline; } .pseudolink:active { color:#faa700; }

And then apply the pseudolink class to your clickable text, like this:

Custome toggle This text appears when you click on "Custom toggle"

[//svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/resources/jquery/jquery.placeholder.js?view=markup 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.

[//svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/resources/jquery/jquery.suggestions.js?view=markup jQuery.suggestions]
There is also jquery.ui.autocomplete.js with similar functionality.

Real world examples: [//svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/resources/mediawiki.page/mediawiki.page.ajaxCategories.js?view=markup ajaxCategories.js], [//svn.wikimedia.org/viewvc/mediawiki/trunk/extensions/Vector/modules/ext.vector.simpleSearch.js?view=markup ext.vector.simpleSearch.js]

Example shows suggestions for the summary-line:

[//svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/resources/jquery.tipsy/jquery.tipsy.js?view=markup jQuery.tipsy]
Example page; JQuery project page

[//svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/resources/jquery/jquery.mwExtension.js?view=markup#l5 jQuery Extension]
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.
 * 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.
 * 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)