MediaWiki:Common.js: Difference between revisions

Revision as of 12:19, 24 January 2022

/* Any JavaScript here will be loaded for all users on every page load. */

//Main page responsive layout.
$(function() {
	var $btn = $('#box-wikiheader #box-wikiheader-toggle-link');
	if(!$btn.length) {
		return;
	}
	var $content = $('#content');
	var $header = $('#box-wikiheader');
	
	$(window).on('resize', function(){
		var $width = $content.width();
		var $offset = $width > 980 ? 208 : ($width > 500 ? 42: 12); // (browser width - largest possible content width)
		
		//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) );
		
		$('#box-1')
			.toggleClass('width-a', ($width <= 4500-$offset) && ($width >= 3250-$offset) )
			.toggleClass('width-b', ($width <= 3249-$offset) && ($width >= 1670-$offset) )
			.toggleClass('width-c', ($width <= 1669-$offset) )
			.toggleClass('width-d', ($width <= 1200-$offset) )
			.toggleClass('width-e', ($width <= 1160-$offset) )
			.toggleClass('width-f', ($width <=  700-$offset) )
			.toggleClass('width-g', ($width <=  540-$offset) );
		
		$('#box-2')
			.toggleClass('width-a', ($width >= 1750-$offset) || ($width <= 1669-$offset) )
			.toggleClass('width-b', ($width <=  400-$offset) );

		$('#box-3a')
			.toggleClass('width-a', ($width <= 4500-$offset) && ($width >= 3250-$offset) )
			.toggleClass('width-b', ($width <= 1769-$offset) )
			.toggleClass('width-c', ($width <= 1669-$offset) )
			.toggleClass('width-d', ($width <= 1320-$offset) )
			.toggleClass('width-e', ($width <= 1140-$offset) )
			.toggleClass('width-f', ($width <= 1040-$offset) )
			.toggleClass('width-g', ($width <=  980-$offset) )
			.toggleClass('width-h', ($width <=  870-$offset) )
			.toggleClass('width-i', ($width <=  620-$offset) )
			.toggleClass('width-j', ($width <=  450-$offset) );

		$('#box-3b')
			.toggleClass('width-a', ($width <= 3250-$offset) && ($width >= 2560-$offset) )
			.toggleClass('width-b', ($width <= 1769-$offset) )
			.toggleClass('width-c', ($width <= 1669-$offset) )
			.toggleClass('width-d', ($width <= 1320-$offset) )
			.toggleClass('width-e', ($width <= 1140-$offset) )
			.toggleClass('width-f', ($width <= 1040-$offset) )
			.toggleClass('width-g', ($width <=  980-$offset) )
			.toggleClass('width-h', ($width <=  830-$offset) )
			.toggleClass('width-i', ($width <=  630-$offset) )
			.toggleClass('width-j', ($width <=  428-$offset) );
			
		$('#box-4a')
			.toggleClass('width-a', ($width <= 4500-$offset) && ($width >= 3250-$offset) || $width <= 1470-$offset )
			.toggleClass('width-b', ($width <= 1769-$offset) && ($width >= 1670-$offset) )
			.toggleClass('width-c', ($width <= 1080-$offset) )
			.toggleClass('width-d', ($width <=  750-$offset) )
			.toggleClass('width-e', ($width <=  550-$offset) )
			.toggleClass('width-f', ($width <=  359-$offset) );

		$('#box-4b')
			.toggleClass('width-a', ($width <= 4500-$offset) && ($width >= 3250-$offset) )
			.toggleClass('width-b', ($width <= 3249-$offset) && ($width >= 2560-$offset) )
			.toggleClass('width-c', ($width <= 1470-$offset) )
			.toggleClass('width-d', ($width <= 1080-$offset) )
			.toggleClass('width-e', ($width <=  720-$offset) )
			.toggleClass('width-f', ($width <=  570-$offset) )
			.toggleClass('width-g', ($width <=  350-$offset) );

		$('#box-5a')
			.toggleClass('width-a', ($width <= 4500-$offset) && ($width >= 3250-$offset) )
			.toggleClass('width-b', ($width <= 3249-$offset) && ($width >= 2560-$offset) )
			.toggleClass('width-c', ($width <= 1669-$offset) )
			.toggleClass('width-d', ($width <= 1365-$offset) )
			.toggleClass('width-e', ($width <=  800-$offset) )
			.toggleClass('width-f', ($width <=  720-$offset) )
			.toggleClass('width-g', ($width <=  480-$offset) );

		$('#box-5b')
			.toggleClass('width-a', ($width <= 4500-$offset) && ($width >= 3250-$offset) )
			.toggleClass('width-b', ($width <= 1669-$offset) )
			.toggleClass('width-c', ($width <= 1365-$offset) )
			.toggleClass('width-d', ($width <=  800-$offset) )
			.toggleClass('width-e', ($width <=  720-$offset) )
			.toggleClass('width-f', ($width <=  650-$offset) )
			.toggleClass('width-g', ($width <=  540-$offset) );

		$('#sect-6')
			.toggleClass('width-a', $width >= 2300-$offset );

		$('#box-7')
			.toggleClass('width-a', ($width <= 2299-$offset) )
			.toggleClass('width-b', ($width <= 1100-$offset) )
			.toggleClass('width-c', ($width <=  680-$offset) );

		$('#box-8')
			.toggleClass('width-a', ($width <= 2299-$offset) )
			.toggleClass('width-b', ($width <= 1499-$offset) )
			.toggleClass('width-c', ($width <=  680-$offset) );			
	}).triggerHandler('resize');
	$btn.on('click', function(){
		$header.toggleClass('collapsed');
	});
});