MediaWiki:Gadget-MenuToTabs.js

Want an adless experience? Log in or Create an account.

Note: After saving, 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 (Command+R on a Mac)
• Google Chrome: press Ctrl+Shift+R (Command+Shift+R on a Mac)
• Internet Explorer: hold Ctrl while clicking Refresh, or press Ctrl+F5
• Konqueror: click Reload or press F5
• Opera: clear the cache in Tools → Preferences

$( document ).ready( function() {
	var portlet = [];
	var portletId = [];
	var portletToggle = [];
	var toggleDiv = '<div class="vectorToggle" id="$1"><span><a href="#"></a></span></div>';
 
	/* Portlets to exclude */
	var excludePortlets = [ 'p-namespaces', 'p-twinkle' ];
 
	/* MenuToTabs */
	function MenuToTabs( portlet, id ) {
		portlet.removeClass( 'vectorMenu' ).addClass( 'vectorTabs' ).css( 'margin-left', '-1px' )
			.find( 'div.menu > ul' ).unwrap()
			.find( 'li > a' ).wrap( '<span></span>' );
		portlet.find( 'li.icon-collapsed' ).removeClass( 'icon-collapsed' ).addClass( 'icon' );
		$.cookie( 'vector-tabs-' + id, 'tabs', { expires: 30, path: '/' } );
	}
 
	/* TabsToMenu */
	function TabsToMenu( portlet, id ) {
		portlet.removeClass( 'vectorTabs' ).addClass( 'vectorMenu' ).css( 'margin-left', '' )
			.find( 'ul' ).wrap( '<div class="menu"></div>' )
			.find( 'span > a' ).unwrap();
		portlet.find( 'li.icon' ).removeClass( 'icon' ).addClass( 'icon-collapsed' );
		$.cookie( 'vector-tabs-' + id, 'menu', { expires: 30, path: '/' } );
	}
 
	/* Initialize */
	if ( !mw.config.get( 'skin' ) == 'vector' ) {
		return;
	}
 
	// Enumerate all instances of vectorMenu
	$( '.vectorMenu, .vectorTabs' ).each( function(i) {
		portlet[i] = $( this );
		portletId[i] = portlet[i].attr( 'id' );
 
		// Skip p-namespaces and other excluded portlets
		if ( $.inArray( portletId[i], excludePortlets ) == -1 ) {
 
			// Disable collapsible tabs
			portlet[i].find( 'li.collapsible' )
				.removeClass( 'collapsible' );
 
			// Left or right?
			if ( portlet[i].parent().attr( 'id' ) == 'left-navigation' ) {
				portletToggle[i] = $( toggleDiv
					.replace( '$1', portletId[i] + '-toggle' ) )
					.addClass( 'toggle-left' )
					.insertBefore( portlet[i].find( 'ul' ) );
			} else {
				portletToggle[i] = $( toggleDiv
					.replace( '$1', portletId[i] + '-toggle' ) )
					.addClass( 'toggle-right' )
					.insertAfter( portlet[i].find( 'ul' ) );
			}
 
			// Menu or Tabs?
			if ( portlet[i].hasClass( 'vectorMenu' ) ) {
				if ( $.cookie( 'vector-tabs-' + portletId[i] ) == 'tabs' ) {
					MenuToTabs( portlet[i], portletId[i] );
				}
			}
			else if ( portlet[i].hasClass( 'vectorTabs' ) ) {
				portlet[i].find( 'h5' )
					.wrapInner( '<span></span>' )
					.append( '<a href="#"></a>' );
				if ( $.cookie( 'vector-tabs-' + portletId[i] ) == 'menu' ) {
					TabsToMenu( portlet[i], portletId[i] );
				}
			}
 
			// Assign click events
			portlet[i].find( 'h5 > a' ).click( function(e) {
				e.preventDefault();
				var ul = portlet[i].find( 'ul' );
				ul.animate( { height: 'hide' }, 125, function() {
					MenuToTabs( portlet[i], portletId[i] );
					ul.animate( { width: 'show' }, 125 );
				});
			});
			portletToggle[i].find( 'a' ).click( function(e) {
				e.preventDefault();
				var ul = portlet[i].find( 'ul' );
				ul.animate( { width: 'hide' }, 125, function() {
					TabsToMenu( portlet[i], portletId[i] );
					ul.animate( { height: 'show' }, 125 );
				});
			});
		}
	});
});