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
  32                 // Events
  33                 this.filtersViewModel.connect( this, {
  34                         itemUpdate: 'onItemUpdate',
  35                         highlightChange: 'onHighlightChange'
  36                 } );
  37                 this.changesListViewModel.connect( this, {
  38                         invalidate: 'onModelInvalidate',
  39                         update: 'onModelUpdate',
  40                         newChangesExist: 'onNewChangesExist'
  41                 } );
  42
  43                 this.$element
  44                         .addClass( 'mw-rcfilters-ui-changesListWrapperWidget' )
  45                         // We handle our own display/hide of the empty results message
  46                         .removeClass( 'mw-changeslist-empty' );
  47
  48                 // Set up highlight containers
  49                 this.setupHighlightContainers( this.$element );
  50
  51                 if ( mw.rcfilters.featureFlags.liveUpdate ) {
  52                         this.setupNewChangesButtonContainer( this.$element );
  53                 }
  54         };
  55
  56         /* Initialization */
  57
  58         OO.inheritClass( mw.rcfilters.ui.ChangesListWrapperWidget, OO.ui.Widget );
  59
  60         /**
  61          * Respond to the highlight feature being toggled on and off
  62          *
  63          * @param {boolean} highlightEnabled
  64          */
  65         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.onHighlightChange = function ( highlightEnabled ) {
  66                 if ( highlightEnabled ) {
  67                         this.applyHighlight();
  68                 } else {
  69                         this.clearHighlight();
  70                 }
  71         };
  72
  73         /**
  74          * Respond to a filter item model update
  75          */
  76         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.onItemUpdate = function () {
  77                 if ( this.filtersViewModel.isHighlightEnabled() ) {
  78                         this.clearHighlight();
  79                         this.applyHighlight();
  80                 }
  81         };
  82
  83         /**
  84          * Respond to changes list model invalidate
  85          */
  86         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.onModelInvalidate = function () {
  87                 $( '.rcfilters-spinner' ).removeClass( 'mw-rcfilters-ui-ready' );
  88                 this.$element.removeClass( 'mw-rcfilters-ui-ready' );
  89         };
  90
  91         /**
  92          * Respond to changes list model update
  93          *
  94          * @param {jQuery|string} $changesListContent The content of the updated changes list
  95          * @param {jQuery} $fieldset The content of the updated fieldset
  96          * @param {boolean} isInitialDOM Whether $changesListContent is the existing (already attached) DOM
  97          * @param {boolean} from Timestamp of the new changes
  98          */
  99         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.onModelUpdate = function (
 100                 $changesListContent, $fieldset, isInitialDOM, from
 101         ) {
 102                 var conflictItem,
 103                         $message = $( '<div>' )
 104                                 .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-results' ),
 105                         isEmpty = $changesListContent === 'NO_RESULTS',
 106                         // For enhanced mode, we have to load these modules, which are
 107                         // not loaded for the 'regular' mode in the backend
 108                         loaderPromise = mw.user.options.get( 'usenewrc' ) ?
 109                                 mw.loader.using( [ 'mediawiki.special.changeslist.enhanced', 'mediawiki.icon' ] ) :
 110                                 $.Deferred().resolve(),
 111                         widget = this;
 112
 113                 this.$element.toggleClass( 'mw-changeslist', !isEmpty );
 114                 if ( isEmpty ) {
 115                         this.$element.empty();
 116
 117                         if ( this.filtersViewModel.hasConflict() ) {
 118                                 conflictItem = this.filtersViewModel.getFirstConflictedItem();
 119
 120                                 $message
 121                                         .append(
 122                                                 $( '<div>' )
 123                                                         .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-results-conflict' )
 124                                                         .text( mw.message( 'rcfilters-noresults-conflict' ).text() ),
 125                                                 $( '<div>' )
 126                                                         .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-results-message' )
 127                                                         .text( mw.message( conflictItem.getCurrentConflictResultMessage() ).text() )
 128                                         );
 129                         } else {
 130                                 $message
 131                                         .append(
 132                                                 $( '<div>' )
 133                                                         .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-results-noresult' )
 134                                                         .text( mw.message( 'recentchanges-noresult' ).text() )
 135                                         );
 136                         }
 137
 138                         this.$element.append( $message );
 139                 } else {
 140                         if ( !isInitialDOM ) {
 141                                 this.$element.empty().append( $changesListContent );
 142
 143                                 if ( from ) {
 144                                         this.emphasizeNewChanges( from );
 145                                 }
 146                         }
 147
 148                         // Set up highlight containers
 149                         this.setupHighlightContainers( this.$element );
 150
 151                         // Apply highlight
 152                         this.applyHighlight();
 153
 154                 }
 155
 156                 loaderPromise.done( function () {
 157                         if ( !isInitialDOM && !isEmpty ) {
 158                                 // Make sure enhanced RC re-initializes correctly
 159                                 mw.hook( 'wikipage.content' ).fire( widget.$element );
 160                         }
 161
 162                         $( '.rcfilters-spinner' ).addClass( 'mw-rcfilters-ui-ready' );
 163                         widget.$element.addClass( 'mw-rcfilters-ui-ready' );
 164                 } );
 165         };
 166
 167         /**
 168          * Emphasize the elements (or groups) newer than the 'from' parameter
 169          * @param {string} from Anything newer than this is considered 'new'
 170          */
 171         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.emphasizeNewChanges = function ( from ) {
 172                 var $firstNew,
 173                         $indicator,
 174                         $newChanges = $( [] ),
 175                         selector = this.inEnhancedMode() ?
 176                                 'table.mw-enhanced-rc[data-mw-ts]' :
 177                                 'li[data-mw-ts]',
 178                         set = this.$element.find( selector ),
 179                         length = set.length;
 180
 181                 set.each( function ( index ) {
 182                         var $this = $( this ),
 183                                 ts = $this.data( 'mw-ts' );
 184
 185                         if ( ts >= from ) {
 186                                 $newChanges = $newChanges.add( $this );
 187                                 $firstNew = $this;
 188
 189                                 // guards against putting the marker after the last element
 190                                 if ( index === ( length - 1 ) ) {
 191                                         $firstNew = null;
 192                                 }
 193                         }
 194                 } );
 195
 196                 if ( $firstNew ) {
 197                         $indicator = $( '<div>' )
 198                                 .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-previousChangesIndicator' );
 199
 200                         $firstNew.after( $indicator );
 201                 }
 202
 203                 $newChanges
 204                         .hide()
 205                         .fadeIn( 1000 );
 206         };
 207
 208         /**
 209          * Respond to changes list model newChangesExist
 210          *
 211          * @param {boolean} newChangesExist Whether new changes exist
 212          */
 213         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.onNewChangesExist = function ( newChangesExist ) {
 214                 this.showNewChangesLink.toggle( newChangesExist );
 215         };
 216
 217         /**
 218          * Respond to the user clicking the 'show new changes' button
 219          */
 220         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.onShowNewChangesClick = function () {
 221                 this.controller.showNewChanges();
 222         };
 223
 224         /**
 225          * Setup the container for the 'new changes' button.
 226          *
 227          * @param {jQuery} $content
 228          */
 229         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.setupNewChangesButtonContainer = function ( $content ) {
 230                 this.showNewChangesLink = new OO.ui.ButtonWidget( {
 231                         framed: false,
 232                         label: mw.message( 'rcfilters-show-new-changes' ).text(),
 233                         flags: [ 'progressive' ]
 234                 } );
 235                 this.showNewChangesLink.connect( this, { click: 'onShowNewChangesClick' } );
 236                 this.showNewChangesLink.toggle( false );
 237
 238                 $content.before(
 239                         $( '<div>' )
 240                                 .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-newChanges' )
 241                                 .append( this.showNewChangesLink.$element )
 242                 );
 243         };
 244
 245         /**
 246          * Set up the highlight containers with all color circle indicators.
 247          *
 248          * @param {jQuery|string} $content The content of the updated changes list
 249          */
 250         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.setupHighlightContainers = function ( $content ) {
 251                 var highlightClass = 'mw-rcfilters-ui-changesListWrapperWidget-highlights',
 252                         $highlights = $( '<div>' )
 253                                 .addClass( highlightClass )
 254                                 .append(
 255                                         $( '<div>' )
 256                                                 .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlights-color-none' )
 257                                                 .prop( 'data-color', 'none' )
 258                                 );
 259
 260                 if ( $( '.mw-rcfilters-ui-changesListWrapperWidget-highlights' ).length ) {
 261                         // Already set up
 262                         return;
 263                 }
 264
 265                 mw.rcfilters.HighlightColors.forEach( function ( color ) {
 266                         $highlights.append(
 267                                 $( '<div>' )
 268                                         .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlights-color-' + color )
 269                                         .prop( 'data-color', color )
 270                         );
 271                 } );
 272
 273                 if ( this.inEnhancedMode() ) {
 274                         // Enhanced RC
 275                         $content.find( 'td.mw-enhanced-rc' )
 276                                 .parent()
 277                                 .prepend(
 278                                         $( '<td>' )
 279                                                 .append( $highlights.clone() )
 280                                 );
 281                 } else {
 282                         // Regular RC
 283                         $content.find( 'ul.special li' )
 284                                 .prepend( $highlights.clone() );
 285                 }
 286         };
 287
 288         /**
 289          * @return {boolean} Whether the changes are grouped by page
 290          */
 291         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.inEnhancedMode = function () {
 292                 var uri = new mw.Uri();
 293                 return ( uri.query.enhanced !== undefined && Number( uri.query.enhanced ) ) ||
 294                         ( uri.query.enhanced === undefined && Number( mw.user.options.get( 'usenewrc' ) ) );
 295         };
 296
 297         /**
 298          * Apply color classes based on filters highlight configuration
 299          */
 300         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.applyHighlight = function () {
 301                 if ( !this.filtersViewModel.isHighlightEnabled() ) {
 302                         return;
 303                 }
 304
 305                 this.filtersViewModel.getHighlightedItems().forEach( function ( filterItem ) {
 306                         var $elements = this.$element.find( '.' + filterItem.getCssClass() );
 307
 308                         // Add highlight class to all highlighted list items
 309                         $elements
 310                                 .addClass( 'mw-rcfilters-highlight-color-' + filterItem.getHighlightColor() );
 311
 312                         $elements.each( function () {
 313                                 var filterString = $( this ).attr( 'data-highlightedFilters' ) || '',
 314                                         filters = filterString ? filterString.split( '|' ) : [];
 315
 316                                 if ( filters.indexOf( filterItem.getLabel() ) === -1 ) {
 317                                         filters.push( filterItem.getLabel() );
 318                                 }
 319
 320                                 $( this )
 321                                         .attr( 'data-highlightedFilters', filters.join( '|' ) );
 322                         } );
 323                 }.bind( this ) );
 324                 // Apply a title for relevant filters
 325                 this.$element.find( '[data-highlightedFilters]' ).each( function () {
 326                         var filterString = $( this ).attr( 'data-highlightedFilters' ) || '',
 327                                 filters = filterString ? filterString.split( '|' ) : [];
 328
 329                         if ( filterString ) {
 330                                 $( this ).attr( 'title', mw.msg( 'rcfilters-highlighted-filters-list', filters.join( ', ' ) ) );
 331                         }
 332                 } );
 333
 334                 // Turn on highlights
 335                 this.$element.addClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlighted' );
 336         };
 337
 338         /**
 339          * Remove all color classes
 340          */
 341         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.clearHighlight = function () {
 342                 // Remove highlight classes
 343                 mw.rcfilters.HighlightColors.forEach( function ( color ) {
 344                         this.$element.find( '.mw-rcfilters-highlight-color-' + color ).removeClass( 'mw-rcfilters-highlight-color-' + color );
 345                 }.bind( this ) );
 346
 347                 this.$element.find( '[data-highlightedFilters]' )
 348                         .removeAttr( 'title' )
 349                         .removeAttr( 'data-highlightedFilters' );
 350                 // Turn off highlights
 351                 this.$element.removeClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlighted' );
 352         };
 353 }( mediaWiki ) );