https://mikin-blogs.vercel.app/js/schemes/muse.js

1/* global CONFIG */
2
3document.addEventListener('DOMContentLoaded', () => {
4
5  const isRight = CONFIG.sidebar.position === 'right';
6
7  const sidebarToggleMotion = {
8    mouse: {},
9    init : function() {
10      window.addEventListener('mousedown', this.mousedownHandler.bind(this));
11      window.addEventListener('mouseup', this.mouseupHandler.bind(this));
12      document.querySelector('.sidebar-dimmer').addEventListener('click', this.clickHandler.bind(this));
13      document.querySelector('.sidebar-toggle').addEventListener('click', this.clickHandler.bind(this));
14      window.addEventListener('sidebar:show', this.showSidebar);
15      window.addEventListener('sidebar:hide', this.hideSidebar);
16    },
17    mousedownHandler: function(event) {
18      this.mouse.X = event.pageX;
19      this.mouse.Y = event.pageY;
20    },
21    mouseupHandler: function(event) {
22      const deltaX = event.pageX - this.mouse.X;
23      const deltaY = event.pageY - this.mouse.Y;
24      const clickingBlankPart = Math.hypot(deltaX, deltaY) < 20 && event.target.matches('.main');
25      // Fancybox has z-index property, but medium-zoom does not, so the sidebar will overlay the zoomed image.
26      if (clickingBlankPart || event.target.matches('img.medium-zoom-image')) {
27        this.hideSidebar();
28      }
29    },
30    clickHandler: function() {
31      document.body.classList.contains('sidebar-active') ? this.hideSidebar() : this.showSidebar();
32    },
33    showSidebar: function() {
34      document.body.classList.add('sidebar-active');
35      const animateAction = isRight ? 'fadeInRight' : 'fadeInLeft';
36      document.querySelectorAll('.sidebar .animated').forEach((element, index) => {
37        element.style.animationDelay = (100 * index) + 'ms';
38        element.classList.remove(animateAction);
39        setTimeout(() => {
40          // Trigger a DOM reflow
41          element.classList.add(animateAction);
42        });
43      });
44    },
45    hideSidebar: function() {
46      document.body.classList.remove('sidebar-active');
47    }
48  };
49  if (CONFIG.sidebar.display !== 'remove') sidebarToggleMotion.init();
50
51  function updateFooterPosition() {
52    const footer = document.querySelector('.footer');
53    const containerHeight = document.querySelector('.header').offsetHeight + document.querySelector('.main').offsetHeight + footer.offsetHeight;
54    footer.classList.toggle('footer-fixed', containerHeight <= window.innerHeight);
55  }
56
57  updateFooterPosition();
58  window.addEventListener('resize', updateFooterPosition);
59  window.addEventListener('scroll', updateFooterPosition, { passive: true });
60});