Merge "Add tags for undo edits"
[lhc/web/wiklou.git] / resources / src / mediawiki.rcfilters / ui / mw.rcfilters.ui.ChangesListWrapperWidget.js
index ea32e36..e2092dc 100644 (file)
                } );
                this.changesListViewModel.connect( this, {
                        invalidate: 'onModelInvalidate',
-                       update: 'onModelUpdate',
-                       newChangesExist: 'onNewChangesExist'
+                       update: 'onModelUpdate'
                } );
 
                this.$element
                        .addClass( 'mw-rcfilters-ui-changesListWrapperWidget' )
                        // We handle our own display/hide of the empty results message
+                       // We keep the timeout class here and remove it later, since at this
+                       // stage it is still needed to identify that the timeout occurred.
                        .removeClass( 'mw-changeslist-empty' );
-
-               this.setupNewChangesButtonContainer();
        };
 
        /* Initialization */
         *
         * @param {jQuery|string} $changesListContent The content of the updated changes list
         * @param {jQuery} $fieldset The content of the updated fieldset
+        * @param {string} noResultsDetails Type of no result error
         * @param {boolean} isInitialDOM Whether $changesListContent is the existing (already attached) DOM
         * @param {boolean} from Timestamp of the new changes
         */
        mw.rcfilters.ui.ChangesListWrapperWidget.prototype.onModelUpdate = function (
-               $changesListContent, $fieldset, isInitialDOM, from
+               $changesListContent, $fieldset, noResultsDetails, isInitialDOM, from
        ) {
                var conflictItem,
                        $message = $( '<div>' )
                                        .append(
                                                $( '<div>' )
                                                        .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-results-noresult' )
-                                                       .text( mw.message( 'recentchanges-noresult' ).text() )
+                                                       .text( mw.msg( this.getMsgKeyForNoResults( noResultsDetails ) ) )
                                        );
+
+                               this.$element.removeClass( 'mw-changeslist-timeout' );
+                               this.$element.removeClass( 'mw-changeslist-notargetpage' );
                        }
 
                        this.$element.append( $message );
 
                }
 
+               this.$element.prepend( $( '<div>' ).addClass( 'mw-changeslist-overlay' ) );
+
                loaderPromise.done( function () {
                        if ( !isInitialDOM && !isEmpty ) {
                                // Make sure enhanced RC re-initializes correctly
                } );
        };
 
+       /** Toggles overlay class on changes list
+        *
+        * @param {boolean} isVisible True if overlay should be visible
+        */
+       mw.rcfilters.ui.ChangesListWrapperWidget.prototype.toggleOverlay = function ( isVisible ) {
+               this.$element.toggleClass( 'mw-rcfilters-ui-changesListWrapperWidget--overlaid', isVisible );
+       };
+
+       /**
+        * Map a reason for having no results to its message key
+        *
+        * @param {string} reason One of the NO_RESULTS_* "constant" that represent
+        *      a reason for having no results
+        * @return {string} Key for the message that explains why there is no results in this case
+        */
+       mw.rcfilters.ui.ChangesListWrapperWidget.prototype.getMsgKeyForNoResults = function ( reason ) {
+               var reasonMsgKeyMap = {
+                       NO_RESULTS_NORMAL: 'recentchanges-noresult',
+                       NO_RESULTS_TIMEOUT: 'recentchanges-timeout',
+                       NO_RESULTS_NETWORK_ERROR: 'recentchanges-network',
+                       NO_RESULTS_NO_TARGET_PAGE: 'recentchanges-notargetpage'
+               };
+               return reasonMsgKeyMap[ reason ];
+       };
+
        /**
         * Emphasize the elements (or groups) newer than the 'from' parameter
         * @param {string} from Anything newer than this is considered 'new'
                        .fadeIn( 1000 );
        };
 
-       /**
-        * Respond to changes list model newChangesExist
-        *
-        * @param {boolean} newChangesExist Whether new changes exist
-        */
-       mw.rcfilters.ui.ChangesListWrapperWidget.prototype.onNewChangesExist = function ( newChangesExist ) {
-               this.showNewChangesLink.toggle( newChangesExist );
-       };
-
-       /**
-        * Respond to the user clicking the 'show new changes' button
-        */
-       mw.rcfilters.ui.ChangesListWrapperWidget.prototype.onShowNewChangesClick = function () {
-               this.controller.showNewChanges();
-       };
-
-       /**
-        * Setup the container for the 'new changes' button.
-        */
-       mw.rcfilters.ui.ChangesListWrapperWidget.prototype.setupNewChangesButtonContainer = function () {
-               this.showNewChangesLink = new OO.ui.ButtonWidget( {
-                       framed: false,
-                       label: mw.message( 'rcfilters-show-new-changes' ).text(),
-                       flags: [ 'progressive' ]
-               } );
-               this.showNewChangesLink.connect( this, { click: 'onShowNewChangesClick' } );
-               this.showNewChangesLink.toggle( false );
-
-               // HACK: Add the -newChanges div inside rcfilters-head, rather than right above us
-               // Visually it's the same place, but by putting it inside rcfilters-head we are
-               // able to use the min-height rule to prevent the page from jumping when this is added.
-               this.$element.parent().find( '.rcfilters-head' ).append(
-                       $( '<div>' )
-                               .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-newChanges' )
-                               .append( this.showNewChangesLink.$element )
-               );
-       };
-
        /**
         * Set up the highlight containers with all color circle indicators.
         *
                        // Regular RC
                        $content.find( 'ul.special li' )
                                .prepend( $highlights.clone() );
+
+                       $content.removeClass( 'mw-rcfilters-ui-changesListWrapperWidget-enhancedView' );
                }
        };
 
 
                        // Add highlight class to all highlighted list items
                        $elements
-                               .addClass( 'mw-rcfilters-highlight-color-' + filterItem.getHighlightColor() );
+                               .addClass(
+                                       'mw-rcfilters-highlighted ' +
+                                       'mw-rcfilters-highlight-color-' + filterItem.getHighlightColor()
+                               );
 
+                       // Track the filters for each item in .data( 'highlightedFilters' )
                        $elements.each( function () {
-                               var filterString = $( this ).attr( 'data-highlightedFilters' ) || '',
-                                       filters = filterString ? filterString.split( '|' ) : [];
-
+                               var filters = $( this ).data( 'highlightedFilters' );
+                               if ( !filters ) {
+                                       filters = [];
+                                       $( this ).data( 'highlightedFilters', filters );
+                               }
                                if ( filters.indexOf( filterItem.getLabel() ) === -1 ) {
                                        filters.push( filterItem.getLabel() );
                                }
-
-                               $( this )
-                                       .attr( 'data-highlightedFilters', filters.join( '|' ) );
                        } );
                }.bind( this ) );
-               // Apply a title for relevant filters
-               this.$element.find( '[data-highlightedFilters]' ).each( function () {
-                       var filterString = $( this ).attr( 'data-highlightedFilters' ) || '',
-                               filters = filterString ? filterString.split( '|' ) : [];
-
-                       if ( filterString ) {
-                               $( this ).attr( 'title', mw.msg( 'rcfilters-highlighted-filters-list', filters.join( ', ' ) ) );
+               // Apply a title to each highlighted item, with a list of filters
+               this.$element.find( '.mw-rcfilters-highlighted' ).each( function () {
+                       var filters = $( this ).data( 'highlightedFilters' );
+
+                       if ( filters && filters.length ) {
+                               $( this ).attr( 'title', mw.msg(
+                                       'rcfilters-highlighted-filters-list',
+                                       filters.join( mw.msg( 'comma-separator' ) )
+                               ) );
                        }
-               } );
 
+               } );
                if ( this.inEnhancedMode() ) {
                        this.updateEnhancedParentHighlight();
                }
        mw.rcfilters.ui.ChangesListWrapperWidget.prototype.clearHighlight = function () {
                // Remove highlight classes
                mw.rcfilters.HighlightColors.forEach( function ( color ) {
-                       this.$element.find( '.mw-rcfilters-highlight-color-' + color ).removeClass( 'mw-rcfilters-highlight-color-' + color );
+                       this.$element
+                               .find( '.mw-rcfilters-highlight-color-' + color )
+                               .removeClass( 'mw-rcfilters-highlight-color-' + color );
                }.bind( this ) );
 
-               this.$element.find( '[data-highlightedFilters]' )
+               this.$element.find( '.mw-rcfilters-highlighted' )
                        .removeAttr( 'title' )
-                       .removeAttr( 'data-highlightedFilters' );
+                       .removeData( 'highlightedFilters' )
+                       .removeClass( 'mw-rcfilters-highlighted' );
 
                // Remove grey from enhanced rows
                this.$element.find( '.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey' )