nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2025-01-18 10:50:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

clipboard: make copy button reachable by keyboard #983

Browse source
This commit is contained in:
Sören Weber 2025-01-01 21:56:51 +01:00
parent ee07f8ff7d
commit 64ffb39f35
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
3 changed files with 20 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
assets/css/theme.css
View file

@ -1443,12 +1443,17 @@ div.highlight .copy-to-clipboard-button {
display: block;
}
}
div.highlight:focus-within .copy-to-clipboard-button,
div.highlight .copy-to-clipboard-button:active,
div.highlight:hover .copy-to-clipboard-button {
display: block;
}
.disableHoverBlockCopyToClipBoard div.highlight .copy-to-clipboard-button {
display: block;
}
.force-display {
display: block !important;
}
div.highlight > div table + .copy-to-clipboard-button > i,
div.highlight pre:not(.mermaid) + .copy-to-clipboard-button > i,

2
layouts/partials/version.txt
View file

@ -1 +1 @@
7.2.1+8c403f2aadf03c87f7741ead8e4c5425cbe30ed1
7.2.1+ee07f8ff7d48f12d35f6b843225d6ecb3af157ba

14
static/js/theme.js
View file

@ -688,6 +688,20 @@ function initCodeClipboard() {
pre.parentNode.replaceChild(div, pre);
pre = clone;
}
// we have to make sure, the button is visible while
// Clipboard.js is doing its magic
button.addEventListener('focus', function (ev) {
setTimeout(function () {
ev.target.classList.add('force-display');
}, 0);
});
button.addEventListener('blur', function (ev) {
this.removeAttribute('aria-label');
this.classList.remove('tooltipped', 'tooltipped-w', 'tooltipped-se', 'tooltipped-sw');
setTimeout(function () {
ev.target.classList.remove('force-display');
}, 0);
});
pre.parentNode.insertBefore(button, pre.nextSibling);
} else {
code.dataset.code = text;