dev

This is a list of changes that wikis may need to make when making their custom JavaScript UCP-compatible during Phase 1. See also the list of different/renamed classes for changes that may need to be made to CSS selectors within custom JavaScript.

Mastheads

User profile mastheads are now lazy-loading. While we do not know for sure whether this behavior will remain until the end of Phase 1, something similar to the following can be used to wait for the masthead to load before attempting any actions with it: 

var interval = setInterval(function() {
    if ($('#userProfileApp').length) {
        clearInterval(interval);
        // You can now do stuff with the masthead.
    }
    // Change 1000 to the amount of seconds you want to be rechecking
    // whether the masthead exists.
}, 1000);

To detect whether a masthead is supposed to load on a page, you can search for one of the profile-prefixed globals, such as mw.config.get('profileUserName').

AMD

Legacy MediaWiki used AMD's require and define functions to separate Fandom-specific JavaScript into modules. UCP does not, and so places where these functions were used will throw errors.

AMD has been replaced with MediaWiki's mw.loader methods, such as mw.loader.using and mw.loader.require, and AMD modules have been replaced with regular ResourceLoader modules. mw.loader.require can be passed a ResourceLoader module name to retrieve the object associated with that module. mw.loader.using can be used to load ResourceLoader modules required for your script to function: 

mw.loader.using('mediawiki.api').then(function() {
    // You can now use mw.Api.
});
mw.loader.using(['mediawiki.api', 'mediawiki.util']).then(function() {
    // You can use mw.Api and mw.util.
});
$.when($someDeferredInstance, mw.loader.using('mediawiki.api')).then(function() {
    // mw.loader.using returns a $.Deferred instance that can be
    // awaited with other $.Deferred in constructs such as $.when.
});

A lot of useful ResourceLoader modules now have randomized suffixes, such as isTouchScreen-0264e82b.js. To find exact names of these modules, you can use the following: 

var moduleNames = mw.loader.getModuleNames().filter(function(moduleName) {
    return moduleName.indexOf('isTouchScreen-') === 0;
});
if (moduleNames.length) {
    var isTouchScreen = mw.loader.require(moduleNames[0]).isTouchScreen;
    console.info('Is your screen touchable?', isTouchScreen());
}

AMD module replacements

OOUI

A bunch of forms, as well as all modals ($.showCustomModal, wikia.ui.modal), on the UCP now use OOUI. The use of jQuery UI as well as some other core modules is now deprecated in favor of OOUI. Migration guides for legacy components to OOUI are coming.

Porting scripts that make use of $.showCustomModal can be done conveniently by importing the ShowCustomModal library.

jQuery

Here are listed differences under the $ global object, that may be related to jQuery or Fandom-specific modules adding their interface through them.

Wiki theme colors

As the wgSassParams global is no longer available (presumably due to Fandom no longer using SCSS), wiki theme colors will have to be grabbed directly from the page. An exception to this is ThemeDesigner, where mw.config.get('themeSettings') can be used.

You can see examples of how theme colors can be fetched in the source code for the Colors library - color-body, color-body-middle (should always be the same as color-body) and color-community-header can be fetched from background colors of respective elements and color-links, color-page and color-buttons can be fetched from respective CSS variables set on the :root element.

Editor

The new editor is more-or-less completely different from all three editors used on legacy Fandom. Here are only listed some of differences that most often cause errors in scripts.

importArticles

Globals

MediaWiki API

Other differences

See also