From Brotato Wiki

Revision as of 03:43, 6 December 2022 by Darkly77 (talk | contribs) (remove the text that said ".filter" because even that's blocked by the ES6 detector)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* 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}"]` );
				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