Put menus/popups of infused PHP widgets into the default overlay

With some special tweaks:
* Remove weird custom overlay handling in DateInputWidget that nobody
  actually used. I think if you need something special like that, you
  can just write two lines of JS code to attach the dropdown elsewhere.
* Also handle the CapsuleMultiselectWidget produced by HTMLForm's
  'multiselect' field in the same way.

Bug: T183069
Change-Id: I693f406194aeb826a3ab5bc78c97015b0b8a7fdb

diff --git a/includes/widget/ComplexNamespaceInputWidget.php b/includes/widget/ComplexNamespaceInputWidget.php
index 1d83f51..cdcdd24 100644 (file)
--- a/includes/widget/ComplexNamespaceInputWidget.php
+++ b/includes/widget/ComplexNamespaceInputWidget.php
@@ -113,6 +113,7 @@ class ComplexNamespaceInputWidget extends \OOUI\Widget {
                                )
                        )
                );
+               $config['namespace']['dropdown']['$overlay'] = true;
                return parent::getConfig( $config );
        }
 }

diff --git a/includes/widget/ComplexTitleInputWidget.php b/includes/widget/ComplexTitleInputWidget.php
index 912537a..aec6619 100644 (file)
--- a/includes/widget/ComplexTitleInputWidget.php
+++ b/includes/widget/ComplexTitleInputWidget.php
@@ -60,7 +60,9 @@ class ComplexTitleInputWidget extends \OOUI\Widget {
 
        public function getConfig( &$config ) {
                $config['namespace'] = $this->config['namespace'];
+               $config['namespace']['dropdown']['$overlay'] = true;
                $config['title'] = $this->config['title'];
+               $config['title']['$overlay'] = true;
                return parent::getConfig( $config );
        }
 }

diff --git a/includes/widget/DateInputWidget.php b/includes/widget/DateInputWidget.php
index b516331..0231cac 100644 (file)
--- a/includes/widget/DateInputWidget.php
+++ b/includes/widget/DateInputWidget.php
@@ -25,7 +25,6 @@ class DateInputWidget extends \OOUI\TextInputWidget {
        protected $precision = null;
        protected $mustBeAfter = null;
        protected $mustBeBefore = null;
-       protected $overlay = null;
 
        /**
         * @param array $config Configuration options
@@ -52,11 +51,6 @@ class DateInputWidget extends \OOUI\TextInputWidget {
         *   In the 'YYYY-MM-DD' or 'YYYY-MM' format, depending on `precision`.
         * @param string $config['mustBeBefore'] Validates the date to be before this.
         *   In the 'YYYY-MM-DD' or 'YYYY-MM' format, depending on `precision`.
-        * @param string $config['overlay'] The jQuery selector for the overlay layer on which to render
-        *   the calendar. This configuration is useful in cases where the expanded calendar is larger
-        *   than its container. The specified overlay layer is usually on top of the container and has
-        *   a larger area. Applicable only if the widget is infused. By default, the calendar uses
-        *   relative positioning.
         */
        public function __construct( array $config = [] ) {
                $config = array_merge( [
@@ -90,9 +84,6 @@ class DateInputWidget extends \OOUI\TextInputWidget {
                if ( isset( $config['placeholderLabel'] ) ) {
                        $this->placeholderLabel = $config['placeholderLabel'];
                }
-               if ( isset( $config['overlay'] ) ) {
-                       $this->overlay = $config['overlay'];
-               }
 
                // Set up placeholder text visible if the browser doesn't override it (logic taken from JS)
                if ( $this->placeholderDateFormat !== null ) {
@@ -159,9 +150,7 @@ class DateInputWidget extends \OOUI\TextInputWidget {
                if ( $this->mustBeBefore !== null ) {
                        $config['mustBeBefore'] = $this->mustBeBefore;
                }
-               if ( $this->overlay !== null ) {
-                       $config['overlay'] = $this->overlay;
-               }
+               $config['$overlay'] = true;
                return parent::getConfig( $config );
        }
 

diff --git a/includes/widget/NamespaceInputWidget.php b/includes/widget/NamespaceInputWidget.php
index 5fdc710..c638891 100644 (file)
--- a/includes/widget/NamespaceInputWidget.php
+++ b/includes/widget/NamespaceInputWidget.php
@@ -60,6 +60,7 @@ class NamespaceInputWidget extends \OOUI\DropdownInputWidget {
                $config['includeAllValue'] = $this->includeAllValue;
                $config['exclude'] = $this->exclude;
                // Skip DropdownInputWidget's getConfig(), we don't need 'options' config
+               $config['dropdown']['$overlay'] = true;
                return \OOUI\InputWidget::getConfig( $config );
        }
 }

diff --git a/includes/widget/SearchInputWidget.php b/includes/widget/SearchInputWidget.php
index 70b0dcc..e2428ba 100644 (file)
--- a/includes/widget/SearchInputWidget.php
+++ b/includes/widget/SearchInputWidget.php
@@ -68,6 +68,7 @@ class SearchInputWidget extends TitleInputWidget {
                if ( $this->dataLocation ) {
                        $config['dataLocation'] = $this->dataLocation;
                }
+               $config['$overlay'] = true;
                return parent::getConfig( $config );
        }
 }

diff --git a/includes/widget/SelectWithInputWidget.php b/includes/widget/SelectWithInputWidget.php
index 3abfbd0..45dd1aa 100644 (file)
--- a/includes/widget/SelectWithInputWidget.php
+++ b/includes/widget/SelectWithInputWidget.php
@@ -58,6 +58,7 @@ class SelectWithInputWidget extends \OOUI\Widget {
        public function getConfig( &$config ) {
                $config['textinput'] = $this->config['textinput'];
                $config['dropdowninput'] = $this->config['dropdowninput'];
+               $config['dropdowninput']['dropdown']['$overlay'] = true;
                $config['or'] = $this->config['or'];
                return parent::getConfig( $config );
        }

diff --git a/includes/widget/TitleInputWidget.php b/includes/widget/TitleInputWidget.php
index a29c3dc..15f48e5 100644 (file)
--- a/includes/widget/TitleInputWidget.php
+++ b/includes/widget/TitleInputWidget.php
@@ -75,6 +75,7 @@ class TitleInputWidget extends \OOUI\TextInputWidget {
                if ( $this->validateTitle !== null ) {
                        $config['validateTitle'] = $this->validateTitle;
                }
+               $config['$overlay'] = true;
                return parent::getConfig( $config );
        }
 }

diff --git a/includes/widget/UserInputWidget.php b/includes/widget/UserInputWidget.php
index a058ab6..9385b48 100644 (file)
--- a/includes/widget/UserInputWidget.php
+++ b/includes/widget/UserInputWidget.php
@@ -25,4 +25,9 @@ class UserInputWidget extends \OOUI\TextInputWidget {
        protected function getJavaScriptClassName() {
                return 'mw.widgets.UserInputWidget';
        }
+
+       public function getConfig( &$config ) {
+               $config['$overlay'] = true;
+               return parent::getConfig( $config );
+       }
 }

diff --git a/includes/widget/UsersMultiselectWidget.php b/includes/widget/UsersMultiselectWidget.php
index ea32058..5c4a91f 100644 (file)
--- a/includes/widget/UsersMultiselectWidget.php
+++ b/includes/widget/UsersMultiselectWidget.php
@@ -61,6 +61,7 @@ class UsersMultiselectWidget extends \OOUI\Widget {
                        $config['placeholder'] = $this->inputPlaceholder;
                }
 
+               $config['$overlay'] = true;
                return parent::getConfig( $config );
        }
 

diff --git a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js
index 9d2e93b..2265132 100644 (file)
--- a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js
+++ b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js
@@ -89,7 +89,7 @@
         *     calendar uses relative positioning.
         */
        mw.widgets.DateInputWidget = function MWWDateInputWidget( config ) {
-               var placeholderDateFormat, mustBeAfter, mustBeBefore;
+               var placeholderDateFormat, mustBeAfter, mustBeBefore, $overlay;
 
                // Config initialization
                config = $.extend( {
@@ -189,14 +189,11 @@
                        .addClass( 'mw-widget-dateInputWidget' )
                        .append( this.$handle, this.textInput.$element, this.calendar.$element );
 
-               // config.overlay is the selector to be used for config.$overlay, specified from PHP
-               if ( config.overlay ) {
-                       config.$overlay = $( config.overlay );
-               }
+               $overlay = config.$overlay === true ? OO.ui.getDefaultOverlay() : config.$overlay;
 
-               if ( config.$overlay ) {
+               if ( $overlay ) {
                        this.calendar.setFloatableContainer( this.$element );
-                       config.$overlay.append( this.calendar.$element );
+                       $overlay.append( this.calendar.$element );
 
                        // The text input and calendar are not in DOM order, so fix up focus transitions.
                        this.textInput.$input.on( 'keydown', function ( e ) {

diff --git a/resources/src/mediawiki/htmlform/multiselect.js b/resources/src/mediawiki/htmlform/multiselect.js
index 37c0554..d295ca7 100644 (file)
--- a/resources/src/mediawiki/htmlform/multiselect.js
+++ b/resources/src/mediawiki/htmlform/multiselect.js
@@ -64,6 +64,7 @@
                        } );
                } );
                capsulesWidget = new OO.ui.CapsuleMultiselectWidget( {
+                       $overlay: true,
                        menu: {
                                items: capsulesOptions
                        }