mirror of
https://github.com/hugo-fixit/FixIt.git
synced 2026-08-24 15:28:57 +00:00
♻️ Refactor(reward): add parameter mode for post reward and refactor shortcode reward
This commit is contained in:
Cell
+2
-1
@@ -17,7 +17,7 @@ All notable changes to this project will be documented in this file.
|
||||
- :tada: Feat: add breadcrumb navigation ([#309](https://github.com/hugo-fixit/FixIt/pull/309))
|
||||
- :sparkles: Feat: add instant page (@Mejituu [#279](https://github.com/hugo-fixit/FixIt/pull/279))
|
||||
- :sparkles: Feat: add `force` option value to `params.page.lightgallery`
|
||||
- :sparkles: Feat: add loop paramter for typeit ([#303](https://github.com/hugo-fixit/FixIt/pull/303))
|
||||
- :sparkles: Feat: add loop parameter for typeit ([#303](https://github.com/hugo-fixit/FixIt/pull/303))
|
||||
- :sparkles: Feat: add paramater strict for giscus comment
|
||||
- :bug: Fix: donate images without lazy loading (@Mejituu [#279](https://github.com/hugo-fixit/FixIt/pull/279))
|
||||
- :bug: Fix: discordinvite typo (@mathieu-gilloots [#282](https://github.com/hugo-fixit/FixIt/pull/282))
|
||||
@@ -32,6 +32,7 @@ All notable changes to this project will be documented in this file.
|
||||
- :recycle: Refactor: image lazy loading ([#283](https://github.com/hugo-fixit/FixIt/pull/283))
|
||||
- :recycle: Refactor: author's avatar of post or profile ([#288](https://github.com/hugo-fixit/FixIt/pull/288))
|
||||
- :recycle: Refactor: language switch in desktop header ([#306](https://github.com/hugo-fixit/FixIt/pull/306))
|
||||
- :recycle: Refactor(reward): add parameter `mode` for post reward and refactor shortcode `reward`
|
||||
- :wheelchair: Feat: add post update date to post meta ([#285](https://github.com/hugo-fixit/FixIt/issues/285))
|
||||
- :art: Style: fix `#comments` css style conflict ([#269](https://github.com/hugo-fixit/FixIt/issues/269))
|
||||
- :art: Style: adjust the mobile header style and fix the bug that scrolling is invalid when there are too many menus on mobile ([#289](https://github.com/hugo-fixit/FixIt/issues/289))
|
||||
|
||||
@@ -16,8 +16,53 @@
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.reward-ways {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.reward-input:checked~.reward-ways {
|
||||
display: block;
|
||||
padding-top: 20px;
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
@include user-select(none);
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:hover span[data-animation] {
|
||||
animation: var(--animation-reward, jackInTheBox) 0.8s infinite linear;
|
||||
// The animation may affect :hover of img in dark mode
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
margin: 0.8em 2em 0;
|
||||
max-width: 100%;
|
||||
width: $reward-img-width;
|
||||
}
|
||||
}
|
||||
|
||||
// `fixed` mode only supports desktop
|
||||
&[data-mode='fixed'] {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 1rem;
|
||||
background-color: $global-background-color;
|
||||
@include z-index(2);
|
||||
@include border-radius($global-border-radius);
|
||||
@include box-shadow(0 0 1.5rem 0 rgba(0, 0, 0, 0.2));
|
||||
|
||||
[data-theme='dark'] & {
|
||||
background-color: $global-background-color-dark;
|
||||
@include box-shadow(0 0 1.5rem 0 rgba(255, 255, 255, 0.2));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reward-button {
|
||||
@@ -28,11 +73,11 @@
|
||||
color: lighten($reward-color, 5%);
|
||||
border: 2px solid lighten($reward-color, 10%);
|
||||
border-radius: $global-border-radius;
|
||||
@include transition(all 0.3s ease-out);
|
||||
padding: 0.6rem 1rem;
|
||||
background-color: $global-background-color;
|
||||
vertical-align: text-top;
|
||||
line-height: 1rem;
|
||||
@include transition(all 0.3s ease-out);
|
||||
|
||||
&:active,
|
||||
&:hover {
|
||||
@@ -54,29 +99,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reward-ways {
|
||||
display: none;
|
||||
padding-top: 20px;
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:hover span[data-animation] {
|
||||
animation: var(--animation-reward, jackInTheBox) 0.8s infinite linear;
|
||||
// The animation may affect :hover of img in dark mode
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
margin: .8em 2em 0;
|
||||
max-width: 100%;
|
||||
width: $reward-img-width;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -53,6 +53,7 @@
|
||||
top: var(--#{$prefix}scroll-mt);
|
||||
box-sizing: border-box;
|
||||
visibility: hidden;
|
||||
@include z-index(1);
|
||||
@include overflow-wrap(break-word);
|
||||
@include blur;
|
||||
@extend .print-d-none;
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -31,11 +31,11 @@ $code-background-color-dark: #272C34 !default;
|
||||
|
||||
.v[data-class=v] {
|
||||
.vcount {
|
||||
@include z-index(0, 60);
|
||||
z-index: 60;
|
||||
}
|
||||
.vcards .vcard .vcontent.expand {
|
||||
&::before, &::after {
|
||||
@include z-index(0, 50);
|
||||
z-index: 50;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -464,6 +464,8 @@
|
||||
# position relative to post footer, optional values: ["before", "after"]
|
||||
position = "after"
|
||||
# comment = "Buy me a coffee"
|
||||
# FixIt 0.2.18 | NEW display mode of QR code images, optional values: ["static", "fixed"], default: `static`
|
||||
mode = "static"
|
||||
[params.page.reward.ways]
|
||||
# wechatpay = "/images/wechatpay.png"
|
||||
# alipay = "/images/alipay.png"
|
||||
|
||||
+1
-1
Submodule docs updated: ef4f2f5def...696b74526f
@@ -4,18 +4,16 @@
|
||||
|
||||
{{- if $reward.enable -}}
|
||||
<div class="post-reward">
|
||||
<div class="comment">{{- $reward.comment -}}</div>
|
||||
<div class="comment">{{ $reward.comment }}</div>
|
||||
<input type="checkbox" class="reward-input" name="reward" id="{{ $id }}" hidden />
|
||||
<label class="reward-button" for="{{ $id }}">{{- T "single.reward.donate" -}}</label>
|
||||
<div class="reward-ways">
|
||||
<label class="reward-button" for="{{ $id }}">{{ T "single.reward.donate" }}</label>
|
||||
<div class="reward-ways"{{ with $reward.mode }} data-mode="{{ . }}"{{ end }}>
|
||||
{{- range $way, $image := $reward.ways -}}
|
||||
{{- with T (printf "single.reward.%v" $way) -}}
|
||||
{{- $way = . -}}
|
||||
{{- end -}}
|
||||
{{- with T (printf "single.reward.%v" $way) -}}{{ $way = . }}{{- end -}}
|
||||
{{- if $image -}}
|
||||
<div>
|
||||
{{- dict "Src" $image "Alt" (printf "%v %v" $author $way) "Resources" $.Resources | partial "plugin/image.html" -}}
|
||||
<span{{- if $reward.animation }} data-animation{{- end -}}>{{- $way -}}</span>
|
||||
<span{{ if $reward.animation }} data-animation{{ end }}>{{ $way }}</span>
|
||||
</div>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
{{- $params := .Scratch.Get "params" -}}
|
||||
{{- $reward := .Scratch.Get "reward" -}}
|
||||
{{- $author := $params.author | default .Site.Author.name -}}
|
||||
{{- $options := dict "Scratch" .Scratch "Reward" $reward "Id" "fi-reward" "Author" $author -}}
|
||||
{{- $author := .Scratch.Get "author" -}}
|
||||
{{- $options := dict "Reward" $reward "Id" "fi-reward" "Author" $author.name -}}
|
||||
{{- partial "plugin/reward.html" $options -}}
|
||||
|
||||
@@ -1,28 +1,12 @@
|
||||
{{- $params := .Page.Scratch.Get "params" -}}
|
||||
{{- $reward := dict "enable" true | merge (.Page.Scratch.Get "reward") -}}
|
||||
{{- $id := dict "Scratch" .Page.Scratch | partial "function/id.html" -}}
|
||||
{{- $author := (.Get "author") | default (.Get 4) | default $params.author | default .Page.Site.Author.name -}}
|
||||
{{- $ways := dict "wechatpay" "" "alipay" "" "paypal" "" "bitcoin" "" -}}
|
||||
|
||||
{{- if .IsNamedParams -}}
|
||||
{{- $ways = .Get "wechatpay" | dict "wechatpay" | merge $ways -}}
|
||||
{{- $ways = .Get "alipay" | dict "alipay" | merge $ways -}}
|
||||
{{- $ways = .Get "paypal" | dict "paypal" | merge $ways -}}
|
||||
{{- $ways = .Get "bitcoin" | dict "bitcoin" | merge $ways -}}
|
||||
{{- $reward = dict "ways" $ways | merge $reward -}}
|
||||
{{- else -}}
|
||||
{{- $ways = .Get 0 | dict "wechatpay" | merge $ways -}}
|
||||
{{- $ways = .Get 1 | dict "alipay" | merge $ways -}}
|
||||
{{- $ways = .Get 2 | dict "paypal" | merge $ways -}}
|
||||
{{- $ways = .Get 3 | dict "bitcoin" | merge $ways -}}
|
||||
{{- if $ways.wechatpay -}}
|
||||
{{- $reward = dict "ways" $ways | merge $reward -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- with ((.Get "comment") | default (.Get 5)) -}}
|
||||
{{- $reward = dict "comment" . | merge $reward -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- $wechatpay := (.Get "wechatpay") | default (.Get 0) -}}
|
||||
{{- $alipay := (.Get "alipay") | default (.Get 1) -}}
|
||||
{{- $paypal := (.Get "paypal") | default (.Get 2) -}}
|
||||
{{- $bitcoin := (.Get "bitcoin") | default (.Get 3) -}}
|
||||
{{- $author := (.Get "author") | default (.Get 4) | default (.Page.Scratch.Get "author").name -}}
|
||||
{{- $comment := (.Get "comment") | default (.Get 5) -}}
|
||||
{{- $mode := (.Get "mode") | default (.Get 6) -}}
|
||||
{{- $reward := dict "enable" true "comment" $comment "mode" $mode -}}
|
||||
{{- $reward = dict "wechatpay" $wechatpay "alipay" $alipay "paypal" $paypal "bitcoin" $bitcoin | dict "ways" | merge $reward -}}
|
||||
{{- $options := dict "Reward" $reward "Id" $id "Author" $author -}}
|
||||
{{- partial "plugin/reward.html" $options -}}
|
||||
|
||||
@@ -1139,6 +1139,36 @@ class FixIt {
|
||||
}
|
||||
}
|
||||
|
||||
initReward() {
|
||||
const $rewards = document.querySelectorAll('.post-reward [data-mode="fixed"]');
|
||||
if (!$rewards.length) {
|
||||
return;
|
||||
}
|
||||
// `fixed` mode only supports desktop
|
||||
if (this.util.isMobile()) {
|
||||
this.util.forEach($rewards, ($reward) => {
|
||||
$reward.removeAttribute('data-mode');
|
||||
});
|
||||
return;
|
||||
}
|
||||
// Close post reward images exclude special id
|
||||
const _closeRewardExclude = (id) => {
|
||||
this.util.forEach($rewards, ($reward) => {
|
||||
const $rewardInput = $reward.parentElement.querySelector('.reward-input');
|
||||
if ($rewardInput.id !== id) {
|
||||
$rewardInput.checked = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
// Add additional click event to reward buttons
|
||||
this.util.forEach($rewards, ($reward) => {
|
||||
$reward.previousElementSibling.addEventListener('click', function () {
|
||||
_closeRewardExclude(this.getAttribute('for'));
|
||||
}, false)
|
||||
});
|
||||
this.scrollEventSet.add(_closeRewardExclude);
|
||||
}
|
||||
|
||||
onScroll() {
|
||||
const $headers = [];
|
||||
const ACCURACY = 20;
|
||||
@@ -1274,6 +1304,7 @@ class FixIt {
|
||||
this.initWatermark();
|
||||
this.initMDevtools();
|
||||
this.initAutoMark();
|
||||
this.initReward();
|
||||
|
||||
window.setTimeout(() => {
|
||||
this.initComment();
|
||||
|
||||
Reference in New Issue
Block a user