RCFilters UI: Migrate FloatingMenuSelectWidget to MenuSelectWidget

FloatingMenuSelectWidget has been deprecated in OOUI, moving to the
MenuSelectWidget widget instead.

Change-Id: Id4e5e4c551d50242ce19837c2e958b9773139906

diff --git a/resources/Resources.php b/resources/Resources.php
index 976b1fb..9e0418c 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1764,7 +1764,7 @@ return [
                        'resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.TagItemWidget.js',
                        'resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagItemWidget.js',
                        'resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterMenuHeaderWidget.js',
-                       'resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FloatingMenuSelectWidget.js',
+                       'resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.MenuSelectWidget.js',
                        'resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js',
                        'resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js',
                        'resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListWidget.js',
@@ -1787,7 +1787,7 @@ return [
                        'resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuSectionOptionWidget.less',
                        'resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.TagItemWidget.less',
                        'resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuHeaderWidget.less',
-                       'resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FloatingMenuSelectWidget.less',
+                       'resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.MenuSelectWidget.less',
                        'resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterWrapperWidget.less',
                        'resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less',
                        'resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less',

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FloatingMenuSelectWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FloatingMenuSelectWidget.less
deleted file mode 100644 (file)
index 67823c9..0000000
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FloatingMenuSelectWidget.less
+++ /dev/null
@@ -1,30 +0,0 @@
-@import 'mediawiki.mixins';
-
-.mw-rcfilters-ui-floatingMenuSelectWidget {
-       z-index: auto;
-       max-width: 650px;
-
-       &.oo-ui-menuSelectWidget-invisible {
-               display: block;
-       }
-
-       &-noresults {
-               display: none;
-               padding: 0.5em;
-               color: #666;
-
-               .oo-ui-menuSelectWidget-invisible & {
-                       display: inline-block;
-               }
-       }
-
-       &-body {
-               max-height: 70vh;
-       }
-
-       &-footer {
-               background-color: #f8f9fa;
-               text-align: right;
-               padding: 0.5em;
-       }
-}

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.MenuSelectWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.MenuSelectWidget.less
new file mode 100644 (file)
index 0000000..2dd43a8
--- /dev/null
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.MenuSelectWidget.less
@@ -0,0 +1,30 @@
+@import 'mediawiki.mixins';
+
+.mw-rcfilters-ui-menuSelectWidget {
+       z-index: auto;
+       max-width: 650px;
+
+       &.oo-ui-menuSelectWidget-invisible {
+               display: block;
+       }
+
+       &-noresults {
+               display: none;
+               padding: 0.5em;
+               color: #666;
+
+               .oo-ui-menuSelectWidget-invisible & {
+                       display: inline-block;
+               }
+       }
+
+       &-body {
+               max-height: 70vh;
+       }
+
+       &-footer {
+               background-color: #f8f9fa;
+               text-align: right;
+               padding: 0.5em;
+       }
+}

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
index 78f3a08..05cd24f 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
@@ -422,7 +422,7 @@
         * @inheritdoc
         */
        mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.createMenuWidget = function ( menuConfig ) {
-               return new mw.rcfilters.ui.FloatingMenuSelectWidget(
+               return new mw.rcfilters.ui.MenuSelectWidget(
                        this.controller,
                        this.model,
                        $.extend( {

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FloatingMenuSelectWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FloatingMenuSelectWidget.js
deleted file mode 100644 (file)
index d98ef2d..0000000
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FloatingMenuSelectWidget.js
+++ /dev/null
@@ -1,143 +0,0 @@
-( function ( mw ) {
-       /**
-        * A floating menu widget for the filter list
-        *
-        * @extends OO.ui.FloatingMenuSelectWidget
-        *
-        * @constructor
-        * @param {mw.rcfilters.Controller} controller Controller
-        * @param {mw.rcfilters.dm.FiltersViewModel} model View model
-        * @param {Object} [config] Configuration object
-        * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
-        * @cfg {jQuery} [$footer] An optional footer for the menu
-        */
-       mw.rcfilters.ui.FloatingMenuSelectWidget = function MwRcfiltersUiFloatingMenuSelectWidget( controller, model, config ) {
-               var header;
-
-               config = config || {};
-
-               this.controller = controller;
-               this.model = model;
-
-               this.inputValue = '';
-               this.$overlay = config.$overlay || this.$element;
-               this.$footer = config.$footer;
-               this.$body = $( '<div>' )
-                               .addClass( 'mw-rcfilters-ui-floatingMenuSelectWidget-body' );
-
-               // Parent
-               mw.rcfilters.ui.FloatingMenuSelectWidget.parent.call( this, $.extend( {
-                       $autoCloseIgnore: this.$overlay,
-                       width: 650
-               }, config ) );
-               this.setGroupElement(
-                       $( '<div>' )
-                               .addClass( 'mw-rcfilters-ui-floatingMenuSelectWidget-group' )
-               );
-               this.setClippableElement( this.$body );
-               this.setClippableContainer( this.$element );
-
-               header = new mw.rcfilters.ui.FilterMenuHeaderWidget(
-                       this.controller,
-                       this.model,
-                       {
-                               $overlay: this.$overlay
-                       }
-               );
-
-               this.noResults = new OO.ui.LabelWidget( {
-                       label: mw.msg( 'rcfilters-filterlist-noresults' ),
-                       classes: [ 'mw-rcfilters-ui-floatingMenuSelectWidget-noresults' ]
-               } );
-
-               this.$element
-                       .addClass( 'mw-rcfilters-ui-floatingMenuSelectWidget' )
-                       .append( header.$element )
-                       .append(
-                               this.$body
-                                       .append( this.$group, this.noResults.$element )
-                       );
-
-               if ( this.$footer ) {
-                       this.$element.append(
-                               this.$footer
-                                       .addClass( 'mw-rcfilters-ui-floatingMenuSelectWidget-footer' )
-                       );
-               }
-       };
-
-       /* Initialize */
-
-       OO.inheritClass( mw.rcfilters.ui.FloatingMenuSelectWidget, OO.ui.FloatingMenuSelectWidget );
-
-       /* Events */
-
-       /**
-        * @event itemVisibilityChange
-        *
-        * Item visibility has changed
-        */
-
-       /* Methods */
-
-       /**
-        * @fires itemVisibilityChange
-        * @inheritdoc
-        */
-       mw.rcfilters.ui.FloatingMenuSelectWidget.prototype.updateItemVisibility = function () {
-               var i,
-                       itemWasHighlighted = false,
-                       inputVal = this.$input.val(),
-                       items = this.getItems();
-
-               // Since the method hides/shows items, we don't want to
-               // call it unless the input actually changed
-               if ( this.inputValue !== inputVal ) {
-                       // Parent method
-                       mw.rcfilters.ui.FloatingMenuSelectWidget.parent.prototype.updateItemVisibility.call( this );
-
-                       if ( inputVal !== '' ) {
-                               // Highlight the first item in the list
-                               for ( i = 0; i < items.length; i++ ) {
-                                       if (
-                                               !( items[ i ] instanceof OO.ui.MenuSectionOptionWidget ) &&
-                                               items[ i ].isVisible()
-                                       ) {
-                                               itemWasHighlighted = true;
-                                               this.highlightItem( items[ i ] );
-                                               break;
-                                       }
-                               }
-                       }
-
-                       if ( !itemWasHighlighted ) {
-                               this.highlightItem( null );
-                       }
-
-                       // Cache value
-                       this.inputValue = inputVal;
-
-                       this.emit( 'itemVisibilityChange' );
-               }
-       };
-
-       /**
-        * Override the item matcher to use the model's match process
-        *
-        * @inheritdoc
-        */
-       mw.rcfilters.ui.FloatingMenuSelectWidget.prototype.getItemMatcher = function ( s ) {
-               var results = this.model.findMatches( s, true );
-
-               return function ( item ) {
-                       return results.indexOf( item.getModel() ) > -1;
-               };
-       };
-
-       /**
-        * Scroll to the top of the menu
-        */
-       mw.rcfilters.ui.FloatingMenuSelectWidget.prototype.scrollToTop = function () {
-               this.$body.scrollTop( 0 );
-       };
-}( mediaWiki ) );

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.MenuSelectWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.MenuSelectWidget.js
new file mode 100644 (file)
index 0000000..0dfbb4d
--- /dev/null
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.MenuSelectWidget.js
@@ -0,0 +1,143 @@
+( function ( mw ) {
+       /**
+        * A floating menu widget for the filter list
+        *
+        * @extends OO.ui.MenuSelectWidget
+        *
+        * @constructor
+        * @param {mw.rcfilters.Controller} controller Controller
+        * @param {mw.rcfilters.dm.FiltersViewModel} model View model
+        * @param {Object} [config] Configuration object
+        * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
+        * @cfg {jQuery} [$footer] An optional footer for the menu
+        */
+       mw.rcfilters.ui.MenuSelectWidget = function MwRcfiltersUiMenuSelectWidget( controller, model, config ) {
+               var header;
+
+               config = config || {};
+
+               this.controller = controller;
+               this.model = model;
+
+               this.inputValue = '';
+               this.$overlay = config.$overlay || this.$element;
+               this.$footer = config.$footer;
+               this.$body = $( '<div>' )
+                               .addClass( 'mw-rcfilters-ui-menuSelectWidget-body' );
+
+               // Parent
+               mw.rcfilters.ui.MenuSelectWidget.parent.call( this, $.extend( {
+                       $autoCloseIgnore: this.$overlay,
+                       width: 650
+               }, config ) );
+               this.setGroupElement(
+                       $( '<div>' )
+                               .addClass( 'mw-rcfilters-ui-menuSelectWidget-group' )
+               );
+               this.setClippableElement( this.$body );
+               this.setClippableContainer( this.$element );
+
+               header = new mw.rcfilters.ui.FilterMenuHeaderWidget(
+                       this.controller,
+                       this.model,
+                       {
+                               $overlay: this.$overlay
+                       }
+               );
+
+               this.noResults = new OO.ui.LabelWidget( {
+                       label: mw.msg( 'rcfilters-filterlist-noresults' ),
+                       classes: [ 'mw-rcfilters-ui-menuSelectWidget-noresults' ]
+               } );
+
+               this.$element
+                       .addClass( 'mw-rcfilters-ui-menuSelectWidget' )
+                       .append( header.$element )
+                       .append(
+                               this.$body
+                                       .append( this.$group, this.noResults.$element )
+                       );
+
+               if ( this.$footer ) {
+                       this.$element.append(
+                               this.$footer
+                                       .addClass( 'mw-rcfilters-ui-menuSelectWidget-footer' )
+                       );
+               }
+       };
+
+       /* Initialize */
+
+       OO.inheritClass( mw.rcfilters.ui.MenuSelectWidget, OO.ui.MenuSelectWidget );
+
+       /* Events */
+
+       /**
+        * @event itemVisibilityChange
+        *
+        * Item visibility has changed
+        */
+
+       /* Methods */
+
+       /**
+        * @fires itemVisibilityChange
+        * @inheritdoc
+        */
+       mw.rcfilters.ui.MenuSelectWidget.prototype.updateItemVisibility = function () {
+               var i,
+                       itemWasHighlighted = false,
+                       inputVal = this.$input.val(),
+                       items = this.getItems();
+
+               // Since the method hides/shows items, we don't want to
+               // call it unless the input actually changed
+               if ( this.inputValue !== inputVal ) {
+                       // Parent method
+                       mw.rcfilters.ui.MenuSelectWidget.parent.prototype.updateItemVisibility.call( this );
+
+                       if ( inputVal !== '' ) {
+                               // Highlight the first item in the list
+                               for ( i = 0; i < items.length; i++ ) {
+                                       if (
+                                               !( items[ i ] instanceof OO.ui.MenuSectionOptionWidget ) &&
+                                               items[ i ].isVisible()
+                                       ) {
+                                               itemWasHighlighted = true;
+                                               this.highlightItem( items[ i ] );
+                                               break;
+                                       }
+                               }
+                       }
+
+                       if ( !itemWasHighlighted ) {
+                               this.highlightItem( null );
+                       }
+
+                       // Cache value
+                       this.inputValue = inputVal;
+
+                       this.emit( 'itemVisibilityChange' );
+               }
+       };
+
+       /**
+        * Override the item matcher to use the model's match process
+        *
+        * @inheritdoc
+        */
+       mw.rcfilters.ui.MenuSelectWidget.prototype.getItemMatcher = function ( s ) {
+               var results = this.model.findMatches( s, true );
+
+               return function ( item ) {
+                       return results.indexOf( item.getModel() ) > -1;
+               };
+       };
+
+       /**
+        * Scroll to the top of the menu
+        */
+       mw.rcfilters.ui.MenuSelectWidget.prototype.scrollToTop = function () {
+               this.$body.scrollTop( 0 );
+       };
+}( mediaWiki ) );

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListItemWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListItemWidget.js
index acda29e..7ce9b6a 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListItemWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListItemWidget.js
@@ -41,12 +41,12 @@
                        icon: 'ellipsis',
                        framed: false
                } );
-               this.menu = new OO.ui.FloatingMenuSelectWidget( {
+               this.menu = new OO.ui.MenuSelectWidget( {
                        classes: [ 'mw-rcfilters-ui-savedLinksListItemWidget-menu' ],
                        widget: this.popupButton,
                        width: 200,
                        horizontalPosition: 'end',
-                       $container: this.popupButton.$element,
+                       $floatableContainer: this.popupButton.$element,
                        items: [
                                new OO.ui.MenuOptionWidget( {
                                        data: 'edit',