From e1d37ed050d0b84d96a95ebf946741bd70c2edea Mon Sep 17 00:00:00 2001
From: Dan Ditomaso <dan.ditomaso@gmail.com>
Date: Tue, 15 Aug 2023 17:29:35 -0400
Subject: [PATCH] fixes suggested in PR. fixed copy button for multi line code
 blocks

---
 src/resources/css/docs.css | 23 +++++++-------
 src/resources/js/docs.js   | 64 ++++++++++++++++++++++++--------------
 2 files changed, 53 insertions(+), 34 deletions(-)

diff --git a/src/resources/css/docs.css b/src/resources/css/docs.css
index d6316bc..ab22e28 100644
--- a/src/resources/css/docs.css
+++ b/src/resources/css/docs.css
@@ -390,9 +390,10 @@ pre > code.cmd {
 }
 
 pre > code.cmd button {
-	position: relative;
-	margin-left: auto;
-	margin-block: 0;
+	position: absolute;
+	display: flow-root;
+	top: 0;
+	right: 1.5%;
 	aspect-ratio: 1;
 	height: min-content;
 	width: 32px;
@@ -406,12 +407,12 @@ pre > code.cmd button {
 
 .copy-tooltip {
 	position: absolute;
-	right: 59px;
-	top: 13px;
+	right: 60px;
+	top: 10px;
 	color: #ffffff;
 	background: #1a2c47;
 	border: 1px solid transparent;
-	pointer-events: none;
+	/* pointer-events: none; */
 	opacity: 0;
 	font-size: 14px;
 	border-radius: 5px;
@@ -423,17 +424,17 @@ pre > code.cmd button {
 	display: block;
 	position: absolute;
 	right: -9px;
-	top: 13px;
-	border-left: 10px solid #1a2c47;
-	border-bottom: 8px solid transparent;
-	border-top: 8px solid transparent;
+	top: auto;
+	border-left: 18px solid #1a2c47;
+	border-bottom: 13px solid transparent;
+	border-top: 13px solid transparent;
 }
 
 code.cmd.bash,
 code.cmd .bash,
 code.cmd.bash-continuation,
 code.cmd .bash-continuation {
-	display: flex;
+	/* display: flex; */
 	font-weight: bold;
 }
 
diff --git a/src/resources/js/docs.js b/src/resources/js/docs.js
index 8cffb3a..db017d2 100644
--- a/src/resources/js/docs.js
+++ b/src/resources/js/docs.js
@@ -23,10 +23,8 @@ $(function () {
 	$(
 		"article > h1[id], article > h2[id], article > h3[id], article > h4[id], article > h5[id], article > h6[id]"
 	).each(function () {
-		var $anchor = $(
-			'<a href="#' +
-				this.id +
-				'" class="anchor-link" title="Direct link">🔗</a>'
+		let $anchor = $(
+			`<a href="#"${this.id} class="anchor-link" title="Direct link">🔗</a>`
 		);
 		$(this).append($anchor);
 	});
@@ -77,27 +75,17 @@ $(function () {
 		);
 	});
 
+	$("code.cmd").on("scroll", function () {
+		$(this).children("button").fadeOut(400);
+	});
+
 	// select all bash code elements and dynamically add clipboard button/svg
-	$("pre > code.bash").map(function (_, block) {
+	$("code.cmd").map(function (_, block) {
 		// only add button if browser supports Clipboard API
-		if (navigator.clipboard) {
-			let tooltipText = "Copied";
-
-			let icon = $(
-				`<svg fill="currentColor" class="copy_icon"  width="32" height="32" viewBox="0 0 32 32"><path d="M25.629 27.591v-18.051h-14.127v18.051h14.127zM25.629 7.005q1.026 0 1.811 0.755t0.785 1.781v18.051q0 1.026-0.785 1.811t-1.811 0.785h-14.127q-1.026 0-1.811-0.785t-0.785-1.811v-18.051q0-1.026 0.785-1.781t1.811-0.755h14.127zM21.766 1.813v2.596h-15.455v18.051h-2.536v-18.051q0-1.026 0.755-1.811t1.781-0.785h15.455z"></path></svg>`
-			);
-			let $button = $(`<button>`).append(icon);
-
-			let $tooltip = $(`<div class="copy-tooltip">${tooltipText}</div>`);
-
-			let $codeBlockElem = $(block);
-			$codeBlockElem.append($button);
-			$codeBlockElem.append($tooltip);
-
-			$button.on("click", async function () {
-				await copyToClipboard(block, $button);
-			});
+		if (!navigator.clipboard) {
+			return;
 		}
+		return addCopyToClipboardButton(block);
 	});
 });
 
@@ -142,6 +130,35 @@ function splitTypeName(fqtn) {
 	return { pkg: pkg, typeName: typeName };
 }
 
+function debounce(func, timeout = 300) {
+	let timer;
+	return (...args) => {
+		clearTimeout(timer);
+		timer = setTimeout(() => {
+			func.apply(this, args).bind(this);
+		}, timeout);
+	};
+}
+
+function addCopyToClipboardButton(block) {
+	let tooltipText = "Copied";
+
+	let $icon = $(
+		`<svg fill="currentColor" class="copy_icon"  width="32" height="32" viewBox="0 0 32 32"><path d="M25.629 27.591v-18.051h-14.127v18.051h14.127zM25.629 7.005q1.026 0 1.811 0.755t0.785 1.781v18.051q0 1.026-0.785 1.811t-1.811 0.785h-14.127q-1.026 0-1.811-0.785t-0.785-1.811v-18.051q0-1.026 0.785-1.781t1.811-0.755h14.127zM21.766 1.813v2.596h-15.455v18.051h-2.536v-18.051q0-1.026 0.755-1.811t1.781-0.785h15.455z"></path></svg>`
+	);
+	let $button = $(`<button>`).append($icon);
+
+	let $tooltip = $(`<div class="copy-tooltip">${tooltipText}</div>`);
+
+	let $codeBlockElem = $(block);
+	$codeBlockElem.append($button);
+	$codeBlockElem.append($tooltip);
+
+	$button.on("click", async function () {
+		await copyToClipboard(block, $button);
+	});
+}
+
 async function copyToClipboard(elem, button) {
 	// cache the selector to avoid unnessessary overhead
 	let $codeElem = $(elem);
@@ -152,5 +169,6 @@ async function copyToClipboard(elem, button) {
 	await navigator.clipboard.writeText(text);
 
 	// visual feedback that task is completed
-	$btnElem.next().fadeIn(500).fadeTo(1000, 1).delay(500).fadeOut(500);
+	$btnElem.next().fadeTo(500, 1);
+	// $btnElem.next().fadeTo(500, 1).delay(500).fadeOut(400);
 }