resources/src/mediawiki.rcfilters/ui/ChangesListWrapperWidget.js

   1 /**
   2  * List of changes
   3  *
   4  * @class mw.rcfilters.ui.ChangesListWrapperWidget
   5  * @extends OO.ui.Widget
   6  *
   7  * @constructor
   8  * @param {mw.rcfilters.dm.FiltersViewModel} filtersViewModel View model
   9  * @param {mw.rcfilters.dm.ChangesListViewModel} changesListViewModel View model
  10  * @param {mw.rcfilters.Controller} controller
  11  * @param {jQuery} $changesListRoot Root element of the changes list to attach to
  12  * @param {Object} [config] Configuration object
  13  */
  14 var ChangesListWrapperWidget = function MwRcfiltersUiChangesListWrapperWidget(
  15         filtersViewModel,
  16         changesListViewModel,
  17         controller,
  18         $changesListRoot,
  19         config
  20 ) {
  21         config = $.extend( {}, config, {
  22                 $element: $changesListRoot
  23         } );
  24
  25         // Parent
  26         ChangesListWrapperWidget.parent.call( this, config );
  27
  28         this.filtersViewModel = filtersViewModel;
  29         this.changesListViewModel = changesListViewModel;
  30         this.controller = controller;
  31
  32         // Events
  33         this.filtersViewModel.connect( this, {
  34                 itemUpdate: 'onItemUpdate',
  35                 highlightChange: 'onHighlightChange'
  36         } );
  37         this.changesListViewModel.connect( this, {
  38                 invalidate: 'onModelInvalidate',
  39                 update: 'onModelUpdate'
  40         } );
  41
  42         this.$element
  43                 .addClass( 'mw-rcfilters-ui-changesListWrapperWidget' )
  44                 // We handle our own display/hide of the empty results message
  45                 // We keep the timeout class here and remove it later, since at this
  46                 // stage it is still needed to identify that the timeout occurred.
  47                 .removeClass( 'mw-changeslist-empty' );
  48 };
  49
  50 /* Initialization */
  51
  52 OO.inheritClass( ChangesListWrapperWidget, OO.ui.Widget );
  53
  54 /**
  55  * Respond to the highlight feature being toggled on and off
  56  *
  57  * @param {boolean} highlightEnabled
  58  */
  59 ChangesListWrapperWidget.prototype.onHighlightChange = function ( highlightEnabled ) {
  60         if ( highlightEnabled ) {
  61                 this.applyHighlight();
  62         } else {
  63                 this.clearHighlight();
  64         }
  65 };
  66
  67 /**
  68  * Respond to a filter item model update
  69  */
  70 ChangesListWrapperWidget.prototype.onItemUpdate = function () {
  71         if ( this.controller.isInitialized() && this.filtersViewModel.isHighlightEnabled() ) {
  72                 // this.controller.isInitialized() is still false during page load,
  73                 // we don't want to clear/apply highlights at this stage.
  74                 this.clearHighlight();
  75                 this.applyHighlight();
  76         }
  77 };
  78
  79 /**
  80  * Respond to changes list model invalidate
  81  */
  82 ChangesListWrapperWidget.prototype.onModelInvalidate = function () {
  83         $( 'body' ).addClass( 'mw-rcfilters-ui-loading' );
  84 };
  85
  86 /**
  87  * Respond to changes list model update
  88  *
  89  * @param {jQuery|string} $changesListContent The content of the updated changes list
  90  * @param {jQuery} $fieldset The content of the updated fieldset
  91  * @param {string} noResultsDetails Type of no result error
  92  * @param {boolean} isInitialDOM Whether $changesListContent is the existing (already attached) DOM
  93  * @param {boolean} from Timestamp of the new changes
  94  */
  95 ChangesListWrapperWidget.prototype.onModelUpdate = function (
  96         $changesListContent, $fieldset, noResultsDetails, isInitialDOM, from
  97 ) {
  98         var conflictItem,
  99                 $message = $( '<div>' )
 100                         .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-results' ),
 101                 isEmpty = $changesListContent === 'NO_RESULTS',
 102                 // For enhanced mode, we have to load these modules, which are
 103                 // not loaded for the 'regular' mode in the backend
 104                 loaderPromise = mw.user.options.get( 'usenewrc' ) ?
 105                         mw.loader.using( [ 'mediawiki.special.changeslist.enhanced', 'mediawiki.icon' ] ) :
 106                         $.Deferred().resolve(),
 107                 widget = this;
 108
 109         this.$element.toggleClass( 'mw-changeslist', !isEmpty );
 110         if ( isEmpty ) {
 111                 this.$element.empty();
 112
 113                 if ( this.filtersViewModel.hasConflict() ) {
 114                         conflictItem = this.filtersViewModel.getFirstConflictedItem();
 115
 116                         $message
 117                                 .append(
 118                                         $( '<div>' )
 119                                                 .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-results-conflict' )
 120                                                 .text( mw.message( 'rcfilters-noresults-conflict' ).text() ),
 121                                         $( '<div>' )
 122                                                 .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-results-message' )
 123                                                 .text( mw.message( conflictItem.getCurrentConflictResultMessage() ).text() )
 124                                 );
 125                 } else {
 126                         $message
 127                                 .append(
 128                                         $( '<div>' )
 129                                                 .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-results-noresult' )
 130                                                 .text( mw.msg( this.getMsgKeyForNoResults( noResultsDetails ) ) )
 131                                 );
 132
 133                         // remove all classes matching mw-changeslist-*
 134                         this.$element.removeClass( function ( elementIndex, allClasses ) {
 135                                 return allClasses
 136                                         .split( ' ' )
 137                                         .filter( function ( className ) {
 138                                                 return className.indexOf( 'mw-changeslist-' ) === 0;
 139                                         } )
 140                                         .join( ' ' );
 141                         } );
 142                 }
 143
 144                 this.$element.append( $message );
 145         } else {
 146                 if ( !isInitialDOM ) {
 147                         this.$element.empty().append( $changesListContent );
 148
 149                         if ( from ) {
 150                                 this.emphasizeNewChanges( from );
 151                         }
 152                 }
 153
 154                 // Apply highlight
 155                 this.applyHighlight();
 156
 157         }
 158
 159         this.$element.prepend( $( '<div>' ).addClass( 'mw-changeslist-overlay' ) );
 160
 161         loaderPromise.done( function () {
 162                 if ( !isInitialDOM && !isEmpty ) {
 163                         // Make sure enhanced RC re-initializes correctly
 164                         mw.hook( 'wikipage.content' ).fire( widget.$element );
 165                 }
 166
 167                 $( 'body' ).removeClass( 'mw-rcfilters-ui-loading' );
 168         } );
 169 };
 170
 171 /** Toggles overlay class on changes list
 172  *
 173  * @param {boolean} isVisible True if overlay should be visible
 174  */
 175 ChangesListWrapperWidget.prototype.toggleOverlay = function ( isVisible ) {
 176         this.$element.toggleClass( 'mw-rcfilters-ui-changesListWrapperWidget--overlaid', isVisible );
 177 };
 178
 179 /**
 180  * Map a reason for having no results to its message key
 181  *
 182  * @param {string} reason One of the NO_RESULTS_* "constant" that represent
 183  *   a reason for having no results
 184  * @return {string} Key for the message that explains why there is no results in this case
 185  */
 186 ChangesListWrapperWidget.prototype.getMsgKeyForNoResults = function ( reason ) {
 187         var reasonMsgKeyMap = {
 188                 NO_RESULTS_NORMAL: 'recentchanges-noresult',
 189                 NO_RESULTS_TIMEOUT: 'recentchanges-timeout',
 190                 NO_RESULTS_NETWORK_ERROR: 'recentchanges-network',
 191                 NO_RESULTS_NO_TARGET_PAGE: 'recentchanges-notargetpage',
 192                 NO_RESULTS_INVALID_TARGET_PAGE: 'allpagesbadtitle'
 193         };
 194         return reasonMsgKeyMap[ reason ];
 195 };
 196
 197 /**
 198  * Emphasize the elements (or groups) newer than the 'from' parameter
 199  * @param {string} from Anything newer than this is considered 'new'
 200  */
 201 ChangesListWrapperWidget.prototype.emphasizeNewChanges = function ( from ) {
 202         var $firstNew,
 203                 $indicator,
 204                 $newChanges = $( [] ),
 205                 selector = this.inEnhancedMode() ?
 206                         'table.mw-enhanced-rc[data-mw-ts]' :
 207                         'li[data-mw-ts]',
 208                 set = this.$element.find( selector ),
 209                 length = set.length;
 210
 211         set.each( function ( index ) {
 212                 var $this = $( this ),
 213                         ts = $this.data( 'mw-ts' );
 214
 215                 if ( ts >= from ) {
 216                         $newChanges = $newChanges.add( $this );
 217                         $firstNew = $this;
 218
 219                         // guards against putting the marker after the last element
 220                         if ( index === ( length - 1 ) ) {
 221                                 $firstNew = null;
 222                         }
 223                 }
 224         } );
 225
 226         if ( $firstNew ) {
 227                 $indicator = $( '<div>' )
 228                         .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-previousChangesIndicator' );
 229
 230                 $firstNew.after( $indicator );
 231         }
 232
 233         // FIXME: Use CSS transition
 234         // eslint-disable-next-line no-jquery/no-fade
 235         $newChanges
 236                 .hide()
 237                 .fadeIn( 1000 );
 238 };
 239
 240 /**
 241  * In enhanced mode, we need to check whether the grouped results all have the
 242  * same active highlights in order to see whether the "parent" of the group should
 243  * be grey or highlighted normally.
 244  *
 245  * This is called every time highlights are applied.
 246  */
 247 ChangesListWrapperWidget.prototype.updateEnhancedParentHighlight = function () {
 248         var activeHighlightClasses,
 249                 $enhancedTopPageCell = this.$element.find( 'table.mw-enhanced-rc.mw-collapsible' );
 250
 251         activeHighlightClasses = this.filtersViewModel.getCurrentlyUsedHighlightColors().map( function ( color ) {
 252                 return 'mw-rcfilters-highlight-color-' + color;
 253         } );
 254
 255         // Go over top pages and their children, and figure out if all sub-pages have the
 256         // same highlights between themselves. If they do, the parent should be highlighted
 257         // with all colors. If classes are different, the parent should receive a grey
 258         // background
 259         $enhancedTopPageCell.each( function () {
 260                 var firstChildClasses, $rowsWithDifferentHighlights,
 261                         $table = $( this );
 262
 263                 // Collect the relevant classes from the first nested child
 264                 firstChildClasses = activeHighlightClasses.filter( function ( className ) {
 265                         // eslint-disable-next-line no-jquery/no-class-state
 266                         return $table.find( 'tr:nth-child(2)' ).hasClass( className );
 267                 } );
 268                 // Filter the non-head rows and see if they all have the same classes
 269                 // to the first row
 270                 $rowsWithDifferentHighlights = $table.find( 'tr:not(:first-child)' ).filter( function () {
 271                         var classesInThisRow,
 272                                 $this = $( this );
 273
 274                         classesInThisRow = activeHighlightClasses.filter( function ( className ) {
 275                                 // eslint-disable-next-line no-jquery/no-class-state
 276                                 return $this.hasClass( className );
 277                         } );
 278
 279                         return !OO.compare( firstChildClasses, classesInThisRow );
 280                 } );
 281
 282                 // If classes are different, tag the row for using grey color
 283                 $table.find( 'tr:first-child' )
 284                         .toggleClass( 'mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey', $rowsWithDifferentHighlights.length > 0 );
 285         } );
 286 };
 287
 288 /**
 289  * @return {boolean} Whether the changes are grouped by page
 290  */
 291 ChangesListWrapperWidget.prototype.inEnhancedMode = function () {
 292         var uri = new mw.Uri();
 293         return ( uri.query.enhanced !== undefined && Number( uri.query.enhanced ) ) ||
 294                 ( uri.query.enhanced === undefined && Number( mw.user.options.get( 'usenewrc' ) ) );
 295 };
 296
 297 /**
 298  * Apply color classes based on filters highlight configuration
 299  */
 300 ChangesListWrapperWidget.prototype.applyHighlight = function () {
 301         if ( !this.filtersViewModel.isHighlightEnabled() ) {
 302                 return;
 303         }
 304
 305         this.filtersViewModel.getHighlightedItems().forEach( function ( filterItem ) {
 306                 var $elements = this.$element.find( '.' + filterItem.getCssClass() );
 307
 308                 // Add highlight class to all highlighted list items
 309                 $elements
 310                         .addClass(
 311                                 'mw-rcfilters-highlighted ' +
 312                                 'mw-rcfilters-highlight-color-' + filterItem.getHighlightColor()
 313                         );
 314
 315                 // Track the filters for each item in .data( 'highlightedFilters' )
 316                 $elements.each( function () {
 317                         var filters = $( this ).data( 'highlightedFilters' );
 318                         if ( !filters ) {
 319                                 filters = [];
 320                                 $( this ).data( 'highlightedFilters', filters );
 321                         }
 322                         if ( filters.indexOf( filterItem.getLabel() ) === -1 ) {
 323                                 filters.push( filterItem.getLabel() );
 324                         }
 325                 } );
 326         }.bind( this ) );
 327         // Apply a title to each highlighted item, with a list of filters
 328         this.$element.find( '.mw-rcfilters-highlighted' ).each( function () {
 329                 var filters = $( this ).data( 'highlightedFilters' );
 330
 331                 if ( filters && filters.length ) {
 332                         $( this ).attr( 'title', mw.msg(
 333                                 'rcfilters-highlighted-filters-list',
 334                                 filters.join( mw.msg( 'comma-separator' ) )
 335                         ) );
 336                 }
 337
 338         } );
 339         if ( this.inEnhancedMode() ) {
 340                 this.updateEnhancedParentHighlight();
 341         }
 342
 343         // Turn on highlights
 344         this.$element.addClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlighted' );
 345 };
 346
 347 /**
 348  * Remove all color classes
 349  */
 350 ChangesListWrapperWidget.prototype.clearHighlight = function () {
 351         // Remove highlight classes
 352         mw.rcfilters.HighlightColors.forEach( function ( color ) {
 353                 this.$element
 354                         .find( '.mw-rcfilters-highlight-color-' + color )
 355                         .removeClass( 'mw-rcfilters-highlight-color-' + color );
 356         }.bind( this ) );
 357
 358         this.$element.find( '.mw-rcfilters-highlighted' )
 359                 .removeAttr( 'title' )
 360                 .removeData( 'highlightedFilters' )
 361                 .removeClass( 'mw-rcfilters-highlighted' );
 362
 363         // Remove grey from enhanced rows
 364         this.$element.find( '.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey' )
 365                 .removeClass( 'mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey' );
 366
 367         // Turn off highlights
 368         this.$element.removeClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlighted' );
 369 };
 370
 371 module.exports = ChangesListWrapperWidget;