From 64ae04d042114d4d30ff46d0a58041bc313a3ae7 Mon Sep 17 00:00:00 2001 From: Chris Holdgraf Date: Thu, 28 Jul 2022 08:36:31 +0200 Subject: [PATCH 1/2] FIX: Make copybutton remain for a second during success --- 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 60869f5..984a0e2 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 seconds, 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 = () => { From aab69f628205e7b50e00a090c6a525622c74a701 Mon Sep 17 00:00:00 2001 From: Chris Holdgraf Date: Tue, 15 Nov 2022 01:46:42 -0800 Subject: [PATCH 2/2] Update sphinx_copybutton/_static/copybutton.js_t --- sphinx_copybutton/_static/copybutton.js_t | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sphinx_copybutton/_static/copybutton.js_t b/sphinx_copybutton/_static/copybutton.js_t index 984a0e2..8a69bae 100644 --- a/sphinx_copybutton/_static/copybutton.js_t +++ b/sphinx_copybutton/_static/copybutton.js_t @@ -102,7 +102,7 @@ const clearSelection = () => { } } -// Changes tooltip text for a moment 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;