మీడియావికీ:Gadget-FlatSidebar.js

/**
 * Script for Flat-list Sidebar gadget
 * ver. 0.1.5; June 13, 2015 
 *
 * @track [[File:Gadget-FlatSidebar.js]]
 */

$( 'div#mw-panel' ).addClass( 'emptyPortlet' );

( function () {
	'use strict';
	$( function () {
		var flatSidebar = document.createElement( 'div' );
		flatSidebar.id = 'p-panel';
		$( flatSidebar ).insertBefore( '#p-personal' );
	} );

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

		/* General Portal Modification */

		// Add new class before removal of the existing class
		$( '#mw-panel > .portal' ).addClass( 'panel' );
		$( '#mw-panel > .panel' ).removeClass( 'portal' );
		// Apply a class to the entire panel to activate styles
		$( '#mw-panel' ).addClass( 'hiddenStructure' );
		$( '#mw-panel > .panel' )
			.each( function ( i ) {
				var id = $(this).attr( 'id' );
				$(this).find( 'ul:first' ).attr( 'id', id + '-list' );
				$(this).find( 'h3' ).replaceWith(function () {
					return $('<div></div>', { class: 'panelLabel', id: this.id, text: $(this).text() });
				});
				$(this).find( 'div.panelLabel' ).attr( 'id', id + '-label' );
				// Add anchor tag to heading for better accessibility
				$(this).find( 'div.panelLabel' ).wrapInner(
					$( '<a>' )
						.attr( {
							class: 'a-icon-spacer',
							href: '#',
							'aria-haspopup': 'true',
							'aria-controls': id + '-list',
							role: 'button'
						} )
						.click( false )
				);
			} );

		$( '.mw-wiki-logo' ).addClass( 'mw-wiki-logo-text' ).removeClass( 'mw-wiki-logo' );
		// Linux Libertine font for text content below  &#xE02F;&#xE059;&#xE05B;&#xE059;&#xE063;&#xE05F;&#xE065;&#xE062;&#xE053;&#xE055;
		$( 'a.mw-wiki-logo-text' ).text( '' );
		$( '#p-logo' ).attr( 'id', 'p-logo-text' );
		$( 'div#mw-panel' ).children( 'div.panel' ).appendTo( 'div#p-panel' );
		$( '#p-logo-text' ).insertBefore( '#p-panel' );
		$( '<i class="a-icon-container a-icon-arrow a-icon-transition" id="a-icon-toggle"></i>' ).prependTo( '.a-icon-spacer' );

		/* Tab Indexing */

		// Fix the search not having a tabindex
		$( '#searchInput' ).attr( 'tabindex', '0' );

		/**
		 * Dropdown menu accessibility
		 */
		$( 'div.panel' ).each( function () {
			var $el = $( this );
			$el.find( '> div > a' ).parent()
				.attr( 'tabindex', '0' )
				// For accessibility, show the menu when the h3 is clicked (bug T26298/T48486)
				.on( 'click keypress', function ( e ) {
					if ( e.type === 'click' || e.which === 13 ) {
						$el.toggleClass( 'bodyForceShow' );
						e.preventDefault();
					}
				} )
				// When the heading has focus, also set a class that will change the arrow icon
				.focus( function () {
					$el.find( '> a' ).addClass( 'bodyMenuFocus' );
				} )
				.blur( function () {
					$el.find( '> a' ).removeClass( 'bodyMenuFocus' );
				} )
				.find( '> a:first' )
				// As the h3 can already be focused there's no need for the link to be focusable
				.attr( 'tabindex', '-1' );
		} );
	} );

}() );