Mostly via the shortcut of passing true to the '$overlay' parameter.
Also use it instead of <body> as the container for fullscreen mode, so
we don't have to worry about different z indexes to not go over the
default overlay in different skins.
And rename our OptionalWidget's "$overlay" parameter to "$cover" since
it's not an overlay in the sense that OOUI uses that term.
Bug: T184790
Change-Id: Ia65400f4c8c5e0f44cdb30e09c854fa38590e39d
bottom: 0;
right: 0;
background: #fff;
bottom: 0;
right: 0;
background: #fff;
}
.mw-apisandbox-fullscreen .mw-apisandbox-container {
}
.mw-apisandbox-fullscreen .mw-apisandbox-container {
.mw-apisandbox-optionalWidget.oo-ui-widget-disabled {
position: relative;
.mw-apisandbox-optionalWidget.oo-ui-widget-disabled {
position: relative;
- z-index: 0; /* New stacking context to prevent the overlay from leaking out */
+ z-index: 0; /* New stacking context to prevent the cover from leaking out */
-.mw-apisandbox-optionalWidget-overlay {
+.mw-apisandbox-optionalWidget-cover {
position: absolute;
left: 0;
right: 0;
position: absolute;
left: 0;
right: 0;
widget = new OO.ui.CapsuleMultiselectWidget( {
allowArbitrary: true,
allowDuplicates: Util.apiBool( pi.allowsduplicates ),
widget = new OO.ui.CapsuleMultiselectWidget( {
allowArbitrary: true,
allowDuplicates: Util.apiBool( pi.allowsduplicates ),
- $overlay: $( '#mw-apisandbox-ui' )
} );
widget.paramInfo = pi;
$.extend( widget, WidgetMethods.capsuleWidget );
} );
widget.paramInfo = pi;
$.extend( widget, WidgetMethods.capsuleWidget );
widget = new OO.ui.CapsuleMultiselectWidget( {
menu: { items: items },
widget = new OO.ui.CapsuleMultiselectWidget( {
menu: { items: items },
- $overlay: $( '#mw-apisandbox-ui' )
} );
widget.paramInfo = pi;
$.extend( widget, WidgetMethods.capsuleWidget );
} else {
widget = new OO.ui.DropdownWidget( {
menu: { items: items },
} );
widget.paramInfo = pi;
$.extend( widget, WidgetMethods.capsuleWidget );
} else {
widget = new OO.ui.DropdownWidget( {
menu: { items: items },
- $overlay: $( '#mw-apisandbox-ui' )
} );
widget.paramInfo = pi;
$.extend( widget, WidgetMethods.dropdownWidget );
} );
widget.paramInfo = pi;
$.extend( widget, WidgetMethods.dropdownWidget );
widget = new OO.ui.CapsuleMultiselectWidget( {
menu: { items: items },
widget = new OO.ui.CapsuleMultiselectWidget( {
menu: { items: items },
- $overlay: $( '#mw-apisandbox-ui' )
} );
widget.paramInfo = pi;
$.extend( widget, WidgetMethods.capsuleWidget );
} );
widget.paramInfo = pi;
$.extend( widget, WidgetMethods.capsuleWidget );
} else {
widget = new OO.ui.DropdownWidget( {
menu: { items: items },
} else {
widget = new OO.ui.DropdownWidget( {
menu: { items: items },
- $overlay: $( '#mw-apisandbox-ui' )
} );
widget.paramInfo = pi;
$.extend( widget, WidgetMethods.dropdownWidget );
} );
widget.paramInfo = pi;
$.extend( widget, WidgetMethods.dropdownWidget );
widget = new OO.ui.CapsuleMultiselectWidget( {
allowArbitrary: true,
allowDuplicates: Util.apiBool( pi.allowsduplicates ),
widget = new OO.ui.CapsuleMultiselectWidget( {
allowArbitrary: true,
allowDuplicates: Util.apiBool( pi.allowsduplicates ),
- $overlay: $( '#mw-apisandbox-ui' ),
popup: {
classes: [ 'mw-apisandbox-popup' ],
$content: $content
popup: {
classes: [ 'mw-apisandbox-popup' ],
$content: $content
if ( ApiSandbox.isFullscreen ) {
fullscreenButton.setLabel( mw.message( 'apisandbox-unfullscreen' ).text() );
fullscreenButton.setTitle( mw.message( 'apisandbox-unfullscreen-tooltip' ).text() );
if ( ApiSandbox.isFullscreen ) {
fullscreenButton.setLabel( mw.message( 'apisandbox-unfullscreen' ).text() );
fullscreenButton.setTitle( mw.message( 'apisandbox-unfullscreen-tooltip' ).text() );
+ OO.ui.getDefaultOverlay().prepend( $ui );
} else {
fullscreenButton.setLabel( mw.message( 'apisandbox-fullscreen' ).text() );
fullscreenButton.setTitle( mw.message( 'apisandbox-fullscreen-tooltip' ).text() );
} else {
fullscreenButton.setLabel( mw.message( 'apisandbox-fullscreen' ).text() );
fullscreenButton.setTitle( mw.message( 'apisandbox-fullscreen-tooltip' ).text() );
if ( !formatDropdown ) {
formatDropdown = new OO.ui.DropdownWidget( {
menu: { items: [] },
if ( !formatDropdown ) {
formatDropdown = new OO.ui.DropdownWidget( {
menu: { items: [] },
- $overlay: $( '#mw-apisandbox-ui' )
} );
formatDropdown.getMenu().on( 'select', Util.onFormatDropdownChange );
}
} );
formatDropdown.getMenu().on( 'select', Util.onFormatDropdownChange );
}
booklet.setPage( '|results|' );
} ).setDisabled( !paramsAreForced ) ).$element,
new OO.ui.PopupButtonWidget( {
booklet.setPage( '|results|' );
} ).setDisabled( !paramsAreForced ) ).$element,
new OO.ui.PopupButtonWidget( {
- $overlay: $( '#mw-apisandbox-ui' ),
framed: false,
icon: 'info',
popup: {
framed: false,
icon: 'info',
popup: {
if ( pi.helpurls.length ) {
buttons.push( new OO.ui.PopupButtonWidget( {
if ( pi.helpurls.length ) {
buttons.push( new OO.ui.PopupButtonWidget( {
- $overlay: $( '#mw-apisandbox-ui' ),
label: mw.message( 'apisandbox-helpurls' ).text(),
icon: 'help',
popup: {
label: mw.message( 'apisandbox-helpurls' ).text(),
icon: 'help',
popup: {
if ( pi.examples.length ) {
buttons.push( new OO.ui.PopupButtonWidget( {
if ( pi.examples.length ) {
buttons.push( new OO.ui.PopupButtonWidget( {
- $overlay: $( '#mw-apisandbox-ui' ),
label: mw.message( 'apisandbox-examples' ).text(),
icon: 'code',
popup: {
label: mw.message( 'apisandbox-examples' ).text(),
icon: 'code',
popup: {
config = config || {};
this.widget = widget;
config = config || {};
this.widget = widget;
- this.$overlay = config.$overlay ||
- $( '<div>' ).addClass( 'mw-apisandbox-optionalWidget-overlay' );
+ this.$cover = config.$cover ||
+ $( '<div>' ).addClass( 'mw-apisandbox-optionalWidget-cover' );
this.checkbox = new OO.ui.CheckboxInputWidget( config.checkbox )
.on( 'change', this.onCheckboxChange, [], this );
this.checkbox = new OO.ui.CheckboxInputWidget( config.checkbox )
.on( 'change', this.onCheckboxChange, [], this );
- this.$overlay.on( 'click', this.onOverlayClick.bind( this ) );
+ this.$cover.on( 'click', this.onOverlayClick.bind( this ) );
this.$element
.addClass( 'mw-apisandbox-optionalWidget' )
.append(
this.$element
.addClass( 'mw-apisandbox-optionalWidget' )
.append(
$( '<div>' ).addClass( 'mw-apisandbox-optionalWidget-fields' ).append(
$( '<div>' ).addClass( 'mw-apisandbox-optionalWidget-widget' ).append(
widget.$element
$( '<div>' ).addClass( 'mw-apisandbox-optionalWidget-fields' ).append(
$( '<div>' ).addClass( 'mw-apisandbox-optionalWidget-widget' ).append(
widget.$element
OptionalWidget[ 'super' ].prototype.setDisabled.call( this, disabled );
this.widget.setDisabled( this.isDisabled() );
this.checkbox.setSelected( !this.isDisabled() );
OptionalWidget[ 'super' ].prototype.setDisabled.call( this, disabled );
this.widget.setDisabled( this.isDisabled() );
this.checkbox.setSelected( !this.isDisabled() );
- this.$overlay.toggle( this.isDisabled() );
+ this.$cover.toggle( this.isDisabled() );