diff --git a/assets/css/_page/_single/_code.scss b/assets/css/_page/_single/_code.scss index 29fcb6c0..678cab08 100644 --- a/assets/css/_page/_single/_code.scss +++ b/assets/css/_page/_single/_code.scss @@ -132,6 +132,10 @@ pre { // code fences blocks wrapped &.code-block { + &.instant-height .code-wrapper { + transition: height 0s !important; + } + .code-wrapper { overflow: hidden; height: auto; @@ -173,6 +177,7 @@ pre { position: sticky; top: fixit-var(breadcrumb-height); transition: border-radius 0s; + cursor: pointer; @include z-index(base); @include border-radius(top); @@ -184,10 +189,6 @@ pre { } } - &:hover { - cursor: pointer; - } - .code-title { width: 100%; padding: 0.4rem; @@ -243,6 +244,12 @@ pre { color: fixit-var(global-link-hover-color); } + .fullscreen-btn[data-fullscreen] .fa-expand { + --fa: "\f066"; + font-weight: 900; + color: fixit-var(global-link-hover-color); + } + @each $type, $text in $code-type-map { &.language-#{to-lower-case($type)} { // e.g., --fi-code-type: "JavaScript"; @@ -258,6 +265,38 @@ pre { color: fixit-var(global-link-hover-color); } + &.is-fullscreen { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + margin: 0 !important; + overflow: auto; + @include z-index(fixed, 1); + @include border-radius(0); + + .code-header { + top: 0 !important; + cursor: default; + @include border-radius(0); + + .arrow { + display: none; + } + } + + .code-wrapper { + overflow: auto; + // 1.4em for header height, 0.8rem for padding + height: calc(100dvh - 1.4em - 0.8rem); + } + + .code-expand-btn { + display: none; + } + } + .code-expand-btn { width: 100%; padding-block: 1rem; diff --git a/assets/js/theme.js b/assets/js/theme.js index 68667aaa..76f6b1f1 100644 --- a/assets/js/theme.js +++ b/assets/js/theme.js @@ -486,6 +486,58 @@ class FixIt { }, false); } + _setCodeFullscreenState(codeBlock, show) { + const fullscreenBtn = codeBlock.querySelector('.code-header .fullscreen-btn'); + const hasExpandBtn = !!codeBlock.querySelector('.code-expand-btn'); + if (show && hasExpandBtn) { + codeBlock.dataset.fullscreenExpanded = codeBlock.classList.contains('is-expanded') ? 'true' : 'false'; + codeBlock.classList.add('is-expanded'); + } + if (!show && codeBlock.classList.contains('is-fullscreen')) { + codeBlock.classList.add('instant-height'); + if (hasExpandBtn && codeBlock.dataset.fullscreenExpanded === 'false') { + codeBlock.classList.remove('is-expanded'); + } + delete codeBlock.dataset.fullscreenExpanded; + window.requestAnimationFrame(() => { + codeBlock.classList.remove('instant-height'); + }); + } + codeBlock.classList.toggle('is-fullscreen', show); + fullscreenBtn?.toggleAttribute('data-fullscreen', show); + const hasFullscreenCode = !!document.querySelector('.code-block.highlight.is-fullscreen'); + document.documentElement.style.overflow = hasFullscreenCode ? 'hidden' : ''; + } + + closeCodeFullscreen() { + const $activeCodeBlock = document.querySelector('.code-block.highlight.is-fullscreen'); + if (!$activeCodeBlock) return; + this._setCodeFullscreenState($activeCodeBlock, false); + } + + initFullscreenCode(codeBlock) { + const fullscreenBtn = codeBlock.querySelector('.code-header .fullscreen-btn'); + if (!fullscreenBtn) return; + fullscreenBtn.addEventListener('click', () => { + const isFullscreen = codeBlock.classList.contains('is-fullscreen'); + if (isFullscreen) { + this._setCodeFullscreenState(codeBlock, false); + return; + } + this.closeCodeFullscreen(); + codeBlock.classList.remove('is-collapsed'); + this._setCodeFullscreenState(codeBlock, true); + }, false); + if (!this._codeFullscreenOnEsc) { + this._codeFullscreenOnEsc = (event) => { + if (event.key === 'Escape') { + this.closeCodeFullscreen(); + } + }; + document.addEventListener('keydown', this._codeFullscreenOnEsc, false); + } + } + /** * init code wrapper */ @@ -505,8 +557,10 @@ class FixIt { const $codeHeader = $codeBlock.querySelector('.code-header'); if (!$codeHeader) return; this.initDownloadCode($codeBlock, $codePreEl); + this.initFullscreenCode($codeBlock); // code title $codeHeader.querySelector('.code-title').addEventListener('click', () => { + if ($codeBlock.classList.contains('is-fullscreen')) return; $codeBlock.classList.toggle('is-collapsed'); }, false); // ellipses icon diff --git a/hugo.toml b/hugo.toml index 9748f7a1..b64bb0a7 100644 --- a/hugo.toml +++ b/hugo.toml @@ -1146,6 +1146,8 @@ maxShownLines = 10 copyable = true # [classic] whether to enable code download button in the code block header downloadable = false +# [classic] whether to enable code fullscreen button in the code block header +fullscreen = false # [classic] whether to enable line numbers toggle button in the code block header lineNosToggler = true # [classic] whether to enable toggle line wrapping button in the code block header diff --git a/i18n/de.toml b/i18n/de.toml index f4a62e62..d217ae22 100644 --- a/i18n/de.toml +++ b/i18n/de.toml @@ -103,6 +103,7 @@ toggleLineNumbers = "Zeilennummern umschalten" toggleLineWrap = "Zeilenumbruch umschalten" toggleCodeEditable = "Codeblock editierbar umschalten" downloadCode = "Code herunterladen" +toggleCodeFullscreen = "Codeblock-Vollbild umschalten" expandCode = "Codeblock erweitern oder reduzieren" cookieconsentMessage = "Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern." cookieconsentDismiss = "Zustimmen" diff --git a/i18n/en.toml b/i18n/en.toml index 3f4aea87..c60d6d7f 100644 --- a/i18n/en.toml +++ b/i18n/en.toml @@ -103,6 +103,7 @@ toggleLineNumbers = "Toggle line numbers" toggleLineWrap = "Toggle code wrap" toggleCodeEditable = "Toggle code block editable" downloadCode = "Download code" +toggleCodeFullscreen = "Toggle code block fullscreen" expandCode = "Expand or collapse code block" cookieconsentMessage = "This website uses Cookies to improve your experience." cookieconsentDismiss = "Got it!" diff --git a/i18n/es.toml b/i18n/es.toml index a71807db..cb7c4703 100644 --- a/i18n/es.toml +++ b/i18n/es.toml @@ -103,6 +103,7 @@ toggleLineNumbers = "Alternar números de línea" toggleLineWrap = "Alternar ajuste de línea" toggleCodeEditable = "Alternar bloque de código editable" downloadCode = "Descargar código" +toggleCodeFullscreen = "Alternar pantalla completa del bloque de código" expandCode = "Expandir o contraer bloque de código" cookieconsentMessage = "Este sitio web utiliza Cookies para mejorar su experiencia." cookieconsentDismiss = "De acuerdo" diff --git a/i18n/fr.toml b/i18n/fr.toml index 24cd209e..d3bdba94 100644 --- a/i18n/fr.toml +++ b/i18n/fr.toml @@ -103,6 +103,7 @@ toggleLineNumbers = "Basculer les numéros de ligne" toggleLineWrap = "Basculer le retour à la ligne" toggleCodeEditable = "Basculer le bloc de code modifiable" downloadCode = "Télécharger le code" +toggleCodeFullscreen = "Basculer le plein écran du bloc de code" expandCode = "Développer ou réduire le bloc de code" cookieconsentMessage = "Ce site Web utilise des Cookies pour améliorer votre expérience." cookieconsentDismiss = "J'ai compris !" diff --git a/i18n/hi.toml b/i18n/hi.toml index 25f6046a..b80c991a 100644 --- a/i18n/hi.toml +++ b/i18n/hi.toml @@ -104,6 +104,7 @@ toggleLineNumbers = "लाइन नंबर टॉगल करें" toggleLineWrap = "लाइन रैप टॉगल करें" toggleCodeEditable = "कोड ब्लॉक संपादन योग्य टॉगल करें" downloadCode = "कोड डाउनलोड करें" +toggleCodeFullscreen = "कोड ब्लॉक फ़ुलस्क्रीन टॉगल करें" expandCode = "कोड ब्लॉक का विस्तार या संकुचित करें" cookieconsentMessage = "यह वेबसाइट आपके अनुभव को बेहतर बनाने के लिए कुकीज़ का उपयोग करती है।" cookieconsentDismiss = "समझ गया!" diff --git a/i18n/it.toml b/i18n/it.toml index 5b5e3874..9dff9e15 100644 --- a/i18n/it.toml +++ b/i18n/it.toml @@ -103,6 +103,7 @@ toggleLineNumbers = "Attiva/disattiva i numeri di linea" toggleLineWrap = "Attiva/disattiva il ritorno a capo del codice" toggleCodeEditable = "Attiva/disattiva la modifica del blocco di codice" downloadCode = "Scarica codice" +toggleCodeFullscreen = "Attiva/disattiva schermo intero del blocco di codice" expandCode = "Espandi o riduci il blocco di codice" cookieconsentMessage = "Questo sito Web utilizza i Cookies per migliorare la tua esperienza." cookieconsentDismiss = "Essere d'accordo" diff --git a/i18n/ja.toml b/i18n/ja.toml index 2c2cd76b..d4c81f98 100644 --- a/i18n/ja.toml +++ b/i18n/ja.toml @@ -101,6 +101,7 @@ toggleLineNumbers = "行番号の切り替え" toggleLineWrap = "自動折り返しの切り替え" toggleCodeEditable = "コードブロックの編集切り替え" downloadCode = "コードをダウンロード" +toggleCodeFullscreen = "コードブロックの全画面表示を切り替え" expandCode = "コードブロックの展開/折りたたみ" cookieconsentMessage = "このウェブサイトはクッキーを使用して体験を向上させます。" cookieconsentDismiss = "同意する" diff --git a/i18n/ko.toml b/i18n/ko.toml index 47c3228d..50973efb 100644 --- a/i18n/ko.toml +++ b/i18n/ko.toml @@ -101,6 +101,7 @@ toggleLineNumbers = "줄 번호 전환" toggleLineWrap = "자동 줄 바꿈 전환" toggleCodeEditable = "코드 블록 편집 전환" downloadCode = "코드 다운로드" +toggleCodeFullscreen = "코드 블록 전체 화면 전환" expandCode = "코드 블록 확장/축소" cookieconsentMessage = "이 웹사이트는 쿠키를 사용하여 경험을 향상시킵니다." cookieconsentDismiss = "동의" diff --git a/i18n/pl.toml b/i18n/pl.toml index 39e80653..67050e97 100644 --- a/i18n/pl.toml +++ b/i18n/pl.toml @@ -103,6 +103,7 @@ toggleLineNumbers = "Przełącz numery linii" toggleLineWrap = "Przełącz zawijanie linii" toggleCodeEditable = "Przełącz edytowalny blok kodu" downloadCode = "Pobierz kod" +toggleCodeFullscreen = "Przełącz pełny ekran bloku kodu" expandCode = "Rozwiń lub zwiń blok kodu" cookieconsentMessage = "Ta strona korzysta z plików Cookies, aby poprawić komfort użytkowania." cookieconsentDismiss = "Zgodzić się" diff --git a/i18n/pt-BR.toml b/i18n/pt-BR.toml index 661d5bbb..69d88749 100644 --- a/i18n/pt-BR.toml +++ b/i18n/pt-BR.toml @@ -104,6 +104,7 @@ toggleLineNumbers = "Alternar números de linha" toggleLineWrap = "Alternar quebra de linha" toggleCodeEditable = "Alternar bloco de código editável" downloadCode = "Baixar código" +toggleCodeFullscreen = "Alternar tela cheia do bloco de código" expandCode = "Expandir ou recolher bloco de código" cookieconsentMessage = "Este site usa Cookies para melhorar sua experiência." cookieconsentDismiss = "Aceitar" diff --git a/i18n/ro.toml b/i18n/ro.toml index dfbee87e..e14accbb 100644 --- a/i18n/ro.toml +++ b/i18n/ro.toml @@ -103,6 +103,7 @@ toggleLineNumbers = "Comută numerele de linie" toggleLineWrap = "Comută înfășurarea liniei" toggleCodeEditable = "Comută blocul de cod editabil" downloadCode = "Descarcă codul" +toggleCodeFullscreen = "Comută ecran complet pentru blocul de cod" expandCode = "Extinde sau restrânge blocul de cod" cookieconsentMessage = "Acest site web utilizează Cookies pentru a vă îmbunătăți experiența." cookieconsentDismiss = "De acord" diff --git a/i18n/ru.toml b/i18n/ru.toml index bb72a719..221fda9e 100644 --- a/i18n/ru.toml +++ b/i18n/ru.toml @@ -103,6 +103,7 @@ toggleLineNumbers = "Переключить номера строк" toggleLineWrap = "Переключить перенос строк" toggleCodeEditable = "Переключить редактируемый блок кода" downloadCode = "Скачать код" +toggleCodeFullscreen = "Переключить полноэкранный режим блока кода" expandCode = "Развернуть или свернуть блок кода" cookieconsentMessage = "Этот сайт использует Cookies для улучшения вашего опыта." cookieconsentDismiss = "Согласен" diff --git a/i18n/sr.toml b/i18n/sr.toml index c2f20938..e4a65cb8 100644 --- a/i18n/sr.toml +++ b/i18n/sr.toml @@ -103,6 +103,7 @@ toggleLineNumbers = "Прекидач за бројеве линија" toggleLineWrap = "Прекидач за оматање линија" toggleCodeEditable = "Пребаци уређивање блока кода" downloadCode = "Преузми код" +toggleCodeFullscreen = "Пребаци цео екран блока кода" expandCode = "Прошири или смањи блок кода" cookieconsentMessage = "Ова веб локација користи Cookies да би побољшала ваше искуство." cookieconsentDismiss = "Договорити се" diff --git a/i18n/vi.toml b/i18n/vi.toml index 06ecbf91..1e68c384 100644 --- a/i18n/vi.toml +++ b/i18n/vi.toml @@ -102,6 +102,7 @@ toggleLineNumbers = "Chuyển đổi số dòng" toggleLineWrap = "Chuyển đổi xuống dòng" toggleCodeEditable = "Chuyển đổi khối mã có thể chỉnh sửa" downloadCode = "Tải mã" +toggleCodeFullscreen = "Chuyển đổi toàn màn hình khối mã" expandCode = "Mở rộng hoặc thu gọn khối mã" cookieconsentMessage = "Trang web này sử dụng Cookies để cải thiện trải nghiệm của bạn." cookieconsentDismiss = "Đã hiểu!" diff --git a/i18n/zh-CN.toml b/i18n/zh-CN.toml index 6d0c1ed4..c56c6aa1 100644 --- a/i18n/zh-CN.toml +++ b/i18n/zh-CN.toml @@ -101,6 +101,7 @@ toggleLineNumbers = "切换行号" toggleLineWrap = "切换自动换行" toggleCodeEditable = "切换可编辑代码块" downloadCode = "下载代码" +toggleCodeFullscreen = "切换代码块全屏" expandCode = "展开或折叠代码块" cookieconsentMessage = "本网站使用 Cookies 来改善您的浏览体验。" cookieconsentDismiss = "同意" diff --git a/i18n/zh-TW.toml b/i18n/zh-TW.toml index 726378e3..d6400646 100644 --- a/i18n/zh-TW.toml +++ b/i18n/zh-TW.toml @@ -101,6 +101,7 @@ toggleLineNumbers = "切換行號" toggleLineWrap = "切換自動換行" toggleCodeEditable = "切換可編輯程式碼區塊" downloadCode = "下載程式碼" +toggleCodeFullscreen = "切換程式碼區塊全螢幕" expandCode = "展開或摺疊程式碼區塊" cookieconsentMessage = "本網站使用 Cookies 來改善您的流覽體驗。" cookieconsentDismiss = "同意" diff --git a/layouts/_partials/function/code-header.html b/layouts/_partials/function/code-header.html index 14a33687..5f940bd9 100644 --- a/layouts/_partials/function/code-header.html +++ b/layouts/_partials/function/code-header.html @@ -8,6 +8,7 @@ {{- $editBtn := "" -}} {{- $copyBtn := "" -}} {{- $downloadBtn := "" -}} +{{- $fullscreenBtn := "" -}} {{- $foldIcon := dict "Class" "arrow fa-solid fa-chevron-down" | partial "plugin/icon.html" -}} {{- $titleEl := printf `%s` $foldIcon -}} {{- $ellipsisBtn := printf `%s` (dict "Class" "fa-solid fa-ellipsis-h" | partial "plugin/icon.html") -}} @@ -35,10 +36,14 @@ {{- $downloadIcon := dict "Class" "fa-solid fa-download" | partial "plugin/icon.html" -}} {{- $downloadBtn = printf `%s` (T "assets.downloadCode") (T "assets.downloadCode") $downloadIcon -}} {{- end -}} +{{- if $config.fullscreen -}} + {{- $fullscreenIcon := dict "Class" "fa-solid fa-expand" | partial "plugin/icon.html" -}} + {{- $fullscreenBtn = printf `%s` (T "assets.toggleCodeFullscreen") (T "assets.toggleCodeFullscreen") $fullscreenIcon -}} +{{- end -}} {{- with $config.name -}} {{- $titleEl = replace $titleEl `` (printf `` .) -}} {{- end -}} -{{- $codeHeader := printf `
%s%s%s%s%s%s%s
` $lang $titleEl $ellipsisBtn $lineNosBtn $lineWrapBtn $editBtn $copyBtn $downloadBtn -}} +{{- $codeHeader := printf `
%s%s%s%s%s%s%s%s
` $lang $titleEl $ellipsisBtn $lineNosBtn $lineWrapBtn $editBtn $copyBtn $downloadBtn $fullscreenBtn -}} {{- $wrapper = replaceRE `(
)` (printf "%s$1" $codeHeader) $wrapper -}} {{- return $wrapper -}} diff --git a/layouts/_partials/init/index.html b/layouts/_partials/init/index.html index a39b9eca..b0a9db4d 100644 --- a/layouts/_partials/init/index.html +++ b/layouts/_partials/init/index.html @@ -1,4 +1,4 @@ -{{- hugo.Store.Set "version" "v0.4.3-20260302065610-78a994b9" -}} +{{- hugo.Store.Set "version" "v0.4.3-20260303081459-41fe4197" -}} {{- .Store.Set "this" dict -}} {{- partial "init/detection-env.html" . -}}