github/hexo-theme-next
1
0
Fork 0
mirror of https://github.com/next-theme/hexo-theme-next.git synced 2026-01-20 19:02:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Support folding code blocks in tabs (#694)

Browse Source
This commit is contained in:
PeichengLiu 2023-09-08 22:05:22 +08:00 committed by GitHub
parent 408c1fa8d5
commit 3fe071e6ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
source/js/next-boot.js
View File

@ -29,6 +29,10 @@ NexT.boot.registerEvents = function() {
target && target.click(); target && target.click();
} }
}); });
window.addEventListener('tabs:click', e => {
NexT.utils.registerCodeblock(e.target);
});
}; };
NexT.boot.refresh = function() { NexT.boot.refresh = function() {

17
source/js/utils.js
View File

@ -39,14 +39,16 @@ NexT.utils = {
}); });
}, },
registerCodeblock: function() { registerCodeblock: function(element) {
let figure = document.querySelectorAll('figure.highlight'); const inited = !!element;
let figure = (inited ? element : document).querySelectorAll('figure.highlight');
let isHljsWithWrap = true; let isHljsWithWrap = true;
if (figure.length === 0) { if (figure.length === 0) {
figure = document.querySelectorAll('pre:not(.mermaid)'); figure = document.querySelectorAll('pre:not(.mermaid)');
isHljsWithWrap = false; isHljsWithWrap = false;
} }
figure.forEach(element => { figure.forEach(element => {
if (!inited) {
let span = element.querySelectorAll('.code .line span'); let span = element.querySelectorAll('.code .line span');
if (span.length === 0) { if (span.length === 0) {
// Hljs without line_number and wrap // Hljs without line_number and wrap
@ -57,6 +59,7 @@ NexT.utils = {
s.classList.replace(name, `hljs-${name}`); s.classList.replace(name, `hljs-${name}`);
}); });
}); });
}
const height = parseInt(window.getComputedStyle(element).height.replace('px', ''), 10); const height = parseInt(window.getComputedStyle(element).height.replace('px', ''), 10);
const needFold = CONFIG.fold.enable && (height > CONFIG.fold.height); const needFold = CONFIG.fold.enable && (height > CONFIG.fold.height);
if (!needFold && !CONFIG.copycode.enable) return; if (!needFold && !CONFIG.copycode.enable) return;
@ -64,22 +67,26 @@ NexT.utils = {
if (isHljsWithWrap && CONFIG.copycode.style === 'mac') { if (isHljsWithWrap && CONFIG.copycode.style === 'mac') {
target = element; target = element;
} else { } else {
let box = element.querySelector('.code-container');
if (!box) {
// https://github.com/next-theme/hexo-theme-next/issues/98 // https://github.com/next-theme/hexo-theme-next/issues/98
// https://github.com/next-theme/hexo-theme-next/pull/508 // https://github.com/next-theme/hexo-theme-next/pull/508
const container = element.querySelector('.table-container') || element; const container = element.querySelector('.table-container') || element;
const box = document.createElement('div'); box = document.createElement('div');
box.className = 'code-container'; box.className = 'code-container';
container.wrap(box); container.wrap(box);
}
target = box; target = box;
} }
if (needFold) { if (needFold && !target.classList.contains('unfold')) {
target.classList.add('highlight-fold'); target.classList.add('highlight-fold');
target.insertAdjacentHTML('beforeend', '<div class="fold-cover"></div><div class="expand-btn"><i class="fa fa-angle-down fa-fw"></i></div>'); target.insertAdjacentHTML('beforeend', '<div class="fold-cover"></div><div class="expand-btn"><i class="fa fa-angle-down fa-fw"></i></div>');
target.querySelector('.expand-btn').addEventListener('click', () => { target.querySelector('.expand-btn').addEventListener('click', () => {
target.classList.remove('highlight-fold'); target.classList.remove('highlight-fold');
target.classList.add('unfold');
}); });
} }
if (!CONFIG.copycode.enable) return; if (inited || !CONFIG.copycode.enable) return;
// One-click copy code support. // One-click copy code support.
target.insertAdjacentHTML('beforeend', '<div class="copy-btn"><i class="fa fa-copy fa-fw"></i></div>'); target.insertAdjacentHTML('beforeend', '<div class="copy-btn"><i class="fa fa-copy fa-fw"></i></div>');
const button = target.querySelector('.copy-btn'); const button = target.querySelector('.copy-btn');