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 | 1x 1x 1x 14x 1x 1x 1x 2x 14x 14x 14x 14x 14x 4x 4x 4x 4x 4x 4x 3x 3x 3x 1x 3x 1x 4x 3x 3x 3x 3x 3x 3x 3x 14x 14x 14x 14x 12x 14x 9x 14x 1x | const
View = require( './View' ),
util = require( './util' ),
IconButton = require( './IconButton' );
/**
* A {@link View} that pops up from the bottom of the screen.
*
* @final
*/
class Drawer extends View {
/**
* @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. This is used in
* production by GrowthExperiments.
* @param {Function} [props.onBeforeHide] Callback called before hiding the drawer
*/
constructor( props ) {
super(
util.extend(
{
onBeforeHide: () => {},
showCollapseIcon: true
},
props,
{ events: util.extend( {
'click .drawer-container__mask': () => {
this.hide();
},
'click .cancel': ( ev ) => {
ev.preventDefault();
this.hide();
},
click( ev ) {
ev.stopPropagation();
}
}, props.events ) }
)
);
}
initialize( props ) {
this.drawerClassName = props.className || '';
props.className = 'drawer-container';
this.collapseIcon = new IconButton( {
icon: 'expand',
additionalClassNames: 'cancel',
label: mw.msg( 'mobile-frontend-drawer-arrow-label' )
} );
// in milliseconds
this.minHideDelay = 100;
super.initialize( props );
}
/**
* Shows panel after a slight delay
*
* @memberof module:mobile.startup/Drawer
* @instance
* @method
* @return {jQuery.Promise} which is used by GrowthExperiments
*/
show() {
const d = util.Deferred();
this.$el.prepend( this.$mask );
// Force redraw by asking the browser to measure the element's width
this.$el.width();
const $drawer = this.$el.find( '.drawer' );
this.$mask.addClass( 'drawer-container__mask--visible' );
if ( !$drawer.hasClass( 'visible' ) ) {
$drawer.addClass( 'visible' );
// IntersectionObserver doesn't fire for content
// in drawers, so trigger manually (T361212)
mw.hook( 'mobileFrontend.loadLazyImages' ).fire( this.$el );
if ( this.options.onShow ) {
this.options.onShow( d );
}
requestAnimationFrame( () => d.resolve() );
} else {
d.resolve();
}
return d.promise();
}
/**
* Hides panel
*/
hide() {
const $drawer = this.$el.find( '.drawer' );
$drawer.removeClass( 'visible' );
this.$mask.removeClass( 'drawer-container__mask--visible' );
// Should really use 'transitionend' event here, but as the
// parent $drawer element is often detatched as well, this
// might not fire until the next show animation.
setTimeout( () => {
this.$mask.detach();
}, 100 );
requestAnimationFrame( () => {
this.options.onBeforeHide( this );
} );
}
/**
* @inheritdoc
*/
postRender() {
this.$mask = util.parseHTML( '<div>' ).addClass( 'drawer-container__mask' );
const props = this.options,
// 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( $drawer );
}
}
module.exports = Drawer;
|