wikimedia/mediawiki-extensions-MobileFrontend

const
    mfExtend = require( './mfExtend' ),
    util = require( './util' ),
    View = require( './View' ),
    Icon = require( './Icon' );

/**
 * A wrapper for creating an icon button.
 *
 * @class IconButton
 * @extends module:mobile.startup/View
 *
 * @param {Object} options Configuration options
 */
function IconButton( options ) {
    if ( options.href ) {
        options.tagName = 'a';
    }
    if ( options.tagName === 'button' ) {
        options.isTypeButton = true;
    }
    View.call( this, options );
}

mfExtend( IconButton, View, {
    /**
     * @inheritdoc
     * @memberof IconButton
     * @instance
     */
    preRender() {
        this.options._buttonClasses = this.getButtonClasses();
        this.options._iconHTML = '';
        if ( this.options.icon ) {
            this._icon = new Icon( {
                base: this.options.base,
                glyphPrefix: this.options.glyphPrefix,
                icon: this.options.icon,
                rotation: this.options.rotation,
                isSmall: this.options.isSmall
            } );
            this.options._iconHTML = this._icon.$el.get( 0 ).outerHTML;
        }
    },
    getButtonClasses() {
        const additionalClassNames = this.options.additionalClassNames;
        const size = this.options.size;
        const weight = this.options.weight;
        const action = this.options.action;
        const isIconOnly = this.options.isIconOnly;
        let classes = 'cdx-button ';

        if ( this.options.tagName !== 'button' ) {
            classes += 'cdx-button--fake-button cdx-button--fake-button--enabled ';
        }
        if ( size ) {
            classes += `cdx-button--size-${ size } `;
        }
        if ( weight ) {
            classes += `cdx-button--weight-${ weight } `;
        }
        if ( action ) {
            classes += `cdx-button--action-${ action } `;
        }
        if ( isIconOnly ) {
            classes += 'cdx-button--icon-only ';
        }
        return classes + additionalClassNames;
    },
    /**
     * @inheritdoc
     * @memberof IconButton
     * @instance
     */
    isTemplateMode: true,
    /**
     * @memberof IconButton
     * @instance
     * @mixes module:mobile.startup/View#defaults
     * @property {Object} defaults Default options hash.
     * @property {string} defaults.tagName The name of the tag in which the button is wrapped.
     *  Defaults to 'a' when href option present.
     * @property {string} [defaults.href] value of href attribute,
     *  when set tagName will default to anchor tag
     * @property {string} defaults.additionalClassNames Additional classes to be added to the button
     * @property {string} defaults.title Tooltip text.
     * @property {string} defaults.size Button size.
     * Defaults to 'large'.
     * @property {boolean} defaults.weight Button weight.
     * Defaults to 'quiet'.
     * @property {boolean} defaults.action Button action.
     * @property {boolean} defaults.isIconOnly Whether button is an icon only button
     * Defaults to true.
     * @property {boolean} defaults.disabled should only be used with tagName button
     * @property {string} defaults.base String used as a base for generating class names.
     * Defaults to 'mf-icon'.
     * @property {string} defaults.glyphPrefix Prefix for the icon class
     * @property {string} defaults.icon Name of the icon.
     * @property {boolean} defaults.rotation will rotate the icon by a certain number
     *  of degrees. Must be ±90, 0 or ±180 or will throw exception.
     * @property {boolean} defaults.isSmall Whether the icon should be small.
     */
    defaults: {
        tagName: 'button',
        href: undefined,
        additionalClassNames: '',
        title: '',
        size: 'large',
        weight: 'quiet',
        action: '',
        isIconOnly: true,
        disabled: false,
        base: 'mf-icon',
        icon: '',
        rotation: 0,
        isSmall: false
    },
    /**
     * Return the full class name that is required for the icon to render
     *
     * @memberof IconButton
     * @instance
     * @return {string}
     */
    getClassName() {
        return this.$el.attr( 'class' );
    },
    getIcon() {
        return this._icon;
    },
    template: util.template( `
        <{{tagName}}
            type="button"
            {{#isTypeButton}}{{#disabled}}disabled{{/disabled}}{{/isTypeButton}}
            class="{{_buttonClasses}}"
            {{#id}}id="{{id}}"{{/id}}
            {{#href}}href="{{href}}"{{/href}}
            {{#title}}title="{{title}}"{{/title}}>
                {{{_iconHTML}}}
                <span>{{label}}</span>
        </{{tagName}}>
    ` )
} );

module.exports = IconButton;