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 {jQuery} $changesListRoot Root element of the changes list to attach to
  11          * @param {Object} config Configuration object
  12          */
  13         mw.rcfilters.ui.ChangesListWrapperWidget = function MwRcfiltersUiChangesListWrapperWidget(
  14                 filtersViewModel,
  15                 changesListViewModel,
  16                 $changesListRoot,
  17                 config
  18         ) {
  19                 config = $.extend( {}, config, {
  20                         $element: $changesListRoot
  21                 } );
  22
  23                 // Parent
  24                 mw.rcfilters.ui.ChangesListWrapperWidget.parent.call( this, config );
  25
  26                 this.filtersViewModel = filtersViewModel;
  27                 this.changesListViewModel = changesListViewModel;
  28
  29                 // Events
  30                 this.filtersViewModel.connect( this, {
  31                         itemUpdate: 'onItemUpdate',
  32                         highlightChange: 'onHighlightChange'
  33                 } );
  34                 this.changesListViewModel.connect( this, {
  35                         invalidate: 'onModelInvalidate',
  36                         update: 'onModelUpdate'
  37                 } );
  38
  39                 this.$element
  40                         .addClass( 'mw-rcfilters-ui-changesListWrapperWidget' )
  41                         // We handle our own display/hide of the empty results message
  42                         .removeClass( 'mw-changeslist-empty' );
  43
  44                 // Set up highlight containers
  45                 this.setupHighlightContainers( this.$element );
  46         };
  47
  48         /* Initialization */
  49
  50         OO.inheritClass( mw.rcfilters.ui.ChangesListWrapperWidget, OO.ui.Widget );
  51
  52         /**
  53          * Respond to the highlight feature being toggled on and off
  54          *
  55          * @param {boolean} highlightEnabled
  56          */
  57         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.onHighlightChange = function ( highlightEnabled ) {
  58                 if ( highlightEnabled ) {
  59                         this.applyHighlight();
  60                 } else {
  61                         this.clearHighlight();
  62                 }
  63         };
  64
  65         /**
  66          * Respond to a filter item model update
  67          */
  68         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.onItemUpdate = function () {
  69                 if ( this.filtersViewModel.isHighlightEnabled() ) {
  70                         this.clearHighlight();
  71                         this.applyHighlight();
  72                 }
  73         };
  74
  75         /**
  76          * Respond to changes list model invalidate
  77          */
  78         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.onModelInvalidate = function () {
  79                 $( '.rcfilters-spinner' ).removeClass( 'mw-rcfilters-ui-ready' );
  80                 this.$element.removeClass( 'mw-rcfilters-ui-ready' );
  81         };
  82
  83         /**
  84          * Respond to changes list model update
  85          *
  86          * @param {jQuery|string} $changesListContent The content of the updated changes list
  87          * @param {jQuery} $fieldset The content of the updated fieldset
  88          * @param {boolean} isInitialDOM Whether $changesListContent is the existing (already attached) DOM
  89          */
  90         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.onModelUpdate = function ( $changesListContent, $fieldset, isInitialDOM ) {
  91                 var conflictItem,
  92                         $message = $( '<div>' )
  93                                 .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-results' ),
  94                         isEmpty = $changesListContent === 'NO_RESULTS';
  95
  96                 this.$element.toggleClass( 'mw-changeslist', !isEmpty );
  97                 if ( isEmpty ) {
  98                         this.$changesListContent = null;
  99                         this.$element.empty();
 100
 101                         if ( this.filtersViewModel.hasConflict() ) {
 102                                 conflictItem = this.filtersViewModel.getFirstConflictedItem();
 103
 104                                 $message
 105                                         .append(
 106                                                 $( '<div>' )
 107                                                         .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-results-conflict' )
 108                                                         .text( mw.message( 'rcfilters-noresults-conflict' ).text() ),
 109                                                 $( '<div>' )
 110                                                         .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-results-message' )
 111                                                         .text( mw.message( conflictItem.getCurrentConflictResultMessage() ).text() )
 112                                         );
 113                         } else {
 114                                 $message
 115                                         .append(
 116                                                 $( '<div>' )
 117                                                         .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-results-noresult' )
 118                                                         .text( mw.message( 'recentchanges-noresult' ).text() )
 119                                         );
 120                         }
 121
 122                         this.$element.append( $message );
 123                 } else {
 124                         this.$changesListContent = $changesListContent;
 125                         if ( !isInitialDOM ) {
 126                                 this.$element.empty().append( this.$changesListContent );
 127                         }
 128                         // Set up highlight containers
 129                         this.setupHighlightContainers( this.$element );
 130
 131                         // Apply highlight
 132                         this.applyHighlight();
 133
 134                         if ( !isInitialDOM ) {
 135                                 // Make sure enhanced RC re-initializes correctly
 136                                 mw.hook( 'wikipage.content' ).fire( this.$element );
 137                         }
 138                 }
 139
 140                 $( '.rcfilters-spinner' ).addClass( 'mw-rcfilters-ui-ready' );
 141                 this.$element.addClass( 'mw-rcfilters-ui-ready' );
 142         };
 143
 144         /**
 145          * Set up the highlight containers with all color circle indicators.
 146          *
 147          * @param {jQuery|string} $content The content of the updated changes list
 148          */
 149         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.setupHighlightContainers = function ( $content ) {
 150                 var uri = new mw.Uri(),
 151                         $highlights = $( '<div>' )
 152                                 .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlights' )
 153                                 .append(
 154                                         $( '<div>' )
 155                                                 .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlights-color-none' )
 156                                                 .prop( 'data-color', 'none' )
 157                                 );
 158
 159                 if ( $( '.mw-rcfilters-ui-changesListWrapperWidget-highlights' ).length ) {
 160                         // Already set up
 161                         return;
 162                 }
 163
 164                 mw.rcfilters.HighlightColors.forEach( function ( color ) {
 165                         $highlights.append(
 166                                 $( '<div>' )
 167                                         .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlights-color-' + color )
 168                                         .prop( 'data-color', color )
 169                         );
 170                 } );
 171
 172                 if (
 173                         ( uri.query.enhanced !== undefined && Number( uri.query.enhanced ) ) ||
 174                         ( uri.query.enhanced === undefined && Number( mw.user.options.get( 'usenewrc' ) ) )
 175                 ) {
 176                         // Enhanced RC
 177                         $content.find( 'td.mw-enhanced-rc' )
 178                                 .parent()
 179                                 .prepend(
 180                                         $( '<td>' )
 181                                                 .append( $highlights.clone() )
 182                                 );
 183                 } else {
 184                         // Regular RC
 185                         $content.find( 'ul.special li' )
 186                                 .prepend( $highlights.clone() );
 187                 }
 188         };
 189
 190         /**
 191          * Apply color classes based on filters highlight configuration
 192          */
 193         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.applyHighlight = function () {
 194                 if ( !this.filtersViewModel.isHighlightEnabled() ) {
 195                         return;
 196                 }
 197
 198                 this.filtersViewModel.getHighlightedItems().forEach( function ( filterItem ) {
 199                         // Add highlight class to all highlighted list items
 200                         this.$element.find( '.' + filterItem.getCssClass() )
 201                                 .addClass( 'mw-rcfilters-highlight-color-' + filterItem.getHighlightColor() );
 202                 }.bind( this ) );
 203
 204                 // Turn on highlights
 205                 this.$element.addClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlighted' );
 206         };
 207
 208         /**
 209          * Remove all color classes
 210          */
 211         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.clearHighlight = function () {
 212                 // Remove highlight classes
 213                 mw.rcfilters.HighlightColors.forEach( function ( color ) {
 214                         this.$element.find( '.mw-rcfilters-highlight-color-' + color ).removeClass( 'mw-rcfilters-highlight-color-' + color );
 215                 }.bind( this ) );
 216
 217                 // Turn off highlights
 218                 this.$element.removeClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlighted' );
 219         };
 220 }( mediaWiki ) );