MediaWiki:Gadget-CollapsibleNav.js

/**
 * Collapsible navigation for Timeless, based on the Collapsible Navigation from Vector.
 * @source /core/skins/vector/collapsibleNav.js
 */
( function () {
	'use strict';

	// Use the same function for all navigation headings - don't repeat
	function toggle( $element, forceSetting ) {
		var isCollapsed = $element.parent().is( '.collapsed' );

		if (forceSetting == 'expand' && !isCollapsed
			|| forceSetting == 'close' && isCollapsed) {
			return;
		}

		$.cookie(
			'timeless-nav-' + $element.parent().attr( 'id' ),
			isCollapsed,
			{ 'expires': 30, 'path': '/' }
		);

		$element
			.parent()
			.toggleClass( 'expanded' )
			.toggleClass( 'collapsed' )
			.find( '.mw-portlet-body' )
			.slideToggle( 'fast' );
		isCollapsed = !isCollapsed;

		$element
			.find( '> a' )
			.attr( {
				'aria-pressed': isCollapsed ? 'false' : 'true',
				'aria-expanded': isCollapsed ? 'false' : 'true'
			} );
	}

	$( function ( $ ) {
		var $headings, tabIndex;

		/* General Portal Modification */

		// Apply a class to the entire panel to activate styles
		$( '#site-navigation' ).addClass( 'collapsible-nav' );
		$( '#site-navigation > .sidebar-inner > div > h3' ).addClass( 'collapsible-nav-header' );
		
		// Use cookie data to restore preferences of what to show and hide
		$( '#site-navigation .mw-portlet' )
			.each( function ( i ) {
				var id = $(this).attr( 'id' ),
					state = $.cookie( 'timeless-nav-' + id );
				$(this).find( 'ul:first' ).attr( 'id', id + '-list' );
				// Add anchor tag to heading for better accessibility
				$( this ).find( 'h3' ).wrapInner(
					$( '<a>' )
						.attr( {
							href: '#',
							'aria-haspopup': 'true',
							'aria-controls': id + '-list',
							role: 'button'
						} )
						.click( false )
				);
				// In the case that we are not showing the new version, let's show the languages by default
				if (
					state === 'true' ||
					state === null 
				) {
					$(this)
						.addClass( 'expanded' )
						.removeClass( 'collapsed' )
						.find( '.mw-portlet-body' )
						.hide() // bug 34450
						.show();
					$(this).find( 'h3 > a' )
						.attr( {
							'aria-pressed': 'true',
							'aria-expanded': 'true'
						} );
				} else {
					$(this)
						.addClass( 'collapsed' )
						.removeClass( 'expanded' );
					$(this).find( 'h3 > a' )
						.attr( {
							'aria-pressed': 'false',
							'aria-expanded': 'false'
						} );
				}
				// Re-save cookie
				if ( state !== null ) {
					$.cookie( 'timeless-nav-' + $(this).attr( 'id' ), state, { 'expires': 30, 'path': '/' } );
				}
			} );

		/* Tab Indexing */

		$headings = $( '#site-navigation .mw-portlet > h3' );

		// Make it keyboard accessible
		$headings.attr( 'tabindex', '0' );

		// Toggle the selected menu's class and expand or collapse the menu
		$( '#site-navigation' )
			.on( 'keydown', '.mw-portlet > h3', function ( e ) {
				// Make the space and enter keys act as a click
				if ( e.which === 13 /* Enter */ || e.which === 32 /* Space */ ) {
					toggle( $(this) );
				}
			} )
			.on( 'mousedown', '.mw-portlet > h3', function ( e ) {
				if ( e.which !== 3 ) { // Right mouse click
					toggle( $(this) );
					$(this).blur();
				}
				return false;
			} );
		});
		
		var navigationPortletExpandState = $.cookie( 'timeless-nav-p-navigation' );
		var toggleText = 'Close All';
		if (navigationPortletExpandState !== 'true' && navigationPortletExpandState !== null) {
			toggleText = 'Expand All';
		}
		$( '#site-navigation > .sidebar-inner' ).prepend("<div id=\"sidebar-collapsible-toggle\">" + toggleText + "</div>");
		$("#sidebar-collapsible-toggle").click(function() {
			if($("#sidebar-collapsible-toggle").text() == "Expand All") {
				$("#sidebar-collapsible-toggle").text("Close All");
				$( '#site-navigation .mw-portlet > h3' ).each( function ( i ) {
					toggle( $(this), 'expand');
				} );
				$.cookie(
					'timeless-nav-text-toggle',
					true,
					{ 'expires': 30, 'path': '/' }
				);
			} else {
				$("#sidebar-collapsible-toggle").text("Expand All");
				$( '#site-navigation .mw-portlet > h3' ).each( function ( i ) {
					toggle( $(this), 'close');
				} );
				$.cookie(
					'timeless-nav-text-toggle',
					false,
					{ 'expires': 30, 'path': '/' }
				);
			}
		});
}() );