Docs: added copy button to non-inline code snippets (mrdoob#29700)

* docs: added copy button to non-inline code snippets

* docs: copy button icons img path update

Author: snowiewdev

docs/page.css

@@ -156,6 +156,10 @@ ul code {
 	margin: 16px 0;
 }
 
+code {
+	position: relative;
+}
+
 code.inline {
 	display: inline-block;
 	vertical-align: middle;
@@ -165,6 +169,32 @@ code.inline {
 	margin: 0;
 }
 
+.copy-btn {
+	cursor: pointer;
+	position: absolute;
+	top: 16px;
+	right: 16px;
+	width: 24px;
+	height: 24px;
+	background-color: transparent;
+	background-image: url('../files/ic_copy_grey_24dp.svg');
+	background-size: contain;
+	background-position: center;
+	background-repeat: no-repeat;
+	opacity: 0.9;
+	border: none;
+}
+
+.copy-btn:hover {
+	opacity: 1;
+}
+
+.copy-btn.copied {
+	pointer-events: none;
+	opacity: 1;
+	background-image: url('../files/ic_tick_green_24dp.svg');
+}
+
 table {
 	width: 100%;
 	border-collapse: collapse;
@@ -315,4 +345,10 @@ a.param:hover {
 		line-height: 28px;
 	}
 
+	.copy-btn {
+		top: 12px;
+		right: 8px;
+		width: 20px;
+		height: 20px;
+	}
 }

docs/page.js

@@ -125,6 +125,34 @@ function onDocumentLoad() {
 
 	}
 
+	// create copy button for copying code snippets
+
+	function addCopyButton( element ) {
+
+		const copyButton = document.createElement( 'button' );
+		copyButton.className = 'copy-btn';
+
+		element.appendChild( copyButton );
+
+		copyButton.addEventListener( 'click', function () {
+
+			const codeContent = element.textContent;
+			navigator.clipboard.writeText( codeContent ).then( () => {
+
+				copyButton.classList.add( 'copied' );
+
+				setTimeout( () => {
+
+					copyButton.classList.remove( 'copied' );
+
+				}, 1000 );
+
+			} );
+
+		} );
+
+	}
+
 	const elements = document.getElementsByTagName( 'code' );
 
 	for ( let i = 0; i < elements.length; i ++ ) {
@@ -133,6 +161,12 @@ function onDocumentLoad() {
 
 		element.textContent = dedent( element.textContent );
 
+		if ( ! element.classList.contains( 'inline' ) ) {
+
+			addCopyButton( element );
+
+		}
+
 	}
 
 	// Edit button