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

   1 ( function ( mw ) {
   2         /**
   3          * List of changes
   4          *
   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         mw.rcfilters.ui.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                 mw.rcfilters.ui.ChangesListWrapperWidget.parent.call( this, config );
  27
  28                 this.filtersViewModel = filtersViewModel;
  29                 this.changesListViewModel = changesListViewModel;
  30                 this.controller = controller;
  31                 this.highlightClasses = null;
  32                 this.filtersModelInitialized = false;
  33
  34                 // Events
  35                 this.filtersViewModel.connect( this, {
  36                         itemUpdate: 'onItemUpdate',
  37                         highlightChange: 'onHighlightChange',
  38                         initialize: 'onFiltersModelInitialize'
  39                 } );
  40                 this.changesListViewModel.connect( this, {
  41                         invalidate: 'onModelInvalidate',
  42                         update: 'onModelUpdate'
  43                 } );
  44
  45                 this.$element
  46                         .addClass( 'mw-rcfilters-ui-changesListWrapperWidget' )
  47                         // We handle our own display/hide of the empty results message
  48                         // We keep the timeout class here and remove it later, since at this
  49                         // stage it is still needed to identify that the timeout occurred.
  50                         .removeClass( 'mw-changeslist-empty' );
  51         };
  52
  53         /* Initialization */
  54
  55         OO.inheritClass( mw.rcfilters.ui.ChangesListWrapperWidget, OO.ui.Widget );
  56
  57         /**
  58          * Respond to filters model initialize event
  59          */
  60         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.onFiltersModelInitialize = function () {
  61                 this.filtersModelInitialized = true;
  62                 // Set up highlight containers. We need to wait for the filters model
  63                 // to be initialized, so we can make sure we have all the css class definitions
  64                 // we get from the server with our filters
  65                 this.setupHighlightContainers( this.$element );
  66         };
  67
  68         /**
  69          * Get all available highlight classes
  70          *
  71          * @return {string[]} An array of available highlight class names
  72          */
  73         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.getHighlightClasses = function () {
  74                 if ( !this.highlightClasses || !this.highlightClasses.length ) {
  75                         this.highlightClasses = this.filtersViewModel.getItemsSupportingHighlights()
  76                                 .map( function ( filterItem ) {
  77                                         return filterItem.getCssClass();
  78                                 } );
  79                 }
  80
  81                 return this.highlightClasses;
  82         };
  83
  84         /**
  85          * Respond to the highlight feature being toggled on and off
  86          *
  87          * @param {boolean} highlightEnabled
  88          */
  89         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.onHighlightChange = function ( highlightEnabled ) {
  90                 if ( highlightEnabled ) {
  91                         this.applyHighlight();
  92                 } else {
  93                         this.clearHighlight();
  94                 }
  95         };
  96
  97         /**
  98          * Respond to a filter item model update
  99          */
 100         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.onItemUpdate = function () {
 101                 if ( this.filtersModelInitialized && this.filtersViewModel.isHighlightEnabled() ) {
 102                         this.clearHighlight();
 103                         this.applyHighlight();
 104                 }
 105         };
 106
 107         /**
 108          * Respond to changes list model invalidate
 109          */
 110         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.onModelInvalidate = function () {
 111                 $( 'body' ).addClass( 'mw-rcfilters-ui-loading' );
 112         };
 113
 114         /**
 115          * Respond to changes list model update
 116          *
 117          * @param {jQuery|string} $changesListContent The content of the updated changes list
 118          * @param {jQuery} $fieldset The content of the updated fieldset
 119          * @param {string} noResultsDetails Type of no result error
 120          * @param {boolean} isInitialDOM Whether $changesListContent is the existing (already attached) DOM
 121          * @param {boolean} from Timestamp of the new changes
 122          */
 123         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.onModelUpdate = function (
 124                 $changesListContent, $fieldset, noResultsDetails, isInitialDOM, from
 125         ) {
 126                 var conflictItem,
 127                         $message = $( '<div>' )
 128                                 .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-results' ),
 129                         isEmpty = $changesListContent === 'NO_RESULTS',
 130                         // For enhanced mode, we have to load these modules, which are
 131                         // not loaded for the 'regular' mode in the backend
 132                         loaderPromise = mw.user.options.get( 'usenewrc' ) ?
 133                                 mw.loader.using( [ 'mediawiki.special.changeslist.enhanced', 'mediawiki.icon' ] ) :
 134                                 $.Deferred().resolve(),
 135                         widget = this;
 136
 137                 this.$element.toggleClass( 'mw-changeslist', !isEmpty );
 138                 if ( isEmpty ) {
 139                         this.$element.empty();
 140
 141                         if ( this.filtersViewModel.hasConflict() ) {
 142                                 conflictItem = this.filtersViewModel.getFirstConflictedItem();
 143
 144                                 $message
 145                                         .append(
 146                                                 $( '<div>' )
 147                                                         .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-results-conflict' )
 148                                                         .text( mw.message( 'rcfilters-noresults-conflict' ).text() ),
 149                                                 $( '<div>' )
 150                                                         .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-results-message' )
 151                                                         .text( mw.message( conflictItem.getCurrentConflictResultMessage() ).text() )
 152                                         );
 153                         } else {
 154                                 $message
 155                                         .append(
 156                                                 $( '<div>' )
 157                                                         .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-results-noresult' )
 158                                                         .text( mw.msg( this.getMsgKeyForNoResults( noResultsDetails ) ) )
 159                                         );
 160
 161                                 // remove all classes matching mw-changeslist-*
 162                                 this.$element.removeClass( function ( elementIndex, allClasses ) {
 163                                         return allClasses
 164                                                 .split( ' ' )
 165                                                 .filter( function ( className ) {
 166                                                         return className.indexOf( 'mw-changeslist-' ) === 0;
 167                                                 } )
 168                                                 .join( ' ' );
 169                                 } );
 170                         }
 171
 172                         this.$element.append( $message );
 173                 } else {
 174                         if ( !isInitialDOM ) {
 175                                 this.$element.empty().append( $changesListContent );
 176
 177                                 if ( from ) {
 178                                         this.emphasizeNewChanges( from );
 179                                 }
 180                         }
 181
 182                         // Set up highlight containers
 183                         this.setupHighlightContainers( this.$element );
 184
 185                         // Apply highlight
 186                         this.applyHighlight();
 187
 188                 }
 189
 190                 this.$element.prepend( $( '<div>' ).addClass( 'mw-changeslist-overlay' ) );
 191
 192                 loaderPromise.done( function () {
 193                         if ( !isInitialDOM && !isEmpty ) {
 194                                 // Make sure enhanced RC re-initializes correctly
 195                                 mw.hook( 'wikipage.content' ).fire( widget.$element );
 196                         }
 197
 198                         $( 'body' ).removeClass( 'mw-rcfilters-ui-loading' );
 199                 } );
 200         };
 201
 202         /** Toggles overlay class on changes list
 203          *
 204          * @param {boolean} isVisible True if overlay should be visible
 205          */
 206         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.toggleOverlay = function ( isVisible ) {
 207                 this.$element.toggleClass( 'mw-rcfilters-ui-changesListWrapperWidget--overlaid', isVisible );
 208         };
 209
 210         /**
 211          * Map a reason for having no results to its message key
 212          *
 213          * @param {string} reason One of the NO_RESULTS_* "constant" that represent
 214          *      a reason for having no results
 215          * @return {string} Key for the message that explains why there is no results in this case
 216          */
 217         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.getMsgKeyForNoResults = function ( reason ) {
 218                 var reasonMsgKeyMap = {
 219                         NO_RESULTS_NORMAL: 'recentchanges-noresult',
 220                         NO_RESULTS_TIMEOUT: 'recentchanges-timeout',
 221                         NO_RESULTS_NETWORK_ERROR: 'recentchanges-network',
 222                         NO_RESULTS_NO_TARGET_PAGE: 'recentchanges-notargetpage',
 223                         NO_RESULTS_INVALID_TARGET_PAGE: 'allpagesbadtitle'
 224                 };
 225                 return reasonMsgKeyMap[ reason ];
 226         };
 227
 228         /**
 229          * Emphasize the elements (or groups) newer than the 'from' parameter
 230          * @param {string} from Anything newer than this is considered 'new'
 231          */
 232         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.emphasizeNewChanges = function ( from ) {
 233                 var $firstNew,
 234                         $indicator,
 235                         $newChanges = $( [] ),
 236                         selector = this.inEnhancedMode() ?
 237                                 'table.mw-enhanced-rc[data-mw-ts]' :
 238                                 'li[data-mw-ts]',
 239                         set = this.$element.find( selector ),
 240                         length = set.length;
 241
 242                 set.each( function ( index ) {
 243                         var $this = $( this ),
 244                                 ts = $this.data( 'mw-ts' );
 245
 246                         if ( ts >= from ) {
 247                                 $newChanges = $newChanges.add( $this );
 248                                 $firstNew = $this;
 249
 250                                 // guards against putting the marker after the last element
 251                                 if ( index === ( length - 1 ) ) {
 252                                         $firstNew = null;
 253                                 }
 254                         }
 255                 } );
 256
 257                 if ( $firstNew ) {
 258                         $indicator = $( '<div>' )
 259                                 .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-previousChangesIndicator' );
 260
 261                         $firstNew.after( $indicator );
 262                 }
 263
 264                 $newChanges
 265                         .hide()
 266                         .fadeIn( 1000 );
 267         };
 268
 269         /**
 270          * Set up the highlight containers with all color circle indicators.
 271          *
 272          * @param {jQuery|string} $content The content of the updated changes list
 273          */
 274         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.setupHighlightContainers = function ( $content ) {
 275                 var $enhancedTopPageCell, $enhancedNestedPagesCell,
 276                         widget = this,
 277                         highlightClass = 'mw-rcfilters-ui-changesListWrapperWidget-highlights',
 278                         $highlights = $( '<div>' )
 279                                 .addClass( highlightClass )
 280                                 .append(
 281                                         $( '<div>' )
 282                                                 .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlights-circle' )
 283                                                 .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlights-color-none' )
 284                                                 .prop( 'data-color', 'none' )
 285                                 );
 286
 287                 if ( $( '.mw-rcfilters-ui-changesListWrapperWidget-highlights' ).length ) {
 288                         // Already set up
 289                         return;
 290                 }
 291
 292                 mw.rcfilters.HighlightColors.forEach( function ( color ) {
 293                         $highlights.append(
 294                                 $( '<div>' )
 295                                         .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlights-color-' + color )
 296                                         .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlights-circle' )
 297                                         .prop( 'data-color', color )
 298                         );
 299                 } );
 300
 301                 if ( this.inEnhancedMode() ) {
 302                         $enhancedTopPageCell = $content.find( 'table.mw-enhanced-rc.mw-collapsible' );
 303                         $enhancedNestedPagesCell = $content.find( 'td.mw-enhanced-rc-nested' );
 304
 305                         // Enhanced RC highlight containers
 306                         $content.find( 'table.mw-enhanced-rc tr:first-child' )
 307                                 .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-enhanced-toplevel' )
 308                                 .prepend(
 309                                         $( '<td>' )
 310                                                 .append( $highlights.clone() )
 311                                 );
 312
 313                         // We are adding and changing cells in a table that, despite having nested rows,
 314                         // is actually all one big table. To prevent the highlights cell in the "nested"
 315                         // rows from stretching out the cell with the flags and timestamp in the top row,
 316                         // we give the latter colspan=2. Then to make things line up again, we add
 317                         // an empty <td> to the "nested" rows.
 318
 319                         // Set colspan=2 on cell with flags and timestamp in top row
 320                         $content.find( 'table.mw-enhanced-rc tr:first-child td.mw-enhanced-rc' )
 321                                 .prop( 'colspan', '2' );
 322                         // Add empty <td> to nested rows to compensate
 323                         $enhancedNestedPagesCell.parent().prepend( $( '<td>' ) );
 324                         // Add highlights cell to nested rows
 325                         $enhancedNestedPagesCell
 326                                 .before(
 327                                         $( '<td>' )
 328                                                 .append( $highlights.clone().addClass( 'mw-enhanced-rc-nested' ) )
 329                                 );
 330
 331                         // We need to target the nested rows differently than the top rows so that the
 332                         // LESS rules applies correctly. In top rows, the rule should highlight all but
 333                         // the first 2 cells td:not( :nth-child( -n+2 ) and the nested rows, the rule
 334                         // should highlight all but the first 4 cells td:not( :nth-child( -n+4 )
 335                         $enhancedNestedPagesCell
 336                                 .closest( 'tr' )
 337                                 .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-enhanced-nested' );
 338
 339                         // Go over pages that have sub results
 340                         // HACK: We really only can collect those by targetting the collapsible class
 341                         $enhancedTopPageCell.each( function () {
 342                                 var collectedClasses,
 343                                         $table = $( this );
 344
 345                                 // Go over <tr>s and pick up all recognized classes
 346                                 collectedClasses = widget.getHighlightClasses().filter( function ( className ) {
 347                                         return $table.find( 'tr' ).hasClass( className );
 348                                 } );
 349
 350                                 $table.find( 'tr:first-child' )
 351                                         .addClass( collectedClasses.join( ' ' ) );
 352                         } );
 353
 354                         $content.addClass( 'mw-rcfilters-ui-changesListWrapperWidget-enhancedView' );
 355                 } else {
 356                         // Regular RC
 357                         $content.find( 'ul.special li' )
 358                                 .prepend( $highlights.clone() );
 359
 360                         $content.removeClass( 'mw-rcfilters-ui-changesListWrapperWidget-enhancedView' );
 361                 }
 362         };
 363
 364         /**
 365          * In enhanced mode, we need to check whether the grouped results all have the
 366          * same active highlights in order to see whether the "parent" of the group should
 367          * be grey or highlighted normally.
 368          *
 369          * This is called every time highlights are applied.
 370          */
 371         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.updateEnhancedParentHighlight = function () {
 372                 var activeHighlightClasses,
 373                         $enhancedTopPageCell = this.$element.find( 'table.mw-enhanced-rc.mw-collapsible' );
 374
 375                 activeHighlightClasses = this.filtersViewModel.getCurrentlyUsedHighlightColors().map( function ( color ) {
 376                         return 'mw-rcfilters-highlight-color-' + color;
 377                 } );
 378
 379                 // Go over top pages and their children, and figure out if all sub-pages have the
 380                 // same highlights between themselves. If they do, the parent should be highlighted
 381                 // with all colors. If classes are different, the parent should receive a grey
 382                 // background
 383                 $enhancedTopPageCell.each( function () {
 384                         var firstChildClasses, $rowsWithDifferentHighlights,
 385                                 $table = $( this );
 386
 387                         // Collect the relevant classes from the first nested child
 388                         firstChildClasses = activeHighlightClasses.filter( function ( className ) {
 389                                 return $table.find( 'tr:nth-child(2)' ).hasClass( className );
 390                         } );
 391                         // Filter the non-head rows and see if they all have the same classes
 392                         // to the first row
 393                         $rowsWithDifferentHighlights = $table.find( 'tr:not(:first-child)' ).filter( function () {
 394                                 var classesInThisRow,
 395                                         $this = $( this );
 396
 397                                 classesInThisRow = activeHighlightClasses.filter( function ( className ) {
 398                                         return $this.hasClass( className );
 399                                 } );
 400
 401                                 return !OO.compare( firstChildClasses, classesInThisRow );
 402                         } );
 403
 404                         // If classes are different, tag the row for using grey color
 405                         $table.find( 'tr:first-child' )
 406                                 .toggleClass( 'mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey', $rowsWithDifferentHighlights.length > 0 );
 407                 } );
 408         };
 409
 410         /**
 411          * @return {boolean} Whether the changes are grouped by page
 412          */
 413         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.inEnhancedMode = function () {
 414                 var uri = new mw.Uri();
 415                 return ( uri.query.enhanced !== undefined && Number( uri.query.enhanced ) ) ||
 416                         ( uri.query.enhanced === undefined && Number( mw.user.options.get( 'usenewrc' ) ) );
 417         };
 418
 419         /**
 420          * Apply color classes based on filters highlight configuration
 421          */
 422         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.applyHighlight = function () {
 423                 if ( !this.filtersViewModel.isHighlightEnabled() ) {
 424                         return;
 425                 }
 426
 427                 this.filtersViewModel.getHighlightedItems().forEach( function ( filterItem ) {
 428                         var $elements = this.$element.find( '.' + filterItem.getCssClass() );
 429
 430                         // Add highlight class to all highlighted list items
 431                         $elements
 432                                 .addClass(
 433                                         'mw-rcfilters-highlighted ' +
 434                                         'mw-rcfilters-highlight-color-' + filterItem.getHighlightColor()
 435                                 );
 436
 437                         // Track the filters for each item in .data( 'highlightedFilters' )
 438                         $elements.each( function () {
 439                                 var filters = $( this ).data( 'highlightedFilters' );
 440                                 if ( !filters ) {
 441                                         filters = [];
 442                                         $( this ).data( 'highlightedFilters', filters );
 443                                 }
 444                                 if ( filters.indexOf( filterItem.getLabel() ) === -1 ) {
 445                                         filters.push( filterItem.getLabel() );
 446                                 }
 447                         } );
 448                 }.bind( this ) );
 449                 // Apply a title to each highlighted item, with a list of filters
 450                 this.$element.find( '.mw-rcfilters-highlighted' ).each( function () {
 451                         var filters = $( this ).data( 'highlightedFilters' );
 452
 453                         if ( filters && filters.length ) {
 454                                 $( this ).attr( 'title', mw.msg(
 455                                         'rcfilters-highlighted-filters-list',
 456                                         filters.join( mw.msg( 'comma-separator' ) )
 457                                 ) );
 458                         }
 459
 460                 } );
 461                 if ( this.inEnhancedMode() ) {
 462                         this.updateEnhancedParentHighlight();
 463                 }
 464
 465                 // Turn on highlights
 466                 this.$element.addClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlighted' );
 467         };
 468
 469         /**
 470          * Remove all color classes
 471          */
 472         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.clearHighlight = function () {
 473                 // Remove highlight classes
 474                 mw.rcfilters.HighlightColors.forEach( function ( color ) {
 475                         this.$element
 476                                 .find( '.mw-rcfilters-highlight-color-' + color )
 477                                 .removeClass( 'mw-rcfilters-highlight-color-' + color );
 478                 }.bind( this ) );
 479
 480                 this.$element.find( '.mw-rcfilters-highlighted' )
 481                         .removeAttr( 'title' )
 482                         .removeData( 'highlightedFilters' )
 483                         .removeClass( 'mw-rcfilters-highlighted' );
 484
 485                 // Remove grey from enhanced rows
 486                 this.$element.find( '.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey' )
 487                         .removeClass( 'mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey' );
 488
 489                 // Turn off highlights
 490                 this.$element.removeClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlighted' );
 491         };
 492 }( mediaWiki ) );