All files / mobile.startup Drawer.js

100% Statements 38/38
100% Branches 10/10
90.9% Functions 10/11
100% Lines 37/37

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133  1x 1x 1x 1x                               14x 14x         14x                       1x     1x 1x     2x             1x                         4x 4x   4x           3x 3x 3x 1x   3x     1x   4x                   3x   3x   3x 3x 3x                   14x 14x     14x     14x   12x     14x   9x   14x 14x       1x  
var
	mfExtend = require( './mfExtend' ),
	View = require( './View' ),
	util = require( './util' ),
	IconButton = require( './IconButton' );
 
/**
 * A {@link View} that pops up from the bottom of the screen.
 *
 * @class Drawer
 * @extends View
 * @final
 * @param {Object} props
 * @param {string} [props.className] Additional CSS classes to add
 * @param {jQuery.Element[]} [props.children] An array of elements to append to
 * @param {Function} [props.onShow] Callback called before showing the drawer.
 *  It receives a promise given the show process is asynchronous.
 * @param {Function} [props.onBeforeHide] Callback called before hiding the drawer
 */
function Drawer( props ) {
	this.drawerClassName = props.className || '';
	this.collapseIcon = new IconButton( {
		icon: 'expand',
		additionalClassNames: 'cancel',
		label: mw.msg( 'mobile-frontend-drawer-arrow-label' )
	} );
	View.call( this,
		util.extend(
			{
				onBeforeHide: () => {},
				showCollapseIcon: true
			},
			props,
			{
				className: 'drawer-container'
			},
			{ events: util.extend( {
				'click .drawer-container__mask': function () {
					this.hide();
				}.bind( this ),
				'click .cancel': function ( ev ) {
					ev.preventDefault();
					this.hide();
				}.bind( this ),
				click( ev ) {
					ev.stopPropagation();
				}
			}, props.events ) }
		)
	);
}
 
mfExtend( Drawer, View, {
	// in milliseconds
	minHideDelay: 100,
 
	/**
	 * Shows panel after a slight delay
	 *
	 * @memberof View
	 * @instance
	 * @method
	 * @return {jQuery.Promise}
	 */
	show() {
		const d = util.Deferred();
		this.$el.find( '.drawer-container__mask' )
			.addClass( 'drawer-container__mask--visible' );
		if ( !this.$el.find( '.drawer' ).hasClass( 'visible' ) ) {
			// use setTimeout to allow the browser to redraw if render() was called
			// just before show(); this is important for animations to work
			// (0ms doesn't work on Firefox, 10ms is enough)
			//
			// FIXME: setTimeout should be reconsidered in T209129
			setTimeout( () => {
				this.$el.find( '.drawer' ).addClass( 'visible' );
				if ( this.options.onShow ) {
					this.options.onShow( d );
				}
				setTimeout( () => d.resolve(), this.minHideDelay );
			}, this.minHideDelay );
		} else {
			d.resolve();
		}
		return d.promise();
	},
 
	/**
	 * Hides panel
	 *
	 * @memberof View
	 * @instance
	 */
	hide() {
		this.$el.find( '.drawer-container__mask' )
			.removeClass( 'drawer-container__mask--visible' );
		this.$el.find( '.drawer' ).removeClass( 'visible' );
		// see comment in show()
		setTimeout( () => {
			this.$el.find( '.drawer' ).removeClass( 'visible' );
			this.options.onBeforeHide( this );
		}, this.minHideDelay );
	},
 
	/**
	 * @inheritdoc
	 * @memberof Drawer
	 * @instance
	 */
	postRender() {
		const props = this.options,
			$mask = util.parseHTML( '<div>' )
				.addClass( 'drawer-container__mask' ),
			// eslint-disable-next-line mediawiki/class-doc
			$drawer = util.parseHTML( '<div>' )
				.addClass( `drawer drawer-container__drawer position-fixed ${this.drawerClassName}`.trim() );
 
		if ( props.showCollapseIcon ) {
			// append the collapse icon at the top of the drawer
			$drawer.prepend( this.collapseIcon.$el );
		}
 
		if ( props.children ) {
			// append children
			$drawer.append( props.children );
		}
		this.$el.append( $mask );
		this.$el.append( $drawer );
	}
} );
 
module.exports = Drawer;