https://zhangyi.xyz/js/next-boot.js

1/* global NexT, CONFIG, Velocity */
2
3NexT.boot = {};
4
5NexT.boot.registerEvents = function() {
6
7  NexT.utils.registerScrollPercent();
8  NexT.utils.registerCanIUseTag();
9
10  // Mobile top menu bar.
11  document.querySelector('.site-nav-toggle .toggle').addEventListener('click', () => {
12    event.currentTarget.classList.toggle('toggle-close');
13    var siteNav = document.querySelector('.site-nav');
14    var animateAction = siteNav.classList.contains('site-nav-on') ? 'slideUp' : 'slideDown';
15
16    if (typeof Velocity === 'function') {
17      Velocity(siteNav, animateAction, {
18        duration: 200,
19        complete: function() {
20          siteNav.classList.toggle('site-nav-on');
21        }
22      });
23    } else {
24      siteNav.classList.toggle('site-nav-on');
25    }
26  });
27
28  var TAB_ANIMATE_DURATION = 200;
29  document.querySelectorAll('.sidebar-nav li').forEach((element, index) => {
30    element.addEventListener('click', event => {
31      var item = event.currentTarget;
32      var activeTabClassName = 'sidebar-nav-active';
33      var activePanelClassName = 'sidebar-panel-active';
34      if (item.classList.contains(activeTabClassName)) return;
35
36      var targets = document.querySelectorAll('.sidebar-panel');
37      var target = targets[index];
38      var currentTarget = targets[1 - index];
39      window.anime({
40        targets : currentTarget,
41        duration: TAB_ANIMATE_DURATION,
42        easing  : 'linear',
43        opacity : 0,
44        complete: () => {
45          // Prevent adding TOC to Overview if Overview was selected when close & open sidebar.
46          currentTarget.classList.remove(activePanelClassName);
47          target.style.opacity = 0;
48          target.classList.add(activePanelClassName);
49          window.anime({
50            targets : target,
51            duration: TAB_ANIMATE_DURATION,
52            easing  : 'linear',
53            opacity : 1
54          });
55        }
56      });
57
58      [...item.parentNode.children].forEach(element => {
59        element.classList.remove(activeTabClassName);
60      });
61      item.classList.add(activeTabClassName);
62    });
63  });
64
65  window.addEventListener('resize', NexT.utils.initSidebarDimension);
66
67  window.addEventListener('hashchange', () => {
68    var tHash = location.hash;
69    if (tHash !== '' && !tHash.match(/%\S{2}/)) {
70      var target = document.querySelector(`.tabs ul.nav-tabs li a[href="${tHash}"]`);
71      target && target.click();
72    }
73  });
74};
75
76NexT.boot.refresh = function() {
77
78  /**
79   * Register JS handlers by condition option.
80   * Need to add config option in Front-End at 'layout/_partials/head.swig' file.
81   */
82  CONFIG.fancybox && NexT.utils.wrapImageWithFancyBox();
83  CONFIG.mediumzoom && window.mediumZoom('.post-body :not(a) > img, .post-body > img');
84  CONFIG.lazyload && window.lozad('.post-body img').observe();
85  CONFIG.pangu && window.pangu.spacingPage();
86
87  CONFIG.exturl && NexT.utils.registerExtURL();
88  CONFIG.copycode.enable && NexT.utils.registerCopyCode();
89  NexT.utils.registerTabsTag();
90  NexT.utils.registerActiveMenuItem();
91  NexT.utils.registerLangSelect();
92  NexT.utils.registerSidebarTOC();
93  NexT.utils.wrapTableWithBox();
94  NexT.utils.registerVideoIframe();
95};
96
97NexT.boot.motion = function() {
98  // Define Motion Sequence & Bootstrap Motion.
99  if (CONFIG.motion.enable) {
100    NexT.motion.integrator
101      .add(NexT.motion.middleWares.logo)
102      .add(NexT.motion.middleWares.menu)
103      .add(NexT.motion.middleWares.postList)
104      .add(NexT.motion.middleWares.sidebar)
105      .bootstrap();
106  }
107  NexT.utils.updateSidebarPosition();
108};
109
110document.addEventListener('DOMContentLoaded', () => {
111  NexT.boot.registerEvents();
112  NexT.boot.refresh();
113  NexT.boot.motion();
114});