mirrors/caddy-website
1
0
Fork 0
mirror of https://github.com/caddyserver/website.git synced 2025-04-20 04:15:04 -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%;
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 {

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

@ -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);
}