feat: add copy button to tab bar for easy code copying functionality
This commit is contained in:
1 parent
0efbb4b2b5
commit
3b31711b49
2 files changed
+55
No files matched your search
@@ -1339,6 +1339,31 @@ footer.footer-modern a:hover {
|
||||
border-bottom-color: var(--accent);
|
||||
}
|
||||
|
||||
/* Copy button pinned to the right of the tab bar (copies the active tab) */
|
||||
.tab-copy {
|
||||
align-self: center;
|
||||
margin-left: auto;
|
||||
flex: 0 0 auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.25rem 0.7rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 600;
|
||||
font-family: var(--font-sans);
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.tab-copy:hover { color: var(--text-primary); }
|
||||
.tab-copy.is-copied { color: var(--accent); }
|
||||
.tab-copy svg { display: block; }
|
||||
.tab-copy-label { line-height: 1; }
|
||||
|
||||
.tab-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -276,6 +276,13 @@
|
||||
-------------------------------------------------------- */
|
||||
(function () {
|
||||
var tabGroupSeq = 0;
|
||||
var TAB_COPY = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" ' +
|
||||
'stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ' +
|
||||
'aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"/>' +
|
||||
'<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
|
||||
var TAB_CHECK = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" ' +
|
||||
'stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" ' +
|
||||
'aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>';
|
||||
// Match both "language-tabs" (Parsedown >= 1.7) and bare "tabs" (older Bludit builds)
|
||||
var blocks = document.querySelectorAll(
|
||||
'pre > code.language-tabs, pre > code.tabs'
|
||||
@@ -378,6 +385,29 @@
|
||||
});
|
||||
});
|
||||
|
||||
// One copy button in the tab bar — copies whichever tab is active.
|
||||
var tabCopy = document.createElement('button');
|
||||
tabCopy.type = 'button';
|
||||
tabCopy.className = 'tab-copy';
|
||||
tabCopy.setAttribute('aria-label', T.copyCode);
|
||||
tabCopy.innerHTML = TAB_COPY + '<span class="tab-copy-label">' + T.copy + '</span>';
|
||||
list.appendChild(tabCopy);
|
||||
|
||||
var tabCopyTimer = null;
|
||||
tabCopy.addEventListener('click', function () {
|
||||
var activePanel = group.querySelector('.tab-panel.is-active');
|
||||
var activeCode = activePanel ? activePanel.querySelector('code') : null;
|
||||
copyToClipboard(activeCode ? activeCode.textContent : '').then(function () {
|
||||
tabCopy.classList.add('is-copied');
|
||||
tabCopy.innerHTML = TAB_CHECK + '<span class="tab-copy-label">' + T.copied + '</span>';
|
||||
clearTimeout(tabCopyTimer);
|
||||
tabCopyTimer = setTimeout(function () {
|
||||
tabCopy.classList.remove('is-copied');
|
||||
tabCopy.innerHTML = TAB_COPY + '<span class="tab-copy-label">' + T.copy + '</span>';
|
||||
}, 1200);
|
||||
}).catch(function () {});
|
||||
});
|
||||
|
||||
pre.parentNode.replaceChild(group, pre);
|
||||
});
|
||||
})();
|
||||
|
||||
Reference in new issue
Block a user