fix: Solve the problem of incorrect reading progress calculation

liuyib · Jan 5, 2020 · 114268c · 114268c
1 parent 08b2321
commit 114268c
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 11 deletions.
diff --git a/layout/_partials/config.pug b/layout/_partials/config.pug
@@ -47,6 +47,17 @@
     });
   }
 
+  var post_widget = "undefined";
+  if (theme.post_widget) {
+    var end_text = (theme.post_widget.end_text && theme.post_widget.end_text.enable) || false;
+
+    if (end_text) {
+      post_widget = JSON.stringify({
+        end_text: end_text,
+      });
+    }
+  }
+
   var night_mode = "undefined";
   if (theme.night_mode) {
     night_mode = JSON.stringify({
@@ -125,6 +136,7 @@ script.
     fontawesome: !{ fontawesome },
     sidebar: !{ sidebar },
     header: !{ header },
+    post_widget: !{ post_widget },
     night_mode: !{ night_mode },
     back2top: !{ back2top },
     reward: !{ theme.reward.enable },

diff --git a/layout/post.pug b/layout/post.pug
@@ -1,6 +1,7 @@
 extends ./_layout.pug
 
 block content
+  div#is-post
   div.post
     - var fa_prefix = theme.fa_prefix || 'fa'
 
@@ -17,9 +18,10 @@ block content
     footer.post-footer
       if theme.post_widget.end_text.enable
         div.post-end
-          span= "------ "
-          span= __("post.end")
-          span= " ------"
+          p
+            span= "------ "
+            span= __("post.end")
+            span= " ------"
 
       if (page.copyright !== false) && (theme.creative_commons.enable && theme.creative_commons.post)
         include ./_partials/widgets/copyright.pug

diff --git a/source/css/_common/components/post/post.styl b/source/css/_common/components/post/post.styl
@@ -92,7 +92,6 @@
 
   if (hexo-config('post_widget.end_text.enable')) {
     &-end {
-      margin: 0 0 1rem;
       padding: 1rem 0 0;
       text-align: center;
       color: var(--color-gray-400);

diff --git a/source/js/sidebar.js b/source/js/sidebar.js
@@ -118,17 +118,58 @@ $(document).ready(function () {
 
   // Update the reading progress lines of post.
   function readProgress () {
-    var $post = $('#content-wrap');
-    var scrollH = ($post[0] &&
-      $post[0].getBoundingClientRect().top * -1) || 0;
+    // Not on post page.
+    if ($('#is-post').length === 0) {
+      return;
+    }
+
+    var $post = $('.content');
+    var postTop = $post.offset().top;
+    var postEndTop = 0;
+    var postEndHeight = 0;
+    var postReadingHeight = 0;
+    var isEnablePostEnd = false;
+    var percent = 0;
+
+    if (CONFIG.post_widget && CONFIG.post_widget.end_text) {
+      isEnablePostEnd = true;
+    }
+
+    if (isEnablePostEnd) {
+      postEndTop = $('.post-end').offset().top;
+      postEndHeight = $('.post-end').outerHeight();
+      postReadingHeight = postEndTop - postTop + postEndHeight;
+    } else {
+      postEndTop = $('.post-footer').offset().top;
+      postReadingHeight = postEndTop - postTop;
+    }
 
-    var percent = parseInt((scrollH /
-      Math.abs($post.height() - $(window).height())) * 100);
+    var windowHeight = $(window).height();
+    var postScrollTop = 0;
+
+    if ($post.length !== 0) {
+      postScrollTop =
+        parseInt($post[0].getBoundingClientRect().top * -1) + windowHeight;
+    }
+
+    var percentNum = Number($('.sidebar-reading-info-num').text());
+
+    postReadingHeight = parseInt(Math.abs(postReadingHeight));
+    percent = parseInt((postScrollTop / postReadingHeight) * 100);
     percent = percent > 100 ? 100 : percent < 0 ? 0 : percent;
 
-    $('.sidebar-reading-info-num').html(percent);
+    // Has reached the maximum or minimum
+    if (
+      (percent === 0 && percentNum === 0) ||
+      (percent === 100 && percentNum === 100)
+    ) {
+      return;
+    }
+
+    $('.sidebar-reading-info-num').text(percent);
     $('.sidebar-reading-line').css(
-      'transform', 'translateX(' + (percent - 100) + '%)'
+      'transform',
+      'translateX(' + (percent - 100) + '%)'
     );
   }