assets/js/code-copy-to-clipboard.js

const BUTTON_CLASSNAME = 'copy-to-clipboard-button'
const BUTTON_CLASSNAME_SUCCESS = 'copy-to-clipboard-button__success'

const TEMPLATE = document.createElement('button')
TEMPLATE.classList.add(BUTTON_CLASSNAME)
TEMPLATE.title = 'Copy to clipboard'
TEMPLATE.type = 'button'

const SECOND = 1000
const RESULT_DISPLAY_DURATION = 0.5 * SECOND

/**
 * @param {HTMLElement?} el Element to copy text from
 * @returns {boolean} Copy success/failure
 */
function copyCode(el) {
	if (!el) return
	if (!el.matches('code')) return

	const range = document.createRange()
	range.selectNode(el)
	window.getSelection().addRange(range)

	try {
		return document.execCommand('copy')
	} catch (err) {} finally {
		window.getSelection().removeAllRanges()		
	}
}

function init() {
	for (const code of document.querySelectorAll('pre>code')) {
		try {
			const container = code.closest('.listingblock .content')
			if (!container) break
			const button = TEMPLATE.cloneNode(true)
			container.appendChild(button)			
		} catch (err) {}
	}
	document.addEventListener('click', e => {
		if (e.target.classList.contains(BUTTON_CLASSNAME)) {
			const result = copyCode(e.target.parentElement.querySelector('code'))
			if (result) {
				e.target.innerText = '✓'
				e.target.classList.add(BUTTON_CLASSNAME_SUCCESS)
				setTimeout(() => {
					e.target.innerText = TEMPLATE.textContent
					e.target.classList.remove(BUTTON_CLASSNAME_SUCCESS)
				}, RESULT_DISPLAY_DURATION)
			}
		}
	})
}

window.addEventListener('load', init)