Use pure JavaScript instead of jQuery [8]

.gitignore

@@ -14,6 +14,6 @@ source/lib/font-awesome/less/
 source/lib/font-awesome/scss/
 !source/lib/font-awesome/
 
-!source/lib/jquery/
+!source/lib/anime.min.js
 
 !source/lib/velocity/

_config.yml

@@ -962,11 +962,10 @@ vendors:
   # Internal path prefix. Please do not edit it.
   _internal: lib
 
-  # Internal version: 3.4.1
+  # Internal version: 3.1.0
   # Example:
-  # jquery: //cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
-  # jquery: //cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
-  jquery:
+  # anime: //cdn.jsdelivr.net/npm/animejs@3.1.0/lib/anime.min.js
+  anime:
 
   # Internal version: 4.7.0
   # Example:
@@ -1000,10 +999,10 @@ vendors:
 
   # FancyBox
   # Example:
+  # jquery: //cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
   # fancybox: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js
-  # fancybox: //cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js
   # fancybox_css: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css
-  # fancybox_css: //cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css
+  jquery:
   fancybox:
   fancybox_css:
 

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>

layout/_scripts/vendors.swig

@@ -1,12 +1,19 @@
 {%- set js_vendors = {} %}
 {%- set js_defer_vendors = {} %}
-{%- set js_vendors.jquery = 'jquery/index.js?v=3.4.1' %}
+{%- set js_vendors.anime = 'anime.min.js?v=3.1.0' %}
+
+{# Velocity must be loaded before jQuery #}
+{%- if theme.motion.enable %}
+  {%- set js_vendors.velocity = 'velocity/velocity.min.js?v=1.2.1' %}
+  {%- set js_vendors.velocity_ui = 'velocity/velocity.ui.min.js?v=1.2.1' %}
+{%- endif %}
 
 {%- if theme.pjax %}
   {%- set js_vendors.pjax = 'pjax/pjax.min.js?v=0.2.8' %}
 {%- endif %}
 
 {%- if theme.fancybox %}
+  {%- set js_vendors.jquery = '//cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js' %}
   {%- set js_vendors.fancybox = '//cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js' %}
 {%- endif %}
 
@@ -22,11 +29,6 @@
   {%- set js_vendors.pangu = '//cdn.jsdelivr.net/npm/pangu@4/dist/browser/pangu.min.js' %}
 {%- endif %}
 
-{%- if theme.motion.enable %}
-  {%- set js_vendors.velocity = 'velocity/velocity.min.js?v=1.2.1' %}
-  {%- set js_vendors.velocity_ui = 'velocity/velocity.ui.min.js?v=1.2.1' %}
-{%- endif %}
-
 {%- if theme.three.enable and not theme.three.delay %}
   {%- if theme.three.three_waves %}
     {%- set js_defer_vendors.three = 'three/three.min.js' %}

scripts/filters/minify.js

@@ -33,8 +33,8 @@ hexo.extend.filter.register('after_generate', () => {
     });
   }
 
-  if (theme.vendors.jquery) {
-    hexo.route.remove('lib/jquery/index.js');
+  if (theme.vendors.anime) {
+    hexo.route.remove('lib/anime.min.js');
   }
 
   if (!theme.algolia_search.enable) {

source/css/_common/components/header/site-nav.styl

@@ -25,4 +25,8 @@
     margin: 0 -10px;
     padding: 0 10px;
   }
+
+  &.site-nav-on {
+    display: block;
+  }
 }

source/css/_schemes/Pisces/_menu.styl

@@ -13,10 +13,6 @@
 
   +tablet() {
     display: none;
-
-    &.site-nav-on {
-      display: block;
-    }
   }
 }
 

source/js/bookmark.js

@@ -13,9 +13,12 @@ window.addEventListener('DOMContentLoaded', () => {
     // If the page opens with a specific hash, just jump out
     if (!isNaN(top) && location.hash === '') {
       // Auto scroll to the position
-      $(document.documentElement).animate({
+      window.anime({
+        targets  : document.documentElement,
+        duration : 200,
+        easing   : 'linear',
         scrollTop: top
-      }, 'fast');
+      });
     }
   };
   // Register everything
@@ -36,12 +39,16 @@ window.addEventListener('DOMContentLoaded', () => {
     link.addEventListener('click', event => {
       event.preventDefault();
       doSaveScroll();
-      $(link).animate({
-        top: -30
-      }, 'fast', () => {
-        setTimeout(() => {
-          link.style.top = '';
-        }, 400);
+      window.anime({
+        targets : link,
+        duration: 200,
+        easing  : 'linear',
+        top     : -30,
+        complete: () => {
+          setTimeout(() => {
+            link.style.top = '';
+          }, 400);
+        }
       });
     });
     scrollToMark();

source/js/motion.js

@@ -1,4 +1,4 @@
-/* global NexT, CONFIG */
+/* global NexT, CONFIG, Velocity */
 
 NexT.motion = {};
 
@@ -85,7 +85,7 @@ NexT.motion.middleWares = {
       sequence[sequence.length - 1].o.complete = function() {
         integrator.next();
       };
-      $.Velocity.RunSequence(sequence);
+      Velocity.RunSequence(sequence);
     } else {
       integrator.next();
     }
@@ -97,7 +97,7 @@ NexT.motion.middleWares = {
 
   menu: function(integrator) {
 
-    $.Velocity(document.querySelectorAll('.menu-item'), 'transition.slideDownIn', {
+    Velocity(document.querySelectorAll('.menu-item'), 'transition.slideDownIn', {
       display : null,
       duration: 200,
       complete: function() {
@@ -132,16 +132,16 @@ NexT.motion.middleWares = {
       };
 
       if (CONFIG.motion.transition.post_block) {
-        $.Velocity(postBlock, 'transition.' + postBlockTransition, postMotionOptions);
+        Velocity(postBlock, 'transition.' + postBlockTransition, postMotionOptions);
       }
       if (CONFIG.motion.transition.post_header) {
-        $.Velocity(postHeader, 'transition.' + postHeaderTransition, postMotionOptions);
+        Velocity(postHeader, 'transition.' + postHeaderTransition, postMotionOptions);
       }
       if (CONFIG.motion.transition.post_body) {
-        $.Velocity(postBody, 'transition.' + postBodyTransition, postMotionOptions);
+        Velocity(postBody, 'transition.' + postBodyTransition, postMotionOptions);
       }
       if (CONFIG.motion.transition.coll_header) {
-        $.Velocity(collHeader, 'transition.' + collHeaderTransition, postMotionOptions);
+        Velocity(collHeader, 'transition.' + collHeaderTransition, postMotionOptions);
       }
     }
     if (NexT.utils.isPisces() || NexT.utils.isGemini()) {
@@ -155,7 +155,7 @@ NexT.motion.middleWares = {
     var sidebarAffixTransition = CONFIG.motion.transition.sidebar;
     // Only for Pisces | Gemini.
     if (CONFIG.motion.transition.sidebar && (NexT.utils.isPisces() || NexT.utils.isGemini())) {
-      $.Velocity(sidebarAffix, 'transition.' + sidebarAffixTransition, {
+      Velocity(sidebarAffix, 'transition.' + sidebarAffixTransition, {
         display : null,
         duration: 200,
         complete: function() {

source/js/next-boot.js

@@ -1,4 +1,4 @@
-/* global NexT, CONFIG */
+/* global NexT, CONFIG, Velocity */
 
 NexT.boot = {};
 
@@ -9,39 +9,57 @@ NexT.boot.registerEvents = function() {
 
   // Mobile top menu bar.
   document.querySelector('.site-nav-toggle button').addEventListener('click', () => {
-    var $siteNav = $('.site-nav');
+    var siteNav = document.querySelector('.site-nav');
     var ON_CLASS_NAME = 'site-nav-on';
-    var isSiteNavOn = $siteNav.hasClass(ON_CLASS_NAME);
-    var animateAction = isSiteNavOn ? 'slideUp' : 'slideDown';
-    var animateCallback = isSiteNavOn ? 'removeClass' : 'addClass';
+    var animateAction = siteNav.classList.contains(ON_CLASS_NAME) ? 'slideUp' : 'slideDown';
 
-    $siteNav.stop()[animateAction]('fast', () => {
-      $siteNav[animateCallback](ON_CLASS_NAME);
-    });
+    if (typeof Velocity === 'function') {
+      Velocity(siteNav, animateAction, {
+        duration: 200,
+        complete: function() {
+          siteNav.classList.toggle(ON_CLASS_NAME);
+        }
+      });
+    } else {
+      siteNav.classList.toggle(ON_CLASS_NAME);
+    }
   });
 
   var TAB_ANIMATE_DURATION = 200;
   document.querySelectorAll('.sidebar-nav li').forEach(li => {
     li.addEventListener('click', event => {
-      var item = $(event.currentTarget);
+      var item = event.currentTarget;
       var activeTabClassName = 'sidebar-nav-active';
       var activePanelClassName = 'sidebar-panel-active';
-      if (item.hasClass(activeTabClassName)) return;
+      if (item.classList.contains(activeTabClassName)) return;
 
-      var target = $('.' + item.data('target'));
-      var currentTarget = target.siblings('.sidebar-panel');
-      currentTarget.animate({ opacity: 0 }, TAB_ANIMATE_DURATION, () => {
-        // 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);
+      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,
+        duration: TAB_ANIMATE_DURATION,
+        easing  : 'linear',
+        opacity : 0,
+        complete: () => {
+          // Prevent adding TOC to Overview if Overview was selected when close & open sidebar.
+          currentTarget.classList.remove(activePanelClassName);
+          target.css.opacity = 0;
+          target.classList.add(activePanelClassName);
+          window.anime({
+            targets : target,
+            duration: TAB_ANIMATE_DURATION,
+            easing  : 'linear',
+            opacity : 1
+          });
+        }
       });
 
-      item.siblings().removeClass(activeTabClassName);
-      item.addClass(activeTabClassName);
+      [...item.parentNode.children].forEach(element => {
+        element.classList.remove(activeTabClassName);
+      });
+      item.classList.add(activeTabClassName);
     });
   });
 

source/js/schemes/muse.js

@@ -1,4 +1,4 @@
-/* global NexT, CONFIG */
+/* global NexT, CONFIG, Velocity */
 
 window.addEventListener('DOMContentLoaded', () => {
 
@@ -132,35 +132,43 @@ window.addEventListener('DOMContentLoaded', () => {
     showSidebar: function() {
       this.isSidebarVisible = true;
       this.sidebarEl.classList.add('sidebar-active');
-      if (typeof $.Velocity === 'function') {
-        $.Velocity(document.querySelectorAll('.sidebar .motion-element:not(.site-state)'), isRight ? 'transition.slideRightIn' : 'transition.slideLeftIn', {
+      if (typeof Velocity === 'function') {
+        Velocity(document.querySelectorAll('.sidebar .motion-element:not(.site-state)'), isRight ? 'transition.slideRightIn' : 'transition.slideLeftIn', {
           stagger: 50,
           drag   : true
         });
-        $.Velocity(document.querySelector('.site-state'), isRight ? 'transition.slideRightIn' : 'transition.slideLeftIn', {
+        Velocity(document.querySelector('.site-state'), isRight ? 'transition.slideRightIn' : 'transition.slideLeftIn', {
           stagger: 50,
           drag   : true,
           display: 'flex'
         });
       }
 
       sidebarToggleLines.close();
-      NexT.utils.isDesktop() && $('body').stop().animate(isRight ? {
+      NexT.utils.isDesktop() && window.anime(Object.assign({
+        targets : document.body,
+        duration: SIDEBAR_DISPLAY_DURATION,
+        easing  : 'linear'
+      }, isRight ? {
         'padding-right': SIDEBAR_WIDTH
       } : {
         'padding-left': SIDEBAR_WIDTH
-      }, SIDEBAR_DISPLAY_DURATION);
+      }));
     },
     hideSidebar: function() {
       this.isSidebarVisible = false;
       this.sidebarEl.classList.remove('sidebar-active');
 
       sidebarToggleLines.init();
-      NexT.utils.isDesktop() && $('body').stop().animate(isRight ? {
+      NexT.utils.isDesktop() && window.anime(Object.assign({
+        targets : document.body,
+        duration: SIDEBAR_DISPLAY_DURATION,
+        easing  : 'linear'
+      }, isRight ? {
         'padding-right': 0
       } : {
         'padding-left': 0
-      }, SIDEBAR_DISPLAY_DURATION);
+      }));
     }
   };
   sidebarToggleMotion.init();