diff --git a/assets/css/_page/_single/_code.scss b/assets/css/_page/_single/_code.scss index ba3ab28f..a0ca7915 100644 --- a/assets/css/_page/_single/_code.scss +++ b/assets/css/_page/_single/_code.scss @@ -281,7 +281,7 @@ pre { } @include media('print') { - top: initial; + top: initial !important; } } @@ -705,7 +705,7 @@ pre { } @include media('print') { - top: initial; + top: initial !important; } } diff --git a/assets/css/_page/_single/_shortcodes/_file-tree.scss b/assets/css/_page/_single/_shortcodes/_file-tree.scss index f38cc973..c283394b 100644 --- a/assets/css/_page/_single/_shortcodes/_file-tree.scss +++ b/assets/css/_page/_single/_shortcodes/_file-tree.scss @@ -56,6 +56,10 @@ flex-shrink: 0; } + .file-tree-label__inner { + word-break: break-all; + } + &.is-highlighted { color: fixit-var(global-link-hover-color); } diff --git a/assets/js/lib/file-tree.js b/assets/js/lib/file-tree.js index b581372d..8d315973 100644 --- a/assets/js/lib/file-tree.js +++ b/assets/js/lib/file-tree.js @@ -2,7 +2,7 @@ * FileTree class to handle file tree interactions */ export default class FileTree { - init(target = document) { + static init(target = document) { target.querySelectorAll('.file-tree-toggle:not([data-init])').forEach((label) => { label.addEventListener('click', (e) => { e.stopPropagation() @@ -18,7 +18,7 @@ export default class FileTree { this.updateLineHeight(target) } - updateLineHeight(target = document) { + static updateLineHeight(target = document) { const uls = target.querySelectorAll('.file-tree .file-tree') uls.forEach((ul) => { const parentItem = ul.closest('.file-tree-item.is-collapsed') @@ -47,4 +47,14 @@ export default class FileTree { ul.style.setProperty('--fi-file-tree-line-height', `${height}px`) }) } + + static expandAll(target = document) { + target.querySelectorAll('.file-tree-folder').forEach(folder => folder.classList.remove('is-collapsed')) + this.updateLineHeight(target) + } + + static collapseAll(target = document) { + target.querySelectorAll('.file-tree-folder').forEach(folder => folder.classList.add('is-collapsed')) + this.updateLineHeight(target) + } } diff --git a/assets/js/theme.js b/assets/js/theme.js index aba12c54..6d6540db 100644 --- a/assets/js/theme.js +++ b/assets/js/theme.js @@ -6,7 +6,6 @@ class FixIt { constructor() { this.config = window.config; this.isDark = document.documentElement.dataset.theme === 'dark'; - this.fileTree = new FileTree(); this.newScrollTop = Util.getScrollTop(); this.oldScrollTop = this.newScrollTop; this.scrollEventSet = new Set(); @@ -14,6 +13,7 @@ class FixIt { this.switchThemeEventSet = new Set(); this.clickMaskEventSet = new Set(); this.beforeprintEventSet = new Set(); + this.afterprintEventSet = new Set(); this.disableScrollEvent = false; window.objectFitImages && objectFitImages(); } @@ -1317,7 +1317,7 @@ class FixIt { initTabEvents(target = document) { target.addEventListener('tab-container-changed', () => { - this.fileTree.updateLineHeight(target); + FileTree.updateLineHeight(target); window.FixItMermaid?.init?.(); }, false); } @@ -1392,7 +1392,7 @@ class FixIt { this.initMathJax(); this.initJsonViewer(); this.initTabEvents(target); - this.fileTree.init(target); + FileTree.init(target); window.FixItMermaid?.init?.(); window.FixItAPlayer?.init?.(); } @@ -1581,15 +1581,54 @@ class FixIt { }, false); } - beforeprint() { + initPrint() { window.addEventListener('beforeprint', () => { - Util.forEach(document.querySelectorAll('.chroma'), ($el) => { - $el.classList.toggle('open', true) + const $content = document.getElementById('content'); + // revert code tabs to code blocks for better printing support + Util.forEach($content.querySelectorAll('.code-tabs'), ($codeTabs) => { + // restore action buttons to the active tab's code-header before reverting + const $actions = $codeTabs.querySelector('.tabs-actions'); + const $activeBlock = $codeTabs.querySelector('.code-block.active'); + if ($actions && $activeBlock) { + const $codeHeader = $activeBlock.querySelector('.code-header'); + if ($codeHeader) { + Array.from($actions.children).forEach(btn => $codeHeader.appendChild(btn)); + } + } + const $codeBlocks = $codeTabs.querySelectorAll('.code-block'); + $codeBlocks.forEach(($codeBlock) => { + $codeTabs.parentElement.insertBefore($codeBlock, $codeTabs); + }); + $codeTabs.parentElement.removeChild($codeTabs); + }); + Util.forEach($content.querySelectorAll('.code-block'), ($el) => { + // line wrapping + $el.classList.add('line-wrapping'); + // expand all code blocks + $el.classList.remove('is-collapsed'); + // expand code preview + if ($el.querySelector('.code-expand-btn')) { + $el.classList.add('is-expanded'); + } + }); + FileTree.expandAll($content); + Util.forEach($content.querySelectorAll('.details'), ($el) => { + $el.classList.add('open'); + }); + Util.forEach($content.querySelectorAll('details'), ($el) => { + $el.setAttribute('open', ''); }); for (let event of this.beforeprintEventSet) { event(); } }, false); + + window.addEventListener('afterprint', () => { + this.initCodeTabs(); + for (let event of this.afterprintEventSet) { + event(); + } + }, false); } init() { @@ -1625,7 +1664,7 @@ class FixIt { this.onScroll(); this.onResize(); this.onClickMask(); - this.beforeprint(); + this.initPrint(); }, 100); } catch (err) { console.error(err); diff --git a/layouts/_partials/init/index.html b/layouts/_partials/init/index.html index 16118715..f9f18dd8 100644 --- a/layouts/_partials/init/index.html +++ b/layouts/_partials/init/index.html @@ -1,4 +1,4 @@ -{{- hugo.Store.Set "version" "v0.4.4-20260318072121-789973da" -}} +{{- hugo.Store.Set "version" "v0.4.4-20260319034216-0bf5d3a4" -}} {{- .Store.Set "this" dict -}} {{- partial "init/detection-env.html" . -}}