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 OOUI listbullet icon to button
			const 
			tocbutton = $('.ct-toc .ct-sidetools-button'),
			tocbuttonOOUI = new OO.ui.IconWidget( {
				icon: 'listBullet',
				label: 'Contents',
				title: 'Contents'
			} );
			
			tocbutton.append(tocbuttonOOUI.$element);
			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 (!$('body.action-edit').length && $('#cosmos-articleHeader-actions .cosmos-actions-edit').length) {
			sidetools.append('<div class="ct-edit"><a class="ct-sidetools-button"></a></div>');
			
			var OOUIEditButton = new OO.ui.IconWidget( {
				icon: 'edit',
				label: 'edit',
				title: 'Edit'
			} );
			var OOUIViewSource = new OO.ui.IconWidget( {
				icon: 'lock',
				label: 'view source',
				title: 'View source'
			} );
			const
			cosmosEditButton = $('#cosmos-articleHeader-actions .cosmos-actions-edit'),
			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.append(OOUIViewSource.$element);
			} else {
				sidetoolsEditButton.append(OOUIEditButton.$element);
			}
		}
		
	} //end desktop

	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