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

🎉 Feat: add b2t scroll percent support (#192)

Browse Source
This commit is contained in:
Cell
2022-09-10 13:51:03 +08:00
parent bb294e5d13
commit d8b62fc690
12 changed files with 80 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+1
View File
@@ -9,6 +9,7 @@ All notable changes to this project will be documented in this file.
> Snapshot: <>
- :tada: Feat: add reading progress bar support ([#191](https://github.com/hugo-fixit/FixIt/issues/191))
- :tada: Feat: add b2t scroll percent support ([#192](https://github.com/hugo-fixit/FixIt/issues/192))
- :sparkles: Feat: add `raw` shortcode
- :sparkles: Feat(menu): add params: `icon`, `type` for menu items
- :sparkles: Feat: add custom aside template in post page ([#172](https://github.com/hugo-fixit/FixIt/issues/172))
assets/css/_core/_common.scss
+5 -1
View File
@@ -45,4 +45,8 @@
.text-#{$color} {
color: #{$value} !important;
}
}
}
.variant-numeric {
font-variant-numeric: tabular-nums lining-nums;
}
assets/css/_partials/_widgets/_fixed-button.scss
+5 -5
View File
@@ -3,11 +3,11 @@
position: fixed;
right: 1.5rem;
font-size: 1rem;
line-height: 1.3rem;
padding: 0.6rem 0.6rem;
line-height: 1.5rem;
padding: 0.5rem 0.625rem;
color: $global-font-secondary-color;
background: $header-background-color;
@include border-radius(2rem);
background-color: $header-background-color;
@include border-radius(1.25rem);
@include transition(color 0.4s ease);
@include blur;
@@ -26,7 +26,7 @@
[data-theme='dark'] & {
color: $global-font-secondary-color-dark;
background: $header-background-color-dark;
background-color: $header-background-color-dark;
&:hover,
&:active {
assets/js/theme.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/js/theme.min.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
config.toml
+5
View File
@@ -676,6 +676,11 @@
# Gravatar host, default: "www.gravatar.com"
host = "www.gravatar.com" # "cn.gravatar.com", "gravatar.loli.net"
style = "" # "", mp, identicon, monsterid, wavatar, retro, blank, robohash
# FixIt 0.2.16 | NEW Back to top
[params.backToTop]
enable = true
# Scroll percent label in b2t button
scrollpercent = false
# FixIt 0.2.16 | NEW Reading progress bar
[params.readingProgress]
enable = false
docs
+1 -1
Submodule docs updated: 47ad9ab04c...f598bb311d
layouts/partials/header.html
+2 -2
View File
@@ -1,7 +1,7 @@
{{- $buildDrafts := .Site.BuildDrafts -}}
{{- /* Desktop header */ -}}
<header class="desktop" id="header-desktop">
<header class="desktop animate__faster" id="header-desktop">
<div class="header-wrapper"{{ if .Site.Params.githubCorner.enable }} data-github-corner="{{ .Site.Params.githubCorner.position }}"{{ end }}>
<div class="header-title">
<a href="{{ .Site.Home.RelPermalink }}" title="{{ .Site.Title }}">
@@ -147,7 +147,7 @@
</header>
{{- /* Mobile header */ -}}
<header class="mobile" id="header-mobile">
<header class="mobile animate__faster" id="header-mobile">
<div class="header-container">
<div class="header-wrapper">
<div class="header-title">
layouts/partials/init/detection-env.html
+1 -1
View File
@@ -19,7 +19,7 @@
{{- if eq .Params.comment true -}}
{{- .Scratch.Set "comment" .Site.Params.page.comment -}}
{{- else if eq .Params.comment false -}}
{{- .Scratch.Set "comment" dict -}}
{{- .Scratch.Set "comment" (dict "enable" false) -}}
{{- end -}}
{{- else -}}
{{- .Scratch.Set "devOpts" .Site.Params.dev -}}
layouts/partials/single/comment.html
+2 -1
View File
@@ -1,9 +1,10 @@
{{- $cdn := .Scratch.Get "cdn" | default dict -}}
{{- $fingerprint := .Scratch.Get "fingerprint" -}}
{{- $comment := .Scratch.Get "comment" | default dict -}}
{{- $commentConfig := dict -}}
{{- $commentConfig := dict "enable" false -}}
{{- if $comment.enable -}}
{{- $commentConfig = dict "enable" true -}}
<div id="comments">
{{- /* Artalk Comment System */ -}}
{{- $artalk := $comment.artalk | default dict -}}
layouts/partials/widgets.html
+18 -9
View File
@@ -1,14 +1,23 @@
<div class="widgets">
<div class="fixed-buttons d-none">
{{- /* top button */ -}}
<div class="fixed-button back-to-top" title="{{ T `backToTop` }}">
{{- dict "Class" "fa-solid fa-arrow-up fa-fw" | partial "plugin/icon.html" -}}
{{- $backToTop := .Site.Params.backToTop -}}
{{- $comment := .Scratch.Get "comment" -}}
{{- if $backToTop.enable | or $comment.enable -}}
<div class="fixed-buttons animate__faster d-none">
{{- /* back to top button */ -}}
{{- if $backToTop.enable -}}
<div class="fixed-button back-to-top" role="button" aria-label="{{ T `backToTop` }}">
{{- dict "Class" "fa-solid fa-arrow-up fa-fw" | partial "plugin/icon.html" -}}
<span class="variant-numeric{{ if not $backToTop.scrollpercent }} d-none{{ end }}">0%</span>
</div>
{{- end -}}
{{- /* comment button */ -}}
{{- if $comment.enable -}}
<div class="fixed-button view-comments d-none" role="button" aria-label="{{ T `viewComments` }}">
{{- dict "Class" "fa-solid fa-comment fa-fw" | partial "plugin/icon.html" -}}
</div>
{{- end -}}
</div>
{{- /* comment button */ -}}
<div class="fixed-button view-comments d-none" title="{{ T `viewComments` }}">
{{- dict "Class" "fa-solid fa-comment fa-fw" | partial "plugin/icon.html" -}}
</div>
</div>
{{- end -}}
{{- /* GitHub Corners */ -}}
{{- $githubCorner := .Site.Params.githubCorner -}}
src/js/theme.js
+38 -29
View File
@@ -775,9 +775,18 @@ class FixIt {
}
initComment() {
if (!this.config.comment) {
if (!this.config.comment?.enable) {
return;
}
// whether to show the view comments button
if (document.querySelector('#comments')) {
const $viewCommentsBtn = document.querySelector('.view-comments');
$viewCommentsBtn.classList.remove('d-none');
// view comments button click event
$viewCommentsBtn.addEventListener('click', () => {
this.util.scrollIntoView('#comments');
}, false);
}
if (this.config.comment.artalk) {
const artalk = new Artalk(this.config.comment.artalk);
artalk.setDarkMode(this.isDark);
@@ -1003,25 +1012,20 @@ class FixIt {
onScroll() {
const $headers = [];
if (document.body.getAttribute('data-header-desktop') === 'auto') {
const ACCURACY = 20, MINIMUM = 100;
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'));
}
if (document.body.getAttribute('data-header-mobile') === 'auto') {
if (document.body.dataset.headerMobile === 'auto') {
$headers.push(document.getElementById('header-mobile'));
}
if (document.querySelector('#comments')) {
const $viewCommentsBtn = document.querySelector('.view-comments');
$viewCommentsBtn.classList.remove('d-none');
$viewCommentsBtn.addEventListener('click', () => {
this.util.scrollIntoView('#comments');
});
}
document.querySelector('.back-to-top').addEventListener('click', () => {
// b2t button click event
$backToTop?.addEventListener('click', () => {
this.util.scrollIntoView('body');
});
const $fixedButtons = document.querySelector('.fixed-buttons');
const $readingProgressBar = document.querySelector('.reading-progress-bar');
const ACCURACY = 20, MINIMUM = 100;
window.addEventListener('scroll', (event) => {
if (this.disableScrollEvent) {
event.preventDefault();
@@ -1030,33 +1034,38 @@ class FixIt {
const $mask = document.getElementById('mask');
this.newScrollTop = this.util.getScrollTop();
const scroll = this.newScrollTop - this.oldScrollTop;
// header animation
this.util.forEach($headers, ($header) => {
if (scroll > ACCURACY) {
$header.classList.remove('animate__fadeInDown');
this.util.animateCSS($header, ['animate__fadeOutUp', 'animate__faster'], true);
this.util.animateCSS($header, ['animate__fadeOutUp'], true);
$mask.click();
} else if (scroll < -ACCURACY) {
$header.classList.remove('animate__fadeOutUp');
this.util.animateCSS($header, ['animate__fadeInDown', 'animate__faster'], true);
this.util.animateCSS($header, ['animate__fadeInDown'], true);
$mask.click();
}
});
// whether to show b2t button
if (this.newScrollTop > MINIMUM) {
$fixedButtons.classList.remove('d-none');
$fixedButtons.classList.remove('animate__fadeOut');
this.util.animateCSS($fixedButtons, ['animate__fadeIn', 'animate__faster'], true);
} else {
$fixedButtons.classList.remove('animate__fadeIn');
this.util.animateCSS($fixedButtons, ['animate__fadeOut', 'animate__faster'], true, () => {
$fixedButtons.classList.contains('animate__fadeOut') && $fixedButtons.classList.add('d-none');
});
}
const contentHeight = document.body.scrollHeight - window.innerHeight;
const scrollPercent = contentHeight > 0 ? Math.min(100 * window.scrollY / contentHeight, 100) : 0;
if ($readingProgressBar) {
const contentHeight = document.body.scrollHeight - window.innerHeight;
const scrollPercent = contentHeight > 0 ? Math.min(100 * window.scrollY / contentHeight, 100) : 0;
$readingProgressBar.style.setProperty('--progress', `${scrollPercent.toFixed(2)}%`);
}
// whether to show fixed buttons
if ($fixedButtons) {
if (this.newScrollTop > MINIMUM) {
$fixedButtons.classList.remove('d-none', 'animate__fadeOut');
this.util.animateCSS($fixedButtons, ['animate__fadeIn'], true);
} else {
$fixedButtons.classList.remove('animate__fadeIn');
this.util.animateCSS($fixedButtons, ['animate__fadeOut'], true, () => {
$fixedButtons.classList.contains('animate__fadeOut') && $fixedButtons.classList.add('d-none');
});
}
if ($backToTop) {
$backToTop.querySelector('span').innerText = `${Math.round(scrollPercent)}%`;
}
}
for (let event of this.scrollEventSet) {
event();
}