kopia lustrzana https://github.com/shoelace-style/shoelace
use <sl-copy-button> (#1535)
Cory LaViska
GitHub
rodzic
87ac077b0a
commit
b311072d9b
|
|
@ -1,3 +1,5 @@
|
|||
let codeBlockId = 0;
|
||||
|
||||
/**
|
||||
* Adds copy code buttons to code fields. The provided doc should be a document object provided by JSDOM. The same
|
||||
* document will be returned with the appropriate DOM manipulations.
|
||||
|
|
@ -5,19 +7,14 @@
|
|||
module.exports = function (doc) {
|
||||
doc.querySelectorAll('pre > code').forEach(code => {
|
||||
const pre = code.closest('pre');
|
||||
const button = doc.createElement('button');
|
||||
button.setAttribute('type', 'button');
|
||||
button.classList.add('copy-code-button');
|
||||
button.setAttribute('aria-label', 'Copy');
|
||||
button.innerHTML = `
|
||||
<svg class="copy-code-button__copy-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-files" viewBox="0 0 16 16" part="svg">
|
||||
<path d="M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zM3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z"></path>
|
||||
</svg>
|
||||
const button = doc.createElement('sl-copy-button');
|
||||
|
||||
<svg class="copy-code-button__copied-icon" style="display: none;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-lg" viewBox="0 0 16 16" part="svg">
|
||||
<path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"></path>
|
||||
</svg>
|
||||
`;
|
||||
if (!code.id) {
|
||||
code.id = `code-block-${++codeBlockId}`;
|
||||
}
|
||||
|
||||
button.classList.add('copy-code-button');
|
||||
button.setAttribute('from', code.id);
|
||||
|
||||
pre.append(button);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -163,32 +163,6 @@
|
|||
});
|
||||
})();
|
||||
|
||||
//
|
||||
// Copy code buttons
|
||||
//
|
||||
(() => {
|
||||
document.addEventListener('click', event => {
|
||||
const button = event.target.closest('.copy-code-button');
|
||||
const pre = button?.closest('pre');
|
||||
const code = pre?.querySelector('code');
|
||||
const copyIcon = button?.querySelector('.copy-code-button__copy-icon');
|
||||
const copiedIcon = button?.querySelector('.copy-code-button__copied-icon');
|
||||
|
||||
if (button && code) {
|
||||
navigator.clipboard.writeText(code.innerText);
|
||||
copyIcon.style.display = 'none';
|
||||
copiedIcon.style.display = 'inline';
|
||||
button.classList.add('copy-code-button--copied');
|
||||
|
||||
setTimeout(() => {
|
||||
copyIcon.style.display = 'inline';
|
||||
copiedIcon.style.display = 'none';
|
||||
button.classList.remove('copy-code-button--copied');
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
//
|
||||
// Smooth links
|
||||
//
|
||||
|
|
|
|||
|
|
@ -506,31 +506,31 @@ pre .token.italic {
|
|||
|
||||
/* Copy code button */
|
||||
.copy-code-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
background: var(--sl-color-neutral-0);
|
||||
border-radius: calc(var(--docs-border-radius) * 0.875);
|
||||
border: solid 1px var(--sl-color-neutral-200);
|
||||
top: 0;
|
||||
right: 0;
|
||||
white-space: normal;
|
||||
color: var(--sl-color-neutral-800);
|
||||
text-transform: uppercase;
|
||||
padding: 0.5rem;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
transition: 100ms opacity, 100ms scale;
|
||||
transition: 150ms opacity, 150ms scale;
|
||||
}
|
||||
|
||||
.copy-code-button svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
.copy-code-button::part(button) {
|
||||
background-color: var(--sl-color-neutral-50);
|
||||
border-radius: 0 var(--docs-border-radius) 0 var(--docs-border-radius);
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.copy-code-button::part(button):hover {
|
||||
background-color: color-mix(in oklch, var(--sl-color-neutral-50), var(--sl-color-neutral-1000) 3%);
|
||||
}
|
||||
|
||||
.copy-code-button::part(button):active {
|
||||
background-color: color-mix(in oklch, var(--sl-color-neutral-50), var(--sl-color-neutral-1000) 6%);
|
||||
}
|
||||
|
||||
pre .copy-code-button {
|
||||
opacity: 0;
|
||||
scale: 0.9;
|
||||
scale: 0.75;
|
||||
}
|
||||
|
||||
pre:hover .copy-code-button,
|
||||
|
|
@ -539,13 +539,6 @@ pre:hover .copy-code-button,
|
|||
scale: 1;
|
||||
}
|
||||
|
||||
pre:hover .copy-code-button:hover,
|
||||
pre:hover .copy-code-button--copied {
|
||||
background: var(--sl-color-neutral-200);
|
||||
border-color: var(--sl-color-neutral-300);
|
||||
color: var(--sl-color-neutral-900);
|
||||
}
|
||||
|
||||
/* Callouts */
|
||||
.callout {
|
||||
position: relative;
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue