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

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