alyenc/hugo-theme-next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Closed #108, add animated transition when expand and collapse code block.

Browse Source
This commit is contained in:
elkan1788
2025-01-23 17:12:34 +08:00
parent 4ec1f8e732
commit 0b8bdc0e00
2 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
assets/js/3rd/others/clipboard.js
View File

@@ -14,12 +14,11 @@ NexT.plugins.others.clipboard = function () {
let lang = codeblock.className;
let copyBtn = document.createElement('div');
copyBtn.classList.add('copy-btn');
codeblock.parentNode .appendChild(copyBtn);
codeblock.parentNode.appendChild(copyBtn);
element.addEventListener('mouseleave', () => {
setTimeout(() => {
copyBtn.classList.remove('copied');
copyBtn.classList.remove('copieduncopied');
copyBtn.classList.remove('copied','uncopied');
}, 300);
});
@@ -29,8 +28,8 @@ NexT.plugins.others.clipboard = function () {
ch.classList.add(lang);
ch.insertAdjacentHTML('afterbegin',
'<span class="code-lang"></span><span class="collapse-btn"></span>');
ch.addEventListener('click', function () {
element.classList.toggle('hidden-code');
ch.addEventListener('click', function () {
element.classList.toggle('hidden-code');
ch.querySelector('.collapse-btn').classList.toggle('collapse');
}, false);