Add copy-to-clipboard button

Author: riccardoscalco

template/src/index.css

@@ -5,6 +5,13 @@ html, body {
 	overflow: hidden;
 }
 
+body, button {
+	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-text-size-adjust: 100%;
+}
+
 main > article {
 	margin: 0;
 	padding: 10px;
@@ -16,3 +23,10 @@ main > article {
 	position: relative;
 	box-sizing: border-box;
 }
+
+button.copy-to-clipboard {
+	position: fixed;
+	font-size: 0.9vw;
+	padding: 0.2vw;
+	cursor: pointer;
+}

template/src/index.js

@@ -1,4 +1,6 @@
 (function () {
+	const isAutomated = navigator.webdriver;
+
 	/*
 		Describe the app state.
 	*/
@@ -27,6 +29,9 @@
 		addProgress(config);
 		addSlideNumber(config);
 		addDate(config);
+		if (!isAutomated) {
+			addCopyToClipBoardButton(config);
+		}
 	}
 
 	/*
@@ -42,6 +47,10 @@
 			'resize',
 			() => {
 				setBorders(config.width, config.height);
+				if (!isAutomated) {
+					setCopyToClipBoardButtonPosition(config);
+				}
+
 				updateScroll();
 			},
 		);
@@ -193,4 +202,44 @@
 			}
 		});
 	}
+
+	/*
+		Add copy-to-clipboard button
+	*/
+	function addCopyToClipBoardButton(config) {
+		appendCopyToClipBoardButton();
+		setCopyToClipBoardButtonPosition(config);
+	}
+
+	function copyToClipBoard() {
+		fetch(window.location.href)
+			.then(response => response.text())
+			.then(text => {
+				const element = document.createElement('html');
+				element.innerHTML = text;
+				const articles = element.querySelectorAll('main > article');
+				const htmlSnippet = articles[state.pageIndex].outerHTML;
+				navigator.clipboard.writeText(htmlSnippet).then(() => {
+					// Console.log('Copied to clipboard.');
+				}, () => {
+					// Console.log('Error, not copied.');
+				});
+			});
+	}
+
+	function appendCopyToClipBoardButton() {
+		const button = document.createElement('button');
+		button.className = 'copy-to-clipboard';
+		button.textContent = 'copy to clipboard';
+		button.addEventListener('click', copyToClipBoard);
+		document.body.append(button);
+	}
+
+	function setCopyToClipBoardButtonPosition(config) {
+		const button = document.querySelectorAll('.copy-to-clipboard')[0];
+		const bottom = Math.max(0, (window.innerHeight - config.height) / 2);
+		const right = Math.max(0, (window.innerWidth - config.width) / 2);
+		button.style.bottom = `calc(${bottom}px - 2.5vw)`;
+		button.style.right = `${right}px`;
+	}
 })();