From ea84d81e6a65968da7c56dc8623b22803418bf92 Mon Sep 17 00:00:00 2001 From: Brad Jorsch Date: Fri, 12 Jan 2018 10:18:41 -0500 Subject: [PATCH] ApiSandbox: Use OO.ui.getDefaultOverlay() Mostly via the shortcut of passing true to the '$overlay' parameter. Also use it instead of 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 --- .../mediawiki.special.apisandbox.css | 5 ++- .../mediawiki.special.apisandbox.js | 32 +++++++++---------- 2 files changed, 18 insertions(+), 19 deletions(-) diff --git a/resources/src/mediawiki.special/mediawiki.special.apisandbox.css b/resources/src/mediawiki.special/mediawiki.special.apisandbox.css index 928fa1720d..acb39989dd 100644 --- a/resources/src/mediawiki.special/mediawiki.special.apisandbox.css +++ b/resources/src/mediawiki.special/mediawiki.special.apisandbox.css @@ -24,7 +24,6 @@ bottom: 0; right: 0; background: #fff; - z-index: 100; } .mw-apisandbox-fullscreen .mw-apisandbox-container { @@ -52,10 +51,10 @@ .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; diff --git a/resources/src/mediawiki.special/mediawiki.special.apisandbox.js b/resources/src/mediawiki.special/mediawiki.special.apisandbox.js index a6450e9136..7ceb9e670e 100644 --- a/resources/src/mediawiki.special/mediawiki.special.apisandbox.js +++ b/resources/src/mediawiki.special/mediawiki.special.apisandbox.js @@ -339,7 +339,7 @@ widget = new OO.ui.CapsuleMultiselectWidget( { allowArbitrary: true, allowDuplicates: Util.apiBool( pi.allowsduplicates ), - $overlay: $( '#mw-apisandbox-ui' ) + $overlay: true } ); widget.paramInfo = pi; $.extend( widget, WidgetMethods.capsuleWidget ); @@ -459,14 +459,14 @@ widget = new OO.ui.CapsuleMultiselectWidget( { menu: { items: items }, - $overlay: $( '#mw-apisandbox-ui' ) + $overlay: true } ); widget.paramInfo = pi; $.extend( widget, WidgetMethods.capsuleWidget ); } else { widget = new OO.ui.DropdownWidget( { menu: { items: items }, - $overlay: $( '#mw-apisandbox-ui' ) + $overlay: true } ); widget.paramInfo = pi; $.extend( widget, WidgetMethods.dropdownWidget ); @@ -499,7 +499,7 @@ widget = new OO.ui.CapsuleMultiselectWidget( { menu: { items: items }, - $overlay: $( '#mw-apisandbox-ui' ) + $overlay: true } ); widget.paramInfo = pi; $.extend( widget, WidgetMethods.capsuleWidget ); @@ -510,7 +510,7 @@ } else { widget = new OO.ui.DropdownWidget( { menu: { items: items }, - $overlay: $( '#mw-apisandbox-ui' ) + $overlay: true } ); widget.paramInfo = pi; $.extend( widget, WidgetMethods.dropdownWidget ); @@ -554,7 +554,7 @@ widget = new OO.ui.CapsuleMultiselectWidget( { allowArbitrary: true, allowDuplicates: Util.apiBool( pi.allowsduplicates ), - $overlay: $( '#mw-apisandbox-ui' ), + $overlay: true, popup: { classes: [ 'mw-apisandbox-popup' ], $content: $content @@ -817,7 +817,7 @@ if ( ApiSandbox.isFullscreen ) { fullscreenButton.setLabel( mw.message( 'apisandbox-unfullscreen' ).text() ); fullscreenButton.setTitle( mw.message( 'apisandbox-unfullscreen-tooltip' ).text() ); - $body.append( $ui ); + OO.ui.getDefaultOverlay().prepend( $ui ); } else { fullscreenButton.setLabel( mw.message( 'apisandbox-fullscreen' ).text() ); fullscreenButton.setTitle( mw.message( 'apisandbox-fullscreen-tooltip' ).text() ); @@ -1051,7 +1051,7 @@ if ( !formatDropdown ) { formatDropdown = new OO.ui.DropdownWidget( { menu: { items: [] }, - $overlay: $( '#mw-apisandbox-ui' ) + $overlay: true } ); formatDropdown.getMenu().on( 'select', Util.onFormatDropdownChange ); } @@ -1176,7 +1176,7 @@ booklet.setPage( '|results|' ); } ).setDisabled( !paramsAreForced ) ).$element, new OO.ui.PopupButtonWidget( { - $overlay: $( '#mw-apisandbox-ui' ), + $overlay: true, framed: false, icon: 'info', popup: { @@ -1445,7 +1445,7 @@ if ( pi.helpurls.length ) { buttons.push( new OO.ui.PopupButtonWidget( { - $overlay: $( '#mw-apisandbox-ui' ), + $overlay: true, label: mw.message( 'apisandbox-helpurls' ).text(), icon: 'help', popup: { @@ -1463,7 +1463,7 @@ if ( pi.examples.length ) { buttons.push( new OO.ui.PopupButtonWidget( { - $overlay: $( '#mw-apisandbox-ui' ), + $overlay: true, label: mw.message( 'apisandbox-examples' ).text(), icon: 'code', popup: { @@ -1844,8 +1844,8 @@ config = config || {}; this.widget = widget; - this.$overlay = config.$overlay || - $( '

' ).addClass( 'mw-apisandbox-optionalWidget-overlay' ); + this.$cover = config.$cover || + $( '

' ).addClass( 'mw-apisandbox-optionalWidget-cover' ); this.checkbox = new OO.ui.CheckboxInputWidget( config.checkbox ) .on( 'change', this.onCheckboxChange, [], this ); @@ -1858,12 +1858,12 @@ } } - this.$overlay.on( 'click', this.onOverlayClick.bind( this ) ); + this.$cover.on( 'click', this.onOverlayClick.bind( this ) ); this.$element .addClass( 'mw-apisandbox-optionalWidget' ) .append( - this.$overlay, + this.$cover, $( '

' ).addClass( 'mw-apisandbox-optionalWidget-fields' ).append( $( '

' ).addClass( 'mw-apisandbox-optionalWidget-widget' ).append( widget.$element @@ -1890,7 +1890,7 @@ 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() ); return this; }; -- 2.20.1