MediaWiki:Gadget-MenuTabsToggle.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.

/*  _____________________________________________________________________________
 * |                                                                             |
 * |                    === WARNING: GLOBAL GADGET FILE ===                      |
 * |                  Changes to this page affect many users.                    |
 * | Please discuss changes on the talk page or on [[WT:Gadget]] before editing. |
 * |_____________________________________________________________________________|
 *
 * Toggle between dropdown menus and tabs.
 *
 * @dependencies mediawiki.cookie
 * @source en.wikipedia.org/wiki/MediaWiki:Gadget-MenuTabsToggle.js
 * @source imported as of 2011-10-04 from [[User:Edokter/MenuTabsToggle.js]] / [[User:Edokter/MenuTabsToggle.css]]
 * @revision 3.4
 * @author: Edokter ([[User:Edokter]])
 */

$( 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( 'vector-menu-dropdown' ).addClass( 'vector-menu-tabs' ).css( 'margin-left', '-1px' );
		portlet.find( 'li.icon-collapsed' ).removeClass( 'icon-collapsed' ).addClass( 'icon' );
		mw.cookie.set( id, 'tabs', { prefix: 'vector-tabs-' } );
	}

	/* TabsToMenu */
	function TabsToMenu( portlet, id ) {
		portlet.removeClass( 'vector-menu-tabs' ).addClass( 'vector-menu-dropdown' ).css( 'margin-left', '' );
		portlet.find( 'li.icon' ).removeClass( 'icon' ).addClass( 'icon-collapsed' );
		mw.cookie.set( id, 'menu', { prefix: 'vector-tabs-' } );
	}

	/* Initialize */
	if ( mw.config.get( 'skin' ) !== 'vector' ) {
		return;
	}

	// Unbind events from vector.js
	$( 'nav.vector-menu' ).find( 'h3' ).off();

	// Enumerate all portlets
	$( '.vector-menu-dropdown, .vector-menu-tabs' ).each( function(i) {
		portlet[i] = $( this );
		portletId[i] = portlet[i].attr( 'id' );

		// Skip excluded portlets
		if ( $.inArray( portletId[i], excludePortlets ) == -1 ) {

			// Disable collapsible tabs
			portlet[i].find( 'li.collapsible' ).removeClass( 'collapsible' );

			portletToggle[i] = $( toggleDiv.replace( '$1', portletId[i] + '-toggle' ) );
			// Left or right?
			if ( portlet[i].parent().attr( 'id' ) == 'left-navigation' ) {
				portletToggle[i]
					.addClass( 'toggle-left' )
					.insertBefore( portlet[i].find( 'ul' ) );
			} else {
				portletToggle[i]
					.addClass( 'toggle-right' )
					.insertAfter( portlet[i].find( 'ul' ) );
			}

			// Menu or Tabs?
			if ( portlet[i].hasClass( 'vector-menu-dropdown' ) ) {
				if ( mw.cookie.get( portletId[i], 'vector-tabs-' ) == 'tabs' ) {
					MenuToTabs( portlet[i], portletId[i] );
				}
			}
			else if ( portlet[i].hasClass( 'vector-menu-tabs' ) ) {
				portlet[i].find( 'h3' )
					.wrapInner( '<span></span>' )
					.append( '<a href="#"></a>' );
				if ( mw.cookie.get( portletId[i], 'vector-tabs-' ) == 'menu' ) {
					TabsToMenu( portlet[i], portletId[i] );
				}
			}

			// Assign key and mouse events
			portlet[i].on( 'click', 'h3 a', function( event ) {
				event.preventDefault();
			} );
			portlet[i].on( 'mousedown', 'h3 a', function( event ) {
				if ( event.which != 3 ) {
					var ul = portlet[i].find( 'ul' );
					ul.animate( { height: 'hide' }, 125, function() {
						MenuToTabs( portlet[i], portletId[i] );
						ul.animate( { width: 'show' }, 125 );
					} );
				}
			} );

			portletToggle[i].on( 'click', 'a', function( event ) {
				event.preventDefault();
			} );
			portletToggle[i].on( 'mousedown', 'a', function( event ) {
				if ( event.which != 3 ) {
					var ul = portlet[i].find( 'ul' );
					ul.animate( { width: 'hide' }, 125, function() {
						TabsToMenu( portlet[i], portletId[i] );
						ul.animate( { height: 'show' }, 125 );
					} );
				}
			} );
		}
	} );
} );