From e529aa0c7c0bf6ad880904f7a8876f33040e5c09 Mon Sep 17 00:00:00 2001
From: Chris Holdgraf <choldgraf@gmail.com>
Date: Tue, 15 Nov 2022 10:51:06 +0100
Subject: [PATCH] FIX: Make copybutton remain for a second during success
 (#176)

closes https://github.com/executablebooks/sphinx-copybutton/issues/175
---
 sphinx_copybutton/_static/copybutton.css  |  3 ++-
 sphinx_copybutton/_static/copybutton.js_t | 15 +++++++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/sphinx_copybutton/_static/copybutton.css b/sphinx_copybutton/_static/copybutton.css
index 40eafe5..f1916ec 100644
--- a/sphinx_copybutton/_static/copybutton.css
+++ b/sphinx_copybutton/_static/copybutton.css
@@ -35,7 +35,8 @@ div.highlight  {
     position: relative;
 }
 
-.highlight:hover button.copybtn {
+/* Show the copybutton */
+.highlight:hover button.copybtn, button.copybtn.success {
 	opacity: 1;
 }
 
diff --git a/sphinx_copybutton/_static/copybutton.js_t b/sphinx_copybutton/_static/copybutton.js_t
index 78315ea..5f00007 100644
--- a/sphinx_copybutton/_static/copybutton.js_t
+++ b/sphinx_copybutton/_static/copybutton.js_t
@@ -102,18 +102,25 @@ const clearSelection = () => {
   }
 }
 
-// Changes tooltip text for two seconds, then changes it back
+// Changes tooltip text for a moment, then changes it back
+// We want the timeout of our `success` class to be a bit shorter than the
+// tooltip and icon change, so that we can hide the icon before changing back.
+var timeoutIcon = 2000;
+var timeoutSuccessClass = 1500;
+
 const temporarilyChangeTooltip = (el, oldText, newText) => {
   el.setAttribute('data-tooltip', newText)
   el.classList.add('success')
-  setTimeout(() => el.setAttribute('data-tooltip', oldText), 2000)
-  setTimeout(() => el.classList.remove('success'), 2000)
+  // Remove success a little bit sooner than we change the tooltip
+  // So that we can use CSS to hide the copybutton first
+  setTimeout(() => el.classList.remove('success'), timeoutSuccessClass)
+  setTimeout(() => el.setAttribute('data-tooltip', oldText), timeoutIcon)
 }
 
 // Changes the copy button icon for two seconds, then changes it back
 const temporarilyChangeIcon = (el) => {
   el.innerHTML = iconCheck;
-  setTimeout(() => {el.innerHTML = iconCopy}, 2000)
+  setTimeout(() => {el.innerHTML = iconCopy}, timeoutIcon)
 }
 
 const addCopyButtonToCodeCells = () => {