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