dépôts / lhc / web / wiklou.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: a18476e)
ApiSandbox: Use OO.ui.getDefaultOverlay()
authorBrad Jorsch <bjorsch@wikimedia.org>
Fri, 12 Jan 2018 15:18:41 +0000 (10:18 -0500)
committerBrad Jorsch <bjorsch@wikimedia.org>
Fri, 12 Jan 2018 15:18:41 +0000 (10:18 -0500)
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

resources/src/mediawiki.special/mediawiki.special.apisandbox.css patch | blob | history
resources/src/mediawiki.special/mediawiki.special.apisandbox.js patch | blob | history

diff --git a/resources/src/mediawiki.special/mediawiki.special.apisandbox.css b/resources/src/mediawiki.special/mediawiki.special.apisandbox.css
index 928fa17..acb3998 100644 (file)
--- 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 a6450e9..7ceb9e6 100644 (file)
--- 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 ||
-                       $( '<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 );
 
@@ -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,
                                $( '<div>' ).addClass( 'mw-apisandbox-optionalWidget-fields' ).append(
                                        $( '<div>' ).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;
        };
 
Wiklou, le Wiki du Wiklou