wikimedia/mediawiki-extensions-MobileFrontend

View on GitHub
src/mobile.startup/CtaDrawer.js

Summary

Maintainability
A
0 mins
Test Coverage
const
    Drawer = require( './Drawer' ),
    util = require( './util' ),
    Button = require( './Button' ),
    Anchor = require( './Anchor' );

/**
 * Represents a query string value.
 *
 * @typedef {string|number|boolean|undefined|string[]|boolean[]} module:mobile.startup~QueryVal
 */
/**
 * Describes a combination of query string parameters.
 *
 * @typedef {Object.<string, module:mobile.startup~QueryVal>} module:mobile.startup~QueryParams
 */

/**
 * Describes a call to action drawer.
 *
 * @memberof module:mobile.startup
 * @typedef {Object} CtaOptions
 * @prop {string} [returnTo]
 * @prop {module:mobile.startup~QueryParams} [queryParams]
 * @prop {module:mobile.startup~QueryParams} [signupQueryParams]
 * @prop {Object} [progressiveButton] button options for Button element for signing in.
 *  If omitted will create a login URL.
 * @prop {Object} [actionAnchor] anchor options for Anchor element for signing up. If omitted
 *   will create a sign up URL
 * @prop {string} content text - what is the call to action?
 */

/**
 * Internal for use inside Minerva only, creates the drawer at the bottom of the screen that appears when an anonymous
 * user tries to perform an action that requires being logged in. It presents the user
 * with options to log in or sign up for a new account.
 *
 * @function CtaDrawer
 * @memberof module:mobile.startup
 * @param {module:mobile.startup.CtaOptions} options Options for drawer.
 * @return {module:mobile.startup/Drawer}
 */
function CtaDrawer( options = {} ) {
    const params = redirectParams( options.queryParams, options.returnTo );
    return new Drawer(
        util.extend( {
            children: [
                util.parseHTML( '<p>' ).text( options.content ),
                new Button( util.extend( {
                    progressive: true,
                    href: mw.util.getUrl( 'Special:UserLogin', params ),
                    label: mw.msg( 'mobile-frontend-watchlist-cta-button-login' )
                }, options.progressiveButton ) ).$el,
                util.parseHTML( '<div>' ).addClass( 'cta-drawer__anchors' ).append(
                    // Update Minerva first to avoid needing to keep this closeAnchor
                    new Anchor( util.extend( {
                        href: mw.util.getUrl(
                            'Special:UserLogin', signUpParams( params, options.signupQueryParams )
                        ),
                        progressive: true,
                        label: mw.msg( 'mobile-frontend-watchlist-cta-button-signup' )
                    }, options.actionAnchor ) ).$el
                )
            ]
        }, options )
    );
}

/**
 * Special:UserLogin post-request redirect query parameters.
 *
 * @ignore
 * @param {QueryParams} params
 * @param {string} [redirectURL]
 * @return {QueryParams}
 */
function redirectParams( params, redirectURL ) {
    return util.extend( {
        // use wgPageName as this includes the namespace if outside Main
        returnto: redirectURL || mw.config.get( 'wgPageName' )
    }, params );
}

/**
 * Special:UserLogin account creation query parameters.
 *
 * @ignore
 * @param {...QueryParams} params
 * @return {QueryParams}
 */
function signUpParams() {
    [].push.call( arguments, { type: 'signup' } );
    return util.extend.apply( util, arguments );
}

CtaDrawer.prototype.test = {
    redirectParams,
    signUpParams
};

module.exports = CtaDrawer;