Class: OverlayManager

OverlayManager(router, container)

new OverlayManager(router, container)

Manages opening and closing overlays when the URL hash changes to one of the registered values (see OverlayManager.add()).

This allows overlays to function like real pages, with similar browser back/forward and refresh behavior.

Parameters:
Name Type Description
router Router
container Element

where overlays should be managed
Source:

Methods

(static) getSingleton() → {OverlayManager}

Retrieve a singleton instance using 'mediawiki.router'.

Source:
Returns:
Type
OverlayManager

add(route, factory)

Add an overlay that should be shown for a specific fragment identifier.

The following code will display an overlay whenever a user visits a URL that ends with '#/hi/name'. The value of name will be passed to the overlay. Note the factory must return an Overlay. If the overlay needs to load code asynchronously that should be done inside the overlay.

Parameters:
Name Type Description
route RegExp | string

definition that can be a regular expression (optionally with parameters) or a string literal.

T238364: Routes should only contain characters allowed by RFC3986 to ensure compatibility across browsers. Encode the route with encodeURIComponent() prior to registering it with OverlayManager if necessary (should probably be done with all routes containing user generated characters) to avoid inconsistencies with how different browsers encode illegal URI characters:

  var encodedRoute = encodeURIComponent('ugc < " ` >');

  overlayManager.add(
    encodedRoute,
    function () { return new Overlay(); }
  );

  window.location.hash = '#' + encodedRoute;

The above example shows how to register a string literal route with illegal URI characters. Routes registered as a regex will likely NOT have to perform any encoding (unless they explicitly contain illegal URI characters) as their user generated content portion will likely just be a capturing group (e.g. /\/hi\/(.*)/).
factory function

a function returning an overlay
Source:
Example
overlayManager.add( /\/hi\/(.*)/, function ( name ) {
        var HiOverlay = M.require( 'HiOverlay' );
        return new HiOverlay( { name: name } ) );
    } );

replaceCurrent(overlay)

Replace the currently displayed overlay with a new overlay without changing the URL. This is useful for when you want to switch overlays, but don't want to change the back button or close box behavior.

Parameters:
Name Type Description
overlay Object

The overlay to display
Source: