@wolsok/thanos
Version:
Wolf Soko's implementation of a cool Thanos snapping vaporizing effect for destroying dom elements
76 lines • 9.38 kB
JavaScript
import { Directive, ElementRef, Inject, NgZone, Output } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { finalize, Observable, Subject, Subscription, take, tap } from 'rxjs';
import { WS_THANOS_OPTIONS_TOKEN } from './ws-thanos-options.token';
import { WsThanosService } from './ws-thanos.service';
import * as i0 from "@angular/core";
import * as i1 from "./ws-thanos.service";
class WsThanosDirective {
vaporizeDomElem;
thanosService;
thanosOptions;
ngZone;
wsThanosCompleteSubject = new Subject();
untilDestroyed = takeUntilDestroyed();
wsThanosComplete = this.wsThanosCompleteSubject.asObservable();
subscriptions = new Subscription();
constructor(vaporizeDomElem, thanosService, thanosOptions, ngZone) {
this.vaporizeDomElem = vaporizeDomElem;
this.thanosService = thanosService;
this.thanosOptions = thanosOptions;
this.ngZone = ngZone;
}
/**
*
* Vaporize the dom element of this directive
* @param removeElem remove the vaporized dom element or blend back in after a while
*
* Subscribe to the returned observable to start vaporization
*
*/
vaporize$(removeElem = true) {
const elem = this.vaporizeDomElem.nativeElement;
return this.thanosService.vaporize(elem).pipe(tap({
error: (error) => {
console.error('Error vaporizing', error, { elemTovaporize: elem, removeElem });
},
}), finalize(() => this.ngZone.run(() => {
if (removeElem) {
elem.remove();
}
else {
// make visible again
elem.style.transition = 'opacity 700ms';
elem.style.opacity = '1';
}
this.wsThanosCompleteSubject.next();
})));
}
/**
* Vaporize the dom element of this directive
* @param removeElem remove the vaporized dom element or blend back in after a while
*
* @Deprecated use vaporizeAndScrollIntoView$ instead and subscribe to it
*/
vaporize(removeElem = true) {
this.vaporize$(removeElem).pipe(this.untilDestroyed).subscribe();
return this.wsThanosComplete.pipe(take(1));
}
static ɵfac = function WsThanosDirective_Factory(t) { return new (t || WsThanosDirective)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.WsThanosService), i0.ɵɵdirectiveInject(WS_THANOS_OPTIONS_TOKEN), i0.ɵɵdirectiveInject(i0.NgZone)); };
static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: WsThanosDirective, selectors: [["", "wsThanos", ""], ["ws-thanos"]], outputs: { wsThanosComplete: "wsThanosComplete" }, exportAs: ["thanos"], standalone: true });
}
export { WsThanosDirective };
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WsThanosDirective, [{
type: Directive,
args: [{
standalone: true,
selector: '[wsThanos], ws-thanos',
exportAs: 'thanos',
}]
}], function () { return [{ type: i0.ElementRef }, { type: i1.WsThanosService }, { type: undefined, decorators: [{
type: Inject,
args: [WS_THANOS_OPTIONS_TOKEN]
}] }, { type: i0.NgZone }]; }, { wsThanosComplete: [{
type: Output
}] }); })();
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid3MtdGhhbm9zLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvcHVibGljL3dzLXRoYW5vcy9zcmMvbGliL3dzLXRoYW5vcy5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsTUFBTSxFQUFFLE1BQU0sRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDOUUsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDaEUsT0FBTyxFQUFFLFFBQVEsRUFBRSxVQUFVLEVBQUUsT0FBTyxFQUFFLFlBQVksRUFBRSxJQUFJLEVBQUUsR0FBRyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBRTlFLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBRXBFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQzs7O0FBRXRELE1BS2EsaUJBQWlCO0lBU1Q7SUFDQTtJQUVBO0lBQ0E7SUFaWCx1QkFBdUIsR0FBRyxJQUFJLE9BQU8sRUFBUSxDQUFDO0lBQzlDLGNBQWMsR0FBRyxrQkFBa0IsRUFBRSxDQUFDO0lBR3ZDLGdCQUFnQixHQUFxQixJQUFJLENBQUMsdUJBQXVCLENBQUMsWUFBWSxFQUFFLENBQUM7SUFDaEYsYUFBYSxHQUFpQixJQUFJLFlBQVksRUFBRSxDQUFDO0lBRXpELFlBQ21CLGVBQXdDLEVBQ3hDLGFBQThCLEVBRTlCLGFBQThCLEVBQzlCLE1BQWM7UUFKZCxvQkFBZSxHQUFmLGVBQWUsQ0FBeUI7UUFDeEMsa0JBQWEsR0FBYixhQUFhLENBQWlCO1FBRTlCLGtCQUFhLEdBQWIsYUFBYSxDQUFpQjtRQUM5QixXQUFNLEdBQU4sTUFBTSxDQUFRO0lBQzlCLENBQUM7SUFFSjs7Ozs7OztPQU9HO0lBQ0ksU0FBUyxDQUFDLFVBQVUsR0FBRyxJQUFJO1FBQ2hDLE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxlQUFlLENBQUMsYUFBYSxDQUFDO1FBQ2hELE9BQU8sSUFBSSxDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUMzQyxHQUFHLENBQUM7WUFDRixLQUFLLEVBQUUsQ0FBQyxLQUFLLEVBQUUsRUFBRTtnQkFDZixPQUFPLENBQUMsS0FBSyxDQUFDLGtCQUFrQixFQUFFLEtBQUssRUFBRSxFQUFFLGNBQWMsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLENBQUMsQ0FBQztZQUNqRixDQUFDO1NBQ0YsQ0FBQyxFQUNGLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FDWixJQUFJLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQyxHQUFHLEVBQUU7WUFDbkIsSUFBSSxVQUFVLEVBQUU7Z0JBQ2QsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDO2FBQ2Y7aUJBQU07Z0JBQ0wscUJBQXFCO2dCQUNyQixJQUFJLENBQUMsS0FBSyxDQUFDLFVBQVUsR0FBRyxlQUFlLENBQUM7Z0JBQ3hDLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxHQUFHLEdBQUcsQ0FBQzthQUMxQjtZQUNELElBQUksQ0FBQyx1QkFBdUIsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUN0QyxDQUFDLENBQUMsQ0FDSCxDQUNGLENBQUM7SUFDSixDQUFDO0lBRUQ7Ozs7O09BS0c7SUFDSSxRQUFRLENBQUMsVUFBVSxHQUFHLElBQUk7UUFDL0IsSUFBSSxDQUFDLFNBQVMsQ0FBQyxVQUFVLENBQUMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxDQUFDLFNBQVMsRUFBRSxDQUFDO1FBQ2pFLE9BQU8sSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUM3QyxDQUFDOzJFQXhEVSxpQkFBaUIsc0dBV2xCLHVCQUF1Qjs2REFYdEIsaUJBQWlCOztTQUFqQixpQkFBaUI7dUZBQWpCLGlCQUFpQjtjQUw3QixTQUFTO2VBQUM7Z0JBQ1QsVUFBVSxFQUFFLElBQUk7Z0JBQ2hCLFFBQVEsRUFBRSx1QkFBdUI7Z0JBQ2pDLFFBQVEsRUFBRSxRQUFRO2FBQ25COztzQkFZSSxNQUFNO3VCQUFDLHVCQUF1Qjs2Q0FOMUIsZ0JBQWdCO2tCQUR0QixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRGlyZWN0aXZlLCBFbGVtZW50UmVmLCBJbmplY3QsIE5nWm9uZSwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyB0YWtlVW50aWxEZXN0cm95ZWQgfSBmcm9tICdAYW5ndWxhci9jb3JlL3J4anMtaW50ZXJvcCc7XG5pbXBvcnQgeyBmaW5hbGl6ZSwgT2JzZXJ2YWJsZSwgU3ViamVjdCwgU3Vic2NyaXB0aW9uLCB0YWtlLCB0YXAgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IEFuaW1hdGlvblN0YXRlIH0gZnJvbSAnLi9hbmltYXRpb24uc3RhdGUnO1xuaW1wb3J0IHsgV1NfVEhBTk9TX09QVElPTlNfVE9LRU4gfSBmcm9tICcuL3dzLXRoYW5vcy1vcHRpb25zLnRva2VuJztcbmltcG9ydCB0eXBlIHsgV3NUaGFub3NPcHRpb25zIH0gZnJvbSAnLi93cy10aGFub3Mub3B0aW9ucyc7XG5pbXBvcnQgeyBXc1RoYW5vc1NlcnZpY2UgfSBmcm9tICcuL3dzLXRoYW5vcy5zZXJ2aWNlJztcblxuQERpcmVjdGl2ZSh7XG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIHNlbGVjdG9yOiAnW3dzVGhhbm9zXSwgd3MtdGhhbm9zJyxcbiAgZXhwb3J0QXM6ICd0aGFub3MnLFxufSlcbmV4cG9ydCBjbGFzcyBXc1RoYW5vc0RpcmVjdGl2ZSB7XG4gIHByaXZhdGUgd3NUaGFub3NDb21wbGV0ZVN1YmplY3QgPSBuZXcgU3ViamVjdDx2b2lkPigpO1xuICBwcml2YXRlIHVudGlsRGVzdHJveWVkID0gdGFrZVVudGlsRGVzdHJveWVkKCk7XG5cbiAgQE91dHB1dCgpXG4gIHB1YmxpYyB3c1RoYW5vc0NvbXBsZXRlOiBPYnNlcnZhYmxlPHZvaWQ+ID0gdGhpcy53c1RoYW5vc0NvbXBsZXRlU3ViamVjdC5hc09ic2VydmFibGUoKTtcbiAgcHJpdmF0ZSBzdWJzY3JpcHRpb25zOiBTdWJzY3JpcHRpb24gPSBuZXcgU3Vic2NyaXB0aW9uKCk7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSByZWFkb25seSB2YXBvcml6ZURvbUVsZW06IEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+LFxuICAgIHByaXZhdGUgcmVhZG9ubHkgdGhhbm9zU2VydmljZTogV3NUaGFub3NTZXJ2aWNlLFxuICAgIEBJbmplY3QoV1NfVEhBTk9TX09QVElPTlNfVE9LRU4pXG4gICAgcHJpdmF0ZSByZWFkb25seSB0aGFub3NPcHRpb25zOiBXc1RoYW5vc09wdGlvbnMsXG4gICAgcHJpdmF0ZSByZWFkb25seSBuZ1pvbmU6IE5nWm9uZVxuICApIHt9XG5cbiAgLyoqXG4gICAqXG4gICAqIFZhcG9yaXplIHRoZSBkb20gZWxlbWVudCBvZiB0aGlzIGRpcmVjdGl2ZVxuICAgKiBAcGFyYW0gcmVtb3ZlRWxlbSByZW1vdmUgdGhlIHZhcG9yaXplZCBkb20gZWxlbWVudCBvciBibGVuZCBiYWNrIGluIGFmdGVyIGEgd2hpbGVcbiAgICpcbiAgICogU3Vic2NyaWJlIHRvIHRoZSByZXR1cm5lZCBvYnNlcnZhYmxlIHRvIHN0YXJ0IHZhcG9yaXphdGlvblxuICAgKlxuICAgKi9cbiAgcHVibGljIHZhcG9yaXplJChyZW1vdmVFbGVtID0gdHJ1ZSk6IE9ic2VydmFibGU8QW5pbWF0aW9uU3RhdGU+IHtcbiAgICBjb25zdCBlbGVtID0gdGhpcy52YXBvcml6ZURvbUVsZW0ubmF0aXZlRWxlbWVudDtcbiAgICByZXR1cm4gdGhpcy50aGFub3NTZXJ2aWNlLnZhcG9yaXplKGVsZW0pLnBpcGUoXG4gICAgICB0YXAoe1xuICAgICAgICBlcnJvcjogKGVycm9yKSA9PiB7XG4gICAgICAgICAgY29uc29sZS5lcnJvcignRXJyb3IgdmFwb3JpemluZycsIGVycm9yLCB7IGVsZW1Ub3ZhcG9yaXplOiBlbGVtLCByZW1vdmVFbGVtIH0pO1xuICAgICAgICB9LFxuICAgICAgfSksXG4gICAgICBmaW5hbGl6ZSgoKSA9PlxuICAgICAgICB0aGlzLm5nWm9uZS5ydW4oKCkgPT4ge1xuICAgICAgICAgIGlmIChyZW1vdmVFbGVtKSB7XG4gICAgICAgICAgICBlbGVtLnJlbW92ZSgpO1xuICAgICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICAvLyBtYWtlIHZpc2libGUgYWdhaW5cbiAgICAgICAgICAgIGVsZW0uc3R5bGUudHJhbnNpdGlvbiA9ICdvcGFjaXR5IDcwMG1zJztcbiAgICAgICAgICAgIGVsZW0uc3R5bGUub3BhY2l0eSA9ICcxJztcbiAgICAgICAgICB9XG4gICAgICAgICAgdGhpcy53c1RoYW5vc0NvbXBsZXRlU3ViamVjdC5uZXh0KCk7XG4gICAgICAgIH0pXG4gICAgICApXG4gICAgKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBWYXBvcml6ZSB0aGUgZG9tIGVsZW1lbnQgb2YgdGhpcyBkaXJlY3RpdmVcbiAgICogQHBhcmFtIHJlbW92ZUVsZW0gcmVtb3ZlIHRoZSB2YXBvcml6ZWQgZG9tIGVsZW1lbnQgb3IgYmxlbmQgYmFjayBpbiBhZnRlciBhIHdoaWxlXG4gICAqXG4gICAqIEBEZXByZWNhdGVkIHVzZSB2YXBvcml6ZUFuZFNjcm9sbEludG9WaWV3JCBpbnN0ZWFkIGFuZCBzdWJzY3JpYmUgdG8gaXRcbiAgICovXG4gIHB1YmxpYyB2YXBvcml6ZShyZW1vdmVFbGVtID0gdHJ1ZSk6IE9ic2VydmFibGU8dm9pZD4ge1xuICAgIHRoaXMudmFwb3JpemUkKHJlbW92ZUVsZW0pLnBpcGUodGhpcy51bnRpbERlc3Ryb3llZCkuc3Vic2NyaWJlKCk7XG4gICAgcmV0dXJuIHRoaXMud3NUaGFub3NDb21wbGV0ZS5waXBlKHRha2UoMSkpO1xuICB9XG59XG4iXX0=