From Brotato Wiki

((temp) use warn instead of log for better tracking)
(Add scripts for new tabs (Template:StatsCardWeaponTabs))
Line 1: Line 1:
/* Any JavaScript here will be loaded for all users on every page load. */
/* Any JavaScript here will be loaded for all users on every page load. */
console.warn('MediaWiki:Common.js - test1');
 
 
// 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

Revision as of 03:32, 6 December 2022

/* 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