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

fixes suggested in PR. fixed copy button for multi line code blocks

Browse source
This commit is contained in:
Dan Ditomaso 2023-08-15 17:29:35 -04:00
parent 37b52d7ef0
commit e1d37ed050
2 changed files with 53 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -390,9 +390,10 @@ pre > code.cmd {
}
pre > code.cmd button {
position: relative;
margin-left: auto;
margin-block: 0;
position: absolute;
display: flow-root;
top: 0;
right: 1.5%;
aspect-ratio: 1;
height: min-content;
width: 32px;
@ -406,12 +407,12 @@ pre > code.cmd button {
.copy-tooltip {
position: absolute;
right: 59px;
top: 13px;
right: 60px;
top: 10px;
color: #ffffff;
background: #1a2c47;
border: 1px solid transparent;
pointer-events: none;
/* pointer-events: none; */
opacity: 0;
font-size: 14px;
border-radius: 5px;
@ -423,17 +424,17 @@ pre > code.cmd button {
display: block;
position: absolute;
right: -9px;
top: 13px;
border-left: 10px solid #1a2c47;
border-bottom: 8px solid transparent;
border-top: 8px solid transparent;
top: auto;
border-left: 18px solid #1a2c47;
border-bottom: 13px solid transparent;
border-top: 13px solid transparent;
}
code.cmd.bash,
code.cmd .bash,
code.cmd.bash-continuation,
code.cmd .bash-continuation {
display: flex;
/* display: flex; */
font-weight: bold;
}

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

@ -23,10 +23,8 @@ $(function () {
$(
"article > h1[id], article > h2[id], article > h3[id], article > h4[id], article > h5[id], article > h6[id]"
).each(function () {
var $anchor = $(
'<a href="#' +
this.id +
'" class="anchor-link" title="Direct link">🔗</a>'
let $anchor = $(
`<a href="#"${this.id} class="anchor-link" title="Direct link">🔗</a>`
);
$(this).append($anchor);
});
@ -77,27 +75,17 @@ $(function () {
);
});
// select all bash code elements and dynamically add clipboard button/svg
$("pre > code.bash").map(function (_, block) {
// only add button if browser supports Clipboard API
if (navigator.clipboard) {
let tooltipText = "Copied";
let icon = $(
`<svg fill="currentColor" class="copy_icon" width="32" height="32" viewBox="0 0 32 32"><path d="M25.629 27.591v-18.051h-14.127v18.051h14.127zM25.629 7.005q1.026 0 1.811 0.755t0.785 1.781v18.051q0 1.026-0.785 1.811t-1.811 0.785h-14.127q-1.026 0-1.811-0.785t-0.785-1.811v-18.051q0-1.026 0.785-1.781t1.811-0.755h14.127zM21.766 1.813v2.596h-15.455v18.051h-2.536v-18.051q0-1.026 0.755-1.811t1.781-0.785h15.455z"></path></svg>`
);
let $button = $(`<button>`).append(icon);
let $tooltip = $(`<div class="copy-tooltip">${tooltipText}</div>`);
let $codeBlockElem = $(block);
$codeBlockElem.append($button);
$codeBlockElem.append($tooltip);
$button.on("click", async function () {
await copyToClipboard(block, $button);
$("code.cmd").on("scroll", function () {
$(this).children("button").fadeOut(400);
});
// select all bash code elements and dynamically add clipboard button/svg
$("code.cmd").map(function (_, block) {
// only add button if browser supports Clipboard API
if (!navigator.clipboard) {
return;
}
return addCopyToClipboardButton(block);
});
});
@ -142,6 +130,35 @@ function splitTypeName(fqtn) {
return { pkg: pkg, typeName: typeName };
}
function debounce(func, timeout = 300) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args).bind(this);
}, timeout);
};
}
function addCopyToClipboardButton(block) {
let tooltipText = "Copied";
let $icon = $(
`<svg fill="currentColor" class="copy_icon" width="32" height="32" viewBox="0 0 32 32"><path d="M25.629 27.591v-18.051h-14.127v18.051h14.127zM25.629 7.005q1.026 0 1.811 0.755t0.785 1.781v18.051q0 1.026-0.785 1.811t-1.811 0.785h-14.127q-1.026 0-1.811-0.785t-0.785-1.811v-18.051q0-1.026 0.785-1.781t1.811-0.755h14.127zM21.766 1.813v2.596h-15.455v18.051h-2.536v-18.051q0-1.026 0.755-1.811t1.781-0.785h15.455z"></path></svg>`
);
let $button = $(`<button>`).append($icon);
let $tooltip = $(`<div class="copy-tooltip">${tooltipText}</div>`);
let $codeBlockElem = $(block);
$codeBlockElem.append($button);
$codeBlockElem.append($tooltip);
$button.on("click", async function () {
await copyToClipboard(block, $button);
});
}
async function copyToClipboard(elem, button) {
// cache the selector to avoid unnessessary overhead
let $codeElem = $(elem);
@ -152,5 +169,6 @@ async function copyToClipboard(elem, button) {
await navigator.clipboard.writeText(text);
// visual feedback that task is completed
$btnElem.next().fadeIn(500).fadeTo(1000, 1).delay(500).fadeOut(500);
$btnElem.next().fadeTo(500, 1);
// $btnElem.next().fadeTo(500, 1).delay(500).fadeOut(400);
}