From 59ee34b710927bd1fa167b9b7410cbd69497f635 Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Mon, 11 Nov 2024 12:23:43 +0800
Subject: [PATCH] :rewind: Revert: "refactor reading progress with css
 animation"

I hate safari just like IE.

Close #542
---
 .../_partials/_widgets/_reading-progress.scss | 34 +++----------------
 assets/js/theme.js                            |  4 +++
 layouts/partials/init/index.html              |  2 +-
 layouts/partials/widgets.html                 | 16 ++++-----
 4 files changed, 18 insertions(+), 38 deletions(-)

diff --git a/assets/css/_partials/_widgets/_reading-progress.scss b/assets/css/_partials/_widgets/_reading-progress.scss
index 24e2a849..c8616f88 100644
--- a/assets/css/_partials/_widgets/_reading-progress.scss
+++ b/assets/css/_partials/_widgets/_reading-progress.scss
@@ -1,37 +1,13 @@
 .reading-progress-bar {
-  height: var(--#{$prefix}progress-h, 2px);
-  background-color: var(--#{$prefix}progress-bg, var(--#{$prefix}info));
+  --progress: 0;
+  height: var(--progress-h, 2px);
+  width: var(--progress);
+  background-color: var(--bg-progress, 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(--#{$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); }
-  }
-
-  /**
-   * After the CSS property `animation-timeline: scroll()` exceeds 90% browser support in the future, this code can be removed
-   * See https://caniuse.com/mdn-css_properties_animation-timeline_scroll
-   */
-  @supports not (animation-timeline: scroll()) {
-    display: none;
+    background-color: var(--bg-progress-dark, var(--#{$prefix}info-dark));
   }
 }
diff --git a/assets/js/theme.js b/assets/js/theme.js
index 360166fa..fecdb263 100644
--- a/assets/js/theme.js
+++ b/assets/js/theme.js
@@ -1111,6 +1111,7 @@ 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'));
     }
@@ -1143,6 +1144,9 @@ 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/init/index.html b/layouts/partials/init/index.html
index 7f0c9ec8..9cc3b405 100644
--- a/layouts/partials/init/index.html
+++ b/layouts/partials/init/index.html
@@ -1,4 +1,4 @@
-{{- .Scratch.Set "version" "v0.3.15-2a0821f5" -}}
+{{- .Scratch.Set "version" "v0.3.15-5518053a" -}}
 {{- .Scratch.Set "this" dict -}}
 
 {{- partial "init/detection-env.html" . -}}
diff --git a/layouts/partials/widgets.html b/layouts/partials/widgets.html
index ed229ef4..d5834bd4 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 "--fi-progress-start: %v; %v: 0;" (.Start | default "left") (.Position | default "top")  -}}
+      {{- $style := printf "%v: 0;%v: 0;" (.Start | default "left") (.Position | default "top") -}}
       {{- if .Height | and (ne .Height "2px")   -}}
-        {{- $style = printf "%v --fi-progress-h: %v;" $style .Height -}}
+        {{- $style = printf "%v--progress-h: %v;" $style .Height -}}
+      {{- end -}}
+      {{- if .Reversed -}}
+        {{- $style = printf "%v%v" $style "width: calc(100% - var(--progress));" -}}
       {{- end -}}
       {{- if .Light -}}
-        {{- $style = printf "%v --fi-progress-bg: %v;" $style .Light -}}
+        {{- $style = printf "%v--bg-progress: %v;" $style .Light -}}
       {{- end -}}
       {{- if .Dark -}}
-        {{- $style = printf "%v --fi-progress-bg-dark: %v;" $style .Dark -}}
+        {{- $style = printf "%v--bg-progress-dark: %v;" $style .Dark -}}
       {{- end -}}
-      <div class="reading-progress-bar"
-        {{- with .Reversed }} data-reversed="{{ . }}"{{ end }}
-        {{- printf ` style=%q` $style | safeHTMLAttr -}}
-      ></div>
+      <div class="reading-progress-bar" {{ printf `style="%v"` $style | safeHTMLAttr }}></div>
     {{- end -}}
   {{- end -}}