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