ResourceLoader/Core modules/ja

Foo	Bar
Lorem	Ipsum
Cell	content
This table is collapsible	Because it has the "mw-collapsible" class
It was initially hidden, because it	had the "mw-collapsed" class

Languages:

English • 日本語 • 中文

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. However, this list is currently incomplete.

The order of the modules should be kept similar to their definition in Resources.php. Within the module documentation, the order of the headings for objects should be by order within the script file or by alphabet (whichever makes sense). If a module has only one object, with the same name as the module, this should be documented, but a separate heading is not necessary.

There is now JSDuck documentation for these modules. It does not include all of the below (e.g. the examples are not the same), but is likely to be more up to date, since it is compiled automatically from comments in the source.

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

MediaWiki

mediawiki

API Documentation

This is the mediawiki base module. It initialises the mediaWiki global object (with mw as alias). Alias mw is available everywhere and should be used.

mediaWiki.config

API Documentation

For a complete list of configuration values in mw.config, 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.

// Check existence
if ( mw.config.exists( 'wgGlobalGroups' ) ) {
	// CentralNotice has registered this variable...
}

// Or just a plain access for comparison
// (no need to check exists first, it falls back to null)
if ( mw.config.get( 'wgPageName' ) === 'ResourceLoader' ) {
	// Do stuff...
}

// Access multiple ones for use throughout a larger code base
var conf = mw.config.get([
	'wgServer',
	'wgPageName',
	'wgCanonicalSpecialPageName',
	'wgUserLanguage'
]);

if ( conf.wgCanonicalSpecialPageName === 'Blankpage' ) {
	// Do stuff...
}

mediaWiki.hook

API Documentation

A framework for registering and firing events in JavaScript (as opposed to doing everything on document ready).

mediaWiki.html

API Documentation

Helper functions for escaping for and creating strings of HTML.

mediaWiki.message

API Documentation

See also Manual:Messages API#Using messages in JavaScript

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

mediaWiki.loader

API Documentation

mw.loader.addSource Since MediaWiki 1.19 • r93247
mw.loader.getModuleNames Since MediaWiki 1.19 • r93653 Get the names of all registered modules.

mw.loader.load

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

// Load one module by name. Will make 1 http request loading all JS, CSS of this and its dependencies. Will also load any needed interface messages to the memory of mw.msg
mw.loader.load( 'jquery.ui.datepicker' );

// Will do all resources stuff for multiple modules at once
mw.loader.load( ['jquery.ui.dialog', 'jquery.hoverIntent', 'mediawiki.foobar'] );

// Load an external javascript file as is
mw.loader.load( '//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-UTCLiveClock.js&action=raw&ctype=text/javascript&smaxage=21600&maxage=86400' );

// Load an external stylesheet as is
mw.loader.load( 'https://example.com/mystyles.css?color=blue', 'text/css' );

mw.loader.using

Loads modules and then executes a callback function. using can be called with two or three arguments (dependencies, callback function to execute when modules are successfully loaded, callback function to execute on error).

mw.loader.using( 'jquery.colorUtil', function () {
	var curColor, newColor;

	// This function will be called right away if the required modules are already loaded.
	// Otherwise the module(s) are loaded and if all successful, the function is called.
	curColor = 'rgb(70,140,210)';
	newColor = $.colorUtil.getColorBrightness( curColor, +0.2 );
	alert( '20% brigher than ' + curColor + ' is ' + newColor );
} );

mediaWiki.log

API Documentation

This is 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.

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)

mw.log( 'To be logged message here' );

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.

mediaWiki.Map

mediaWiki.Map

A reusable class to store, get and set a set of variables. The core uses this for mw.config and mw.user.options

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

.values: An object containing all the variables. If 'global' was true during initialization, this is an alias to the window object.
.exists(key): Function returns true if an entry with the key(s) exists, false otherwise
.get(key, fallback): 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): Creates / Modifies one or multiple values

mediaWiki.user

API Documentation

Module that represents information about the current user.

user.options

user.options

mw.user.options

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

// Get a preference option and use it directly
alert( 'According to the preferences, your gender is ' + mw.user.options.get( 'gender' ) );

// Get several preferences and compare them with $.compareObject
if ( $.compareObject( mw.user.options.get( ['diffonly', 'showhiddencats'] ), { diffonly: 0, showhiddencats : 0 } ) ) {
	// User's preferences match the object
} else {
	// User's preferences don't match the given set
}

user.tokens

user.tokens

mw.user.tokens

MediaWiki バージョン:

≥ 1.18

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

var edittoken = mw.user.tokens.get( 'editToken' );
var watchtoken = mw.user.tokens.get( 'watchToken' );

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

mediawiki.api

API Documentation

This module provides the mw.Api constructor. The main methods of the mw.Api object are get(), post(), and ajax(). The mediawiki.api module (and its plugins) return a Promise – similar to jQuery.ajax (and its derivatives such as jQuery.get, jQuery.post and jQuery.getJSON).

See the API documentation for the various plugins (implemented as modules depending on this one) that make it more convenient to use certain API actions actions by abstracting their input and output.

mediawiki.api.category

This module depends on mediawiki.api, and extends the mw.Api prototype with methods related to categorization:

mw.Api#isCategory

Determines if a category exists.

mw.Api#getCategoriesByPrefix

Lists categories with a given prefix.

mw.Api#getCategories

Gets the list of categories that a given page belongs to.

mediawiki.api.edit

This module depends on mediawiki.api, and extends the mw.Api prototype with methods for editing:

mw.Api#postWithToken

MediaWiki バージョン:

≥ 1.23

This posts to the API as specified by the parameters. The first parameter is the token to use. It will used a cached value of the specified token if one exists, or get one then post. See doc.wikimedia for more details.

mw.Api#postWithEditToken

This posts to the API as specified by the parameters. It is intended for methods that require an edit token. It will used a cached edit token if one exists, or get one then post.

警告: This method does not actually set the action parameter to edit.

mw.Api#getToken

MediaWiki バージョン:

≥ 1.23

This is a low-level method used by api.postWithEditToken to get the named tokens. It will use a cached version if available.

mw.Api#getEditToken

This is a low-level method used by api.postWithEditToken to get tokens.

mw.Api#newSection

Creates a new section on the given page, with the given section name and text.

mediawiki.api.parse

mediawiki.api.parse

This module depends on mediawiki.api, and extends the mw.Api prototype with a method for parsing wikitext:

mw.Api#parse

Calls the server to parse the given wikitext. Example:

var api = new mw.Api();

api.parse( "'''Hello world'''" )
.done( function ( html ) {
	console.log( 'Parsed result:', html );
} );

mediawiki.api.watch

mediawiki.api.watch

This module depends on mediawiki.api, and extends the mw.Api prototype with methods related to the watchlist:

mw.Api#watch

Watches a given title or titles.

mw.Api#unwatch

Unwatches a given title or titles.

mediawiki.debug

mediawiki.debug

mw.Debug.init

Initializes the debugging pane.

mw.Debug.switchPane

Switches between debug panes.

mw.Debug.buildHtml

Builds HTML for the toolbar.

mw.Debug.buildConsoleTable

Builds the console pane.

mw.Debug.buildQueryTable

Builds the SQL pane.

mw.Debug.buildDebugLogTable

Builds logging pane (legacy).

mw.Debug.buildRequestPane

Builds requests pane.

mw.Debug.buildIncludesPane

Builds included files pane.

mediawiki.debug.init

mediawiki.debug.init

Calls mw.Debug.init.

mediawiki.feedback

mediawiki.feedback

User interface for collecting feedback, particularly on new features, using jQuery UI. This sets the mediaWiki.Feedback constructor. Example:

var feedback = new mw.Feedback();
$( '#myButton' ).click( function () { feedback.launch(); } );

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.Api.newSection.

mw.Feedback.launch

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

mediawiki.jqueryMsg

mediawiki.jqueryMsg

See also Manual:Messages API#Using messages in JavaScript

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

mediawiki.ui

MediaWiki バージョン:

1.22

mediawiki.ui

UI module developed as part of the Agora project. It defines mw-ui-* 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. These are some commonly used features:

Buttons

See section 2 of the living style guide for comprehensive code examples with their effects.

Note: in release 1.23 the button styles are in a separate mediawiki.ui.button module. If all you need is button styling, PHP code should only addModuleStyles( 'mediawiki.ui.button' ). The button module may be loaded on pages on a wiki but you should still load it as a dependency.

All buttons use the mw-ui-button class. The main button for a particular interface should generally also use an additional class, which varies by type. For example, "save all changes" is constructive, since it completes a process and changes state:

<input type="submit" name="mw-myextension-submit" value="Save all changes" class="mw-ui-button mw-ui-constructive">

It can also be used on other elements:

<span class="mw-ui-button mw-ui-constructive">Save all changes</span>

Conversely, mw-ui-destructive is for buttons that make destructive changes to state (such as deletion). You may also sometimes use the mw-ui-block class, which sets the CSS display property to block and width to 100%. The mw-ui-big class increases the font size of buttons.

In release 1.23 mw-ui-primary is deprecated. Instead use mw-ui-constructive for final actions and mw-ui-progressive for actions which lead to a next step in a process.

Inputs

If a form has the mw-ui-vform class, it lays out its child divs in a compact vertical stack, and input elements will automatically take on certain styles. For example, text inputs will take on a blue border hue. Checkbox labels should use the mw-ui-checkbox-label class, and surround the actual checkbox.

If you use HTMLForm to create a form and setDisplayFormat( 'vform' ), it will apply this styling.

mediawiki.util

mediawiki.util

addCSS

Adds a <style> 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.

// Add a simple stylesheet rule
mw.util.addCSS( '.plainlinks { color: green; }' );

// Add a rule and set a variable to the sheet
var myCssRules = mw.util.addCSS( '.plainlinks { color: green; }' );
$( '#myButton' ).click( function () {
	// When button is clicked, toggle the stylesheet from true to non-true (false), or from false to non-false (true)
	myCssRules.disabled = !myCssRules.disabled;
} );

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

Only the first three arguments are required.

// General usage:
mw.util.addPortletLink( portletId, href, text [, id [, tooltip [, accesskey [, nextnode ]]]] );

// Add MediaWiki.org-link in the toolbox before the Print-link
mw.util.addPortletLink(
	'p-tb',
	'//www.mediawiki.org/',
	'MediaWiki.org',
	't-mworg',
	'Go to MediaWiki.org ',
	'm',
	'#t-print'
);

// The old way of passing a DOM-node still works
mw.util.addPortletLink(
	'p-tb',
	'//www.mediawiki.org/',
	'MediaWiki.org',
	't-mworg',
	'Go to MediaWiki.org ',	
	'm',
	document.getElementById( 't-print' )
);

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

// Create portlet link
var portletLink = mw.util.addPortletLink( 'p-cactions', '#',
	'My new portlet link', 'ca-my-portlet',	'Click here to test the new portlet'
);
// Bind click handler
$( portletLink ).click( function ( e ) {
	e.preventDefault();
	// doSomeStuff();
	alert( 'It works!' );
});

$content

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

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 $('#mw-content-text') instead.

/* Add some HTML to the page content */
mw.util.$content.append( '<h2>Lorem ipsum</h2><p>This section was just added to the bottom of the wiki page.</p>' );

/* Count number of tables in the page's content with a class of "wikitable" */
var $wikitablesInPage = mw.util.$content.find( 'table.wikitable' );

if ( $wikitablesInPage.length ) {
	alert( 'There are ' + $wikitablesInPage.length + ' wikitables on this page.' );
} else {
	alert( 'There are no wikitables on this page.' );
}

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.

/* Loads in main page (or any page for that matter) over AJAX (may be useful for Special:BlankPage) */

// Put a loading message on top of the page
mw.util.$content.prepend( '<p><em>Loading...</em></p><hr/>' );

// To get the article contents, use #mw-content-text instead.
$('#mw-content-text').load( mw.util.getUrl( mw.config.get( 'wgMainPageTitle' ) ) + ' #mw-content-text', function () {
	mw.notify( 'Load complete!' );
} );

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 null if the parameter is not present. Returns an empty string("") if it was an empty parameter (such as /page.php?some=parameter&emptyparameter=&id=12

// Location: https://www.mediawiki.org/w/index.php?title=ResourceLoader/Default_modules&action=edit&section=28
// Suppose we're editing a page section, this will return the number of the edit section
mw.util.getParamValue( 'section' ); /* returns '28'; */

// Extract a value from a custom url
// For example on a diff page where there is: "← Older edit" and you need the oldid of the previous edit
var oldid = mw.util.getParamValue( 'oldid', '//www.mediawiki.org/w/index.php?title=ResourceLoader/Default_modules&diff=prev&oldid=365296' );
if ( oldid !== null ) {
	alert( 'The previous text version of this page has id: ' + oldid );
} else {
	alert( 'No "oldid" parameter found in the given address.' );
}

isIPv4Address

MediaWiki バージョン:

1.18

isIPv6Address

MediaWiki バージョン:

1.18

jsMessage

MediaWiki バージョン:

1.18

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.

// Basic usage, replace/add the message on top
mw.util.jsMessage( 'This is something a <strong>message</strong> for the <strong>user</strong>' );

// Classed usage, adds/replaces the 'mw-js-message-foobar' as class for the message-box
mw.util.jsMessage( 'Foobar message 01255', 'foobar' );

// Any of the folllowing will empty and hide the box
mw.util.jsMessage();
mw.util.jsMessage( '' );
mw.util.jsMessage( null );

rawurlencode

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

var exFooUrl = 'http://example.org/foo/' + mw.util.rawurlencode( mw.config.get( 'wgPageName' ) );

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

var query = {
	page: 'MyPage',
	value: mw.config.get( 'skin' ),
	action: 'foo'
};

var fooQuery = 'http://example.com/stuff.php?' + $.param( query );

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.

var isValid = mw.util.validateEmail( "joe@example.com" ) === true;

wikiUrlencode

This function returns a "pretty" version of a URL encoded wiki page name. It keeps slashes and colons unencoded. The behavior differs from wfUrlencode on the PHP side.

// This url will end up in the user's addressbar, so prettification is useful.
var $histLink = $( '<a>' ).attr(
	'href',
	mw.config.get( 'wgScript' ) + '?action=history&title=' + mw.util.wikiUrlencode( mw.config.get( 'wgPageName' ) ),
);

// This will never be shown, don't bother with string concatenation, just encode it regularly with $.param(), much easier.
jQuery.ajax({
	url: mw.config.get( 'wgScript' ) + '?' + $.param({ action: 'history', title: mw.config.get( 'wgPageName' ) }),
	dataType: 'html'
})
.done( function ( html ) {
	/* .. */
});

wikiGetlink

(1.23 で廃止予定) Use mw.util.getUrl() instead.
This function returns the address to a local wiki page.

var sandboxLink = mw.html.element(
	'a', {
		href: mw.util.wikiGetlink( 'Sandbox 3000' ), // returns "/wiki/Sandbox_3000"
		title: 'Go to Sandbox'
	}, 'Click here to enter the sandbox!'
);

wikiScript

MediaWiki バージョン:

≥ 1.18

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

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

jQuery.getJSON( mw.util.wikiScript( 'api' ), {
	format: 'json',
	action: 'query',
	titles: 'Main Page',
	prop: 'revisions'
} ).done( function ( data ) {
	// data.query
} );

API Documentation

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

var value;

mw.cookie.set( 'cookieToSet', 'valueToSet' );

value = mw.cookie.get( 'cookieToGet' );

See the JSDuck API documentation for available options.

mediawiki.Title

mediawiki.Title

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

var t = new mw.Title( 'Image: foo_bar baz.jpg' );
t.getMain(); // "Foo_bar_baz.jpg"
t.getNamespaceId(); // 6
t.getNamespacePrefix(); // "File:"

mediawiki.Uri

mediawiki.Uri

Basic examples

var uri = new mw.Uri(); // This throws the following error on 1.19.1: 'Bad constructor arguments'
uri; // Instance for the location of the current window

// Add one or more URL parameters, automatically handling ? and & as needed.
// Note that this modifies it in place, rather than creating a new URI object.
uri.extend( { action: 'edit', section: 3 } );

var otheruri = new mw.Uri( 'http://mediawiki.org/' ); // The trailing slash is *required*
otheruri.toString(); // "http://mediawiki.org"

mediawiki.notify

mediawiki.notify

Basic examples

mw.notify( 'This is a notification.' ); // Send a plaintext notification
mw.notify( mw.message( 'some-message' ) ); // Use an i18n message to send a notification
mw.notify( $( '<span>This is a <u>HTML</u> notification.</span>' ) ); // Send a html notification with a jQuery instance (a DOM node also works)

mw.notify( 'Test', { title: 'Title!' } ); // Give the notification a title
mw.notify( 'Test', { autoHide: false } ); // Don't automatically hide the notification
mw.notify( 'Test', { tag: 'foobar' } ); // Send a notification tagged with a tag
mw.notify( 'Test 2', { tag: 'foobar' } ); // This one will replace the previous 'foobar' notification.

jQuery & plugins

jquery

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

jquery.autoEllipsis

jquery.autoEllipsis

jquery.badge

API Documentation

MediaWiki バージョン:

≥ 1.20

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.

jquery.checkboxShiftClick

jquery.checkboxShiftClick

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

// Default:
$( 'input[type=checkbox]:not(.noshiftselect)' ).checkboxShiftClick();

// Enable the functionality for checkboxes in dynamically created form <form id="my-tool-form">
$( 'form#my-tool-form input[type=checkbox]' ).checkboxShiftClick();

jquery.chosen

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

$("select").chosen({/* options */});

jquery.client

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:

/* jQuery.client.profile() */
{
	'name': 'firefox',
	'layout': 'gecko',
	'layoutVersion': '20100101',
	'platform': 'win'
	'version': '10.0.2',
	'versionBase': '10',
	'versionNumber': 10,
}

Here a few examples

if ( $.client.profile().layout == 'gecko' && $.client.profile().platform == 'linux' ) {
	// This will only run on Gecko browsers (ie. Mozilla Firefox) on Linux.
}

if ( $.client.profile().name == 'msie' ) {
	// Only for good ol' Internet Explorer
}

// Shortcut
var prof = $.client.profile();
if ( prof.name == 'firefox' && prof.versionBase == '2' && prof.platform == 'win' ) {
	// Target Mozilla Firefox 2.x on Windows
}

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

jQuery.client.test

...

jquery.collapsibleTabs

jquery.collapsibleTabs

Used by the Vector extension.

jquery.colorUtil

jquery.colorUtil

MediaWiki バージョン:

1.18

getRGB
colors
rgbToHsl
hslToRgb
getColorBrightness

jquery.color

jquery.color

MediaWiki バージョン:

1.17

jquery.cookie

You can use jquery.cookie or you can use mediaWiki.cookie 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.

// Set cookie (simple, current page/path)
$.cookie( 'myName', 'Flower' );

// Set cookie (extra options)
$.cookie( 'myName', 'Flower', {
	expires: 7, // expires in 7 days
	path: '/' // domain-wide, entire wiki
} );

// Get cookie
var name = $.cookie( 'myName' );

// Delete cookie
// Deprecated since 1.2 please use $.removeCookie('foo') instead
$.cookie( 'myName', null );

$.removeCookie('foo')

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 mediaWiki.config variable wgCookiePrefix.

Note that users will likely get separate cookies for /wiki/ and /w/ paths in page URLs if you do not specify the extra option { path: '/' } when setting a cookie.

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

jQuery.toJSON

jQuery.evalJSON

jQuery.secureEvalJSON

var obj = {'a': 1, 'b': 2};
var string = $.toJSON( obj );

var jsonString = '{"a":1,"b":2}';
var obj1 = $.evalJSON(jsonString);
var obj2 = $.secureEvalJSON(jsonString);

jquery.jStorage

jquery.jStorage

Project home page

var key = "myStorageKey",
	value = $.jStorage.get( key );

if ( !$.jStorage.storageAvailable() ) {
	throw new Error( 'No storage available. Fall back to ... or tell the user to install a real browser!' );
}

$.jStorage.listenKeyChange( key, function( key, action ) {
	if ( window.console && $.isFunction( console.log ) ) {
		console.log(key + " has been " + action);
	}
} );

value = {a: 1, b: 2, c: [3, 4, 5]};
$.jStorage.set( key, value );

jquery.localize

jquery.localize

MediaWiki バージョン:

1.17

Localizes a DOM selection by replacing <html:msg /> elements with localized text and adding localized title and alt attributes to elements with title-msg and alt-msg attributes respectively.

var html = '\
	<p>\
		<html:msg key="title" />\
		<img src="something.jpg" title-msg="title" alt-msg="desc" />\
		<input type="text" placeholder-msg="search" />\
	</p>';
$( 'body' ).append( $( html ).localize() );

jquery.makeCollapsible

jquery.makeCollapsible

MediaWiki バージョン:

1.18

See also Manual:Collapsible elements.

Makes elements collapsible. It supports lots of variations such as:

Simple: Add "mw-collapsible" to an element (a <div> 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 "mw-collapsed" as additional class will cause the element to be initially collapsed when the page is loaded.
Custom label: ^{HTML5 only} Using the data-collapsetext and data-expandtext 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:
<div class="mw-collapsible" data-expandtext="{{int:show}}" data-collapsetext="{{int:hide}}">
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. It's relationship to the collapsible element is detected by using an ID attribute with the prefix mw-customcollapsible and a corresponding class attribute with prefix mw-customtoggle for the collapsible element and the togglelink respectively.

Example: Simple collapsible div or table

Input:

{| class="infobox"
! Foo
| Bar
|-
! Lorem
| Ipsum
|-
! More info
|<!--
-->
{| class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
! Head
! Top
|-
| Cell
| content
|-
| This table is collapsible
| Because it has the "mw-collapsible" class
|-
| It was initially hidden, because it
| had the "mw-collapsed" class
|}<!--
-->
|-
|}

<div class="toccolours mw-collapsible" style="width: 400px;">
This is text is collapsible. {{Lorem}}
</div>

Output:

This is text is collapsible. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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

<div class="mw-customtoggle-myDivision" style="background:#e0e8ff">Click here to toggle the element</div>

<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision">
<div class="toccolours mw-collapsible-content">Lorem ipsum dolor sit amet...</div>
</div>

<div class="mw-customtoggle-myDivision" style="background:#e8ffe0">Clicking will toggle it also!</div>

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

jquery.placeholder

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.

// Default:
if ( !( 'placeholder' in document.createElement( 'input' ) ) ) {
	$( 'input[placeholder]' ).placeholder();
}

// Example for your dynamically added foobar fields
$( "form#foobar-ajax input[placeholder]" ).placeholder();

jquery.qunit

jquery.qunit

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

jquery.qunit.completenessTest

jquery.qunit.completenessTest

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 completenesstest option enabled.

jquery.suggestions

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:

function fetchIT(d, y) {
	mw.log( 'fetched' );
	this.suggestions( 'suggestions', ['Lorem ipsum dolor sit amet', 'consectetur adipisici elit', 'sed eiusmod tempor incidunt ut labore et dolore magna aliqua']);
}

$( '#wpSummary' ).suggestions( 'fetch', fetchIT );

jquery.tabIndex

jquery.tabIndex

jquery.tablesorter

jquery.tablesorter

MediaWiki バージョン:

≥ 1.18

jquery.textSelection

jquery.textSelection

mw.util.jsMessage( 'The selected text is "' + mw.html.escape( $( '#wpTextbox1' ).textSelection( 'getSelection' ) ) + '".' );

jquery.tipsy

jquery.tipsy

Example page; JQuery project page

オプション	型	取りうる値	デフォルト	説明
gravity	文字列 / コールバック関数	'nw' \| 'n' \| 'ne' \| 'w' \| 'e' \| 'sw' \| 's' \| 'se' / $.fn.tipsy.autoNS \| $.fn.tipsy.autoWE \| pointer or anonymous	'n'	sets the positioning of the tooltip relative to the element
fade	bool	true \| false	true	use fading effect (fadeIn / fadeOut)
title	文字列 (属性) / コールバック関数	style, class, id, ..., function () { return 'some string'; }	title (or if not specified fallback-value; see below)	Which string to display as a "tool-tip"?
fallback	文字列	'valid string'		used if an element has no tooltip
html	bool	true \| false	false	interpret the tooltip text as HTML
delayIn	数値 (ミリ秒単位)	0, 1, 2, ...	0	How long to wait after onmouseover to show the tip?
delayOut	数値 (ミリ秒単位)	0, 1, 2, ...	0	How long to wait after onmouseout to close the tip?
trigger	文字列	'focus' \| 'manual' \| 'hover'	hover	When to show the tooltip (useful for forms)
live	bool	true \| false	false	dynamical add to selectors- see JQuery's live interpretation
offset	数値 (ピクセル単位)		0	ツールチップから要素までのオフセット
opacity	数値 (小数)		1.0	ツールチップの不透明度

mw.loader.using( 'jquery.tipsy', function () {
	$someObject.prepend(
		$( '<span>', {
			title: 'Some tipsy test title'
		} )
		.append( 'Hover here' )
		.tipsy( {
			option: 'value',
			option2: 'value2'
		} )
	);
} );

jquery.mwExtension

jquery.mwExtension

MediaWiki バージョン:

≥ 1.17

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 rev:94227).

jQuery.trimLeft

文字列の左端から空白を除去します

jQuery.trimRight

文字列の右端から空白を除去します

jQuery.ucFirst

先頭の文字を大文字化した文字列を返します

jQuery.escapeRE

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

jQuery.isDomElement

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

jQuery.isEmpty

MediaWiki バージョン:

≥ 1.17

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

MediaWiki バージョン:

≥ 1.17

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

/**
 * Trim
 */
$.trimLeft( '  foo bar  ' ); // "foo bar  ";
$.trimRight( '  foo bar  ' ); // "  foo bar";
$.trim( '  foo bar  ' ); // "foo bar";

/**
 * isEmpty
 */
$.isEmpty( 'string' ); // false
$.isEmpty( '0' ); // true
$.isEmpty( '' ); // true
$.isEmpty( [] ); // true


/**
 * compareArray
 */
$.compareArray( [1, "a", [], [2, 'b'] ], [1, 'a', [], [2, "b"] ] ); // true
$.compareArray( [1, 2], [8, 7] ); // false


/**
 * isDomElement
 */
// Sure, a plain normal dom element: True
$.isDomElement( document.getElementById( 'content' ) );

// This returns an array of dom elements, not a dom element itself: False
$.isDomElement( document.getElementsByClassName( 'portal' ) );

// This is a normal dom element: True
$.isDomElement( document.getElementsByClassName( 'portal' )[0] );

// jQuery objects are not dom elements: False
$.isDomElement( $( '#content' ) );

// jQuery.get(0) returns the raw dom element for the object: True
$.isDomElement( $( '#content' ).get(0) );

// Anything else: False
$.isDomElement( 'hello world' );

jQuery UI

jQuery UI

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

The following components are available as individual ResourceLoader modules:

MediaWiki

mediawiki

mediaWiki.config

mediaWiki.hook

mediaWiki.html

mediaWiki.message

mediaWiki.loader

mw.loader.load

mw.loader.using

mediaWiki.log

mediaWiki.Map

mediaWiki.user

user.options

mw.user.options

user.tokens

mw.user.tokens

mediawiki.api

mediawiki.api.category

mw.Api#isCategory

mw.Api#getCategoriesByPrefix

mw.Api#getCategories

mediawiki.api.edit

mw.Api#postWithToken

mw.Api#postWithEditToken

mw.Api#getToken

mw.Api#getEditToken

mw.Api#newSection

mediawiki.api.parse

mw.Api#parse

mediawiki.api.watch

mw.Api#watch

mw.Api#unwatch

mediawiki.debug

mw.Debug.init

mw.Debug.switchPane

mw.Debug.buildHtml

mw.Debug.buildConsoleTable

mw.Debug.buildQueryTable

mw.Debug.buildDebugLogTable

mw.Debug.buildRequestPane

mw.Debug.buildIncludesPane

mediawiki.debug.init

mediawiki.feedback

mw.Feedback.setup

mw.Feedback.display

mw.Feedback.displaySubmitting

mw.Feedback.displayBugs

mw.Feedback.displayThanks

mw.Feedback.displayForm

mw.Feedback.displayError

mw.Feedback.cancel

mw.Feedback.submit

mw.Feedback.launch

mediawiki.jqueryMsg

mediawiki.ui

Buttons

Inputs

mediawiki.util

addCSS

addPortletLink

$content

getParamValue

isIPv4Address

isIPv6Address

jsMessage

rawurlencode

validateEmail

wikiUrlencode

wikiGetlink

wikiScript

mediawiki.cookie

mediawiki.Title

mediawiki.Uri

mediawiki.notify

jQuery & plugins

jquery

jquery.async

jquery.autoEllipsis

jquery.badge

jquery.checkboxShiftClick