From: Roan Kattouw <roan.kattouw@gmail.com>
Date: Fri, 6 Oct 2017 02:26:44 +0000 (-0700)
Subject: RCFilters UI: In the highlight code, use .data() the way it was meant to be used
X-Git-Tag: 1.31.0-rc.0~1830^2
X-Git-Url: http://git.cyclocoop.org/%24action?a=commitdiff_plain;h=dc54c450d68cf715461aaf0889ccefe8a204256a;p=lhc%2Fweb%2Fwiklou.git

RCFilters UI: In the highlight code, use .data() the way it was meant to be used

Use .data( 'highlightedFilters' ) instead of .attr( 'data-highlightedFilters' ),
and make the value an array rather than a string that we have to convert
back and forth every time. We have to use .attr() for data-color because it's
used by CSS, but data-highlightedFilters isn't used by anything else.

Using an array makes the code much simpler. Also add the class
mw-rcfilters-highlighted to every highlighted item, so we can find
them back easily and don't have to use $( '[data-highlightedFilters]' )
(attribute selectors are slow, and this wouldn't work with .data() anyway).

Bonus: use the comma-separator message

Change-Id: I04de7f8fb74d60fb23ef47bf50bacfeb176a55b1
---

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js
index ea32e3643e..83e68a52c6 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js
@@ -427,30 +427,35 @@
 
 			// Add highlight class to all highlighted list items
 			$elements
-				.addClass( 'mw-rcfilters-highlight-color-' + filterItem.getHighlightColor() );
+				.addClass(
+					'mw-rcfilters-highlighted ' +
+					'mw-rcfilters-highlight-color-' + filterItem.getHighlightColor()
+				);
 
+			// Track the filters for each item in .data( 'highlightedFilters' )
 			$elements.each( function () {
-				var filterString = $( this ).attr( 'data-highlightedFilters' ) || '',
-					filters = filterString ? filterString.split( '|' ) : [];
-
+				var filters = $( this ).data( 'highlightedFilters' );
+				if ( !filters ) {
+					filters = [];
+					$( this ).data( 'highlightedFilters', filters );
+				}
 				if ( filters.indexOf( filterItem.getLabel() ) === -1 ) {
 					filters.push( filterItem.getLabel() );
 				}
-
-				$( this )
-					.attr( 'data-highlightedFilters', filters.join( '|' ) );
 			} );
 		}.bind( this ) );
-		// Apply a title for relevant filters
-		this.$element.find( '[data-highlightedFilters]' ).each( function () {
-			var filterString = $( this ).attr( 'data-highlightedFilters' ) || '',
-				filters = filterString ? filterString.split( '|' ) : [];
-
-			if ( filterString ) {
-				$( this ).attr( 'title', mw.msg( 'rcfilters-highlighted-filters-list', filters.join( ', ' ) ) );
+		// Apply a title to each highlighted item, with a list of filters
+		this.$element.find( '.mw-rcfilters-highlighted' ).each( function () {
+			var filters = $( this ).data( 'highlightedFilters' );
+
+			if ( filters && filters.length ) {
+				$( this ).attr( 'title', mw.msg(
+					'rcfilters-highlighted-filters-list',
+					filters.join( mw.msg( 'comma-separator' ) )
+				) );
 			}
-		} );
 
+		} );
 		if ( this.inEnhancedMode() ) {
 			this.updateEnhancedParentHighlight();
 		}
@@ -465,12 +470,15 @@
 	mw.rcfilters.ui.ChangesListWrapperWidget.prototype.clearHighlight = function () {
 		// Remove highlight classes
 		mw.rcfilters.HighlightColors.forEach( function ( color ) {
-			this.$element.find( '.mw-rcfilters-highlight-color-' + color ).removeClass( 'mw-rcfilters-highlight-color-' + color );
+			this.$element
+				.find( '.mw-rcfilters-highlight-color-' + color )
+				.removeClass( 'mw-rcfilters-highlight-color-' + color );
 		}.bind( this ) );
 
-		this.$element.find( '[data-highlightedFilters]' )
+		this.$element.find( '.mw-rcfilters-highlighted' )
 			.removeAttr( 'title' )
-			.removeAttr( 'data-highlightedFilters' );
+			.removeData( 'highlightedFilters' )
+			.removeClass( 'mw-rcfilters-highlighted' );
 
 		// Remove grey from enhanced rows
 		this.$element.find( '.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey' )