MediaWiki:Common.js

/* Any JavaScript here will be loaded for all users on every page load. */


// Note: Using jQuery as its easier for others to edit
$(document).ready(() =>
{
	// Inits
	// ============================================================================

	initCardTabs();


	// Funcs
	// ============================================================================

	/**
	 * Sets up tabs. Used by the StatsCardWeaponTabs template
	 *
	 * @link https://brotato.wiki.spellsandguns.com/Template:StatsCardWeaponTabs
	 * @link https://brotato.wiki.spellsandguns.com/MediaWiki:Common.css
	 *
	 * @return  {void}
	 */
	function initCardTabs()
	{
		const $containers = $( '[data-cardtabs]' );

		if ( !$containers.length )
		{
			return;
		}

		// Loop over every container
		$containers.each( ( i1, containerEl ) =>
		{
			const $tabs = $( containerEl );

			// We use the extra step of targetting containers here, instead of
			// just using `.find`, because this lets us support nesteds tabs!
			const $panelsContainer = $tabs.children(   '[data-cardtabs-panels]' );
			const $btnsContainer   = $tabs.children(   '[data-cardtabs-btns]' );
			const $panels = $panelsContainer.children( '[data-cardtabs-panel]' );
			const $btns   = $btnsContainer.children(   '[data-cardtabs-btn]' );

			// Loop over buttons and set up their onclicks
			$btns.each( ( i2, btnEl ) =>
			{
				const $btn     = $( btnEl );
				const btnNum   = $btn.attr( 'data-cardtabs-btn' );
				const $panel   = $panels.filter( `[data-cardtabs-panel="${btnNum}"]` );
				const btnActiveCls = 'cardtabs__button--active';
				const panelHideCls = 'cardtabs__panel--js-hidden';

				// Disabled buttons use "-1" for their numbers
				if ( btnNum === '-1' )
				{
					return;
				}

				$btn.on( 'click', () =>
				{
					// Hide all other panels, then show the button's own panel
					$panels.addClass( panelHideCls );
					$panel.removeClass( panelHideCls );

					$btns.removeClass( btnActiveCls );
					$btn.addClass( btnActiveCls );
				});
			});

		});
	}//end:initCardTabs

}); // end:$(document).ready