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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
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');


  // Add semantic class into body tag
  body.classList.toggle('zen-mode-enable');

  // 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();
  }
}

function _registerZendModeButtonClick(zendModeButton) {
  zendModeButton.addEventListener('click', function (event) {
    event.preventDefault();

    // 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);
    }
  });
})();