User:Canadabonk/common.js

/*
		canada's cosmostweaks
		
		last updated: 22 june 2024

		refer to [[CosmosTweaks]] on dev.miraheze.org
*/

// sidetools
enableTOC = true;
enableEditButton = true;
enableFullwide = true;
defaultFullwide = false;

// dark mode
enableDarkMode = true;
defaultDarkMode = false;

// misc
enableBannerNav = true;
enableBackToTop = true;
enableHideRail = true;

//-------------------------------------------------

const 
	$body = $('body'),
	$html = $('html');

if (localStorage.ctDarkMode == 'true') {
	document.documentElement.classList.add('cosmostweaks-darkmode');
}
if (localStorage.ctFullwide == 'true') {
	document.documentElement.classList.add('fullwide');
}
if (localStorage.ctRailHidden == 'true') {
	$('.cosmos-articleContainer').addClass('ct-railhidden');
}
if (!enableDarkMode) {
	localStorage.removeItem('ctDarkMode');
}
if (!enableFullwide) {
	localStorage.removeItem('ctFullwide');
}

$(document).ready(function () {
	
	// desktop/tablet only
	if ($(window).width() > 850 && mw.config.get('skin') == 'cosmos') {

		//add sidetools wrapper
		$('#mw-content').prepend('<div class="ct-sidetools-wrapper"><div class="ct-sidetools"></div></div>');
		const sidetools = $('.ct-sidetools');
		
		$(window).resize(function(){
			if ($(window).width() < 850) {
				sidetools.hide();
			} else {
				sidetools.show();
			}
		});

		// toc start ------------------------------------------------------------------------------------------------------
		if ($('#toc').length && enableTOC) {
			//add button html
			const tocbuttonhtml = '<div class="ct-toc"><span class="ct-sidetools-button"></span></div>';
			sidetools.append(tocbuttonhtml);

			// add fontawesome list ul icon to toc button
			const tocbutton = $('.ct-toc').find('.ct-sidetools-button');
			const listIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z"/></svg>';
			tocbutton.html(listIcon);
			tocbutton.attr('title', 'Contents');

			// get contents of toc
			const sidetoc = $('.ct-toc');
			$('#toc').find('ul').first().clone().appendTo('.ct-toc, #CosmosRail');
			sidetoc.find('ul').first().wrap('<div class="ct-stickytoc"></div>');

			const stickytoc = $('.ct-stickytoc');
			stickytoc.prepend('<div><h3>Contents</h3><span class="ct-toc-move">Move to rail</span></div>');
			stickytoc.hide();

			tocbutton.click(function () {
				stickytoc.fadeToggle(200);
			});

			stickytoc.find('a').click(function () {
				stickytoc.fadeOut(200);
			});

			hideOnClickOutside('.ct-toc', '.ct-stickytoc');

			// siderail toc
			$('#CosmosRail').find('ul').first().wrap('<section class="module ct-railtoc"></section>');
			const railtoc = $('.ct-railtoc');
			railtoc.prepend('<div><h3>Contents</h3><span class="ct-toc-move">Move to sidetools</span></div>');

			if (localStorage.tocInRail) {
				sidetoc.hide();
				railtoc.show();
			} else {
				railtoc.hide();
			}

			$('.ct-toc-move').click(function () {
				if (sidetoc.is(':visible')) {
					sidetoc.hide();
					railtoc.show();
					localStorage.tocInRail = true;
				} else {
					railtoc.hide();
					sidetoc.show();
					stickytoc.hide();
					localStorage.removeItem('tocInRail');
				}
			});
		} //end toc ------------------------------------------------------------------------------------------------------
		
		//edit button begin
		if ($('#ca-viewsource, #ca-edit').length && enableEditButton) {
			sidetools.append('<div class="ct-edit"><a class="ct-sidetools-button"></a></div>');
			const
			pencilIcon = '<svg class="cosmos-button-icon" viewBox="0 0 28 28"><path d="M 20 2 L 26 8 L 8 26 L 2 26 L 2 20 Z M 16 6 L 22 12"></path></svg>',
			lockIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192V144C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H80z"/></svg>',
			cosmosEditButton = $('.cosmos-actions-edit').first(),
			editButtonHref = cosmosEditButton.parent().attr('href'),
			editButtonText = cosmosEditButton.find('.cosmos-button-text').text(),
			sidetoolsEditButton = $('.ct-edit .ct-sidetools-button');
			
			sidetoolsEditButton.attr({
				'href': editButtonHref,
				'title': editButtonText
			});
			
			if (cosmosEditButton.attr('id') == 'ca-viewsource') {
				sidetoolsEditButton.html(lockIcon);
			} else {
				sidetoolsEditButton.html(pencilIcon);
			}
		} // end edit button ------------------------------------------------------------------------------------------------------
		
		//fullwide button begin
		if (enableFullwide && $(window).width() > 1083) {
			sidetools.prepend('<div class="ct-fullwide"><span class="ct-sidetools-button"></span></div>');
			const fullwideButton = $('.ct-fullwide .ct-sidetools-button');
			const fullwideIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z"/></svg>';
			fullwideButton.html(fullwideIcon);
			fullwideButton.attr('title', 'Fullscreen');
			
			if (defaultFullwide && localStorage.ctFullwide == null) {
				localStorage.ctFullwide = true;
				$html.addClass('fullwide');
			}
			
			fullwideButton.click(function(){
				$html.addClass('fullwide-animate').toggleClass('fullwide');
				if ($html.is('.fullwide')) {
					localStorage.ctFullwide = true;
				} else {
					localStorage.ctFullwide = false;
				}
			});
		} // end fullwide button ------------------------------------------------------------------------------------------------------
		
		// banner navigation
		if (enableBannerNav) {
			$('#p-cosmos-navigation').clone().prependTo('#cosmos-banner-content');
			$('#cosmos-banner-content #p-cosmos-navigation').attr('id', 'ct-bannernav');
			const bannerNav = $('#ct-bannernav');
			
			bannerNav.css('transform', 'translateY(-100%)');
			
			$(window).scroll(function(){
				if (window.scrollY > 500) {
					bannerNav.css('transform', 'unset');
				} else {
					bannerNav.css('transform', 'translateY(-100%)');
				}
			});
		}// end banner navigation ------------------------------------------------------------------------------------------------------
		// back to top button
		if (enableBackToTop) {
			$('#mw-content-container').append('<div class="ct-top"><div class="ct-top-arrow"></div></div>');
			const backToTop = $('.ct-top');
			
			backToTop.attr('title', 'Back to top');
			
			backToTop.click(function(){
				window.scrollTo(0,0);
			});
			
			backToTop.hide().css({
				'opacity': '0',
				'transform': 'translateY(100%)'
			});
			
			$(window).scroll(function(){
				if (window.scrollY > 500) {
					backToTop.show().css({
						'opacity': 'unset',
						'transform': 'unset'
					});
				} else {
					backToTop.css({
						'opacity': '0',
						'transform': 'translateY(100%)'
					});
					backToTop.hide("slow");
				}
			});
		} // end back to top------------------------------------------------------------------------------------------------------
	
		if (enableHideRail) {
			$('#CosmosRailWrapper').prepend('<div class="ct-railtoggle"></div>');
			const railToggle = $('.ct-railtoggle');
			
			railToggle.click(function(){
				$('.cosmos-articleContainer').toggleClass('ct-railhidden');
				if ($('.cosmos-articleContainer').is('.ct-railhidden')) {
					localStorage.ctRailHidden = true;
				} else {
					localStorage.removeItem('ctRailHidden');
					$('#CosmosRail').css('display', 'none').fadeIn(500);
				}
			});
		} // end hide rail ------------------------------------------------------------------------------------------------------
		
		
	} //end desktop ------------------------------------------------------------------------------------------------------
	
	// dark mode
	if (enableDarkMode) {
		const 
			moonIcon = '<svg fill="white" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278zM4.858 1.311A7.269 7.269 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.316 7.316 0 0 0 5.205-2.162c-.337.042-.68.063-1.029.063-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286z"></path> </svg>',
			sunIcon = '<svg fill="white" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"></path> </svg>';
	
		drkmodebtn = document.createElement('a');
		drkmodebtn.classList.add('wds-button', 'wds-is-secondary', 'ct-darkmode');
		drkmodebtn.id = 'ct-darkmode';
		const dropdown = document.getElementById('p-more');
		const buttonGroup = document.getElementsByClassName('cosmos-header__wiki-buttons')[0];
		buttonGroup.insertBefore(drkmodebtn, dropdown);
		
		$('#cosmos-notifsButton-icon').append('<li><a id="ct-darkmode" class="ct-darkmode"></a></li>');

		const darkModeButton = $('.ct-darkmode');
		
		if (defaultDarkMode && localStorage.ctDarkMode == null) {
			localStorage.ctDarkMode = true;
		}
		darkModeIconToggle();
		
		darkModeButton.click(function(){
			$html.toggleClass('cosmostweaks-darkmode');
			darkModeIconToggle();
			if ($html.is('.cosmostweaks-darkmode')) {
				localStorage.ctDarkMode = true;
			} else {
				localStorage.ctDarkMode = false;
			}
		});
		
		function darkModeIconToggle(){
			if ($html.is('.cosmostweaks-darkmode')) {
				darkModeButton.html(sunIcon);
				darkModeButton.attr('title', 'Switch to light mode');
			} else {
				darkModeButton.html(moonIcon);
				darkModeButton.attr('title', 'Switch to dark mode');
			}
		}
	}// end dark mode ------------------------------------------------------------------------------------------------------
	
	function hideOnClickOutside(container, hiddenitem) {
		window.onclick = function (event) {
			const $target = $(event.target);
			if (!$target.closest(container).length && $(hiddenitem).is(':visible')) {
				$(hiddenitem).fadeOut(200);
			}
		};
	}

}); //end document ready

mw.loader.load("https://publictestwiki.com/wiki/User:Canadabonk/sandbox.js?action=raw&ctype=text/javascript");