User:Canadabonk/common.js

$(document).ready(function(){
	
	// desktop/tablet only
	if ($(window).width() > 850 && $('body.skin-cosmos').length) {
		
		//add sidetools wrapper
		$('#mw-content').prepend('<div class="ct-sidetools-wrapper"><div class="ct-sidetools"></div></div>');
		const sidetools = $('.ct-sidetools');
		
		// if toc exists, add toc to sidetools
		if ($('#toc').length) {
			//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 faListUl = '<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.append(faListUl);
			
			// get contents of toc
			$('#toc').find('ul').first().clone().appendTo('.ct-toc');
			$('.ct-toc').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');
	        
	        /*
	        
	        $('.ct-toc-move').click(function(){
	        	if ($('.ct-toc').is(':visible')) {
	        		$('.ct-toc').hide();
	        	}
	        });
	        */
	        
		}
	}
	
	function hideOnClickOutside(container, hiddenitem) {
	    window.onclick = function (event) {
	        const $target = $(event.target);
	        if (!$target.closest(container).length && $(hiddenitem).is(':visible')) {
	            $(hiddenitem).fadeOut(200);
	        }
	    };
	}
	
});