User:Awesome Aasim/copycodeblock.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

// based on https://wiki.riteme.site/wiki/User:Nardog/CopyCodeBlock.js
if (!copycodeloaded) {
	var copycodeloaded = true;
	(function copyCodeBlock() {
		$(document).ready(function() {
			let $pres = $("#mw-content-text").find('pre').not('form *');
			if (!$pres.length) return;
			mw.loader.addStyleTag('.copycodeblock-block{position:relative} .copycodeblock{position:absolute;top:0;right:0} :not(:hover) > .copycodeblock:not(:focus-within){opacity:0}');
			mw.loader.using(['oojs-ui-core', 'oojs-ui.styles.icons-editing-advanced', 'oojs-ui.styles.icons-interactions'], function() {
				$pres.each(function() {
					let $pre = $(this);
					let $div = $("<div></div>");
					$div.html(`<pre>${$pre.html()}</pre>`);
					$div.addClass('copycodeblock-block');
					$pre.replaceWith($div);
					let button = new OO.ui.ButtonWidget({
						classes: ['copycodeblock'],
						framed: false,
						icon: 'copy',
						label: "Copy",
						title: 'Copy to clipboard',
					});
					function afterSuccess() {
						button.setIcon("checkAll");
						button.setLabel("Copied!");
						window.setTimeout(function() {
							button.setIcon("copy");
							button.setLabel("Copy");
						}, 3000);
					}
					button.$element.click(async function() {
						try {
							if (button.isDisabled()) return;
							var canRead = await navigator.permissions.query({ name: 'clipboard-read' });
							var clipboardData;
							if (canRead.state == "prompt") {
								alert("Enable clipboard permissions to avoid duplicate code blocks being copied to your clipboard.");
								button.setLabel("Awaiting clipboard permissions...");
							}
							if (canRead.state != "denied") {
								var readInterval = window.setInterval(async function() {
									try {
										clipboardData = await navigator.clipboard.readText();
										copy();
										window.clearInterval(readInterval);
									} catch (error) {
										if (canRead.state == "denied") {
											copy();
											window.clearInterval(readInterval);
										}
									}
								})
							} else {
								copy();
							}
							function copy() {
								var value = $pre.text();
								if (clipboardData == undefined || value != clipboardData) {
									var writeInterval = window.setInterval(async function() {
										try {
											await navigator.clipboard.writeText(value);
											window.clearInterval(writeInterval);
											afterSuccess();
										} catch (error) {
											var $temp = $("<textarea>");
											$("body").append($temp);
											$temp.val(value).select();
											document.execCommand("copy");
											$temp.remove();
											window.clearInterval(writeInterval);
											afterSuccess();
										}
									})
								}
								if (value == clipboardData && clipboardData != undefined) {
									afterSuccess();
								}
							}
						} catch (e) {
							console.error(e);
						}
					});
					$div.append(button.$element);
				})
			});
		});
	}());
}