https://wangjiezhe.com/js/sidebar.js

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