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

   1 ( function () {
   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
  33                 // Events
  34                 this.filtersViewModel.connect( this, {
  35                         itemUpdate: 'onItemUpdate',
  36                         highlightChange: 'onHighlightChange'
  37                 } );
  38                 this.changesListViewModel.connect( this, {
  39                         invalidate: 'onModelInvalidate',
  40                         update: 'onModelUpdate'
  41                 } );
  42
  43                 this.$element
  44                         .addClass( 'mw-rcfilters-ui-changesListWrapperWidget' )
  45                         // We handle our own display/hide of the empty results message
  46                         // We keep the timeout class here and remove it later, since at this
  47                         // stage it is still needed to identify that the timeout occurred.
  48                         .removeClass( 'mw-changeslist-empty' );
  49         };
  50
  51         /* Initialization */
  52
  53         OO.inheritClass( mw.rcfilters.ui.ChangesListWrapperWidget, OO.ui.Widget );
  54
  55         /**
  56          * Get all available highlight classes
  57          *
  58          * @return {string[]} An array of available highlight class names
  59          */
  60         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.getHighlightClasses = function () {
  61                 if ( !this.highlightClasses || !this.highlightClasses.length ) {
  62                         this.highlightClasses = this.filtersViewModel.getItemsSupportingHighlights()
  63                                 .map( function ( filterItem ) {
  64                                         return filterItem.getCssClass();
  65                                 } );
  66                 }
  67
  68                 return this.highlightClasses;
  69         };
  70
  71         /**
  72          * Respond to the highlight feature being toggled on and off
  73          *
  74          * @param {boolean} highlightEnabled
  75          */
  76         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.onHighlightChange = function ( highlightEnabled ) {
  77                 if ( highlightEnabled ) {
  78                         this.applyHighlight();
  79                 } else {
  80                         this.clearHighlight();
  81                 }
  82         };
  83
  84         /**
  85          * Respond to a filter item model update
  86          */
  87         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.onItemUpdate = function () {
  88                 if ( this.controller.isInitialized() && this.filtersViewModel.isHighlightEnabled() ) {
  89                         // this.controller.isInitialized() is still false during page load,
  90                         // we don't want to clear/apply highlights at this stage.
  91                         this.clearHighlight();
  92                         this.applyHighlight();
  93                 }
  94         };
  95
  96         /**
  97          * Respond to changes list model invalidate
  98          */
  99         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.onModelInvalidate = function () {
 100                 $( 'body' ).addClass( 'mw-rcfilters-ui-loading' );
 101         };
 102
 103         /**
 104          * Respond to changes list model update
 105          *
 106          * @param {jQuery|string} $changesListContent The content of the updated changes list
 107          * @param {jQuery} $fieldset The content of the updated fieldset
 108          * @param {string} noResultsDetails Type of no result error
 109          * @param {boolean} isInitialDOM Whether $changesListContent is the existing (already attached) DOM
 110          * @param {boolean} from Timestamp of the new changes
 111          */
 112         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.onModelUpdate = function (
 113                 $changesListContent, $fieldset, noResultsDetails, isInitialDOM, from
 114         ) {
 115                 var conflictItem,
 116                         $message = $( '<div>' )
 117                                 .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-results' ),
 118                         isEmpty = $changesListContent === 'NO_RESULTS',
 119                         // For enhanced mode, we have to load these modules, which are
 120                         // not loaded for the 'regular' mode in the backend
 121                         loaderPromise = mw.user.options.get( 'usenewrc' ) ?
 122                                 mw.loader.using( [ 'mediawiki.special.changeslist.enhanced', 'mediawiki.icon' ] ) :
 123                                 $.Deferred().resolve(),
 124                         widget = this;
 125
 126                 this.$element.toggleClass( 'mw-changeslist', !isEmpty );
 127                 if ( isEmpty ) {
 128                         this.$element.empty();
 129
 130                         if ( this.filtersViewModel.hasConflict() ) {
 131                                 conflictItem = this.filtersViewModel.getFirstConflictedItem();
 132
 133                                 $message
 134                                         .append(
 135                                                 $( '<div>' )
 136                                                         .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-results-conflict' )
 137                                                         .text( mw.message( 'rcfilters-noresults-conflict' ).text() ),
 138                                                 $( '<div>' )
 139                                                         .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-results-message' )
 140                                                         .text( mw.message( conflictItem.getCurrentConflictResultMessage() ).text() )
 141                                         );
 142                         } else {
 143                                 $message
 144                                         .append(
 145                                                 $( '<div>' )
 146                                                         .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-results-noresult' )
 147                                                         .text( mw.msg( this.getMsgKeyForNoResults( noResultsDetails ) ) )
 148                                         );
 149
 150                                 // remove all classes matching mw-changeslist-*
 151                                 this.$element.removeClass( function ( elementIndex, allClasses ) {
 152                                         return allClasses
 153                                                 .split( ' ' )
 154                                                 .filter( function ( className ) {
 155                                                         return className.indexOf( 'mw-changeslist-' ) === 0;
 156                                                 } )
 157                                                 .join( ' ' );
 158                                 } );
 159                         }
 160
 161                         this.$element.append( $message );
 162                 } else {
 163                         if ( !isInitialDOM ) {
 164                                 this.$element.empty().append( $changesListContent );
 165
 166                                 if ( from ) {
 167                                         this.emphasizeNewChanges( from );
 168                                 }
 169                         }
 170
 171                         // Apply highlight
 172                         this.applyHighlight();
 173
 174                 }
 175
 176                 this.$element.prepend( $( '<div>' ).addClass( 'mw-changeslist-overlay' ) );
 177
 178                 loaderPromise.done( function () {
 179                         if ( !isInitialDOM && !isEmpty ) {
 180                                 // Make sure enhanced RC re-initializes correctly
 181                                 mw.hook( 'wikipage.content' ).fire( widget.$element );
 182                         }
 183
 184                         $( 'body' ).removeClass( 'mw-rcfilters-ui-loading' );
 185                 } );
 186         };
 187
 188         /** Toggles overlay class on changes list
 189          *
 190          * @param {boolean} isVisible True if overlay should be visible
 191          */
 192         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.toggleOverlay = function ( isVisible ) {
 193                 this.$element.toggleClass( 'mw-rcfilters-ui-changesListWrapperWidget--overlaid', isVisible );
 194         };
 195
 196         /**
 197          * Map a reason for having no results to its message key
 198          *
 199          * @param {string} reason One of the NO_RESULTS_* "constant" that represent
 200          *      a reason for having no results
 201          * @return {string} Key for the message that explains why there is no results in this case
 202          */
 203         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.getMsgKeyForNoResults = function ( reason ) {
 204                 var reasonMsgKeyMap = {
 205                         NO_RESULTS_NORMAL: 'recentchanges-noresult',
 206                         NO_RESULTS_TIMEOUT: 'recentchanges-timeout',
 207                         NO_RESULTS_NETWORK_ERROR: 'recentchanges-network',
 208                         NO_RESULTS_NO_TARGET_PAGE: 'recentchanges-notargetpage',
 209                         NO_RESULTS_INVALID_TARGET_PAGE: 'allpagesbadtitle'
 210                 };
 211                 return reasonMsgKeyMap[ reason ];
 212         };
 213
 214         /**
 215          * Emphasize the elements (or groups) newer than the 'from' parameter
 216          * @param {string} from Anything newer than this is considered 'new'
 217          */
 218         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.emphasizeNewChanges = function ( from ) {
 219                 var $firstNew,
 220                         $indicator,
 221                         $newChanges = $( [] ),
 222                         selector = this.inEnhancedMode() ?
 223                                 'table.mw-enhanced-rc[data-mw-ts]' :
 224                                 'li[data-mw-ts]',
 225                         set = this.$element.find( selector ),
 226                         length = set.length;
 227
 228                 set.each( function ( index ) {
 229                         var $this = $( this ),
 230                                 ts = $this.data( 'mw-ts' );
 231
 232                         if ( ts >= from ) {
 233                                 $newChanges = $newChanges.add( $this );
 234                                 $firstNew = $this;
 235
 236                                 // guards against putting the marker after the last element
 237                                 if ( index === ( length - 1 ) ) {
 238                                         $firstNew = null;
 239                                 }
 240                         }
 241                 } );
 242
 243                 if ( $firstNew ) {
 244                         $indicator = $( '<div>' )
 245                                 .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-previousChangesIndicator' );
 246
 247                         $firstNew.after( $indicator );
 248                 }
 249
 250                 $newChanges
 251                         .hide()
 252                         .fadeIn( 1000 );
 253         };
 254
 255         /**
 256          * In enhanced mode, we need to check whether the grouped results all have the
 257          * same active highlights in order to see whether the "parent" of the group should
 258          * be grey or highlighted normally.
 259          *
 260          * This is called every time highlights are applied.
 261          */
 262         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.updateEnhancedParentHighlight = function () {
 263                 var activeHighlightClasses,
 264                         $enhancedTopPageCell = this.$element.find( 'table.mw-enhanced-rc.mw-collapsible' );
 265
 266                 activeHighlightClasses = this.filtersViewModel.getCurrentlyUsedHighlightColors().map( function ( color ) {
 267                         return 'mw-rcfilters-highlight-color-' + color;
 268                 } );
 269
 270                 // Go over top pages and their children, and figure out if all sub-pages have the
 271                 // same highlights between themselves. If they do, the parent should be highlighted
 272                 // with all colors. If classes are different, the parent should receive a grey
 273                 // background
 274                 $enhancedTopPageCell.each( function () {
 275                         var firstChildClasses, $rowsWithDifferentHighlights,
 276                                 $table = $( this );
 277
 278                         // Collect the relevant classes from the first nested child
 279                         firstChildClasses = activeHighlightClasses.filter( function ( className ) {
 280                                 return $table.find( 'tr:nth-child(2)' ).hasClass( className );
 281                         } );
 282                         // Filter the non-head rows and see if they all have the same classes
 283                         // to the first row
 284                         $rowsWithDifferentHighlights = $table.find( 'tr:not(:first-child)' ).filter( function () {
 285                                 var classesInThisRow,
 286                                         $this = $( this );
 287
 288                                 classesInThisRow = activeHighlightClasses.filter( function ( className ) {
 289                                         return $this.hasClass( className );
 290                                 } );
 291
 292                                 return !OO.compare( firstChildClasses, classesInThisRow );
 293                         } );
 294
 295                         // If classes are different, tag the row for using grey color
 296                         $table.find( 'tr:first-child' )
 297                                 .toggleClass( 'mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey', $rowsWithDifferentHighlights.length > 0 );
 298                 } );
 299         };
 300
 301         /**
 302          * @return {boolean} Whether the changes are grouped by page
 303          */
 304         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.inEnhancedMode = function () {
 305                 var uri = new mw.Uri();
 306                 return ( uri.query.enhanced !== undefined && Number( uri.query.enhanced ) ) ||
 307                         ( uri.query.enhanced === undefined && Number( mw.user.options.get( 'usenewrc' ) ) );
 308         };
 309
 310         /**
 311          * Apply color classes based on filters highlight configuration
 312          */
 313         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.applyHighlight = function () {
 314                 if ( !this.filtersViewModel.isHighlightEnabled() ) {
 315                         return;
 316                 }
 317
 318                 this.filtersViewModel.getHighlightedItems().forEach( function ( filterItem ) {
 319                         var $elements = this.$element.find( '.' + filterItem.getCssClass() );
 320
 321                         // Add highlight class to all highlighted list items
 322                         $elements
 323                                 .addClass(
 324                                         'mw-rcfilters-highlighted ' +
 325                                         'mw-rcfilters-highlight-color-' + filterItem.getHighlightColor()
 326                                 );
 327
 328                         // Track the filters for each item in .data( 'highlightedFilters' )
 329                         $elements.each( function () {
 330                                 var filters = $( this ).data( 'highlightedFilters' );
 331                                 if ( !filters ) {
 332                                         filters = [];
 333                                         $( this ).data( 'highlightedFilters', filters );
 334                                 }
 335                                 if ( filters.indexOf( filterItem.getLabel() ) === -1 ) {
 336                                         filters.push( filterItem.getLabel() );
 337                                 }
 338                         } );
 339                 }.bind( this ) );
 340                 // Apply a title to each highlighted item, with a list of filters
 341                 this.$element.find( '.mw-rcfilters-highlighted' ).each( function () {
 342                         var filters = $( this ).data( 'highlightedFilters' );
 343
 344                         if ( filters && filters.length ) {
 345                                 $( this ).attr( 'title', mw.msg(
 346                                         'rcfilters-highlighted-filters-list',
 347                                         filters.join( mw.msg( 'comma-separator' ) )
 348                                 ) );
 349                         }
 350
 351                 } );
 352                 if ( this.inEnhancedMode() ) {
 353                         this.updateEnhancedParentHighlight();
 354                 }
 355
 356                 // Turn on highlights
 357                 this.$element.addClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlighted' );
 358         };
 359
 360         /**
 361          * Remove all color classes
 362          */
 363         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.clearHighlight = function () {
 364                 // Remove highlight classes
 365                 mw.rcfilters.HighlightColors.forEach( function ( color ) {
 366                         this.$element
 367                                 .find( '.mw-rcfilters-highlight-color-' + color )
 368                                 .removeClass( 'mw-rcfilters-highlight-color-' + color );
 369                 }.bind( this ) );
 370
 371                 this.$element.find( '.mw-rcfilters-highlighted' )
 372                         .removeAttr( 'title' )
 373                         .removeData( 'highlightedFilters' )
 374                         .removeClass( 'mw-rcfilters-highlighted' );
 375
 376                 // Remove grey from enhanced rows
 377                 this.$element.find( '.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey' )
 378                         .removeClass( 'mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey' );
 379
 380                 // Turn off highlights
 381                 this.$element.removeClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlighted' );
 382         };
 383 }() );