From 0d235808198e91f4d39e9ccf505ffa1b08cad089 Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Tue, 5 Nov 2024 11:47:38 +0800
Subject: [PATCH] :recycle: Refactor: refactor reading progress with css
 animation

---
 .../_partials/_widgets/_reading-progress.scss | 26 +++++++++++++++----
 assets/js/theme.js                            |  4 ---
 layouts/partials/widgets.html                 | 16 ++++++------
 3 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/assets/css/_partials/_widgets/_reading-progress.scss b/assets/css/_partials/_widgets/_reading-progress.scss
index c8616f88c..2961297b9 100644
--- a/assets/css/_partials/_widgets/_reading-progress.scss
+++ b/assets/css/_partials/_widgets/_reading-progress.scss
@@ -1,13 +1,29 @@
 .reading-progress-bar {
-  --progress: 0;
-  height: var(--progress-h, 2px);
-  width: var(--progress);
-  background-color: var(--bg-progress, var(--#{$prefix}info));
+  height: var(--#{$prefix}progress-h, 2px);
+  background-color: var(--#{$prefix}progress-bg, var(--#{$prefix}info));
   position: fixed;
+  left: 0;
+  right: 0;
+  transform-origin: var(--#{$prefix}progress-start, left) 50%;
+  animation: grow-progress 3s linear;
+  animation-timeline: scroll();
   @include z-index(2);
   @extend .print-d-none;
+
+  &[data-reversed=true] {
+    animation-name: grow-progress-reversed;
+  }
   
   [data-theme="dark"] & {
-    background-color: var(--bg-progress-dark, var(--#{$prefix}info-dark));
+    background-color: var(--#{$prefix}progress-bg-dark, var(--#{$prefix}info-dark));
+  }
+
+  @keyframes grow-progress {
+    from { transform: scaleX(0); }
+    to { transform: scaleX(1); }
+  }
+  @keyframes grow-progress-reversed {
+    from { transform: scaleX(1); }
+    to { transform: scaleX(0); }
   }
 }
diff --git a/assets/js/theme.js b/assets/js/theme.js
index fecdb263a..360166fa5 100644
--- a/assets/js/theme.js
+++ b/assets/js/theme.js
@@ -1111,7 +1111,6 @@ class FixIt {
     const ACCURACY = 20;
     const $fixedButtons = document.querySelector('.fixed-buttons');
     const $backToTop = document.querySelector('.back-to-top');
-    const $readingProgressBar = document.querySelector('.reading-progress-bar');
     if (document.body.dataset.headerDesktop === 'auto') {
       $headers.push(document.getElementById('header-desktop'));
     }
@@ -1144,9 +1143,6 @@ class FixIt {
       });
       const contentHeight = document.body.scrollHeight - window.innerHeight;
       const scrollPercent = Math.max(Math.min(100 * Math.max(this.newScrollTop, 0) / contentHeight, 100), 0);
-      if ($readingProgressBar) {
-        $readingProgressBar.style.setProperty('--progress', `${scrollPercent.toFixed(2)}%`);
-      }
       // whether to show fixed buttons
       if ($fixedButtons) {
         if (scrollPercent > 1) {
diff --git a/layouts/partials/widgets.html b/layouts/partials/widgets.html
index d5834bd44..ed229ef44 100644
--- a/layouts/partials/widgets.html
+++ b/layouts/partials/widgets.html
@@ -36,20 +36,20 @@
   {{- $readingProgress := .Site.Params.readingProgress -}}
   {{- if $readingProgress.enable -}}
     {{- with $readingProgress -}}
-      {{- $style := printf "%v: 0;%v: 0;" (.Start | default "left") (.Position | default "top") -}}
+      {{- $style := printf "--fi-progress-start: %v; %v: 0;" (.Start | default "left") (.Position | default "top")  -}}
       {{- if .Height | and (ne .Height "2px")   -}}
-        {{- $style = printf "%v--progress-h: %v;" $style .Height -}}
-      {{- end -}}
-      {{- if .Reversed -}}
-        {{- $style = printf "%v%v" $style "width: calc(100% - var(--progress));" -}}
+        {{- $style = printf "%v --fi-progress-h: %v;" $style .Height -}}
       {{- end -}}
       {{- if .Light -}}
-        {{- $style = printf "%v--bg-progress: %v;" $style .Light -}}
+        {{- $style = printf "%v --fi-progress-bg: %v;" $style .Light -}}
       {{- end -}}
       {{- if .Dark -}}
-        {{- $style = printf "%v--bg-progress-dark: %v;" $style .Dark -}}
+        {{- $style = printf "%v --fi-progress-bg-dark: %v;" $style .Dark -}}
       {{- end -}}
-      <div class="reading-progress-bar" {{ printf `style="%v"` $style | safeHTMLAttr }}></div>
+      <div class="reading-progress-bar"
+        {{- with .Reversed }} data-reversed="{{ . }}"{{ end }}
+        {{- printf ` style=%q` $style | safeHTMLAttr -}}
+      ></div>
     {{- end -}}
   {{- end -}}