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;
|