https://zhangyi.xyz/js/schemes/muse.js

1/* global NexT, CONFIG, Velocity */
2
3document.addEventListener('DOMContentLoaded', () => {
4
5  var isRight = CONFIG.sidebar.position === 'right';
6  var SIDEBAR_WIDTH = CONFIG.sidebar.width || 320;
7  var SIDEBAR_DISPLAY_DURATION = 200;
8  var mousePos = {};
9
10  var sidebarToggleLines = {
11    lines: document.querySelector('.sidebar-toggle'),
12    init : function() {
13      this.lines.classList.remove('toggle-arrow', 'toggle-close');
14    },
15    arrow: function() {
16      this.lines.classList.remove('toggle-close');
17      this.lines.classList.add('toggle-arrow');
18    },
19    close: function() {
20      this.lines.classList.remove('toggle-arrow');
21      this.lines.classList.add('toggle-close');
22    }
23  };
24
25  var sidebarToggleMotion = {
26    sidebarEl       : document.querySelector('.sidebar'),
27    isSidebarVisible: false,
28    init            : function() {
29      sidebarToggleLines.init();
30
31      window.addEventListener('mousedown', this.mousedownHandler.bind(this));
32      window.addEventListener('mouseup', this.mouseupHandler.bind(this));
33      document.querySelector('#sidebar-dimmer').addEventListener('click', this.clickHandler.bind(this));
34      document.querySelector('.sidebar-toggle').addEventListener('click', this.clickHandler.bind(this));
35      document.querySelector('.sidebar-toggle').addEventListener('mouseenter', this.mouseEnterHandler.bind(this));
36      document.querySelector('.sidebar-toggle').addEventListener('mouseleave', this.mouseLeaveHandler.bind(this));
37      window.addEventListener('sidebar:show', this.showSidebar.bind(this));
38      window.addEventListener('sidebar:hide', this.hideSidebar.bind(this));
39    },
40    mousedownHandler: function(event) {
41      mousePos.X = event.pageX;
42      mousePos.Y = event.pageY;
43    },
44    mouseupHandler: function(event) {
45      var deltaX = event.pageX - mousePos.X;
46      var deltaY = event.pageY - mousePos.Y;
47      var clickingBlankPart = Math.sqrt((deltaX * deltaX) + (deltaY * deltaY)) < 20 && event.target.matches('.main');
48      if (this.isSidebarVisible && (clickingBlankPart || event.target.matches('img.medium-zoom-image, .fancybox img'))) {
49        this.hideSidebar();
50      }
51    },
52    clickHandler: function() {
53      this.isSidebarVisible ? this.hideSidebar() : this.showSidebar();
54    },
55    mouseEnterHandler: function() {
56      if (!this.isSidebarVisible) {
57        sidebarToggleLines.arrow();
58      }
59    },
60    mouseLeaveHandler: function() {
61      if (!this.isSidebarVisible) {
62        sidebarToggleLines.init();
63      }
64    },
65    showSidebar: function() {
66      this.isSidebarVisible = true;
67      this.sidebarEl.classList.add('sidebar-active');
68      if (typeof Velocity === 'function') {
69        Velocity(document.querySelectorAll('.sidebar .motion-element'), isRight ? 'transition.slideRightIn' : 'transition.slideLeftIn', {
70          stagger: 50,
71          drag   : true
72        });
73      }
74
75      sidebarToggleLines.close();
76      NexT.utils.isDesktop() && window.anime(Object.assign({
77        targets : document.body,
78        duration: SIDEBAR_DISPLAY_DURATION,
79        easing  : 'linear'
80      }, isRight ? {
81        'padding-right': SIDEBAR_WIDTH
82      } : {
83        'padding-left': SIDEBAR_WIDTH
84      }));
85    },
86    hideSidebar: function() {
87      this.isSidebarVisible = false;
88      this.sidebarEl.classList.remove('sidebar-active');
89
90      sidebarToggleLines.init();
91      NexT.utils.isDesktop() && window.anime(Object.assign({
92        targets : document.body,
93        duration: SIDEBAR_DISPLAY_DURATION,
94        easing  : 'linear'
95      }, isRight ? {
96        'padding-right': 0
97      } : {
98        'padding-left': 0
99      }));
100    }
101  };
102  sidebarToggleMotion.init();
103
104  function updateFooterPosition() {
105    var footer = document.querySelector('.footer');
106    var containerHeight = document.querySelector('.header').offsetHeight + document.querySelector('.main').offsetHeight + footer.offsetHeight;
107    footer.classList.toggle('footer-fixed', containerHeight <= window.innerHeight);
108  }
109
110  updateFooterPosition();
111  window.addEventListener('resize', updateFooterPosition);
112  window.addEventListener('scroll', updateFooterPosition);
113});