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