diff options
author | Christoph Cullmann <christoph@cullmann.io> | 2024-06-26 21:44:28 +0200 |
---|---|---|
committer | Christoph Cullmann <christoph@cullmann.io> | 2024-06-26 21:44:28 +0200 |
commit | 58e2c9ae87f09dac79ecf962331ae2c51f4ba7f1 (patch) | |
tree | d819d1747427f81d1883a715ec60d13d575053e4 /themes/blowfish/assets/js/zen-mode.js | |
parent | b1a7697b03cfb0143af78993387f758836e842bf (diff) |
update the theme
Diffstat (limited to 'themes/blowfish/assets/js/zen-mode.js')
-rw-r--r-- | themes/blowfish/assets/js/zen-mode.js | 86 |
1 files changed, 44 insertions, 42 deletions
diff --git a/themes/blowfish/assets/js/zen-mode.js b/themes/blowfish/assets/js/zen-mode.js index 62ccc66..0da4842 100644 --- a/themes/blowfish/assets/js/zen-mode.js +++ b/themes/blowfish/assets/js/zen-mode.js @@ -1,57 +1,59 @@ function _toogleZenMode(zendModeButton) { - // Nodes selection - const body = document.querySelector('body'); - const tocRight = document.querySelector('.toc-right'); - const tocInside = document.querySelector('.toc-inside'); - const articleContent = document.querySelector('.article-content'); - const header = document.querySelector('#single_header'); + // Nodes selection + const body = document.querySelector('body'); + const tocRight = document.querySelector('.toc-right'); + const tocInside = document.querySelector('.toc-inside'); + const articleContent = document.querySelector('.article-content'); + const header = document.querySelector('#single_header'); - // Add semantic class into body tag - body.classList.toggle('zen-mode-enable'); + // Add semantic class into body tag + body.classList.toggle('zen-mode-enable'); - // Show/Hide 'toc right' and 'toc inside' + // Show/Hide 'toc right' and 'toc inside' + if (tocRight) tocRight.classList.toggle('lg:block'); + if (tocInside) tocInside.classList.toggle('lg:hidden'); - // Change width of article content - articleContent.classList.toggle('max-w-fit'); - articleContent.classList.toggle('max-w-prose'); - - // Read i18n title from data-attributes - const titleI18nDisable = zendModeButton.getAttribute('data-title-i18n-disable'); - const titleI18nEnable = zendModeButton.getAttribute('data-title-i18n-enable'); - - if (body.classList.contains('zen-mode-enable')) { - // Persist configuration - //localStorage.setItem('blowfish-zen-mode-enabled', 'true'); - - // Change title to enable - zendModeButton.setAttribute('title', titleI18nEnable) - // Auto-scroll to title article - window.scrollTo(window.scrollX, header.getBoundingClientRect().top - 90); - } else { - //localStorage.setItem('blowfish-zen-mode-enabled', 'false'); - zendModeButton.setAttribute('title', titleI18nDisable); - document.querySelector('body').scrollIntoView(); - } + // Change width of article content + articleContent.classList.toggle('max-w-fit'); + articleContent.classList.toggle('max-w-prose'); + + // Read i18n title from data-attributes + const titleI18nDisable = zendModeButton.getAttribute('data-title-i18n-disable'); + const titleI18nEnable = zendModeButton.getAttribute('data-title-i18n-enable'); + + if (body.classList.contains('zen-mode-enable')) { + // Persist configuration + //localStorage.setItem('blowfish-zen-mode-enabled', 'true'); + + // Change title to enable + zendModeButton.setAttribute('title', titleI18nEnable) + // Auto-scroll to title article + window.scrollTo(window.scrollX, header.getBoundingClientRect().top - 90); + } else { + //localStorage.setItem('blowfish-zen-mode-enabled', 'false'); + zendModeButton.setAttribute('title', titleI18nDisable); + document.querySelector('body').scrollIntoView(); + } } function _registerZendModeButtonClick(zendModeButton) { - zendModeButton.addEventListener('click', function (event) { - event.preventDefault(); + zendModeButton.addEventListener('click', function (event) { + event.preventDefault(); - // Toggle zen-mode - _toogleZenMode(zendModeButton); - }); + // Toggle zen-mode + _toogleZenMode(zendModeButton); + }); } (function init() { - window.addEventListener("DOMContentLoaded", (event) => { - // Register click on 'zen-mode-button' node element - const zendModeButton = document.getElementById('zen-mode-button'); - if(zendModeButton !== null && zendModeButton !== undefined) { - _registerZendModeButtonClick(zendModeButton); - } - }); + window.addEventListener("DOMContentLoaded", (event) => { + // Register click on 'zen-mode-button' node element + const zendModeButton = document.getElementById('zen-mode-button'); + if (zendModeButton !== null && zendModeButton !== undefined) { + _registerZendModeButtonClick(zendModeButton); + } + }); })();
\ No newline at end of file |