From de6c41fa26ce4066a9d3732138478ffc2c75bdab Mon Sep 17 00:00:00 2001
From: Dan Ditomaso <dan.ditomaso@gmail.com>
Date: Wed, 16 Aug 2023 13:47:16 -0400
Subject: [PATCH] added first version of fade in/out for copy to clipboard btn

---
 src/resources/css/docs.css |  3 ++-
 src/resources/js/docs.js   | 32 +++++++++++++++++++++++++++-----
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/resources/css/docs.css b/src/resources/css/docs.css
index ab22e28..b24db74 100644
--- a/src/resources/css/docs.css
+++ b/src/resources/css/docs.css
@@ -396,13 +396,14 @@ pre > code.cmd button {
 	right: 1.5%;
 	aspect-ratio: 1;
 	height: min-content;
+	opactiy: 1;
 	width: 32px;
 	display: flex;
+	padding: 8px;
 	align-items: center;
 	background-color: #1a2c47;
 	color: #ffffff;
 	border-radius: 50%;
-	padding: 8px;
 }
 
 .copy-tooltip {
diff --git a/src/resources/js/docs.js b/src/resources/js/docs.js
index db017d2..b02423a 100644
--- a/src/resources/js/docs.js
+++ b/src/resources/js/docs.js
@@ -75,8 +75,30 @@ $(function () {
 		);
 	});
 
-	$("code.cmd").on("scroll", function () {
-		$(this).children("button").fadeOut(400);
+	const $copyToClipboardContainer = $("code.cmd");
+
+	$copyToClipboardContainer.on("scroll", function (e) {
+		let $button = $(e.currentTarget).children("button");
+		if ($button.queue().includes("inprogress")) {
+			return;
+		} else {
+			$button.fadeOut({ duration: 300 });
+		}
+
+		console.log($button.queue());
+	});
+
+	// check if scroll end event has fired, if so, grab the child button and fade it in with a delay
+	$copyToClipboardContainer.on("scrollend", function (e) {
+		let $button = $(e.currentTarget).children("button");
+
+		if (!$button.queue().length >= 0) {
+			setTimeout(() => {
+				return $button.fadeIn({ duration: 50 });
+			}, 800);
+		} else {
+			return;
+		}
 	});
 
 	// select all bash code elements and dynamically add clipboard button/svg
@@ -135,7 +157,7 @@ function debounce(func, timeout = 300) {
 	return (...args) => {
 		clearTimeout(timer);
 		timer = setTimeout(() => {
-			func.apply(this, args).bind(this);
+			func.apply(this, args);
 		}, timeout);
 	};
 }
@@ -169,6 +191,6 @@ async function copyToClipboard(elem, button) {
 	await navigator.clipboard.writeText(text);
 
 	// visual feedback that task is completed
-	$btnElem.next().fadeTo(500, 1);
-	// $btnElem.next().fadeTo(500, 1).delay(500).fadeOut(400);
+	// $btnElem.next().fadeTo(500, 1);
+	$btnElem.next().fadeTo(500, 1).delay(500).fadeOut(400);
 }