2024-04-05 18:29:11 +08:00
|
|
|
import Component from "@glimmer/component";
|
|
|
|
import { tracked } from "@glimmer/tracking";
|
|
|
|
import { action } from "@ember/object";
|
2024-04-19 15:49:50 +08:00
|
|
|
import { service } from "@ember/service";
|
2024-04-08 14:18:50 +08:00
|
|
|
import { and } from "truth-helpers";
|
2024-04-05 18:29:11 +08:00
|
|
|
import concatClass from "discourse/helpers/concat-class";
|
2024-04-19 15:49:50 +08:00
|
|
|
import swipe from "discourse/modifiers/swipe";
|
|
|
|
import autoCloseToast from "float-kit/modifiers/auto-close-toast";
|
2024-04-05 18:29:11 +08:00
|
|
|
|
2024-04-19 15:49:50 +08:00
|
|
|
const CLOSE_SWIPE_THRESHOLD = 50;
|
2024-04-05 18:29:11 +08:00
|
|
|
|
2024-04-19 15:49:50 +08:00
|
|
|
export default class DToast extends Component {
|
|
|
|
@service site;
|
2024-04-05 18:29:11 +08:00
|
|
|
|
2024-04-19 15:49:50 +08:00
|
|
|
@tracked progressBar;
|
2024-04-05 18:29:11 +08:00
|
|
|
|
2024-04-19 15:49:50 +08:00
|
|
|
animating = false;
|
2024-04-05 18:29:11 +08:00
|
|
|
|
2024-04-19 15:49:50 +08:00
|
|
|
@action
|
|
|
|
registerProgressBar(element) {
|
|
|
|
this.progressBar = element;
|
2024-04-05 18:29:11 +08:00
|
|
|
}
|
|
|
|
|
2024-04-19 15:49:50 +08:00
|
|
|
@action
|
|
|
|
async handleSwipe(state) {
|
|
|
|
if (this.animating) {
|
2024-04-05 18:29:11 +08:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2024-04-19 15:49:50 +08:00
|
|
|
if (state.deltaY < 0) {
|
|
|
|
this.#animateWrapperPosition(state.element, 0);
|
2024-04-05 18:29:11 +08:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2024-04-19 15:49:50 +08:00
|
|
|
if (state.deltaY > CLOSE_SWIPE_THRESHOLD) {
|
|
|
|
this.#close(state.element);
|
|
|
|
} else {
|
|
|
|
await this.#animateWrapperPosition(state.element, state.deltaY);
|
|
|
|
}
|
2024-04-05 18:29:11 +08:00
|
|
|
}
|
|
|
|
|
2024-04-19 15:49:50 +08:00
|
|
|
@action
|
|
|
|
async handleSwipeEnded(state) {
|
|
|
|
if (state.deltaY > CLOSE_SWIPE_THRESHOLD) {
|
|
|
|
this.#close(state.element);
|
|
|
|
} else {
|
|
|
|
await this.#animateWrapperPosition(state.element, 0);
|
2024-04-05 18:29:11 +08:00
|
|
|
}
|
2024-04-19 15:49:50 +08:00
|
|
|
}
|
2024-04-05 18:29:11 +08:00
|
|
|
|
2024-04-19 15:49:50 +08:00
|
|
|
async #close(element) {
|
|
|
|
await this.#closeWrapperAnimation(element);
|
|
|
|
this.args.toast.close();
|
2024-04-05 18:29:11 +08:00
|
|
|
}
|
|
|
|
|
2024-04-19 15:49:50 +08:00
|
|
|
async #closeWrapperAnimation(element) {
|
|
|
|
this.animating = true;
|
|
|
|
|
|
|
|
await element.animate([{ transform: "translateY(-150px)" }], {
|
|
|
|
fill: "forwards",
|
|
|
|
duration: 250,
|
|
|
|
}).finished;
|
|
|
|
|
|
|
|
this.animating = false;
|
2024-04-05 18:29:11 +08:00
|
|
|
}
|
|
|
|
|
2024-04-19 15:49:50 +08:00
|
|
|
async #animateWrapperPosition(element, position) {
|
|
|
|
this.animating = true;
|
2024-04-05 18:29:11 +08:00
|
|
|
|
2024-04-19 15:49:50 +08:00
|
|
|
await element.animate([{ transform: `translateY(${-position}px)` }], {
|
|
|
|
fill: "forwards",
|
|
|
|
}).finished;
|
|
|
|
|
|
|
|
this.animating = false;
|
2024-04-05 18:29:11 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<output
|
|
|
|
role={{if @toast.options.autoClose "status" "log"}}
|
|
|
|
key={{@toast.id}}
|
|
|
|
class={{concatClass "fk-d-toast" @toast.options.class}}
|
2024-04-19 15:49:50 +08:00
|
|
|
{{autoCloseToast
|
|
|
|
close=@toast.close
|
|
|
|
duration=@toast.options.duration
|
|
|
|
progressBar=this.progressBar
|
|
|
|
enabled=@toast.options.autoClose
|
|
|
|
}}
|
|
|
|
{{swipe
|
|
|
|
didSwipe=this.handleSwipe
|
|
|
|
didEndSwipe=this.handleSwipeEnded
|
|
|
|
enabled=this.site.mobileView
|
|
|
|
}}
|
2024-04-05 18:29:11 +08:00
|
|
|
>
|
|
|
|
<@toast.options.component
|
|
|
|
@data={{@toast.options.data}}
|
|
|
|
@close={{@toast.close}}
|
2024-04-08 14:18:50 +08:00
|
|
|
@showProgressBar={{and
|
|
|
|
@toast.options.showProgressBar
|
|
|
|
@toast.options.autoClose
|
|
|
|
}}
|
2024-04-05 18:29:11 +08:00
|
|
|
@onRegisterProgressBar={{this.registerProgressBar}}
|
|
|
|
/>
|
|
|
|
</output>
|
|
|
|
</template>
|
|
|
|
}
|