MediaWiki:Common.js

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


/*
WARNING: ES5 ONLY!
- also can't use `jQuery().filter` because mediawiki thinks it's ES6
*/


$(document).ready( function()
{
	// 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()
	{
		var $containers = $( '[data-cardtabs]' );

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

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

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

			// Loop over buttons and set up their onclicks
			$btns.each( function( i2, btnEl )
			{
				var $btn     = $( btnEl );
				var btnNum   = $btn.attr( 'data-cardtabs-btn' );
				var $panel   = $panelsContainer.children( `[data-cardtabs-panel="${btnNum}"]` ); // can't use `$panels.filter` because mediawiki thinks that's ES6
				var btnActiveCls = 'cardtabs__button--active';
				var panelHideCls = 'cardtabs__panel--js-hidden';

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

				$btn.on( 'click', function()
				{
					// 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