MediaWiki:Common.js

/* Any JavaScript here will be loaded for all users on every page load. */
/* Based on Terraria Wiki's Common.js on Feb 2024 */


// load various utilities from the commons wiki, including l10nFactory and isEditorActive
/*mw.loader.getScript( 'https://commons.wiki.gg/index.php?title=MediaWiki:Common-base.js&action=raw&ctype=text/javascript' ).then(function(){*/
$(function(){

////////////////////////////////////////////////////////////////////////////////

/**
 * content width toggle
 */
$(function(){
	$body = $('body');
	$('<div id="nav-content-size-toggle"><span></span></div>')
	.prependTo($('#mw-head'))
	.on('click', function(){
		$body.toggleClass('content-size-expanded');
		$(window).trigger('resize');
	});
});

////////////////////////////////////////////////////////////////////////////////

/**
 * sidebar nav menu toggle for mobile view
 */
$(function(){
	$('<div class="menu-toggle"/>').insertBefore($('#p-logo')).on("click", function(event){
		event.stopPropagation();
		$(this).toggleClass('expanded');
	});
});

////////////////////////////////////////////////////////////////////////////////
/**
 * mobile floating fix
 */
$(function(){
	var $contentBox = $('#mw-content-text .mw-parser-output');
	var $elements = $contentBox.children();
	var handle = function(){
		var fullWidth = $contentBox.width();
		if(!fullWidth){
			return;
		}
		var offset = $contentBox.offset().left;
		$elements.removeClass('mobile-floating-fix mobile-fullwidth');

		if(fullWidth > 720){
			return;
		}

		var maxLeft = 0;
		for(var i=$elements.length; i>0; i--){
			var $el = $($elements[i-1]);
			if($el.css('float') == 'right'){
				var left = $el.offset().left;
				if(left - offset < 300 || (maxLeft && left < maxLeft + 12) ){
					$el.addClass('mobile-floating-fix');
					maxLeft = Math.max(maxLeft, left + $el.outerWidth());
					continue;
				}
			}
			maxLeft = 0;
		}
		
		var threshold = Math.min(90, fullWidth*0.25);
		$('#mw-content-text .infobox, #mw-content-text .portable-infobox').each(function(){
			var $el = $(this);
			if(fullWidth - $el.outerWidth() <  threshold){
				$el.addClass('mobile-fullwidth');
			}
		});
	};
	handle();
	$(window).on('resize', mw.util.debounce( handle, 200) );
});

////////////////////////////////////////////////////////////////////////////////

/**
 * for other templates
 */
$(function(){
	/* Select links to new tabs for [[Template:Ilnt]] and [[Template:Elnt]] */
	$('.linkNewTab a').attr('target','_blank');

	/* mode tabs switch for [[Template:Npc infobox]] and [[Template:Npc infobox/tablestart]] and so on */
	/* TODO: adapt for Aurion/Devaedra, and maybe for upgrade trees */
	$('.modesbox .modetabs .tab').on('click', function(){
		var $this = $(this);
		if($this.hasClass('current')){
			return;
		}
		$this.parent().children().removeClass('current');
		$this.addClass('current');
		$this.closest('.modesbox').removeClass('c-expert c-master c-normal').addClass($this.hasClass('normal')?'c-normal':($this.hasClass('expert')?'c-expert':'c-master'));
	});

	/* [[Template:Spoiler]] */
	$('.spoiler-content').on('click', function(){
		$(this).toggleClass('show');
	});

	/* [[Template:ToggleBox]] */
	$('.trw-togglehandle').on('click', function(){
		$(this).closest('.trw-toggleable').toggleClass(['toggled', 'not-toggled']);
	});
});

///////////////////////////////////////////////////////////////////////////////////////////////////////////////

/**
 * Main page layout helper
 */
$(function() {
	/* Main page responsive breakpoints. */
	// Since the width of the content box may vary, we can not use media query.
	// These values are ported from legacy hydra skin.
	var $btn = $('#box-wikiheader #box-wikiheader-toggle-link');
	if(!$btn.length) {
		return;
	}
	var $content = $('#content');
	var $header = $('#box-wikiheader');

	function initiate_collapsible() {
		var $width = $content.width();
		// $offset is (fullwidth - content width) under hydra skin.
		// Therefore ($width - $offset) is the width of content box.
		var $offset = $width > 980 ? 250 : ($width > 500 ? 42: 12);

		//header
		$header.toggleClass('collapsable', $width < 1300);
		$header.toggleClass('collapsed', $width < 730);

		//row breaks of flexboxes
		$content
			.toggleClass('box-row-l', ($width <= 3500-$offset) && ($width >= 2400-$offset) )
			.toggleClass('box-row-m', ($width <= 2399-$offset) && ($width >= 1670-$offset) )
			.toggleClass('box-row-s', ($width <= 1669-$offset) );
			
		$('#content-cell-2-wide').toggleClass('width-1', ($width <=  540-$offset) );
	}

	initiate_collapsible();
	$(window).on('resize', mw.util.debounce( initiate_collapsible, 200) );


	$btn.on('click', function(){
		$header.toggleClass('collapsed');
	});
});

///////////////////////////////////////////////////////////////////////////////////////////////////////////////

/*end of mw.loader.getScript().then callback*/ });