@obliczeniowo/elementary
Version:
Library made in Angular version 20
254 lines (245 loc) • 12 kB
JavaScript
import { trigger, state, transition, style, animate } from '@angular/animations';
import * as i0 from '@angular/core';
import { input, Component, ViewChild, signal, effect, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Point2D } from '@obliczeniowo/elementary/classes';
import { keysValues } from '@obliczeniowo/elementary/objects';
class Animations {
/**
* Rotate animation by 180 degreases
*
* in HTML use:
* <div [@openClose]="isOpen ? 'open' : 'closed'">
* to provide animation
*/
static rotate180deg = trigger('openClose', [
state('open', style({
transform: 'rotate(180deg)'
})),
state('closed', style({
transform: 'rotate(0deg)'
})),
transition('open => closed', [
animate('0.25s')
]),
transition('closed => open', [
animate('0.25s')
]),
]);
/**
* Fade in/out animation
*
* in HTML use:
* <div [@fadeInOut]="show ? 'in' : 'out'">
*/
static fadeInOut(inSeconds = 0.5, outSeconds = 0.5) {
return trigger('fadeInOut', [
state('in', style({
opacity: 1
})),
state('out', style({
opacity: 0
})),
transition('in => out', [
animate(`${outSeconds}s`)
]),
transition('out => in', [
animate(`${inSeconds}s`)
]),
]);
}
}
class FadeInOutComponent {
state = input(true);
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: FadeInOutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: FadeInOutComponent, isStandalone: false, selector: "obl-fade-in-out", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"fade\" [@fadeInOut]=\"state() ? 'in' : 'out'\">\n <ng-content select=\"[in]\"></ng-content>\n</div>\n<div class=\"fade\" [@fadeInOut]=\"state() ? 'out' : 'in'\">\n <ng-content select=\"[out]\"></ng-content>\n</div>\n", styles: [":host{position:relative;display:inline-flex}.fade{position:absolute;inset:0;display:flex;justify-content:center;align-items:center}\n"], animations: [
Animations.fadeInOut(1, 1)
] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: FadeInOutComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-fade-in-out', animations: [
Animations.fadeInOut(1, 1)
], standalone: false, template: "<div class=\"fade\" [@fadeInOut]=\"state() ? 'in' : 'out'\">\n <ng-content select=\"[in]\"></ng-content>\n</div>\n<div class=\"fade\" [@fadeInOut]=\"state() ? 'out' : 'in'\">\n <ng-content select=\"[out]\"></ng-content>\n</div>\n", styles: [":host{position:relative;display:inline-flex}.fade{position:absolute;inset:0;display:flex;justify-content:center;align-items:center}\n"] }]
}] });
/* eslint-disable @typescript-eslint/no-unsafe-argument */
const animations = {
opacity: (root, _, intersectionRatio, entry) => {
root.style.opacity = intersectionRatio.toString();
},
scale: (_, animationContainer, intersectionRatio, entry) => {
animationContainer.style.transform = `scale(${50 * intersectionRatio + 50}%)`;
},
slideLeft: (_, animationContainer, intersectionRatio, entry) => {
animationContainer.style.transform = `translate(${-100 + 100 * intersectionRatio}%)`;
},
slideRight: (_, animationContainer, intersectionRatio, entry) => {
animationContainer.style.transform = `translate(${100 - 100 * intersectionRatio}%)`;
},
};
const threshold = new Array(100).fill(0).map((_, index) => index / 100);
class ScrollAnimationComponent {
root;
options = {
root: null,
rootMargin: '0px',
threshold,
};
animations = input([]);
container;
observer;
constructor(root) {
this.root = root;
}
ngAfterViewInit() {
const root = this.root.nativeElement;
this.observer = new IntersectionObserver((entries, _) => {
entries.forEach((entry) => {
if (this.animations().length) {
this.animations().forEach((animation) => {
const cb = animations[animation];
if (animations[animation]) {
cb(root, this.container.nativeElement, entry.boundingClientRect.height < window.innerHeight
? entry.intersectionRatio
: 1, entry);
}
});
}
});
}, this.options);
this.observer.observe(root);
}
ngOnDestroy() {
this.observer.disconnect();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScrollAnimationComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: ScrollAnimationComponent, isStandalone: false, selector: "obl-scroll-animation", inputs: { animations: { classPropertyName: "animations", publicName: "animations", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div #container>\n <ng-content></ng-content>\n</div>", styles: [":host{display:block}\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScrollAnimationComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-scroll-animation', standalone: false, template: "<div #container>\n <ng-content></ng-content>\n</div>", styles: [":host{display:block}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { container: [{
type: ViewChild,
args: ['container']
}] } });
class TypeTextComponent {
text = input.required();
interval = input(10);
animText = signal('');
time;
constructor() {
effect(() => {
this.text();
this.animText.set('');
const clear = (clear = true) => {
clearInterval(this.time);
if (clear) {
this.animText.set('');
}
this.time = undefined;
};
if (this.time) {
clear();
}
this.time = setInterval(() => {
if (this.text().length > this.animText().length) {
this.animText.set(this.text().substring(0, this.animText().length + 1));
}
else {
clear(false);
}
}, this.interval());
}, {
allowSignalWrites: true
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TypeTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: TypeTextComponent, isStandalone: false, selector: "obl-type-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "{{ animText() }}{{ animText().length !== text().length ? '_' : '' }}", styles: [":host{white-space:pre-line}\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TypeTextComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-type-text', standalone: false, template: "{{ animText() }}{{ animText().length !== text().length ? '_' : '' }}", styles: [":host{white-space:pre-line}\n"] }]
}], ctorParameters: () => [] });
class AnimationsModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AnimationsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: AnimationsModule, declarations: [FadeInOutComponent,
ScrollAnimationComponent,
TypeTextComponent], imports: [CommonModule], exports: [FadeInOutComponent,
ScrollAnimationComponent,
TypeTextComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AnimationsModule, imports: [CommonModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AnimationsModule, decorators: [{
type: NgModule,
args: [{
declarations: [
FadeInOutComponent,
ScrollAnimationComponent,
TypeTextComponent
],
imports: [
CommonModule
],
exports: [
FadeInOutComponent,
ScrollAnimationComponent,
TypeTextComponent
]
}]
}] });
class OblSourceToTargetAnimation {
start;
end;
element = document.createElement('div');
timer;
count = 0;
interval = 10;
maxRounds = 80;
constructor(target, destination, message, options) {
const r = target.getBoundingClientRect();
const r2 = destination.getBoundingClientRect();
this.start = new Point2D(r.x, r.y);
this.end = new Point2D(r2.x, r2.y);
this.element.style.top = this.start.y + 'px';
this.element.style.left = this.start.x + 'px';
this.element.style.backgroundColor = 'white';
this.element.style.padding = '5px';
keysValues(options?.styles || {}).forEach(([key, value]) => (this.element.style[key] = value));
this.element.style.position = 'absolute';
this.element.innerText = message;
this.interval = options?.interval || 10;
this.maxRounds = options?.maxRounds || 80;
}
startAnim() {
document.body.appendChild(this.element);
const { maxRounds, interval } = this;
this.timer = setInterval(() => {
this.count++;
if (this.count > maxRounds) {
this.remove();
}
else {
const pos = this.end
.subtract(this.start)
.multiply((1 / maxRounds) * this.count)
.add(this.start);
this.element.style.opacity =
((maxRounds - this.count) * 0.5) / maxRounds + 0.5 + '';
this.element.style.top = pos.y + 'px';
this.element.style.left = pos.x + 'px';
}
}, interval);
}
remove() {
this.count = 0;
clearInterval(this.timer);
this.element.style.top = this.start.y + 'px';
this.element.style.left = this.start.x + 'px';
document.body.removeChild(this.element);
}
}
/**
* Generated bundle index. Do not edit.
*/
export { Animations, AnimationsModule, FadeInOutComponent, OblSourceToTargetAnimation, ScrollAnimationComponent, TypeTextComponent };
//# sourceMappingURL=obliczeniowo-elementary-animations.mjs.map