From Brotato Wiki
(Replace `jQuery().filter` because mediawiki thinks it's ES6 so blocks it) |
(remove the text that said ".filter" because even that's blocked by the ES6 detector) |
||
Line 53: | Line 53: | ||
var $btn = $( btnEl ); | var $btn = $( btnEl ); | ||
var btnNum = $btn.attr( 'data-cardtabs-btn' ); | var btnNum = $btn.attr( 'data-cardtabs-btn' ); | ||
var $panel = $panelsContainer.children( `[data-cardtabs-panel="${btnNum}"]` ); | var $panel = $panelsContainer.children( `[data-cardtabs-panel="${btnNum}"]` ); | ||
var btnActiveCls = 'cardtabs__button--active'; | var btnActiveCls = 'cardtabs__button--active'; | ||
var panelHideCls = 'cardtabs__panel--js-hidden'; | var panelHideCls = 'cardtabs__panel--js-hidden'; |
Revision as of 03:43, 6 December 2022
/* 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