From Brotato Wiki
(Add scripts for new tabs (Template:StatsCardWeaponTabs)) |
(Downgrade to ES5 syntax, as apparently mediawiki doesn't support ES6) |
||
Line 2: | Line 2: | ||
// | /* | ||
$(document).ready(() | WARNING: ES5 ONLY! | ||
*/ | |||
$(document).ready( function() | |||
{ | { | ||
// Inits | // Inits | ||
Line 24: | Line 28: | ||
function initCardTabs() | function initCardTabs() | ||
{ | { | ||
var $containers = $( '[data-cardtabs]' ); | |||
if ( !$containers.length ) | if ( !$containers.length ) | ||
Line 32: | Line 36: | ||
// Loop over every container | // Loop over every container | ||
$containers.each( ( i1, containerEl ) | $containers.each( function( i1, containerEl ) | ||
{ | { | ||
var $tabs = $( containerEl ); | |||
// We use the extra step of targetting containers here, instead of | // We use the extra step of targetting containers here, instead of | ||
// just using `.find`, because this lets us support nesteds tabs! | // 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 | // Loop over buttons and set up their onclicks | ||
$btns.each( ( i2, btnEl ) | $btns.each( function( i2, btnEl ) | ||
{ | { | ||
var $btn = $( btnEl ); | |||
var btnNum = $btn.attr( 'data-cardtabs-btn' ); | |||
var $panel = $panels.filter( `[data-cardtabs-panel="${btnNum}"]` ); | |||
var btnActiveCls = 'cardtabs__button--active'; | |||
var panelHideCls = 'cardtabs__panel--js-hidden'; | |||
// Disabled buttons use "-1" for their numbers | // Disabled buttons use "-1" for their numbers | ||
Line 58: | Line 62: | ||
} | } | ||
$btn.on( 'click', () | $btn.on( 'click', function() | ||
{ | { | ||
// Hide all other panels, then show the button's own panel | // Hide all other panels, then show the button's own panel |
Revision as of 03:34, 6 December 2022
/* Any JavaScript here will be loaded for all users on every page load. */ /* WARNING: ES5 ONLY! */ $(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 = $panels.filter( `[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