github/hexo-theme-next
1
0
Fork 0
mirror of https://github.com/next-theme/hexo-theme-next.git synced 2026-01-18 18:33:42 +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();
}
});
window.addEventListener('tabs:click', e => {
NexT.utils.registerCodeblock(e.target);
});
};
NexT.boot.refresh = function() {

45
source/js/utils.js
View File

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