Tools

A number of these tools are in the form of js, which can be added to your personal js (User:username/common.js) via import statements. If you have sysop rights, import statements can be added to MediaWiki:Common.js (MediaWiki:Common.css for css).

Note: Much of this page has been copied from the Fandom Developers Wiki

# Scripts

If you copy and modify any scripts, be sure to check for file dependencies evidenced by `importScript`, `importScriptPage`, `importArticle` or `$.getScript`.

* MassRedirect
* AjaxBatchDelete js css
* https://dev.fandom.com/wiki/MediaWiki:Nuke/code.js
* MassEdit js

Libraries:

* I18n-js, I18n-js/code.js
* Modal js
* Placement js Can be used to prepend the script link to My Tools menu.

## I18n (language localization)

See: Fandom Developers Wiki I18n-js and Fandom Developers Wiki I18n-js/code.js

Many scripts found on the Fandom Developers Wiki are addressing language localization.

I18n-js is a library for storing and loading a script's messages, stored as JSON, ready for said script to use. Not only does it allow messages to be split out of the main code containing all the logic, it handles language fallbacks and basic parsing as well.
To use I18n-js, messages need to be set up in MediaWiki:Custom-<PAGENAME>/i18n.json on the Dev Wiki (unless you change the js to look for it elsewhere), where <PAGENAME> would be the name of the script. For example, see MediaWiki:Custom-I18n-js/i18n.json (on the Fandom Developers Wiki). The format of messages should be as follows:

```
{
    "en": {
        "name": "value"
    },
    "pl": {
        "name": "wartość"
    }
}

```

If you see either of the following code snippets in a script, the script is set up for I18n usage:

```
// register the hook before the import to avoid race conditions
mw.hook('dev.i18n').add(function (i18n) {
    // i18n is a shortcut to window.dev.i18n
});

importArticle({ type: 'script', article: 'u:dev:MediaWiki:I18n-js/code.js' });
```

```
$.getScript('https://dev.fandom.com/load.php?mode=articles&articles=MediaWiki:I18n-js/code.js&only=scripts')
    .done(function() {
        // access window.dev.i18n here
    });
```

# CSS & JS imports

From Fandom Developers Wiki code installation guide

## CSS imports

The CSS `@import` can efficiently import a collection of stylesheets to:

* minify them and increase performance
* look cleaner
* cache consistently

Consider the examples below.

### Examples of `@import` usage

On the left there is an example of several imports using the classic `@import` rule. On the right is how you can merge them in a single command, which will minify them, thus increasing performance:

Multiple imports — messy and slow

```
@import url("/index.php?title=MediaWiki:LocalCSS1.css&action=raw&ctype=text/css");
@import url("/index.php?title=MediaWiki:LocalCSS2.css&action=raw&ctype=text/css");
@import url("https://dev.fandom.com/index.php?title=MediaWiki:InterWikiCSS.css&action=raw&ctype=text/css");
/\* CSS \*/

```

One import — clean and efficient

```
@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css");
/\* CSS \*/

```

**Note**: That, however, would not work well for some stylesheets which import other stylesheets in their turn. Those "parent" stylesheets may break if combined with other stylesheets in the same `@import` statement.

### Placement of CSS `@import` rules

CSS imports rules must be stated at the beginning of the page, before any other rule. Otherwise they won't work. Here's an example of the correct placement:

Wrong placement

```
/\* CSS \*/
@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css");

```

Correct placement

```
@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css");
/\* CSS \*/

```

It's also possible to import CSS using JavaScript pages through `importArticles` (read more).

## JavaScript imports

The importArticles statement is designed to efficiently batch import scripts:

* to speed up performance,
* make your code look cleaner,
* combine multiple HTTP requests into a single data transfer,
* and allow multiple scripts to load and execute faster

If you've been installing several different scripts, your JavaScript file has probably accumulated unnecessary import statements.

### Examples of `importArticles` usage

If your JavaScript file has several lines of code that say `importScript`, `importScriptPage`, or `importArticles`, you may be able to combine them! Consider the example below. On the left is an example of what your JavaScript file might currently look like. On the right is how you could improve that code.

Multiple imports — messy and slow

```
importScriptPage('Script1.js', 'dev');
importScript('MediaWiki:Script2.js');
importArticle({
 type: 'script',
 article: 'u:dev:Script3/code.js'
});
importScriptPage('Page1.js', 'wiki');
importScriptPage('Page2.js', 'wiki');

```

One import — clean and efficient

```
importArticles({
 type: 'script',
 articles: [
 'u:dev:Script1.js',
 'MediaWiki:Script2.js',
 'u:dev:Script3/code.js',
 'u:wiki:Page1.js',
 'u:wiki:Page2.js'
 ]
});

```

### Notes about importing JavaScript

**Note: In this example, pay close attention to the placement of commas and other punctuation.** For people who aren't familiar with programming (and even those who are!), a common mistake when writing code is to accidentally delete, forget, or misplace critical symbols like commas or quotation marks. This can cause a *syntax error* that breaks the code. Carefully follow the convention shown here when using  `importArticles`.

One other approach is by using MediaWiki:ImportJS. But there's much more to `importArticles` than just this!

## HTML and wikitext markup

 File:Location Source.png
Source mode is designed to handle complex HTML codes on an article, allowing to reduce the amount of unwanted code that is sometimes automatically added. Source mode is the best way to edit if you are using templates, or HTML tags such as `<span>`, `<p>`, and `<div>`.

**Here are some useful tips:**

* When you see Templates in the edit area of visual mode, it refers to a template.
* When you see Code element over content in the edit area of visual mode, it contains code that is not supported or too complex for the visual editor to handle. In source mode you, will see this content in full.
* When you see Comments in the edit area of visual mode, it refers to a comment. In source mode, you will see this content as `<!-- -->`.
* MediaWiki has a special language called **wikitext** to make editing easier. This language is supported in visual mode and will not break as easily as HTML.
* Some HTML tags like `<u>` or `
` are supported in visual mode.
* Templates have no visual editing available, and you can only edit them in source mode (except for the special Infobox Builder).

## See also

* `@import` help (CSS)
* ImportJS help
* `importArticles` help (JS)
* Code cheatsheet