Skip to content

Commit 7fb48b7

Browse files
Oashe02Oashe02
committed
copy button fixed
1 parent cda9f11 commit 7fb48b7

File tree

5 files changed

+130
-124
lines changed

5 files changed

+130
-124
lines changed

‎assets/sass/content.scss‎

Lines changed: 49 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,54 @@ pre {
4848
padding: 1rem;
4949
border-radius: 5px;
5050
overflow-x: auto;
51+
position: relative;
52+
}
53+
54+
.code-block-wrapper {
55+
position: relative;
56+
margin-bottom: 1.5rem;
57+
}
58+
59+
.copy-code-button {
60+
position: absolute;
61+
top: 8px;
62+
right: 6px;
63+
64+
width: 20px ;
65+
height: 20px;
66+
67+
padding: 0;
68+
margin: 0;
69+
70+
background: transparent;
71+
border: none;
72+
73+
display: flex;
74+
align-items: center;
75+
justify-content: center;
76+
77+
cursor: pointer;
78+
color: currentColor;
79+
80+
z-index: 20;
81+
}
82+
83+
.copy-code-button svg {
84+
width: 14px ;
85+
height: 14px ;
86+
display: block;
87+
}
88+
89+
.sr-only {
90+
position: absolute;
91+
width: 1px;
92+
height: 1px;
93+
padding: 0;
94+
margin: -1px;
95+
overflow: hidden;
96+
clip: rect(0, 0, 0, 0);
97+
white-space: nowrap;
98+
border: 0;
5199
}
52100

53101
details {
@@ -58,5 +106,5 @@ details {
58106
}
59107

60108
details[open] {
61-
border-color: 1px solid var(--text-color);
109+
border-color: var(--text-color);
62110
}

‎assets/sass/global.scss‎

Lines changed: 10 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,12 @@
55
body {
66
color: var(--text-color);
77
background: var(--background-color);
8-
font-family: "Helvetica Neue", "Segoe UI", "Noto Sans", Helvetica, Arial,
8+
font-family:
9+
"Helvetica Neue",
10+
"Segoe UI",
11+
"Noto Sans",
12+
Helvetica,
13+
Arial,
914
sans-serif;
1015
font-size: 20px;
1116
line-height: 2em;
@@ -17,30 +22,19 @@ a {
1722
color: var(--accent-color);
1823
}
1924

20-
a:hover,
21-
a:active {
25+
a:hover, a:active {
2226
text-decoration: underline;
2327
}
2428

25-
pre,
26-
code {
29+
pre, code {
2730
font-family: Monaco, "Ubuntu Mono", Inconsolata, Consolas, monospace;
2831
}
2932

33+
3034
pre {
3135
line-height: 1.4em;
32-
33-
margin: 20px 0 !important; // remove ALL outside spacing
34-
padding: 0 !important; // remove ALL inside spacing
35-
}
36-
37-
pre > code {
38-
margin: 0 !important; // remove internal margin
39-
padding: 16px !important; // remove internal padding
40-
display: block !important;
4136
}
4237

43-
4438
strong {
4539
font-weight: bold;
4640
}
@@ -64,25 +58,4 @@ em {
6458
&:focus {
6559
transform: translateY(0%);
6660
}
67-
}
68-
69-
70-
.copy-code-button {
71-
position: absolute;
72-
top: 6px;
73-
right: 6px;
74-
padding: 0;
75-
font-size: 12px;
76-
77-
background: transparent !important;
78-
border: none !important;
79-
box-shadow: none !important;
80-
outline: none !important;
81-
82-
cursor: pointer;
83-
}
84-
85-
.copy-code-button span {
86-
font-size: 16px;
87-
background: transparent !important;
88-
}
61+
}

‎layouts/_default/baseof.html‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,6 @@
2424
<meta name="twitter:card" content="summary" />
2525

2626
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
27-
<link
28-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"
29-
rel="stylesheet"
30-
/>
3127

3228
</head>
3329
<body>
@@ -50,7 +46,6 @@ <h1><a href="/">Helmet.js</a></h1>
5046
<main id="main" class="container">
5147
{{ block "main" . }}{{ end }}
5248
</div>
53-
<link rel="stylesheet" href="/css/copy-code.css">
5449
<script src="/js/copy-code.js" defer></script>
5550

5651

‎static/css/copy-code.css‎

Lines changed: 0 additions & 45 deletions
This file was deleted.

‎static/js/copy-code.js‎

Lines changed: 71 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,73 @@
1-
(function () {
2-
document.addEventListener("DOMContentLoaded", () => {
3-
const blocks = document.querySelectorAll(
4-
"pre > code.language-js, pre > code.language-javascript"
5-
);
6-
7-
blocks.forEach((code) => {
8-
const pre = code.parentElement;
9-
pre.style.position = "relative";
10-
11-
const btn = document.createElement("button");
12-
btn.className = "copy-code-button";
13-
btn.innerHTML =
14-
'<span class="material-symbols-outlined">content_copy</span>';
15-
16-
pre.appendChild(btn);
17-
18-
btn.addEventListener("click", async () => {
19-
try {
20-
await navigator.clipboard.writeText(code.innerText.trim());
21-
btn.innerHTML =
22-
'<span class="material-symbols-outlined">check</span>';
23-
setTimeout(() => {
24-
btn.innerHTML =
25-
'<span class="material-symbols-outlined">content_copy</span>';
26-
}, 800);
27-
} catch (err) {
28-
btn.innerHTML =
29-
'<span class="material-symbols-outlined">error</span>';
30-
setTimeout(() => {
31-
btn.innerHTML =
32-
'<span class="material-symbols-outlined">content_copy</span>';
33-
}, 800);
34-
}
35-
});
1+
document.addEventListener("DOMContentLoaded", () => {
2+
const blocks = document.querySelectorAll(
3+
"pre > code.language-js, pre > code.language-javascript"
4+
);
5+
6+
const COPY_SVG = `
7+
<span aria-hidden="true" class="copy-icon">
8+
<svg viewBox="0 0 28 28" fill="currentColor">
9+
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1
10+
0-2 .9-2 2v16c0 1.1.9 2 2 2h11c1.1 0 2-.9
11+
2-2V7c0-1.1-.9-2-2-2zm0 18H8V7h11v16z" />
12+
</svg>
13+
</span>
14+
`;
15+
16+
const CHECK_SVG = `
17+
<span aria-hidden="true" class="check-icon">
18+
<svg viewBox="0 0 24 24" fill="currentColor">
19+
<path d="M9 16.17 4.83 12l-1.42 1.41L9 19
20+
21 7l-1.41-1.41z" />
21+
</svg>
22+
</span>
23+
`;
24+
25+
function setButtonState(btn, iconHTML, srText) {
26+
btn.innerHTML = `
27+
${iconHTML}
28+
<span class="sr-only">${srText}</span>
29+
`;
30+
btn.setAttribute("aria-label", srText);
31+
}
32+
33+
blocks.forEach((code) => {
34+
const pre = code.parentElement;
35+
36+
let wrapper = pre.parentElement;
37+
if (!wrapper.classList.contains("code-block-wrapper")) {
38+
wrapper = document.createElement("div");
39+
wrapper.className = "code-block-wrapper";
40+
pre.replaceWith(wrapper);
41+
wrapper.appendChild(pre);
42+
}
43+
44+
const btn = document.createElement("button");
45+
btn.className = "copy-code-button";
46+
setButtonState(btn, COPY_SVG, "Copy code");
47+
48+
wrapper.appendChild(btn);
49+
50+
let resetTimeout = null;
51+
let isCooling = false;
52+
53+
btn.addEventListener("click", async () => {
54+
if (isCooling) return;
55+
isCooling = true;
56+
57+
try {
58+
await navigator.clipboard.writeText(code.innerText.trim());
59+
setButtonState(btn, CHECK_SVG, "Copied");
60+
} catch {
61+
setButtonState(btn, COPY_SVG, "Copy code");
62+
}
63+
64+
if (resetTimeout) clearTimeout(resetTimeout);
65+
66+
resetTimeout = setTimeout(() => {
67+
setButtonState(btn, COPY_SVG, "Copy code");
68+
isCooling = false;
69+
resetTimeout = null;
70+
}, 1000);
3671
});
3772
});
38-
})();
73+
});

0 commit comments

Comments
 (0)