Hugo-theme-stack/assets/ts/codeblock.ts
Jimmy Cai 8a597a5c9c
Merge branch 'canary' into master (#711)
* refactor(i18n): simplify the structure of the translation file

* chore: prepare repository for v4.0.0-alpha

* chore: modify go.mod to v4

* refactor: migrate theme configuration to TOML

* fix: exampleSite not using correct theme

* feat: add favicon from assets folder

* refactor: drop linear grandient background feature

remove node-vibrant from dependencies

* feat: use Hugo's code block render hook to implement code copy button

Now it can have i18n support

* refactor: delete color.ts

* refactor: delete Emoji support post from example site

* refactor: drop support for `hidden` field in front matter

* feat: upgrade to PhotoSwipe v5

* chore: bump the required hugo version to 0.100.0

* refactor: remove PhotoSwipe from external.yaml

* fix: extra margin in search result

* fix: incorrect markdown heading level in example site

* refactor: remove some usages of `default` in template

No longer needed thanks to Hugo's configuration merge

* fix: one line codeblock style in firefox

closes https://github.com/CaiJimmy/hugo-theme-stack/issues/564

* feat: add style to new codeblock

* feat: i18n support for codeblock copy text

* fix(menu): jitter when closing menu

It's caused by flexbox gap property, which can't animate

* fix(search): long text overflows under the Search icon

closes https://github.com/CaiJimmy/hugo-theme-stack/issues/515
2022-10-29 17:02:24 +02:00

28 lines
1.0 KiB
TypeScript

/**
* Copy button for code blocks
*/
export default () => {
const copyButtons = document.querySelectorAll('.codeblock-copy');
copyButtons.forEach(button => {
const codeblockID = button.getAttribute('data-id'),
copyText = button.textContent,
copiedText = button.getAttribute('data-copied-text');
if (!codeblockID) return;
button.addEventListener('click', (e) => {
e.preventDefault();
const codeblock = document.getElementById(codeblockID) as HTMLElement;
if (!codeblockID) return;
navigator.clipboard.writeText(codeblock.textContent)
.then(() => {
button.textContent = copiedText;
setTimeout(() => {
button.textContent = copyText;
}, 1000);
})
.catch(err => {
alert(err)
console.log('Something went wrong', err);
});
}, false);
});
}