MediaWiki:Gadget-TabsSelection.js

Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.

Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
Internet Explorer/Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
Opera: Strg+F5

/***************************************************************************
 * tabsSelection v2.0, 2023-02-04
 * Selecting containers by their tabs
 * Original author: Roland Unger
 * Support of desktop and mobile views
 * Documentation: https://de.wikivoyage.org/wiki/Wikivoyage:Gadget-TabsSelection.js
 * License: GPL-2.0+, CC-by-sa 3.0
 ***************************************************************************/

( function ( $ ) {
	'use strict';

	var tabSelect = {};

	tabSelect.selectContainer = function( which, element ) {
		var i = 0, tabs, conts;

		tabs = $( '.voy-tab', element );
		tabs.each( function() {
			if ( i == which ) {
				$( this ).addClass( 'voy-mainTab' ).attr( 'title', '' );
			} else {
				$( this ).removeClass( 'voy-mainTab' )
					.attr( 'title', 'Zeige ' + $( this ).text() );
			}
			i++;
		});

		i = 0;
		conts = $( '.voy-tabbedContainer', element );
		conts.each( function() {
			$( this ).css( 'display', i == which ? 'block' : 'none' );
			i++;
		});
	};

	tabSelect.processEvent = function( event ) {
		var element, tabs, i = 0, which;
		if ( $( event.target ).hasClass( 'voy-mainTab' ) ) {
			return;
		}

		element = $( event.target ).closest( '.voy-tabbedContainers' );
		tabs = $( '.voy-tab', element );

		tabs.each( function() {
			if ( $( this ).is( event.target  ) ) {
				which = i;
			}
			i++;
		});
		tabSelect.selectContainer( which, element );
	};

	tabSelect.init = function() {
		var i, divs, tabs, conts, count;

		divs = $( '.voy-tabbedContainers' );
		if ( !divs.length ) {
			return;
		}
		$( '.voy-tabbedContainers .voy-tabsWrapper' ).addClass( 'voy-js' );

		divs.each( function() {
			tabs = $( '.voy-tab', $( this ) );
			conts = $( '.voy-tabbedContainer', $( this ) );
			count = Math.min(tabs.length, conts.length);
			if ( !count ) {
				return;
			}

			$( '.voy-tabsWrapper', $( this ) ).css( 'display', 'block' );
			tabs.click( function( event ) { 
				tabSelect.processEvent( event );
			} );
			if (tabs.length > count) {
				for ( i = count; i < tabs.length; i++ ) {
					tabs[ i ].style.display = 'none';
				}
			}
			tabSelect.selectContainer( 0, $( this ) );			
		});
	};

	$( tabSelect.init );

} ( jQuery ) );