Refactor reading-progress (#1100)

_config.yml

@@ -260,13 +260,6 @@ sidebar:
   # Enable sidebar on narrow view (only for Muse | Mist).
   onmobile: false
 
-back2top:
-  enable: true
-  # Back to top in sidebar.
-  sidebar: false
-  # Scroll percent label in b2t button.
-  scrollpercent: false
-
 # A button to open designated chat widget in sidebar.
 # Firstly, you need enable the chat service you want to activate its sidebar button.
 chat:
@@ -435,6 +428,21 @@ codeblock:
     # Available values: default | flat | mac
     style:
 
+back2top:
+  enable: true
+  # Back to top in sidebar.
+  sidebar: false
+  # Scroll percent label in b2t button.
+  scrollpercent: false
+
+# Reading progress bar
+reading_progress:
+  enable: false
+  # Available values: top | bottom
+  position: top
+  color: "#37c6c0"
+  height: 2px
+
 # `Follow me on GitHub` banner in the top-right corner.
 github_banner:
   enable: false
@@ -586,13 +594,6 @@ bookmark:
   # If manual, only save it by clicking the bookmark-icon.
   save: auto
 
-# Reading progress bar
-# Dependencies: https://github.com/theme-next/theme-next-reading-progress
-reading_progress:
-  enable: false
-  color: "#37c6c0"
-  height: 2px
-
 
 # ---------------------------------------------------------------
 # Comments and Widgets
@@ -1082,11 +1083,6 @@ vendors:
   # bookmark: //cdn.jsdelivr.net/gh/theme-next/theme-next-bookmark@1/bookmark.min.js
   bookmark:
 
-  # Internal version: 1.2.0
-  # Example:
-  # reading_progress: //cdn.jsdelivr.net/gh/theme-next/theme-next-reading-progress@1/reading_progress.min.js
-  reading_progress:
-
   # DisqusJS
   # Example:
   # disqusjs_js: //cdn.jsdelivr.net/npm/disqusjs@1/dist/disqus.js

layout/_layout.swig

@@ -78,6 +78,10 @@
       </div>
     {%- endif %}
 
+    {%- if theme.reading_progress.enable %}
+      <div class="reading-progress-bar"></div>
+    {%- endif %}
+
     {{ partial('_partials/share/index.swig', {}, {cache: theme.cache.enable}) }}
   </div>
 

layout/_macro/post.swig

@@ -3,10 +3,6 @@
     {%- set post_class = post_class + ' post-sticky' %}
   {%- endif %}
 
-  {%- if theme.reading_progress.enable && not is_index %}
-    <div class="reading-progress-bar"></div>
-  {%- endif %}
-
   <article class="{{ post_class }}" itemscope itemtype="http://schema.org/Article">
   {##################}
   {### POST BLOCK ###}

layout/_scripts/vendors.swig

@@ -22,10 +22,6 @@
   {%- set js_vendors.pangu = 'pangu/dist/pangu.min.js?v=4.0.7' %}
 {%- endif %}
 
-{%- if theme.reading_progress.enable %}
-  {%- set js_vendors.reading_progress = 'reading_progress/reading_progress.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' %}

source/css/_common/components/components.styl

@@ -6,6 +6,8 @@
 
 @import (hexo-config('back2top.sidebar') ? 'back-to-top-sidebar' : 'back-to-top') if (hexo-config('back2top.enable'));
 
+@import 'reading-progress' if (hexo-config('reading_progress.enable'));
+
 @import 'header';
 @import 'post';
 @import 'sidebar';

source/css/_common/components/post/post.styl

@@ -64,5 +64,3 @@
 @import 'post-copyright' if (hexo-config('creative_commons.post'));
 
 @import 'post-widgets' if ((hexo-config('facebook_sdk.enable') && hexo-config('facebook_sdk.like_button')) || (hexo-config('vkontakte_api.enable') && hexo-config('vkontakte_api.like')) || hexo-config('rating.enable') || hexo-config('likely.enable') || (hexo-config('needmoreshare2.enable') && hexo-config('needmoreshare2.postbottom.enable')));
-
-@import 'post-reading_progress' if (hexo-config('reading_progress.enable'));

source/css/_common/components/post/post-reading_progress.styl → source/css/_common/components/reading-progress.styl

@@ -4,7 +4,11 @@
   height: unquote(hexo-config('reading_progress.height'));
   left: 0;
   position: fixed;
-  top: 0;
+  if (hexo-config('reading_progress.position') == 'bottom') {
+    bottom: 0;
+  } else {
+    top: 0;
+  }
   width: 0;
   z-index: 9999;
 }

source/js/local-search.js

@@ -301,7 +301,7 @@ window.addEventListener('DOMContentLoaded', () => {
           </div>
         </div>`);
     document.querySelector('#search-loading-icon').css({
-      margin: '20% auto 0 auto',
+      margin      : '20% auto 0 auto',
       'text-align': 'center'
     });
     fetchData(proceedSearch);

source/js/next-boot.js

@@ -2,7 +2,7 @@
 
 window.addEventListener('DOMContentLoaded', () => {
 
-  CONFIG.back2top.enable && NexT.utils.registerBackToTop();
+  NexT.utils.registerScrollPercent();
   NexT.utils.registerCanIUseTag();
 
   // Mobile top menu bar.

source/js/utils.js

@@ -20,6 +20,7 @@ HTMLElement.prototype.css = function(dict) {
 };
 
 NexT.utils = {
+
   /**
    * Wrap images with fancybox.
    */
@@ -123,23 +124,26 @@ NexT.utils = {
     });
   },
 
-  registerBackToTop: function() {
+  registerScrollPercent: function() {
     var THRESHOLD = 50;
-    var $top = $('.back-to-top');
-
+    var backToTop = document.querySelector('.back-to-top');
+    var readingProgressBar = document.querySelector('.reading-progress-bar');
     // For init back to top in sidebar if page was scrolled after page refresh.
     $(window).on('load scroll', () => {
-      $top.toggleClass('back-to-top-on', window.pageYOffset > THRESHOLD);
-
-      var scrollTop = window.scrollY;
-      var contentVisibilityHeight = NexT.utils.getContentVisibilityHeight();
-      var scrollPercent = scrollTop / contentVisibilityHeight;
-      var scrollPercentRounded = Math.round(scrollPercent * 100);
-      var scrollPercentMaxed = Math.min(scrollPercentRounded, 100);
-      $('#scrollpercent > span').html(scrollPercentMaxed);
+      var scrollPercent;
+      if (backToTop || readingProgressBar) {
+        scrollPercent = NexT.utils.getScrollPercent();
+      }
+      if (backToTop) {
+        $(backToTop).toggleClass('back-to-top-on', window.pageYOffset > THRESHOLD);
+        document.querySelector('#scrollpercent span').innerText = scrollPercent;
+      }
+      if (readingProgressBar) {
+        readingProgressBar.style.width = scrollPercent + '%';
+      }
     });
 
-    $top.on('click', () => {
+    backToTop && backToTop.addEventListener('click', () => {
       $('html, body').animate({ scrollTop: 0 });
     });
   },
@@ -354,6 +358,14 @@ NexT.utils = {
     return sidebarSchemePadding;
   },
 
+  getScrollPercent: function() {
+    var scrollTop = window.scrollY;
+    var contentVisibilityHeight = NexT.utils.getContentVisibilityHeight();
+    var scrollPercent = scrollTop / contentVisibilityHeight;
+    var scrollPercentRounded = Math.round(scrollPercent * 100);
+    return Math.min(scrollPercentRounded, 100);
+  },
+
   getScript: function(url, callback, condition) {
     if (condition) {
       callback();