cullmann.io/themes/blowfish/assets/js/zen-mode.js

59 lines
2 KiB
JavaScript
Raw Normal View History

function _toogleZenMode(zendModeButton) {
2024-06-26 21:44:28 +02:00
// 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');
2024-06-26 21:44:28 +02:00
// Add semantic class into body tag
body.classList.toggle('zen-mode-enable');
2024-06-26 21:44:28 +02:00
// Show/Hide 'toc right' and 'toc inside'
if (tocRight)
tocRight.classList.toggle('lg:block');
2024-06-26 21:44:28 +02:00
if (tocInside)
tocInside.classList.toggle('lg:hidden');
2024-06-26 21:44:28 +02:00
// 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) {
2024-06-26 21:44:28 +02:00
zendModeButton.addEventListener('click', function (event) {
event.preventDefault();
2024-06-26 21:44:28 +02:00
// Toggle zen-mode
_toogleZenMode(zendModeButton);
});
}
(function init() {
2024-06-26 21:44:28 +02:00
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);
}
});
})();