Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit 37638e4

Browse filesBrowse files
jakecastellidanielleadams
authored andcommitted
tools: add button to copy code example to clipboard
PR-URL: #46928 Refs: #46894 Reviewed-By: Debadree Chatterjee <debadree333@gmail.com>
1 parent 05cb503 commit 37638e4
Copy full SHA for 37638e4

File tree

Expand file treeCollapse file tree

3 files changed

+65
-2
lines changed
Open diff view settings
Filter options
Expand file treeCollapse file tree

3 files changed

+65
-2
lines changed
Open diff view settings
Collapse file

‎doc/api_assets/api.js‎

Copy file name to clipboardExpand all lines: doc/api_assets/api.js
+32Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,36 @@
136136
updateHashes();
137137
}
138138

139+
function setupCopyButton() {
140+
const buttons = document.querySelectorAll('.copy-button');
141+
buttons.forEach((button) => {
142+
button.addEventListener('click', (el) => {
143+
const parentNode = el.target.parentNode;
144+
145+
const flavorSelector = parentNode.querySelector('.js-flavor-selector');
146+
147+
let code = '';
148+
149+
if (flavorSelector) {
150+
if (flavorSelector.checked) {
151+
code = parentNode.querySelector('.mjs').textContent;
152+
} else {
153+
code = parentNode.querySelector('.cjs').textContent;
154+
}
155+
} else {
156+
code = parentNode.querySelector('code').textContent;
157+
}
158+
159+
button.textContent = 'Copied';
160+
navigator.clipboard.writeText(code);
161+
162+
setTimeout(() => {
163+
button.textContent = 'Copy';
164+
}, 2500);
165+
});
166+
});
167+
}
168+
139169
function bootstrap() {
140170
// Check if we have JavaScript support.
141171
document.documentElement.classList.add('has-js');
@@ -151,6 +181,8 @@
151181

152182
// Make link to other versions of the doc open to the same hash target (if it exists).
153183
setupAltDocsLink();
184+
185+
setupCopyButton();
154186
}
155187

156188
if (document.readyState === 'loading') {
Collapse file

‎doc/api_assets/style.css‎

Copy file name to clipboardExpand all lines: doc/api_assets/style.css
+27Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -973,6 +973,33 @@ kbd {
973973
.dark-mode .js-flavor-selector {
974974
filter: invert(1);
975975
}
976+
977+
.copy-button {
978+
float: right;
979+
980+
outline: none;
981+
font-size: 10px;
982+
color: #fff;
983+
background-color: var(--green1);
984+
line-height: 1;
985+
border-radius: 500px;
986+
border: 1px solid transparent;
987+
letter-spacing: 2px;
988+
min-width: 7.5rem;
989+
text-transform: uppercase;
990+
font-weight: 700;
991+
padding: 0 .5rem;
992+
margin-right: .2rem;
993+
height: 1.5rem;
994+
transition-property: background-color,border-color,color,box-shadow,filter;
995+
transition-duration: .3s;
996+
cursor: pointer;
997+
}
998+
999+
.copy-button:hover {
1000+
background-color: var(--green2);
1001+
}
1002+
9761003
@supports (aspect-ratio: 1 / 1) {
9771004
.js-flavor-selector {
9781005
height: 1.5em;
Collapse file

‎tools/doc/html.mjs‎

Copy file name to clipboardExpand all lines: tools/doc/html.mjs
+6-2Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -226,10 +226,13 @@ export function preprocessElements({ filename }) {
226226
const className = isJSFlavorSnippet(node) ?
227227
`language-js ${node.lang}` :
228228
`language-${node.lang}`;
229+
229230
const highlighted =
230231
`<code class='${className}'>${(getLanguage(node.lang || '') ? highlight(node.value, { language: node.lang }) : node).value}</code>`;
231232
node.type = 'html';
232233

234+
const copyButton = '<button class="copy-button">copy</button>';
235+
233236
if (isJSFlavorSnippet(node)) {
234237
const previousNode = parent.children[index - 1] || {};
235238
const nextNode = parent.children[index + 1] || {};
@@ -253,16 +256,17 @@ export function preprocessElements({ filename }) {
253256
' aria-label="Show modern ES modules syntax">' +
254257
previousNode.value +
255258
highlighted +
259+
copyButton +
256260
'</pre>';
257261
node.lang = null;
258262
previousNode.value = '';
259263
previousNode.lang = null;
260264
} else {
261265
// Isolated JS snippet, no need to add the checkbox.
262-
node.value = `<pre>${highlighted}</pre>`;
266+
node.value = `<pre>${highlighted} ${copyButton}</pre>`;
263267
}
264268
} else {
265-
node.value = `<pre>${highlighted}</pre>`;
269+
node.value = `<pre>${highlighted} ${copyButton}</pre>`;
266270
}
267271
} else if (node.type === 'html' && common.isYAMLBlock(node.value)) {
268272
node.value = parseYAML(node.value);

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.