From a0d6118af7d3532b4b39cdfe4814ecbeb6a70b66 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Bartosz=20Dziewo=C5=84ski?= Date: Tue, 2 Jan 2018 23:25:01 +0100 Subject: [PATCH] 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 --- includes/widget/ComplexNamespaceInputWidget.php | 1 + includes/widget/ComplexTitleInputWidget.php | 2 ++ includes/widget/DateInputWidget.php | 13 +------------ includes/widget/NamespaceInputWidget.php | 1 + includes/widget/SearchInputWidget.php | 1 + includes/widget/SelectWithInputWidget.php | 1 + includes/widget/TitleInputWidget.php | 1 + includes/widget/UserInputWidget.php | 5 +++++ includes/widget/UsersMultiselectWidget.php | 1 + .../mediawiki.widgets/mw.widgets.DateInputWidget.js | 11 ++++------- resources/src/mediawiki/htmlform/multiselect.js | 1 + 11 files changed, 19 insertions(+), 19 deletions(-) diff --git a/includes/widget/ComplexNamespaceInputWidget.php b/includes/widget/ComplexNamespaceInputWidget.php index 1d83f51d6f..cdcdd24e9a 100644 --- 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 912537aaad..aec6619777 100644 --- 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 b5163317cc..0231cacc00 100644 --- 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 5fdc7104ff..c638891ca0 100644 --- 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 70b0dcc1bd..e2428ba934 100644 --- 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 3abfbd0af4..45dd1aa549 100644 --- 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 a29c3dc3e6..15f48e5130 100644 --- 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 a058ab6596..9385b4812f 100644 --- 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 ea3205810f..5c4a91fc9f 100644 --- 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 9d2e93b8cf..2265132c88 100644 --- 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 37c0554acd..d295ca72d5 100644 --- 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 } -- 2.20.1