mirrors/caddy-website
1
0
Fork 0
mirror of https://github.com/caddyserver/website.git synced 2025-04-20 12:15:08 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

added first version of fade in/out for copy to clipboard btn

Browse source
This commit is contained in:
Dan Ditomaso 2023-08-16 13:47:16 -04:00
parent e1d37ed050
commit de6c41fa26
2 changed files with 29 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/resources/css/docs.css
View file

@ -396,13 +396,14 @@ pre > code.cmd button {
right: 1.5%; right: 1.5%;
aspect-ratio: 1; aspect-ratio: 1;
height: min-content; height: min-content;
opactiy: 1;
width: 32px; width: 32px;
display: flex; display: flex;
padding: 8px;
align-items: center; align-items: center;
background-color: #1a2c47; background-color: #1a2c47;
color: #ffffff; color: #ffffff;
border-radius: 50%; border-radius: 50%;
padding: 8px;
} }
.copy-tooltip { .copy-tooltip {

32
src/resources/js/docs.js
View file

@ -75,8 +75,30 @@ $(function () {
); );
}); });
$("code.cmd").on("scroll", function () { const $copyToClipboardContainer = $("code.cmd");
$(this).children("button").fadeOut(400);
$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 // select all bash code elements and dynamically add clipboard button/svg
@ -135,7 +157,7 @@ function debounce(func, timeout = 300) {
return (...args) => { return (...args) => {
clearTimeout(timer); clearTimeout(timer);
timer = setTimeout(() => { timer = setTimeout(() => {
func.apply(this, args).bind(this); func.apply(this, args);
}, timeout); }, timeout);
}; };
} }
@ -169,6 +191,6 @@ async function copyToClipboard(elem, button) {
await navigator.clipboard.writeText(text); await navigator.clipboard.writeText(text);
// visual feedback that task is completed // visual feedback that task is completed
$btnElem.next().fadeTo(500, 1); // $btnElem.next().fadeTo(500, 1);
// $btnElem.next().fadeTo(500, 1).delay(500).fadeOut(400); $btnElem.next().fadeTo(500, 1).delay(500).fadeOut(400);
} }