https://qxiaomay.github.io/js/src/post-details.js?v=5.1.4

1/* global NexT: true */
2
3$(document).ready(function () {
4
5  initScrollSpy();
6
7  function initScrollSpy () {
8    var tocSelector = '.post-toc';
9    var $tocElement = $(tocSelector);
10    var activeCurrentSelector = '.active-current';
11
12    $tocElement
13      .on('activate.bs.scrollspy', function () {
14        var $currentActiveElement = $(tocSelector + ' .active').last();
15
16        removeCurrentActiveClass();
17        $currentActiveElement.addClass('active-current');
18
19        // Scrolling to center active TOC element if TOC content is taller then viewport.
20        $tocElement.scrollTop($currentActiveElement.offset().top - $tocElement.offset().top + $tocElement.scrollTop() - ($tocElement.height() / 2));
21      })
22      .on('clear.bs.scrollspy', removeCurrentActiveClass);
23
24    $('body').scrollspy({ target: tocSelector });
25
26    function removeCurrentActiveClass () {
27      $(tocSelector + ' ' + activeCurrentSelector)
28        .removeClass(activeCurrentSelector.substring(1));
29    }
30  }
31
32});
33
34$(document).ready(function () {
35  var html = $('html');
36  var TAB_ANIMATE_DURATION = 200;
37  var hasVelocity = $.isFunction(html.velocity);
38
39  $('.sidebar-nav li').on('click', function () {
40    var item = $(this);
41    var activeTabClassName = 'sidebar-nav-active';
42    var activePanelClassName = 'sidebar-panel-active';
43    if (item.hasClass(activeTabClassName)) {
44      return;
45    }
46
47    var currentTarget = $('.' + activePanelClassName);
48    var target = $('.' + item.data('target'));
49
50    hasVelocity ?
51      currentTarget.velocity('transition.slideUpOut', TAB_ANIMATE_DURATION, function () {
52        target
53          .velocity('stop')
54          .velocity('transition.slideDownIn', TAB_ANIMATE_DURATION)
55          .addClass(activePanelClassName);
56      }) :
57      currentTarget.animate({ opacity: 0 }, TAB_ANIMATE_DURATION, function () {
58        currentTarget.hide();
59        target
60          .stop()
61          .css({'opacity': 0, 'display': 'block'})
62          .animate({ opacity: 1 }, TAB_ANIMATE_DURATION, function () {
63            currentTarget.removeClass(activePanelClassName);
64            target.addClass(activePanelClassName);
65          });
66      });
67
68    item.siblings().removeClass(activeTabClassName);
69    item.addClass(activeTabClassName);
70  });
71
72  // TOC item animation navigate & prevent #item selector in adress bar.
73  $('.post-toc a').on('click', function (e) {
74    e.preventDefault();
75    var targetSelector = NexT.utils.escapeSelector(this.getAttribute('href'));
76    var offset = $(targetSelector).offset().top;
77
78    hasVelocity ?
79      html.velocity('stop').velocity('scroll', {
80        offset: offset  + 'px',
81        mobileHA: false
82      }) :
83      $('html, body').stop().animate({
84        scrollTop: offset
85      }, 500);
86  });
87
88  // Expand sidebar on post detail page by default, when post has a toc.
89  var $tocContent = $('.post-toc-content');
90  var isSidebarCouldDisplay = CONFIG.sidebar.display === 'post' ||
91      CONFIG.sidebar.display === 'always';
92  var hasTOC = $tocContent.length > 0 && $tocContent.html().trim().length > 0;
93  if (isSidebarCouldDisplay && hasTOC) {
94    CONFIG.motion.enable ?
95      (NexT.motion.middleWares.sidebar = function () {
96          NexT.utils.displaySidebar();
97      }) : NexT.utils.displaySidebar();
98  }
99});