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