kopia lustrzana https://github.com/shoelace-style/shoelace
use <sl-copy-button> (#1535)
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
|
* 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.
|
* document will be returned with the appropriate DOM manipulations.
|
||||||
|
@ -5,19 +7,14 @@
|
||||||
module.exports = function (doc) {
|
module.exports = function (doc) {
|
||||||
doc.querySelectorAll('pre > code').forEach(code => {
|
doc.querySelectorAll('pre > code').forEach(code => {
|
||||||
const pre = code.closest('pre');
|
const pre = code.closest('pre');
|
||||||
const button = doc.createElement('button');
|
const button = doc.createElement('sl-copy-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>
|
|
||||||
|
|
||||||
<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">
|
if (!code.id) {
|
||||||
<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>
|
code.id = `code-block-${++codeBlockId}`;
|
||||||
</svg>
|
}
|
||||||
`;
|
|
||||||
|
button.classList.add('copy-code-button');
|
||||||
|
button.setAttribute('from', code.id);
|
||||||
|
|
||||||
pre.append(button);
|
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
|
// Smooth links
|
||||||
//
|
//
|
||||||
|
|
|
@ -506,31 +506,31 @@ pre .token.italic {
|
||||||
|
|
||||||
/* Copy code button */
|
/* Copy code button */
|
||||||
.copy-code-button {
|
.copy-code-button {
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0.5rem;
|
top: 0;
|
||||||
right: 0.5rem;
|
right: 0;
|
||||||
background: var(--sl-color-neutral-0);
|
white-space: normal;
|
||||||
border-radius: calc(var(--docs-border-radius) * 0.875);
|
|
||||||
border: solid 1px var(--sl-color-neutral-200);
|
|
||||||
color: var(--sl-color-neutral-800);
|
color: var(--sl-color-neutral-800);
|
||||||
text-transform: uppercase;
|
transition: 150ms opacity, 150ms scale;
|
||||||
padding: 0.5rem;
|
|
||||||
margin: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: 100ms opacity, 100ms scale;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.copy-code-button svg {
|
.copy-code-button::part(button) {
|
||||||
width: 1rem;
|
background-color: var(--sl-color-neutral-50);
|
||||||
height: 1rem;
|
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 {
|
pre .copy-code-button {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
scale: 0.9;
|
scale: 0.75;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre:hover .copy-code-button,
|
pre:hover .copy-code-button,
|
||||||
|
@ -539,13 +539,6 @@ pre:hover .copy-code-button,
|
||||||
scale: 1;
|
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 */
|
/* Callouts */
|
||||||
.callout {
|
.callout {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
Ładowanie…
Reference in New Issue