blogs/FixIt
1
0
Fork 0
mirror of https://github.com/hugo-fixit/FixIt.git synced 2026-08-24 07:18:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Refactor: refactor reading progress with css animation

Browse Source
This commit is contained in:
Cell
2024-11-11 12:25:23 +08:00
parent ad01016092
commit c91c0c8d52
3 changed files with 37 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/_partials/_widgets/_reading-progress.scss
+29 -5
View File
@@ -1,13 +1,37 @@
.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); }
}
/**
* 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;
}
}
assets/js/theme.js
-4
View File
@@ -1171,7 +1171,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'));
}
@@ -1204,9 +1203,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) {
layouts/partials/widgets.html
+8 -8
View File
@@ -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 -}}