Use pure JavaScript instead of jQuery [8]

layout/_macro/sidebar.swig

@@ -19,10 +19,10 @@
       {%- endif %}
 
       <ul class="sidebar-nav motion-element">
-        <li class="sidebar-nav-toc" data-target="post-toc-wrap">
+        <li class="sidebar-nav-toc" data-target="0">
           {{ __('sidebar.toc') }}
         </li>
-        <li class="sidebar-nav-overview" data-target="site-overview-wrap">
+        <li class="sidebar-nav-overview" data-target="1">
           {{ __('sidebar.overview') }}
         </li>
       </ul>

source/js/next-boot.js

@@ -33,21 +33,26 @@ NexT.boot.registerEvents = function() {
       var activePanelClassName = 'sidebar-panel-active';
       if (item.classList.contains(activeTabClassName)) return;
 
-      var target = $('.' + item.getAttribute('data-target'));
-      var currentTarget = target.siblings('.sidebar-panel');
+      var targets = document.querySelectorAll('.sidebar-panel');
+      var index = item.getAttribute('data-target');
+      var target = targets[index];
+      var currentTarget = targets[1 - index];
       window.anime({
-        targets : currentTarget[0],
+        targets : currentTarget,
         duration: TAB_ANIMATE_DURATION,
         easing  : 'linear',
         opacity : 0,
         complete: () => {
           // Prevent adding TOC to Overview if Overview was selected when close & open sidebar.
-          currentTarget.removeClass(activePanelClassName);
-          target
-            .stop()
-            .css({ opacity: 0 })
-            .addClass(activePanelClassName)
-            .animate({ opacity: 1 }, TAB_ANIMATE_DURATION);
+          currentTarget.classList.remove(activePanelClassName);
+          target.css.opacity = 0;
+          target.classList.add(activePanelClassName);
+          window.anime({
+            targets : target,
+            duration: TAB_ANIMATE_DURATION,
+            easing  : 'linear',
+            opacity : 1
+          });
         }
       });
 

source/js/schemes/pisces.js

@@ -3,17 +3,14 @@
 var Affix = {
   init: function(element, options) {
     this.options = Object.assign({
-      offset: 0,
-      target: window
+      offset: 0
     }, options);
-    this.target = this.options.target;
-    this.target.addEventListener('scroll', this.checkPosition.bind(this));
-    this.target.addEventListener('click', this.checkPositionWithEventLoop.bind(this));
+    window.addEventListener('scroll', this.checkPosition.bind(this));
+    window.addEventListener('click', this.checkPositionWithEventLoop.bind(this));
     window.matchMedia('(min-width: 992px)').addListener(event => {
       if (event.matches) {
         this.options = {
-          offset: NexT.utils.getAffixParam(),
-          target: window
+          offset: NexT.utils.getAffixParam()
         };
         this.checkPosition();
       }
@@ -25,11 +22,11 @@ var Affix = {
     this.checkPosition();
   },
   getState: function(scrollHeight, height, offsetTop, offsetBottom) {
-    let scrollTop = this.target.scrollY;
-    let targetHeight = this.target.innerHeight;
+    let scrollTop = window.scrollY;
+    let targetHeight = window.innerHeight;
     if (offsetTop != null && this.affixed === 'top') return scrollTop < offsetTop ? 'top' : false;
     if (this.affixed === 'bottom') {
-      if (offsetTop != null) return scrollTop + this.unpin <= $(this.element).offset().top ? false : 'bottom';
+      if (offsetTop != null) return scrollTop + this.unpin <= this.element.getBoundingClientRect().top + scrollTop ? false : 'bottom';
       return scrollTop + targetHeight <= scrollHeight - offsetBottom ? false : 'bottom';
     }
     let initializing = this.affixed === null;
@@ -43,8 +40,7 @@ var Affix = {
     if (this.pinnedOffset) return this.pinnedOffset;
     this.element.classList.remove('affix-top', 'affix-bottom');
     this.element.classList.add('affix');
-    let scrollTop = this.target.scrollY;
-    return (this.pinnedOffset = $(this.element).offset().top - scrollTop);
+    return this.pinnedOffset = this.element.getBoundingClientRect().top;
   },
   checkPositionWithEventLoop() {
     setTimeout(this.checkPosition.bind(this), 1);

source/js/utils.js

@@ -252,7 +252,7 @@ NexT.utils = {
       link.addEventListener('click', event => {
         event.preventDefault();
         var target = document.getElementById(event.currentTarget.getAttribute('href').replace('#', ''));
-        var offset = $(target).offset().top;
+        var offset = target.getBoundingClientRect().top + window.scrollY;
         window.anime({
           targets  : document.documentElement,
           duration : 500,
@@ -274,7 +274,7 @@ NexT.utils = {
       $(target).parents('li').addClass('active');
 
       // Scrolling to center active TOC element if TOC content is taller then viewport.
-      $tocElement.scrollTop($(target).offset().top - $tocElement.offset().top + $tocElement.scrollTop() - ($tocElement.height() / 2));
+      $tocElement.scrollTop(target.getBoundingClientRect().top - $tocElement[0].getBoundingClientRect().top + $tocElement.scrollTop() - ($tocElement.height() / 2));
     }
 
     function findIndex(entries) {