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