From Brotato Wiki
m (fix multi selector) |
(StatsCard - toggles for misc things (cost/tags)) |
||
Line 14: | Line 14: | ||
initCardTabs(); // Template:StatsCardWeaponTabs | initCardTabs(); // Template:StatsCardWeaponTabs | ||
initStatsCardsToggles(); // Allows hiding StatsCard (.ibox) elements, via toggle buttons (WIP) | initStatsCardsToggles(); // Allows hiding StatsCard (.ibox) elements, via toggle buttons (WIP) | ||
initStatsCardsMiscToggles(); // Toggles for misc (cosst/tags) | |||
Line 79: | Line 80: | ||
/** | /** | ||
* Toggle a StatsCard box (.ibox) | * Toggle a StatsCard box (.ibox) | ||
* | * | ||
* @todo: | * Targets elements with [data-ibox-type="item"], selecting them by the | ||
* given class (eg. rarity1), which should be applied to the element with | |||
* the data-ibox-type data attr | |||
* | |||
* @todo: Use the CSS class (ibox--hidden) instead of JS-injected opacity | |||
* | * | ||
* @return {void} | * @return {void} | ||
Line 145: | Line 150: | ||
}); | }); | ||
}//end:initStatsCardsToggles | }//end:initStatsCardsToggles | ||
/** | |||
* Toggle "misc" (costs/tags) | |||
* | |||
* @return {void} | |||
*/ | |||
function initStatsCardsMiscToggles() | |||
{ | |||
var $btns = $( '[data-hide-type="misc"]' ); | |||
$btns.each( function( i, el ) | |||
{ | |||
var $btn = $( el ); | |||
var $targets = $( $btn.attr( 'data-hide-target' ) ); | |||
if ( !$targets.length ) | |||
{ | |||
return; | |||
} | |||
$btn.on( 'click', function( ev ) | |||
{ | |||
$btn.toggleClass( 'btn--active' ); | |||
$btn.toggleClass( 'btn--inactive' ); | |||
$targets.toggle(); | |||
}); | |||
}); | |||
} | |||
}); // end:$(document).ready | }); // end:$(document).ready |
Revision as of 19:24, 16 December 2022
/* Any JavaScript here will be loaded for all users on every page load. */ /* WARNING: ES5 ONLY! */ $(document).ready( function() { // Inits // ============================================================================ initCardTabs(); // Template:StatsCardWeaponTabs initStatsCardsToggles(); // Allows hiding StatsCard (.ibox) elements, via toggle buttons (WIP) initStatsCardsMiscToggles(); // Toggles for misc (cosst/tags) // 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 /** * Toggle a StatsCard box (.ibox) * * Targets elements with [data-ibox-type="item"], selecting them by the * given class (eg. rarity1), which should be applied to the element with * the data-ibox-type data attr * * @todo: Use the CSS class (ibox--hidden) instead of JS-injected opacity * * @return {void} */ function initStatsCardsToggles() { var $allBtns = $( '[data-hide-type="item"]' ); var $bulkBtns = $( '[data-hide-target="show-all"], [data-hide-target="show-none"]' ); var $nonBulkBtns = $allBtns.not( $bulkBtns ); $( '[data-hide-type]' ).on( 'click', function( ev ) { var $btn = $( ev.currentTarget ); var filterStr = $btn.attr( 'data-hide-target' ); // eg "rarity3" var $targets = $( '[data-ibox-type="item"].' + filterStr ); var $all = $( '[data-ibox-type="item"]' ); if ( filterStr === 'show-all' || filterStr === 'show-none' ) { // Bulk toggle ALL targets $targets = $all; switch( filterStr ) { case 'show-all': $targets.removeClass( 'ibox--hidden' ); $targets.css( { opacity: 1 } ); $nonBulkBtns.addClass( 'btn--active' ); $nonBulkBtns.removeClass( 'btn--inactive' ); break; case 'show-none': $targets.addClass( 'ibox--hidden' ); $targets.css( { opacity: 0.2 } ); $nonBulkBtns.removeClass( 'btn--active' ); $nonBulkBtns.addClass( 'btn--inactive' ); break; } } else { // Toggle specific targets $btn.toggleClass( 'btn--active' ); $btn.toggleClass( 'btn--inactive' ); $targets.each( function( i, el ) { var $target = $( el ); var isHidden = $target.hasClass( 'ibox--hidden' ); if ( isHidden ) { $target.removeClass( 'ibox--hidden' ); $targets.css( { opacity: 1 } ); } else { $target.addClass( 'ibox--hidden' ); $targets.css( { opacity: 0.2 } ); } }); } }); }//end:initStatsCardsToggles /** * Toggle "misc" (costs/tags) * * @return {void} */ function initStatsCardsMiscToggles() { var $btns = $( '[data-hide-type="misc"]' ); $btns.each( function( i, el ) { var $btn = $( el ); var $targets = $( $btn.attr( 'data-hide-target' ) ); if ( !$targets.length ) { return; } $btn.on( 'click', function( ev ) { $btn.toggleClass( 'btn--active' ); $btn.toggleClass( 'btn--inactive' ); $targets.toggle(); }); }); } }); // end:$(document).ready