RCFilters UI: Highlight behavior
[lhc/web/wiklou.git] / resources / src / mediawiki.rcfilters / mw.rcfilters.init.js
index 7b29d4b..33e9f57 100644 (file)
@@ -9,24 +9,39 @@
        var rcfilters = {
                /** */
                init: function () {
-                       var model = new mw.rcfilters.dm.FiltersViewModel(),
-                               controller = new mw.rcfilters.Controller( model ),
-                               widget = new mw.rcfilters.ui.FilterWrapperWidget( controller, model );
+                       var filtersModel = new mw.rcfilters.dm.FiltersViewModel(),
+                               changesListModel = new mw.rcfilters.dm.ChangesListViewModel(),
+                               controller = new mw.rcfilters.Controller( filtersModel, changesListModel ),
+                               $overlay = $( '<div>' )
+                                       .addClass( 'mw-rcfilters-ui-overlay' ),
+                               filtersWidget = new mw.rcfilters.ui.FilterWrapperWidget(
+                                       controller, filtersModel, { $overlay: $overlay } );
 
-                       model.initializeFilters( {
+                       // eslint-disable-next-line no-new
+                       new mw.rcfilters.ui.ChangesListWrapperWidget(
+                               filtersModel, changesListModel, $( '.mw-changeslist, .mw-changeslist-empty' ) );
+
+                       // eslint-disable-next-line no-new
+                       new mw.rcfilters.ui.FormWrapperWidget(
+                               changesListModel, $( '.rcoptions form' ) );
+
+                       controller.initialize( {
                                registration: {
                                        title: mw.msg( 'rcfilters-filtergroup-registration' ),
                                        type: 'send_unselected_if_any',
+                                       fullCoverage: true,
                                        filters: [
                                                {
                                                        name: 'hideliu',
                                                        label: mw.msg( 'rcfilters-filter-registered-label' ),
-                                                       description: mw.msg( 'rcfilters-filter-registered-description' )
+                                                       description: mw.msg( 'rcfilters-filter-registered-description' ),
+                                                       'class': 'mw-changeslist-liu'
                                                },
                                                {
                                                        name: 'hideanons',
                                                        label: mw.msg( 'rcfilters-filter-unregistered-label' ),
-                                                       description: mw.msg( 'rcfilters-filter-unregistered-description' )
+                                                       description: mw.msg( 'rcfilters-filter-unregistered-description' ),
+                                                       'class': 'mw-changeslist-anon'
                                                }
                                        ]
                                },
                                        // ** In this case, the parameter name is the group name. **
                                        type: 'string_options',
                                        separator: ',',
+                                       fullCoverage: false,
                                        filters: [
                                                {
                                                        name: 'newcomer',
                                                        label: mw.msg( 'rcfilters-filter-userExpLevel-newcomer-label' ),
-                                                       description: mw.msg( 'rcfilters-filter-userExpLevel-newcomer-description' )
+                                                       description: mw.msg( 'rcfilters-filter-userExpLevel-newcomer-description' ),
+                                                       conflicts: [ 'hideanons' ],
+                                                       'class': 'mw-changeslist-user-newcomer'
                                                },
                                                {
                                                        name: 'learner',
                                                        label: mw.msg( 'rcfilters-filter-userExpLevel-learner-label' ),
-                                                       description: mw.msg( 'rcfilters-filter-userExpLevel-learner-description' )
+                                                       description: mw.msg( 'rcfilters-filter-userExpLevel-learner-description' ),
+                                                       conflicts: [ 'hideanons' ],
+                                                       'class': 'mw-changeslist-user-learner'
                                                },
                                                {
                                                        name: 'experienced',
                                                        label: mw.msg( 'rcfilters-filter-userExpLevel-experienced-label' ),
-                                                       description: mw.msg( 'rcfilters-filter-userExpLevel-experienced-description' )
+                                                       description: mw.msg( 'rcfilters-filter-userExpLevel-experienced-description' ),
+                                                       conflicts: [ 'hideanons' ],
+                                                       'class': 'mw-changeslist-user-experienced'
                                                }
                                        ]
                                },
                                        // the functionality to the UI, whether we are dealing with 2
                                        // parameters in the group or more.
                                        type: 'send_unselected_if_any',
+                                       fullCoverage: true,
                                        filters: [
                                                {
                                                        name: 'hidemyself',
                                                        label: mw.msg( 'rcfilters-filter-editsbyself-label' ),
-                                                       description: mw.msg( 'rcfilters-filter-editsbyself-description' )
+                                                       description: mw.msg( 'rcfilters-filter-editsbyself-description' ),
+                                                       'class': 'mw-changeslist-self'
                                                },
                                                {
                                                        name: 'hidebyothers',
                                                        label: mw.msg( 'rcfilters-filter-editsbyother-label' ),
-                                                       description: mw.msg( 'rcfilters-filter-editsbyother-description' )
+                                                       description: mw.msg( 'rcfilters-filter-editsbyother-description' ),
+                                                       'class': 'mw-changeslist-others'
                                                }
                                        ]
                                },
                                automated: {
                                        title: mw.msg( 'rcfilters-filtergroup-automated' ),
                                        type: 'send_unselected_if_any',
+                                       fullCoverage: true,
                                        filters: [
                                                {
                                                        name: 'hidebots',
                                                        label: mw.msg( 'rcfilters-filter-bots-label' ),
                                                        description: mw.msg( 'rcfilters-filter-bots-description' ),
-                                                       'default': true
+                                                       'default': true,
+                                                       'class': 'mw-changeslist-bot'
                                                },
                                                {
                                                        name: 'hidehumans',
                                                        label: mw.msg( 'rcfilters-filter-humans-label' ),
                                                        description: mw.msg( 'rcfilters-filter-humans-description' ),
-                                                       'default': false
+                                                       'default': false,
+                                                       'class': 'mw-changeslist-human'
                                                }
                                        ]
                                },
                                significance: {
                                        title: mw.msg( 'rcfilters-filtergroup-significance' ),
                                        type: 'send_unselected_if_any',
+                                       fullCoverage: true,
                                        filters: [
                                                {
                                                        name: 'hideminor',
                                                        label: mw.msg( 'rcfilters-filter-minor-label' ),
-                                                       description: mw.msg( 'rcfilters-filter-minor-description' )
+                                                       description: mw.msg( 'rcfilters-filter-minor-description' ),
+                                                       'class': 'mw-changeslist-minor'
                                                },
                                                {
                                                        name: 'hidemajor',
                                                        label: mw.msg( 'rcfilters-filter-major-label' ),
-                                                       description: mw.msg( 'rcfilters-filter-major-description' )
+                                                       description: mw.msg( 'rcfilters-filter-major-description' ),
+                                                       'class': 'mw-changeslist-major'
                                                }
                                        ]
                                },
                                changetype: {
                                        title: mw.msg( 'rcfilters-filtergroup-changetype' ),
                                        type: 'send_unselected_if_any',
+                                       fullCoverage: true,
                                        filters: [
                                                {
                                                        name: 'hidepageedits',
                                                        label: mw.msg( 'rcfilters-filter-pageedits-label' ),
                                                        description: mw.msg( 'rcfilters-filter-pageedits-description' ),
-                                                       'default': false
+                                                       'default': false,
+                                                       'class': 'mw-changeslist-src-mw-edit'
+
                                                },
                                                {
                                                        name: 'hidenewpages',
                                                        label: mw.msg( 'rcfilters-filter-newpages-label' ),
                                                        description: mw.msg( 'rcfilters-filter-newpages-description' ),
-                                                       'default': false
+                                                       'default': false,
+                                                       'class': 'mw-changeslist-src-mw-new'
                                                },
                                                {
                                                        name: 'hidecategorization',
                                                        label: mw.msg( 'rcfilters-filter-categorization-label' ),
                                                        description: mw.msg( 'rcfilters-filter-categorization-description' ),
-                                                       'default': true
+                                                       'default': true,
+                                                       'class': 'mw-changeslist-src-mw-categorize'
                                                },
                                                {
                                                        name: 'hidelog',
                                                        label: mw.msg( 'rcfilters-filter-logactions-label' ),
                                                        description: mw.msg( 'rcfilters-filter-logactions-description' ),
-                                                       'default': false
+                                                       'default': false,
+                                                       'class': 'mw-changeslist-src-mw-log'
                                                }
                                        ]
                                }
                        } );
 
-                       $( '.rcoptions' ).before( widget.$element );
-
-                       // Initialize values
-                       controller.initialize();
+                       $( '.rcoptions' ).before( filtersWidget.$element );
+                       $( 'body' ).append( $overlay );
 
                        // HACK: Remove old-style filter links for filters handled by the widget
                        // Ideally the widget would handle all filters and we'd just remove .rcshowhide entirely
                                        name = 'hidemyself';
                                }
                                // This span corresponds to a filter that's in our model, so remove it
-                               if ( model.getItemByName( name ) ) {
+                               if ( filtersModel.getItemByName( name ) ) {
                                        // HACK: Remove the text node after the span.
                                        // If there isn't one, we're at the end, so remove the text node before the span.
                                        // This would be unnecessary if we added separators with CSS.
                                }
                        } );
 
-                       $( '.rcoptions form' ).submit( function () {
-                               var $form = $( this );
-
-                               // Get current filter values
-                               $.each( model.getParametersFromFilters(), function ( paramName, paramValue ) {
-                                       var $existingInput = $form.find( 'input[name=' + paramName + ']' );
-                                       // Check if the hidden input already exists
-                                       // This happens if the parameter was already given
-                                       // on load
-                                       if ( $existingInput.length ) {
-                                               // Update the value
-                                               $existingInput.val( paramValue );
-                                       } else {
-                                               // Append hidden fields with filter values
-                                               $form.append(
-                                                       $( '<input>' )
-                                                               .attr( 'type', 'hidden' )
-                                                               .attr( 'name', paramName )
-                                                               .val( paramValue )
-                                               );
-                                       }
-                               } );
-
-                               // Continue the submission process
-                               return true;
+                       window.addEventListener( 'popstate', function () {
+                               controller.updateFromURL();
+                               controller.updateChangesList();
                        } );
                }
        };