@omnedia/ngx-cryptic-text
Version:
A simple component library to animate text.
99 lines (94 loc) • 4.62 kB
JavaScript
import * as i1 from '@angular/common';
import { isPlatformBrowser, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { signal, PLATFORM_ID, Input, ViewChild, Inject, ChangeDetectionStrategy, Component } from '@angular/core';
class NgxCrypticTextComponent {
platformId;
crypticTextElement;
styleClass;
set textInput(text) {
this.text = text;
this.generateText();
}
text;
templateText = signal('', ...(ngDevMode ? [{ debugName: "templateText" }] : []));
animationSpeed = 800;
animateOnce = false;
animated = false;
isInView = signal(false, ...(ngDevMode ? [{ debugName: "isInView" }] : []));
intersectionObserver;
constructor(platformId) {
this.platformId = platformId;
}
ngAfterViewInit() {
if (!this.text) {
throw new Error('om-cryptic-text: No text provided!');
}
if (isPlatformBrowser(this.platformId)) {
this.intersectionObserver = new IntersectionObserver(([entry]) => {
if (!this.isInView() && entry.isIntersecting && (!this.animateOnce || this.animateOnce && !this.animated)) {
this.generateText();
}
this.isInView.set(entry.isIntersecting);
});
this.intersectionObserver.observe(this.crypticTextElement.nativeElement);
}
}
ngOnDestroy() {
if (this.intersectionObserver) {
this.intersectionObserver.disconnect();
}
}
generateText() {
this.animated = true;
this.templateText.set('');
const alphabets = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
const getRandomInt = (max) => Math.floor(Math.random() * max);
let iterations = 0;
const interval = setInterval(() => {
if (iterations < this.text.length) {
let displayText = "";
this.text.split('').forEach((char, index) => {
displayText += char === " " ? char : index <= iterations ? this.text[index] : alphabets[getRandomInt(26)];
});
this.templateText.set(displayText);
iterations = iterations + 0.1;
}
else {
clearInterval(interval);
}
}, this.animationSpeed / (this.text.length * 10));
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NgxCrypticTextComponent, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: NgxCrypticTextComponent, isStandalone: true, selector: "om-cryptic-text", inputs: { styleClass: "styleClass", textInput: ["text", "textInput"], animationSpeed: "animationSpeed", animateOnce: "animateOnce" }, viewQueries: [{ propertyName: "crypticTextElement", first: true, predicate: ["OmCrypticTextElement"], descendants: true }], ngImport: i0, template: "<p [ngClass]=\"styleClass\" #OmCrypticTextElement>{{ templateText() }}</p>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NgxCrypticTextComponent, decorators: [{
type: Component,
args: [{ selector: 'om-cryptic-text', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p [ngClass]=\"styleClass\" #OmCrypticTextElement>{{ templateText() }}</p>\r\n" }]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Inject,
args: [PLATFORM_ID]
}] }], propDecorators: { crypticTextElement: [{
type: ViewChild,
args: ["OmCrypticTextElement"]
}], styleClass: [{
type: Input,
args: ["styleClass"]
}], textInput: [{
type: Input,
args: ["text"]
}], animationSpeed: [{
type: Input,
args: ["animationSpeed"]
}], animateOnce: [{
type: Input,
args: ["animateOnce"]
}] } });
/*
* Public API Surface of ngx-cryptic-text
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxCrypticTextComponent };
//# sourceMappingURL=omnedia-ngx-cryptic-text.mjs.map