MediaWiki:Common.js: Difference between revisions

Revision as of 12:16, 14 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)


	// 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). Template for the toggle buttons is WIP
	 * 
	 * @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 = $bulkBtns.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

}); // end:$(document).ready