User:MSchottlender-WMF/MinimalRCFilters.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

/**
 * A gadget to toggle normal and minimal view for RCFilters product
 * ** Advanced users only **
 * Please note that this must be loaded along with the CSS side.
 * 
 * To use:
 * 
 * Visit Special:MyPage/common.js
 * Edit that page and add the following two lines:

// [[File:User:MSchottlender-WMF/MinimalRCFilters.js]] (workaround for [[phab:T35355]])
mw.loader.load( 'https://www.mediawiki.org/w/index.php?title=User:MSchottlender-WMF/MinimalRCFilters.js&action=raw&ctype=text/javascript' );

 */
 ( function ( mw, $ ) {
 	if ( !$( '.rcfilters-head' ).length ) {
 		return;
 	}

	// Only load where RCFilters exist
	mw.hook( 'structuredChangeFilters.ui.initialized' ).add( function () {
		// NOTE: The advanced-filters-ui-initialized will be available soon
		// Using 'wikipage.content' is unsafe because it is fired multiple times
		// when results are reloaded.
		var $button = $( '<button>' )
				.css( { display: 'none' } )
				.text( 'Toggle Minimal' ),
			prefName = 'userjs-rcfilters-view-minimal',
			currValue = mw.user.options.get( prefName ) || 'normal';

		// We want to load the CSS stylesheet before we display the button.
		// mw.loader.load doesn't return a promise, and mw.loader.using can't load a file
		// So we cheat:
		// (would have been: mw.loader.load( '//www.mediawiki.org/w/index.php?title=User:MSchottlender-WMF/MinimalRCFilters.css&action=raw&ctype=text/css', 'text/css' ); )
		$.ajax( {
			url: '//www.mediawiki.org/w/index.php?title=User:MSchottlender-WMF/MinimalRCFilters.css&action=raw&ctype=text/css'
		} )
		.then( function ( stylesheet ) {
			mw.util.addCSS( stylesheet );
			$button.css( { display: 'block' } );
		} );

		$button.on( 'click', function () {
			var newState = currValue === 'normal' ? 'minimal' : 'normal';
			
			// Update cookie
			mw.user.options.set( prefName, newState );
			new mw.Api().saveOption( prefName, newState );

			// Toggle the class
			$( '.mw-rcfilters-ui-ready' ).toggleClass( 'mw-rcfilters-ui-minimal', newState === 'minimal' );
			$( '.mw-rcfilters-ui-overlay' ).toggleClass( 'mw-rcfilters-ui-minimal', newState === 'minimal' );

			// Update button label
			updateButtonLabel( newState );

			// Update value
			currValue = newState;
		} );
	
		// Initialize
		updateButtonLabel( currValue );
	
		$( '.mw-rcfilters-ui-filterWrapperWidget-top .mw-rcfilters-ui-table .mw-rcfilters-ui-row' )
			.append(
				$( '<div>' )
					.addClass( 'mw-rcfilters-ui-cell' )
					.append(
						$( '<div>' )
							.addClass( 'mw-rcfilters-ui-cell' )
							.append( $button )
					)
			);
		
		function updateButtonLabel( state ) {
			$button.text( state === 'normal' ? 'Set Minimal View' : 'Set Normal View' );
		}
	} );
}( mediaWiki, jQuery ) );