'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',
'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',
+++ /dev/null
-@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;
- }
-}
--- /dev/null
+@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;
+ }
+}
* @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( {
+++ /dev/null
-( 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 ) );
--- /dev/null
+( 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 ) );
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',