discourse/discourse-subscriptions
1
0
Fork 0
mirror of synced 2026-08-31 19:35:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

FEATURE: Add fireworks + gradient animation to campaign success banner (#77)

Browse Source
This commit is contained in:
Jordan Vidrine
2021-06-21 09:01:35 -05:00
committed by GitHub
parent 787c5550c6
commit beb73b58f3
4 changed files with 298 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/javascripts/discourse/components/campaign-banner.js.es6
+21 -1
View File
@@ -4,6 +4,7 @@ import { equal } from "@ember/object/computed";
import { setting } from "discourse/lib/computed";
import Component from "@ember/component";
import discourseComputed, { observes } from "discourse-common/utils/decorators";
import { later } from "@ember/runloop";
import { inject as service } from "@ember/service";
export default Component.extend({
@@ -31,6 +32,7 @@ export default Component.extend({
showContributors: setting(
"discourse_subscriptions_campaign_show_contributors"
),
classNameBindings: ["isGoalMet:goal-met"],
init() {
this._super(...arguments);
@@ -69,6 +71,25 @@ export default Component.extend({
} else {
document.body.classList.remove("subscription-campaign-sidebar");
}
// makes sure to only play animation once, & not repeat on reload
if (this.isGoalMet) {
const successAnimationKey = this.keyValueStore.get(
"campaign_success_animation"
);
if (!successAnimationKey) {
later(() => {
this.keyValueStore.set({
key: "campaign_success_animation",
value: Date.now(),
});
document.body.classList.add("success-animation-off");
}, 7000);
} else {
document.body.classList.add("success-animation-off");
}
}
},
@discourseComputed(
@@ -130,7 +151,6 @@ export default Component.extend({
const currentVolume = this.subscriberGoal
? this.subscribers
: this.amountRaised;
return currentVolume >= this.goalTarget;
},
assets/javascripts/discourse/templates/components/campaign-banner.hbs
+21 -11
View File
@@ -12,21 +12,31 @@
var(--campaign-background-image);
background-size: cover;
background-repeat: no-repeat;' ''}}">
<h2 class="campaign-banner-info-header">{{i18n 'discourse_subscriptions.campaign.title'}}</h2>
{{#if isGoalMet}}
<h2 class="campaign-banner-info-header">{{i18n 'discourse_subscriptions.campaign.success_title'}}</h2>
<p class="campaign-banner-info-description">{{i18n 'discourse_subscriptions.campaign.success_body'}}</p>
{{else}}
<h2 class="campaign-banner-info-header">{{i18n 'discourse_subscriptions.campaign.title'}}</h2>
<p class="campaign-banner-info-description">{{i18n 'discourse_subscriptions.campaign.body'}}</p>
{{#if product}}
{{#link-to "s.show" product disabled=product.subscribed class="btn btn-primary campaign-banner-info-button"}}
{{d-icon "far-heart"}} {{d-icon "heart" class="hover-heart"}} {{i18n 'discourse_subscriptions.campaign.button'}}
{{/link-to}}
{{else}}
{{#link-to "s" class="btn btn-primary campaign-banner-info-button"}}
{{d-icon "far-heart"}} {{d-icon "heart" class="hover-heart"}} {{i18n 'discourse_subscriptions.campaign.button'}}
{{/link-to}}
{{/if}}
{{/if}}
{{#if product}}
{{#link-to "s.show" product disabled=product.subscribed class="btn btn-primary campaign-banner-info-button"}}
{{d-icon "far-heart"}} {{d-icon "heart" class="hover-heart"}} {{i18n 'discourse_subscriptions.campaign.button'}}
{{/link-to}}
{{else}}
{{#link-to "s" class="btn btn-primary campaign-banner-info-button"}}
{{d-icon "far-heart"}} {{d-icon "heart" class="hover-heart"}} {{i18n 'discourse_subscriptions.campaign.button'}}
{{/link-to}}
{{/if}}
</div>
<div class="campaign-banner-progress">
{{#if isGoalMet}}
<p class="campaign-banner-progress-success">{{i18n 'discourse_subscriptions.campaign.goal'}}!</p>
<div class="fireworks">
<div class="before"></div>
<div class="after"></div>
</div>
<div class="campaign-banner-progress-success"></div>
{{#if subscriberGoal}}
<p class="campaign-banner-progress-description">
{{i18n 'discourse_subscriptions.campaign.goal_comparison' current=subscribers goal=goalTarget}}