FANDOM


Placement is a library for script placement. It makes placement customization much easier, standardizes selectors, and creates the My Tools menu if necessary.

Usage

Importing

To import and use the Placement library inside your script, use the following.

mw.hook('dev.placement').add(function (placement) {
    //your code here
});
importArticle({
    type: 'script',
    article: 'u:dev:MediaWiki:Placement.js'
});


Methods

The library exports an object (window.dev.placement.loader) with the following properties:

  • element
    • Returns a standardized element specified by the function parameter.
    • Accepted input values are listed below.
      • editdropdown - edit dropdown menu.
      • globalnav - global navigation user dropdown.
      • toolbar - bottom toolbar.
      • tools - My Tools menu; creates if it does not exist.
      • wikinav - community header dropdown.
  • custom
    • Returns a custom element name specified by the function parameter.
  • type
    • Returns a type specified by the function parameter, which typically either appends or prepends the button to the already specified element.
  • script
    • Specifies the script's name for customization purposes.
    • Is required and should be placed before other invocations of the placement object.
  • util
    • All-in-one method for using Placement; accepts an Object with four required parameters (element, type, script, and content). If the content is an Object, the script will automatically attempt to make it use UI-js.


Examples

Prepend Link to My Tools Menu
mw.hook('dev.placement').add(function (placement) {
    placement.script('ToolsMenuLink');
    $(placement.element('tools'))[placement.type('prepend')](
        $('<li>').append(
            $('<a>', {
                text: 'hello'
            })
        )
    );
});
Inserts Link after Custom Element
mw.hook('dev.placement').add(function (placement) {
    placement.script('CustomExampleLink');
    $('<li>').append(
        $('<a>', {
            text: 'hello'
        })
    )[placement.type('insertAfter')](placement.custom('.wds-global-navigation__user-menu div:nth-child(2) ul li:nth-child(2)'));
});
Prepend Link to My Tools Menu using Util
mw.hook('dev.placement').add(function (placement) {
    placement.util({
        script: 'ToolsMenuLink',
        element: 'tools',
        type: 'prepend',
        content: $('<li>').append(
            $('<a>', {
                text: 'hello'
            })
        )
    });
});


Customization

To customize a script's placement, first make sure that it uses this script. Then, start by exposing the global object.

window.dev = window.dev || {};
window.dev.placement = window.dev.placement || {};

Then specify your configuration, using element to determine where the script should be placed and type to change how the script is added (e.g. appended/prepended). The element parameter supports all excepted values for placement.element(), which are listed here, as well as custom selectors.

window.dev.placement['ScriptName'] = {
    element: 'tools',
    type: 'prepend'
};

For example, to move AjaxBatchDelete to the bottom of the edit dropdown, use the following:

window.dev = window.dev || {};
window.dev.placement = window.dev.placement || {};
window.dev.placement['AjaxBatchDelete'] = {
    element: 'editdropdown',
    type: 'append'
};


Changelog

v1.0 — February 13, 2019
TheGoldenPatrik1: Initial revision
v1.1 — March 27, 2019
TheGoldenPatrik1: Add all-in-one util function
Text above can be found here (edit)
Community content is available under CC-BY-SA unless otherwise noted.

Fandom may earn an affiliate commission on sales made from links on this page.

Stream the best stories.

Fandom may earn an affiliate commission on sales made from links on this page.

Get Disney+