From: Moriel Schottlender Date: Thu, 15 Jun 2017 00:15:52 +0000 (-0700) Subject: RCFilters: Change to the new views redesign X-Git-Tag: 1.31.0-rc.0~2919^2 X-Git-Url: http://git.cyclocoop.org/%22.htmlspecialchars%28%24url_syndic%29.%22?a=commitdiff_plain;h=a267e4ef0457017c01689639ad7d66f1b6f7e80e;p=lhc%2Fweb%2Fwiklou.git RCFilters: Change to the new views redesign - Allow for multiple footers for the menu, each configured for its own view (or multiple views) - Move the switch view buttons to the right of the input - Add a 'back' button on the menu header when we're in advanced filters view, moving back to default view Bug: T167384 Change-Id: I9fd0243f88f92ddacb4c912ff974f7d325f32f5d --- diff --git a/languages/i18n/en.json b/languages/i18n/en.json index 2590c62fb2..bdafeb590e 100644 --- a/languages/i18n/en.json +++ b/languages/i18n/en.json @@ -1350,6 +1350,7 @@ "recentchanges-legend-plusminus": "(±123)", "recentchanges-submit": "Show", "rcfilters-activefilters": "Active filters", + "rcfilters-advancedfilters": "Advanced filters", "rcfilters-quickfilters": "Saved filter settings", "rcfilters-quickfilters-placeholder-title": "No links saved yet", "rcfilters-quickfilters-placeholder-description": "To save your filter settings and reuse them later, click the bookmark icon in the Active Filter area, below.", @@ -1440,7 +1441,7 @@ "rcfilters-tag-prefix-namespace": ":$1", "rcfilters-tag-prefix-namespace-inverted": ":not $1", "rcfilters-tag-prefix-tags": "#$1", - "rcfilters-view-tags": "Tags", + "rcfilters-view-tags": "Tagged edits", "rcnotefrom": "Below {{PLURAL:$5|is the change|are the changes}} since $3, $4 (up to $1 shown).", "rclistfromreset": "Reset date selection", "rclistfrom": "Show new changes starting from $2, $3", diff --git a/languages/i18n/qqq.json b/languages/i18n/qqq.json index fad105d2fc..1c3ed36f0d 100644 --- a/languages/i18n/qqq.json +++ b/languages/i18n/qqq.json @@ -1540,6 +1540,7 @@ "recentchanges-legend-plusminus": "{{optional}}\nA plus/minus sign with a number for the legend.", "recentchanges-submit": "Label for submit button in [[Special:RecentChanges]]\n{{Identical|Show}}", "rcfilters-activefilters": "Title for the filters selection showing the active filters.", + "rcfilters-advancedfilters": "Title for the buttons allowing the user to switch to the various advanced filters views.", "rcfilters-quickfilters": "Label for the button that opens the saved filter settings menu in [[Special:RecentChanges]]", "rcfilters-quickfilters-placeholder-title": "Title for the text shown in the quick filters menu on [[Special:RecentChanges]] if the user has not saved any quick filters.", "rcfilters-quickfilters-placeholder-description": "Description for the text shown in the quick filters menu on [[Special:RecentChanges]] if the user has not saved any quick filters.", diff --git a/resources/Resources.php b/resources/Resources.php index 864f93eabe..75610ff8c4 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -1773,6 +1773,7 @@ return [ '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.MenuSelectWidget.js', + 'resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ViewSwitchWidget.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', @@ -1796,6 +1797,7 @@ return [ '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.MenuSelectWidget.less', + 'resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ViewSwitchWidget.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', @@ -1813,6 +1815,7 @@ return [ ], 'messages' => [ 'rcfilters-activefilters', + 'rcfilters-advancedfilters', 'rcfilters-quickfilters', 'rcfilters-quickfilters-placeholder-title', 'rcfilters-quickfilters-placeholder-description', diff --git a/resources/src/mediawiki.rcfilters/dm/mw.rcfilters.dm.FiltersViewModel.js b/resources/src/mediawiki.rcfilters/dm/mw.rcfilters.dm.FiltersViewModel.js index ebffaa0e6f..2447730031 100644 --- a/resources/src/mediawiki.rcfilters/dm/mw.rcfilters.dm.FiltersViewModel.js +++ b/resources/src/mediawiki.rcfilters/dm/mw.rcfilters.dm.FiltersViewModel.js @@ -20,7 +20,7 @@ this.parameterMap = {}; this.views = {}; - this.currentView = null; + this.currentView = 'default'; // Events this.aggregate( { update: 'filterItemUpdate' } ); @@ -496,7 +496,7 @@ * @return {string} View trigger, if exists */ mw.rcfilters.dm.FiltersViewModel.prototype.getViewTrigger = function ( view ) { - return this.views[ view ] && this.views[ view ].trigger; + return ( this.views[ view ] && this.views[ view ].trigger ) || ''; }; /** * Get the value of a specific parameter diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuHeaderWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuHeaderWidget.less index 24907b9eb4..d9c42baee4 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuHeaderWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuHeaderWidget.less @@ -22,6 +22,12 @@ padding-right: 0.5em; } + &-back { + width: 1em; + vertical-align: middle; + padding-left: 0.5em; + } + &-title { width: 100%; vertical-align: middle; diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less index 66e6d960e7..5ee86563cc 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less @@ -15,19 +15,48 @@ margin-top: 1.6em; } - .mw-rcfilters-ui-table { - margin-top: 0.3em; + &-wrapper { + .mw-rcfilters-ui-table { + margin-top: 0.3em; + } + + &-content { + &-title { + font-weight: bold; + color: #54595d; + } + + &-savedQueryTitle { + color: #72777d; + margin-left: 1em; + } + } } - &-wrapper-content { - &-title { - font-weight: bold; - color: #54595d; + &-views { + &-input { + width: 100%; } - &-savedQueryTitle { - color: #72777d; - margin-left: 1em; + &-select { + width: 1em; + + &-widget.oo-ui-widget { + display: block; + text-align: right; + + // Override OOUI rules + &.oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:first-child a.oo-ui-buttonElement-button, + .oo-ui-buttonOptionWidget a.oo-ui-buttonElement-button { + border-radius: 0; + border-left: 0; + } + + &.oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:last-child a.oo-ui-buttonElement-button { + border-radius: 0; + } + + } } } diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.MenuSelectWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.MenuSelectWidget.less index 2dd43a8611..8c54089ccd 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.MenuSelectWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.MenuSelectWidget.less @@ -23,8 +23,16 @@ } &-footer { - background-color: #f8f9fa; - text-align: right; padding: 0.5em; + background-color: #f8f9fa; + border-top: 1px solid #c8ccd1; + + & + & { + border-top: 0; + } + + &-feedback { + text-align: right; + } } } diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ViewSwitchWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ViewSwitchWidget.less new file mode 100644 index 0000000000..a6ce4cd88a --- /dev/null +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ViewSwitchWidget.less @@ -0,0 +1,14 @@ +.mw-rcfilters-ui-viewSwitchWidget { + label.oo-ui-labelWidget { + color: #54595d; + font-weight: bold; + } + + &-buttons { + margin-top: 0.5em; + + .oo-ui-buttonWidget:not( :first-child ) { + margin-left: 0.5em; + } + } +} diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterMenuHeaderWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterMenuHeaderWidget.js index b8b68a73cb..fe9148903c 100644 --- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterMenuHeaderWidget.js +++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterMenuHeaderWidget.js @@ -25,6 +25,15 @@ .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-title' ) }, config ) ); + // "Back" to default view button + this.backButton = new OO.ui.ButtonWidget( { + icon: 'previous', + framed: false, + title: mw.msg( 'rcfilters-filterlist-title' ), + classes: [ 'mw-rcfilters-ui-filterMenuHeaderWidget-backButton' ] + } ); + this.backButton.toggle( this.model.getCurrentView() !== 'default' ); + // Highlight button this.highlightButton = new OO.ui.ToggleButtonWidget( { icon: 'highlight', @@ -41,6 +50,7 @@ this.invertNamespacesButton.toggle( this.model.getCurrentView() === 'namespaces' ); // Events + this.backButton.connect( this, { click: 'onBackButtonClick' } ); this.highlightButton .connect( this, { click: 'onHighlightButtonClick' } ); this.invertNamespacesButton @@ -62,6 +72,10 @@ $( '
' ) .addClass( 'mw-rcfilters-ui-row' ) .append( + $( '
' ) + .addClass( 'mw-rcfilters-ui-cell' ) + .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-back' ) + .append( this.backButton.$element ), $( '
' ) .addClass( 'mw-rcfilters-ui-cell' ) .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-title' ) @@ -90,9 +104,12 @@ * Respond to model update event */ mw.rcfilters.ui.FilterMenuHeaderWidget.prototype.onModelUpdate = function () { + var currentView = this.model.getCurrentView(); + this.setLabel( this.model.getCurrentViewLabel() ); - this.invertNamespacesButton.toggle( this.model.getCurrentView() === 'namespaces' ); + this.invertNamespacesButton.toggle( currentView === 'namespaces' ); + this.backButton.toggle( currentView !== 'default' ); }; /** @@ -113,6 +130,10 @@ this.invertNamespacesButton.setActive( isInverted ); }; + mw.rcfilters.ui.FilterMenuHeaderWidget.prototype.onBackButtonClick = function () { + this.controller.switchView( 'default' ); + }; + /** * Respond to highlight button click */ 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 268138fbda..10f081c5b4 100644 --- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js +++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js @@ -44,16 +44,29 @@ hideWhenOutOfView: false, hideOnChoose: false, width: 650, - $footer: $( '
' ) - .append( - new OO.ui.ButtonWidget( { - framed: false, - icon: 'feedback', - flags: [ 'progressive' ], - label: mw.msg( 'rcfilters-filterlist-feedbacklink' ), - href: 'https://www.mediawiki.org/wiki/Help_talk:New_filters_for_edit_review' - } ).$element - ) + footers: [ + { + name: 'viewSelect', + // View select menu, appears on default view only + $element: $( '
' ) + .append( new mw.rcfilters.ui.ViewSwitchWidget( this.controller, this.model ).$element ), + views: [ 'default' ] + }, + { + name: 'feedback', + // Feedback footer, appears on all views + $element: $( '
' ) + .append( + new OO.ui.ButtonWidget( { + framed: false, + icon: 'feedback', + flags: [ 'progressive' ], + label: mw.msg( 'rcfilters-filterlist-feedbacklink' ), + href: 'https://www.mediawiki.org/wiki/Help_talk:New_filters_for_edit_review' + } ).$element + ) + } + ] }, input: { icon: 'search', @@ -126,6 +139,48 @@ ); } + if ( mw.config.get( 'wgStructuredChangeFiltersEnableExperimentalViews' ) ) { + // Add a selector at the right of the input + this.viewsSelectWidget = new OO.ui.ButtonSelectWidget( { + classes: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget' ], + items: [ + new OO.ui.ButtonOptionWidget( { + data: 'namespaces', + icon: 'article', + title: mw.msg( 'namespaces' ) + } ), + new OO.ui.ButtonOptionWidget( { + data: 'tags', + icon: 'tag', + title: mw.msg( 'rcfilters-view-tags' ) + } ) + ] + } ); + + // Rearrange the UI so the select widget is at the right of the input + this.$element.append( + $( '
' ) + .addClass( 'mw-rcfilters-ui-table' ) + .append( + $( '
' ) + .addClass( 'mw-rcfilters-ui-row' ) + .append( + $( '
' ) + .addClass( 'mw-rcfilters-ui-cell' ) + .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-views-input' ) + .append( this.input.$element ), + $( '
' ) + .addClass( 'mw-rcfilters-ui-cell' ) + .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-views-select' ) + .append( this.viewsSelectWidget.$element ) + ) + ) + ); + + // Event + this.viewsSelectWidget.connect( this, { choose: 'onViewsSelectWidgetChoose' } ); + } + rcFiltersRow.append( $( '
' ) .addClass( 'mw-rcfilters-ui-cell' ) @@ -161,6 +216,17 @@ /* Methods */ + /** + * Respond to view select widget choose event + * + * @param {OO.ui.ButtonOptionWidget} buttonOptionWidget Chosen widget + */ + mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onViewsSelectWidgetChoose = function ( buttonOptionWidget ) { + this.controller.switchView( buttonOptionWidget.getData() ); + this.viewsSelectWidget.selectItem( null ); + this.focus(); + }; + /** * Respond to input change event * diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js index 462651404e..ebef62fb53 100644 --- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js +++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js @@ -33,28 +33,6 @@ { $overlay: this.$overlay } ); - this.viewToggle = new OO.ui.ButtonSelectWidget( { - classes: [ 'mw-rcfilters-ui-filterWrapperWidget-viewToggleButtons' ], - items: [ - new OO.ui.ButtonOptionWidget( { - data: 'namespaces', - label: mw.msg( 'namespaces' ), - icon: 'article', - classes: [ 'mw-rcfilters-ui-filterWrapperWidget-viewToggleButtons-namespaces' ] - } ), - new OO.ui.ButtonOptionWidget( { - data: 'tags', - label: mw.msg( 'rcfilters-view-tags' ), - icon: 'tag', - classes: [ 'mw-rcfilters-ui-filterWrapperWidget-viewToggleButtons-tags' ] - } ) - ] - } ); - - // Events - this.model.connect( this, { update: 'onModelUpdate' } ); - this.viewToggle.connect( this, { select: 'onViewToggleSelect' } ); - // Initialize this.$element .addClass( 'mw-rcfilters-ui-filterWrapperWidget' ); @@ -73,37 +51,12 @@ } this.$element.append( - this.filterTagWidget.$element, - this.viewToggle.$element + this.filterTagWidget.$element ); - this.viewToggle.toggle( !!mw.config.get( 'wgStructuredChangeFiltersEnableExperimentalViews' ) ); }; /* Initialization */ OO.inheritClass( mw.rcfilters.ui.FilterWrapperWidget, OO.ui.Widget ); OO.mixinClass( mw.rcfilters.ui.FilterWrapperWidget, OO.ui.mixin.PendingElement ); - - /* Methods */ - - /** - * Respond to model update event - */ - mw.rcfilters.ui.FilterWrapperWidget.prototype.onModelUpdate = function () { - // Synchronize the state of the toggle buttons with the current view - this.viewToggle.selectItemByData( this.model.getCurrentView() ); - }; - - /** - * Respond to namespace toggle button click - * - * @param {OO.ui.ButtonWidget} buttonWidget The button that was clicked - */ - mw.rcfilters.ui.FilterWrapperWidget.prototype.onViewToggleSelect = function ( buttonWidget ) { - if ( buttonWidget ) { - this.controller.switchView( buttonWidget.getData() ); - this.filterTagWidget.focus(); - } - }; - }( 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 index d971faf56c..dda4ac5004 100644 --- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.MenuSelectWidget.js +++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.MenuSelectWidget.js @@ -9,7 +9,17 @@ * @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 + * @cfg {Object[]} [footers] An array of objects defining the footers for + * this menu, with a definition whether they appear per specific views. + * The expected structure is: + * [ + * { + * name: {string} A unique name for the footer object + * $element: {jQuery} A jQuery object for the content of the footer + * views: {string[]} Optional. An array stating which views this footer is + * active on. Use null or omit to display this on all views. + * } + * ] */ mw.rcfilters.ui.MenuSelectWidget = function MwRcfiltersUiMenuSelectWidget( controller, model, config ) { var header; @@ -23,9 +33,9 @@ this.inputValue = ''; this.$overlay = config.$overlay || this.$element; - this.$footer = config.$footer; this.$body = $( '
' ) .addClass( 'mw-rcfilters-ui-menuSelectWidget-body' ); + this.footers = []; // Parent mw.rcfilters.ui.MenuSelectWidget.parent.call( this, $.extend( { @@ -67,12 +77,24 @@ .append( this.$group, this.noResults.$element ) ); - if ( this.$footer ) { - this.$element.append( - this.$footer + // Append all footers; we will control their visibility + // based on view + config.footers = config.footers || []; + config.footers.forEach( function ( footerData ) { + var adjustedData = { + // Wrap the element with our own footer wrapper + $element: $( '
' ) .addClass( 'mw-rcfilters-ui-menuSelectWidget-footer' ) - ); - } + .addClass( 'mw-rcfilters-ui-menuSelectWidget-footer-' + footerData.name ) + .append( footerData.$element ), + views: footerData.views + }; + + this.footers.push( adjustedData ); + this.$element.append( adjustedData.$element ); + }.bind( this ) ); + + // Switch to the correct view this.switchView( this.model.getCurrentView() ); }; @@ -167,6 +189,7 @@ if ( this.views[ viewName ] && this.currentView !== viewName ) { this.clearItems(); this.addItems( this.views[ viewName ] ); + this.updateFooterVisibility( viewName ); this.$element .data( 'view', viewName ) @@ -174,9 +197,28 @@ .addClass( 'mw-rcfilters-ui-menuSelectWidget-view-' + viewName ); this.currentView = viewName; + this.clip(); } }; + /** + * Go over the available footers and decide which should be visible + * for this view + * + * @param {string} [currentView] Current view + */ + mw.rcfilters.ui.MenuSelectWidget.prototype.updateFooterVisibility = function ( currentView ) { + currentView = currentView || this.model.getCurrentView(); + + this.footers.forEach( function ( data ) { + data.$element.toggle( + // This footer should only be shown if it is configured + // for all views or for this specific view + !data.views || data.views.length === 0 || data.views.indexOf( currentView ) > -1 + ); + } ); + }; + /** * @fires itemVisibilityChange * @inheritdoc diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ViewSwitchWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ViewSwitchWidget.js new file mode 100644 index 0000000000..fef856722f --- /dev/null +++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ViewSwitchWidget.js @@ -0,0 +1,76 @@ +( function ( mw ) { + /** + * A widget for the footer for the default view, allowing to switch views + * + * @extends OO.ui.Widget + * + * @constructor + * @param {mw.rcfilters.Controller} controller Controller + * @param {mw.rcfilters.dm.FiltersViewModel} model View model + * @param {Object} [config] Configuration object + */ + mw.rcfilters.ui.ViewSwitchWidget = function MwRcfiltersUiViewSwitchWidget( controller, model, config ) { + config = config || {}; + + // Parent + mw.rcfilters.ui.ViewSwitchWidget.parent.call( this, config ); + + this.controller = controller; + this.model = model; + + this.buttons = new OO.ui.ButtonGroupWidget( { + items: [ + new OO.ui.ButtonWidget( { + data: 'namespaces', + icon: 'article', + label: mw.msg( 'namespaces' ) + } ), + new OO.ui.ButtonWidget( { + data: 'tags', + icon: 'tag', + label: mw.msg( 'rcfilters-view-tags' ) + } ) + ] + } ); + + // Events + this.model.connect( this, { update: 'onModelUpdate' } ); + this.buttons.aggregate( { click: 'buttonClick' } ); + this.buttons.connect( this, { buttonClick: 'onButtonClick' } ); + + this.$element + .addClass( 'mw-rcfilters-ui-viewSwitchWidget' ) + .append( + new OO.ui.LabelWidget( { + label: mw.msg( 'rcfilters-advancedfilters' ) + } ).$element, + $( '
' ) + .addClass( 'mw-rcfilters-ui-viewSwitchWidget-buttons' ) + .append( this.buttons.$element ) + ); + }; + + /* Initialize */ + + OO.inheritClass( mw.rcfilters.ui.ViewSwitchWidget, OO.ui.Widget ); + + /** + * Respond to model update event + */ + mw.rcfilters.ui.ViewSwitchWidget.prototype.onModelUpdate = function () { + var currentView = this.model.getCurrentView(); + + this.buttons.getItems().forEach( function ( buttonWidget ) { + buttonWidget.setActive( buttonWidget.getData() === currentView ); + } ); + }; + + /** + * Respond to button switch click + * + * @param {OO.ui.ButtonWidget} buttonWidget Clicked button + */ + mw.rcfilters.ui.ViewSwitchWidget.prototype.onButtonClick = function ( buttonWidget ) { + this.controller.switchView( buttonWidget.getData() ); + }; +}( mediaWiki ) );