Snippets/Collapsible ChangesList options

From MediaWiki.org
Jump to navigation Jump to search
How to use Snippets
List of Snippets
Crystal Clear action run.png
Collapsible ChangesList options
Language(s): JavaScript
Compatible with: MediaWiki 1.17+ (Vector)

Description[edit]

Drupal comes with a nice feature of collapsible fieldsets which helps to un-clutter setting pages (see http://drupal.org/node/321779). Here's the code adapted for MediaWiki's recent changes and watchlist options. Further enhancements could use a cookie to remember the user's preferences and settings from the last session.

Code[edit]

/**
 * Make recent changes and watchlist options collapsible
 *
 * @source: https://www.mediawiki.org/wiki/Snippets/Collapsible_ChangesList_options
 * @rev: 4
 */
if ( $.inArray( mw.config.get( 'wgCanonicalSpecialPageName' ), ['Watchlist', 'Recentchanges']) !== -1 ) {
	mw.hook( 'wikipage.content' ).add( function ( $content ) {
		var $options = $content.find( '#mw-watchlist-options, .rcoptions' ),
			$legend = $options.find( 'legend' );
		if ( mw.config.get( 'wgCanonicalSpecialPageName' ) === 'Watchlist' ) {
			$options.contents().filter( function() {
					// Keep text-nodes, filter out the rest
					return this.nodeType === 3;
				} )
				// Wrap the second text node (intro paragraph) in a tag so we can easily exempt it later when toggling the options
				.eq(1).wrap( '<p id="mw-watchlist-options-intro" />' );
		}
		$options.wrapInner( '<div id="mw-options-wrapper" />' );

		$legend.wrapInner( '<a href="#" />' )
			.click( function( e ) {
				// Avoid jumping to the top (href=#)
				e.preventDefault();
				$( '#mw-options-wrapper' ).toggle( 'fast' );
			} )
			.add( '#mw-watchlist-options-intro' )
			// Put the legend and intro outside the wrapper
			.prependTo( $options );
		// Hide by default
		$( '#mw-options-wrapper' ).hide( );
	} );
}

MediaWiki 1.20[edit]

Try wrapping the code in

( function( $ ) { 
        // Simple scope wrap, where $ is available as alias for jQuery.
        // Code here will be executed immediately
} )( jQuery );

as recommended at JQuery.