Use pure JavaScript instead of jQuery [8] (#1135)

1v9 · web-flow · commit e436049f01a1 · 2019-08-28T15:18:46.000+08:00
diff --git a/.gitignore b/.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/
diff --git a/_config.yml b/_config.yml
@@ -970,11 +970,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:
@@ -1008,10 +1007,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:
 
diff --git a/layout/_macro/sidebar.swig b/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">
           {{ __('sidebar.toc') }}
         </li>
-        <li class="sidebar-nav-overview" data-target="site-overview-wrap">
+        <li class="sidebar-nav-overview">
           {{ __('sidebar.overview') }}
         </li>
       </ul>
diff --git a/layout/_partials/head/head.swig b/layout/_partials/head/head.swig
@@ -93,6 +93,7 @@
       copy_button: '{{ __("post.copy_button") }}',
       copy_success: '{{ __("post.copy_success") }}',
       copy_failure: '{{ __("post.copy_failure") }}'
-    }
+    },
+    sidebarPadding: 40
   };
 </script>
diff --git a/layout/_scripts/vendors.swig b/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' %}
diff --git a/scripts/filters/minify.js b/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) {
diff --git a/source/css/_common/components/footer/footer.styl b/source/css/_common/components/footer/footer.styl
@@ -2,6 +2,13 @@
   color: $grey-dark;
   font-size: $font-size-small;
 
+  &.footer-fixed {
+    bottom: 0;
+    left: 0;
+    position: fixed;
+    right: 0;
+  }
+
   img {
     border: 0;
   }
diff --git a/source/css/_common/components/header/site-nav.styl b/source/css/_common/components/header/site-nav.styl
@@ -25,4 +25,8 @@
     margin: 0 -10px;
     padding: 0 10px;
   }
+
+  &.site-nav-on {
+    display: block;
+  }
 }
diff --git a/source/css/_common/components/post/post-eof.styl b/source/css/_common/components/post/post-eof.styl
@@ -6,7 +6,7 @@
   width: 8%;
 }
 
-.post:last-child {
+article:last-child {
   .post-eof {
     display: none;
   }
diff --git a/source/css/_common/components/third-party/search.styl b/source/css/_common/components/third-party/search.styl
@@ -154,6 +154,11 @@ if (hexo-config('algolia_search.enable')) {
 }
 
 if (hexo-config('local_search.enable')) {
+  .search-loading-icon {
+    margin: 20% auto 0 auto;
+    text-align: center;
+  }
+
   .search-popup {
     ul.search-result-list {
       margin: 0 5px;
diff --git a/source/css/_common/scaffolding/helpers.styl b/source/css/_common/scaffolding/helpers.styl
@@ -64,10 +64,6 @@
   }
 }
 
-.affix {
-  position: fixed;
-}
-
 .translation {
   color: $grey-dark;
   font-size: $font-size-small;
diff --git a/source/css/_schemes/Pisces/_layout.styl b/source/css/_schemes/Pisces/_layout.styl
@@ -77,7 +77,6 @@
   background: $body-bg-color;
   box-shadow: none;
   float: left;
-  margin-left: -100%;
   position: static;
   width: $sidebar-desktop;
 
diff --git a/source/css/_schemes/Pisces/_menu.styl b/source/css/_schemes/Pisces/_menu.styl
@@ -13,10 +13,6 @@
 
   +tablet() {
     display: none;
-
-    &.site-nav-on {
-      display: block;
-    }
   }
 }
 
diff --git a/source/js/bookmark.js b/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();
diff --git a/source/js/local-search.js b/source/js/local-search.js
@@ -276,11 +276,7 @@ window.addEventListener('DOMContentLoaded', () => {
   // Search function
   const searchFunc = () => {
     document.querySelector('.search-pop-overlay').style.display = '';
-    document.querySelector('.search-pop-overlay').innerHTML = '<div id="search-loading-icon"><i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i></div>';
-    document.querySelector('#search-loading-icon').css({
-      margin      : '20% auto 0 auto',
-      'text-align': 'center'
-    });
+    document.querySelector('.search-pop-overlay').innerHTML = '<div class="search-loading-icon"><i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i></div>';
     fetchData(proceedSearch);
   };
 
diff --git a/source/js/motion.js b/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() {
diff --git a/source/js/next-boot.js b/source/js/next-boot.js
@@ -1,4 +1,4 @@
-/* global NexT, CONFIG */
+/* global NexT, CONFIG, Velocity */
 
 NexT.boot = {};
 
@@ -9,39 +9,56 @@ 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);
+  document.querySelectorAll('.sidebar-nav li').forEach((element, index) => {
+    element.addEventListener('click', event => {
+      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 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.style.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);
     });
   });
 
diff --git a/source/js/schemes/muse.js b/source/js/schemes/muse.js
diff --git a/source/js/schemes/pisces.js b/source/js/schemes/pisces.js
diff --git a/source/js/utils.js b/source/js/utils.js
diff --git a/source/lib/anime.min.js b/source/lib/anime.min.js
diff --git a/source/lib/jquery/index.js b/source/lib/jquery/index.js

Original file line number	Diff line number	Diff line change
`@@ -33,8 +33,8 @@ hexo.extend.filter.register('after_generate', () => {`
`33`	`33`	`});`
`34`	`34`	`}`
`35`	`35`
`36`		`- if (theme.vendors.jquery) {`
`37`		`- hexo.route.remove('lib/jquery/index.js');`
	`36`	`+ if (theme.vendors.anime) {`
	`37`	`+ hexo.route.remove('lib/anime.min.js');`
`38`	`38`	`}`
`39`	`39`
`40`	`40`	`if (!theme.algolia_search.enable) {`
Original file line number	Diff line number	Diff line change
`@@ -25,4 +25,8 @@`
`25`	`25`	`margin: 0 -10px;`
`26`	`26`	`padding: 0 10px;`
`27`	`27`	`}`
	`28`	`+`
	`29`	`+ &.site-nav-on {`
	`30`	`+ display: block;`
	`31`	`+ }`
`28`	`32`	`}`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`	`width: 8%;`
`7`	`7`	`}`
`8`	`8`
`9`		`-.post:last-child {`
	`9`	`+article:last-child {`
`10`	`10`	`.post-eof {`
`11`	`11`	`display: none;`
`12`	`12`	`}`