Skip to content

Commit

Permalink
tools: add button to copy code example to clipboard
Browse files Browse the repository at this point in the history
PR-URL: #46928
Refs: #46894
Reviewed-By: Debadree Chatterjee <[email protected]>
  • Loading branch information
jakecastelli authored and RafaelGSS committed Apr 7, 2023
1 parent 6dca79f commit deb80b1
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 2 deletions.
32 changes: 32 additions & 0 deletions doc/api_assets/api.js
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,36 @@
updateHashes();
}

function setupCopyButton() {
const buttons = document.querySelectorAll('.copy-button');
buttons.forEach((button) => {
button.addEventListener('click', (el) => {
const parentNode = el.target.parentNode;

const flavorSelector = parentNode.querySelector('.js-flavor-selector');

let code = '';

if (flavorSelector) {
if (flavorSelector.checked) {
code = parentNode.querySelector('.mjs').textContent;
} else {
code = parentNode.querySelector('.cjs').textContent;
}
} else {
code = parentNode.querySelector('code').textContent;
}

button.textContent = 'Copied';
navigator.clipboard.writeText(code);

setTimeout(() => {
button.textContent = 'Copy';
}, 2500);
});
});
}

function bootstrap() {
// Check if we have JavaScript support.
document.documentElement.classList.add('has-js');
Expand All @@ -151,6 +181,8 @@

// Make link to other versions of the doc open to the same hash target (if it exists).
setupAltDocsLink();

setupCopyButton();
}

if (document.readyState === 'loading') {
Expand Down
27 changes: 27 additions & 0 deletions doc/api_assets/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -973,6 +973,33 @@ kbd {
.dark-mode .js-flavor-selector {
filter: invert(1);
}

.copy-button {
float: right;

outline: none;
font-size: 10px;
color: #fff;
background-color: var(--green1);
line-height: 1;
border-radius: 500px;
border: 1px solid transparent;
letter-spacing: 2px;
min-width: 7.5rem;
text-transform: uppercase;
font-weight: 700;
padding: 0 .5rem;
margin-right: .2rem;
height: 1.5rem;
transition-property: background-color,border-color,color,box-shadow,filter;
transition-duration: .3s;
cursor: pointer;
}

.copy-button:hover {
background-color: var(--green2);
}

@supports (aspect-ratio: 1 / 1) {
.js-flavor-selector {
height: 1.5em;
Expand Down
8 changes: 6 additions & 2 deletions tools/doc/html.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -226,10 +226,13 @@ export function preprocessElements({ filename }) {
const className = isJSFlavorSnippet(node) ?
`language-js ${node.lang}` :
`language-${node.lang}`;

const highlighted =
`<code class='${className}'>${(getLanguage(node.lang || '') ? highlight(node.value, { language: node.lang }) : node).value}</code>`;
node.type = 'html';

const copyButton = '<button class="copy-button">copy</button>';

if (isJSFlavorSnippet(node)) {
const previousNode = parent.children[index - 1] || {};
const nextNode = parent.children[index + 1] || {};
Expand All @@ -253,16 +256,17 @@ export function preprocessElements({ filename }) {
' aria-label="Show modern ES modules syntax">' +
previousNode.value +
highlighted +
copyButton +
'</pre>';
node.lang = null;
previousNode.value = '';
previousNode.lang = null;
} else {
// Isolated JS snippet, no need to add the checkbox.
node.value = `<pre>${highlighted}</pre>`;
node.value = `<pre>${highlighted} ${copyButton}</pre>`;
}
} else {
node.value = `<pre>${highlighted}</pre>`;
node.value = `<pre>${highlighted} ${copyButton}</pre>`;
}
} else if (node.type === 'html' && common.isYAMLBlock(node.value)) {
node.value = parseYAML(node.value);
Expand Down

0 comments on commit deb80b1

Please sign in to comment.