From: Moriel Schottlender Date: Tue, 30 May 2017 10:55:59 +0000 (+0300) Subject: RCFilters UI: Migrate FloatingMenuSelectWidget to MenuSelectWidget X-Git-Tag: 1.31.0-rc.0~3097^2 X-Git-Url: https://git.heureux-cyclage.org/?p=lhc%2Fweb%2Fwiklou.git;a=commitdiff_plain;h=8af6e14a954cbcdac59634516c3c332a1896415d 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 976b1fb4e2..9e0418caf4 100644 --- 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 index 67823c9a59..0000000000 --- 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 index 0000000000..2dd43a8611 --- /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 78f3a083d3..05cd24f55c 100644 --- 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 index d98ef2d060..0000000000 --- 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 = $( '
' ) - .addClass( 'mw-rcfilters-ui-floatingMenuSelectWidget-body' ); - - // Parent - mw.rcfilters.ui.FloatingMenuSelectWidget.parent.call( this, $.extend( { - $autoCloseIgnore: this.$overlay, - width: 650 - }, config ) ); - this.setGroupElement( - $( '
' ) - .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 index 0000000000..0dfbb4d1bb --- /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 = $( '
' ) + .addClass( 'mw-rcfilters-ui-menuSelectWidget-body' ); + + // Parent + mw.rcfilters.ui.MenuSelectWidget.parent.call( this, $.extend( { + $autoCloseIgnore: this.$overlay, + width: 650 + }, config ) ); + this.setGroupElement( + $( '
' ) + .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 acda29e12a..7ce9b6afff 100644 --- 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',