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.addClass( 'mw-rcfilters-ui-changesListWrapperWidget' );
  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         OO.mixinClass( mw.rcfilters.ui.ChangesListWrapperWidget, OO.ui.mixin.PendingElement );
  52
  53         /**
  54          * Respond to the highlight feature being toggled on and off
  55          *
  56          * @param {boolean} highlightEnabled
  57          */
  58         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.onHighlightChange = function ( highlightEnabled ) {
  59                 if ( highlightEnabled ) {
  60                         this.applyHighlight();
  61                 } else {
  62                         this.clearHighlight();
  63                 }
  64         };
  65
  66         /**
  67          * Respond to a filter item model update
  68          */
  69         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.onItemUpdate = function () {
  70                 if ( this.filtersViewModel.isHighlightEnabled() ) {
  71                         this.clearHighlight();
  72                         this.applyHighlight();
  73                 }
  74         };
  75
  76         /**
  77          * Respond to changes list model invalidate
  78          */
  79         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.onModelInvalidate = function () {
  80                 this.pushPending();
  81         };
  82
  83         /**
  84          * Respond to changes list model update
  85          *
  86          * @param {jQuery|string} $changesListContent The content of the updated changes list
  87          */
  88         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.onModelUpdate = function ( $changesListContent ) {
  89                 var isEmpty = $changesListContent === 'NO_RESULTS';
  90
  91                 this.$element.toggleClass( 'mw-changeslist', !isEmpty );
  92                 this.$element.toggleClass( 'mw-changeslist-empty', isEmpty );
  93                 if ( isEmpty ) {
  94                         this.$changesListContent = null;
  95                         this.$element.empty().append(
  96                                 document.createTextNode( mw.message( 'recentchanges-noresult' ).text() )
  97                         );
  98                 } else {
  99                         this.$changesListContent = $changesListContent;
 100                         this.$element.empty().append( this.$changesListContent );
 101                         // Set up highlight containers
 102                         this.setupHighlightContainers( this.$element );
 103
 104                         // Apply highlight
 105                         this.applyHighlight();
 106
 107                         // Make sure enhanced RC re-initializes correctly
 108                         mw.hook( 'wikipage.content' ).fire( this.$element );
 109                 }
 110                 this.popPending();
 111         };
 112
 113         /**
 114          * Set up the highlight containers with all color circle indicators.
 115          *
 116          * @param {jQuery|string} $content The content of the updated changes list
 117          */
 118         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.setupHighlightContainers = function ( $content ) {
 119                 var $highlights = $( '<div>' )
 120                                 .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlights' )
 121                                 .append(
 122                                         $( '<div>' )
 123                                                 .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlights-color-none' )
 124                                                 .prop( 'data-color', 'none' )
 125                                 );
 126
 127                 mw.rcfilters.HighlightColors.forEach( function ( color ) {
 128                         $highlights.append(
 129                                 $( '<div>' )
 130                                         .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlights-color-' + color )
 131                                         .prop( 'data-color', color )
 132                         );
 133                 } );
 134
 135                 if ( Number( mw.user.options.get( 'usenewrc' ) ) ) {
 136                         // Enhanced RC
 137                         $content.find( 'td.mw-enhanced-rc' )
 138                                 .parent()
 139                                 .prepend(
 140                                         $( '<td>' )
 141                                                 .append( $highlights.clone() )
 142                                 );
 143                 } else {
 144                         // Regular RC
 145                         $content.find( 'ul.special li' )
 146                                 .prepend( $highlights.clone() );
 147                 }
 148         };
 149
 150         /**
 151          * Apply color classes based on filters highlight configuration
 152          */
 153         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.applyHighlight = function () {
 154                 if ( !this.filtersViewModel.isHighlightEnabled() ) {
 155                         return;
 156                 }
 157
 158                 this.filtersViewModel.getHighlightedItems().forEach( function ( filterItem ) {
 159                         // Add highlight class to all highlighted list items
 160                         this.$element.find( '.' + filterItem.getCssClass() )
 161                                 .addClass( 'mw-rcfilters-highlight-color-' + filterItem.getHighlightColor() );
 162                 }.bind( this ) );
 163
 164                 // Turn on highlights
 165                 this.$element.addClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlighted' );
 166         };
 167
 168         /**
 169          * Remove all color classes
 170          */
 171         mw.rcfilters.ui.ChangesListWrapperWidget.prototype.clearHighlight = function () {
 172                 // Remove highlight classes
 173                 mw.rcfilters.HighlightColors.forEach( function ( color ) {
 174                         this.$element.find( '.mw-rcfilters-highlight-color-' + color ).removeClass( 'mw-rcfilters-highlight-color-' + color );
 175                 }.bind( this ) );
 176
 177                 // Turn off highlights
 178                 this.$element.removeClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlighted' );
 179         };
 180 }( mediaWiki ) );