User:Canadabonk/common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

$(document).ready(function () {
	mw.loader.using( ['oojs-ui.styles.icons-editing-core','oojs-ui.styles.icons-editing-list'] ).done( 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>');
				
				OOUIEditButton = new OO.ui.IconWidget( {
					icon: 'edit',
					label: 'edit',
					title: 'Edit'
				} );
				OOUIViewSource = new OO.ui.IconWidget( {
					icon: 'linkSecure',
					label: 'view source',
					title: 'View source'
				} );
				const
				cosmosEditButton = $('#cosmos-articleHeader-actions .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.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