Skip to content

Commit

Permalink
feat: Add support Angular 18
Browse files Browse the repository at this point in the history 
-Update Nx Dependencies with Angular
-Refactor code to migrate a signal API currently stable
  • Loading branch information
@SkyZeroZx
SkyZeroZx committed May 26, 2024
1 parent b5c1433 commit 5b987a0
Show file tree
Hide file tree
Showing 6 changed files with 11,874 additions and 9,370 deletions.
25 changes: 19 additions & 6 deletions apps/angular-typed-writer/project.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,25 @@
"targets": {
"build": {
"executor": "@angular-devkit/build-angular:browser",
"outputs": ["{options.outputPath}"],
"outputs": [
"{options.outputPath}"
],
"options": {
"outputPath": "dist/apps/angular-typed-writer",
"index": "apps/angular-typed-writer/src/index.html",
"main": "apps/angular-typed-writer/src/main.ts",
"polyfills": ["zone.js"],
"polyfills": [
"zone.js"
],
"tsConfig": "apps/angular-typed-writer/tsconfig.app.json",
"assets": [
"apps/angular-typed-writer/src/favicon.ico",
"apps/angular-typed-writer/src/assets",
"apps/angular-typed-writer/src/robots.txt"
],
"styles": ["apps/angular-typed-writer/src/styles.scss"],
"styles": [
"apps/angular-typed-writer/src/styles.scss"
],
"scripts": []
},
"configurations": {
Expand Down Expand Up @@ -70,7 +76,9 @@
},
"lint": {
"executor": "@nx/eslint:lint",
"outputs": ["{options.outputFile}"],
"outputs": [
"{options.outputFile}"
],
"options": {
"lintFilePatterns": [
"apps/angular-typed-writer/**/*.ts",
Expand All @@ -80,7 +88,9 @@
},
"test": {
"executor": "@nx/jest:jest",
"outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
"outputs": [
"{workspaceRoot}/coverage/{projectRoot}"
],
"options": {
"jestConfig": "apps/angular-typed-writer/jest.config.ts"
}
Expand All @@ -90,6 +100,9 @@
"options": {
"buildTarget": "angular-typed-writer:build"
}
},
"deploy": {
"executor": "angular-cli-ghpages:deploy"
}
}
}
}
148 changes: 67 additions & 81 deletions libs/ngx-typed-writer/src/lib/ngx-typed-writer.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,16 @@ import {
ChangeDetectionStrategy,
Component,
ElementRef,
EventEmitter,
Inject,
Input,
OnDestroy,
OnInit,
Output,
PLATFORM_ID,
Renderer2,
ViewChild,
booleanAttribute,
input,
model,
output,
viewChild,
} from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import {
Expand All @@ -22,12 +23,12 @@ import {

@Component({
selector: 'ngx-typed-writer',
changeDetection : ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<span #typedText> </span>
<span #cursorRef class="typing-cursor" *ngIf="showCursor"
>{{ cursorChar }}
</span>
@if (showCursor()) {
<span #cursorRef class="typing-cursor">{{ cursorChar() }} </span>
}
`,
styles: [
`
Expand Down Expand Up @@ -58,48 +59,35 @@ import {
],
})
export class NgxTypedWriterComponent implements OnInit, OnDestroy {
@ViewChild('typedText', { static: true }) typedTextRef!: ElementRef;
@ViewChild('cursorRef')
cursor!: ElementRef;
typedTextRef = viewChild<ElementRef>('typedText');

cursor = viewChild<ElementRef>('cursorRef');

@Input()
strings: string[] = [];
strings = model<string[]>([]);

@Input()
typeSpeed = 40;
typeSpeed = input(40);

@Input()
startDelay = 0;
startDelay = input(0);

@Input()
backSpeed = 40;
backSpeed = input(40);

@Input()
smartBackspace = false;
smartBackspace = input(false, { transform: booleanAttribute });

@Input()
shuffle = false;
shuffle = input(false, { transform: booleanAttribute });

@Input()
backDelay = 1000;
backDelay = input(1000);

@Input()
isHTML = false;
isHTML = input(false, { transform: booleanAttribute });

@Input()
fadeOut = false;
fadeOut = input(false, { transform: booleanAttribute });

@Input()
loop = true;
loop = input(true, { transform: booleanAttribute });

@Input()
showCursor = true;
showCursor = input(true, { transform: booleanAttribute });

@Input()
cursorChar = '|';
cursorChar = input('|');

@Input()
fadeOutDelay = 500;
fadeOutDelay = input(500);

private currentStringIndex = 0;
private currentString = '';
Expand All @@ -108,18 +96,15 @@ export class NgxTypedWriterComponent implements OnInit, OnDestroy {
private timeout!: NodeJS.Timeout;
private stopNum = 0;

@Output()
destroy = new EventEmitter<void>();
destroy = output<void>();

@Output()
initTyped = new EventEmitter<void>();
initTyped = output<void>();

@Output()
completeLoop = new EventEmitter<void>();
completeLoop = output<void>();

constructor(
@Inject(PLATFORM_ID) private platformId: object,
private renderer2: Renderer2
private renderer2: Renderer2,
) {}

ngOnInit(): void {
Expand All @@ -132,24 +117,25 @@ export class NgxTypedWriterComponent implements OnInit, OnDestroy {
}

private init(): void {
this.strings = shuffleStringsIfNeeded(this.shuffle, this.strings);
this.currentString = this.strings[this.currentStringIndex];
this.strings.set(shuffleStringsIfNeeded(this.shuffle(), this.strings()));
this.currentString = this.strings()[this.currentStringIndex];

this.timeout = setTimeout(() => {
this.typeString();
this.initTyped.emit();
}, this.startDelay);
}, this.startDelay());
}

private typeString(): void {
if (this.isTypingPaused) return;

if (this.fadeOut) {
const typedElement = this.typedTextRef.nativeElement as HTMLSpanElement;
if (this.fadeOut()) {
const typedElement = this.typedTextRef()
?.nativeElement as HTMLSpanElement;
this.renderer2.removeClass(typedElement, FADE_OUT_CLASS);

if (this.showCursor) {
const cursorElement = this.cursor?.nativeElement as HTMLSpanElement;
if (this.showCursor()) {
const cursorElement = this.cursor()?.nativeElement as HTMLSpanElement;
this.renderer2.removeClass(cursorElement, FADE_OUT_CLASS);
}
}
Expand All @@ -162,40 +148,40 @@ export class NgxTypedWriterComponent implements OnInit, OnDestroy {
this.isTypingPaused = false;
this.timeout = setTimeout(() => {
this.backspaceString();
}, this.backDelay);
}, this.typeSpeed);
}, this.backDelay());
}, this.typeSpeed());
}
}

private typeCharacter(): void {
this.timeout = setTimeout(() => {
this.currentStringPosition = typeHtmlChars(
this.isHTML,
this.isHTML(),
this.currentString,
this.currentStringPosition
this.currentStringPosition,
);

const nextString = this.currentString.substring(
0,
this.currentStringPosition + 1
this.currentStringPosition + 1,
);
const lastItem = this.strings.at(-1);
const lastItem = this.strings().at(-1);

this.typedTextRef.nativeElement.innerHTML = nextString;
this.typedTextRef()!.nativeElement.innerHTML = nextString;

this.currentStringPosition++;

if (nextString === lastItem && !this.loop) {
if (nextString === lastItem && !this.loop()) {
this.completeLoop.emit();
return;
}
this.typeString();
}, this.typeSpeed);
}, this.typeSpeed());
}

private backspaceString(): void {
if (this.isTypingPaused) return;
if (this.fadeOut) {
if (this.fadeOut()) {
this.initFadeOut();
return;
}
Expand All @@ -208,43 +194,43 @@ export class NgxTypedWriterComponent implements OnInit, OnDestroy {
this.isTypingPaused = false;
this.currentStringIndex++;

if (this.currentStringIndex >= this.strings.length) {
if (this.loop) {
if (this.currentStringIndex >= this.strings().length) {
if (this.loop()) {
this.currentStringIndex = 0;
// this.typeString();
} else {
return; // Finished typing all strings
}
}

this.currentString = this.strings[this.currentStringIndex];
this.currentString = this.strings()[this.currentStringIndex];
this.timeout = setTimeout(() => {
this.typeString();
}, this.typeSpeed);
}, this.typeSpeed);
}, this.typeSpeed());
}, this.typeSpeed());
}
}

private backspaceCharacter(): void {
const currentString = this.typedTextRef.nativeElement.innerHTML;
const currentString = this.typedTextRef()?.nativeElement.innerHTML;
this.currentStringPosition = backSpaceHtmlChars(
this.isHTML,
this.isHTML(),
this.currentString,
this.currentStringPosition
this.currentStringPosition,
);

const curStringAtPosition = currentString.substring(
0,
this.currentStringPosition
this.currentStringPosition,
);

this.typedTextRef.nativeElement.innerHTML = curStringAtPosition;
(this.typedTextRef()!.nativeElement as HTMLElement) .innerHTML = curStringAtPosition;

this.timeout = setTimeout(() => {
// if smartBack is enabled
if (this.smartBackspace) {
if (this.smartBackspace()) {
// the remaining part of the current string is equal of the same part of the new string
const nextStringPartial = this.strings[this.currentStringIndex + 1];
const nextStringPartial = this.strings()[this.currentStringIndex + 1];
const compare =
curStringAtPosition ===
nextStringPartial?.substring(0, this.currentStringPosition);
Expand All @@ -271,15 +257,15 @@ export class NgxTypedWriterComponent implements OnInit, OnDestroy {
}
this.typeString();
}
}, this.backSpeed);
}, this.backSpeed());
}

private initFadeOut() {
const typedElement = this.typedTextRef.nativeElement as HTMLSpanElement;
const typedElement = this.typedTextRef()?.nativeElement as HTMLSpanElement;
this.renderer2.addClass(typedElement, FADE_OUT_CLASS);

if (this.showCursor) {
const cursorElement = this.cursor.nativeElement as HTMLSpanElement;
if (this.showCursor()) {
const cursorElement = this.cursor()?.nativeElement as HTMLSpanElement;
this.renderer2.addClass(cursorElement, FADE_OUT_CLASS);
}

Expand All @@ -288,16 +274,16 @@ export class NgxTypedWriterComponent implements OnInit, OnDestroy {
typedElement.innerHTML = '';

// Resets current string if end of loop reached
if (this.strings.length > this.currentStringIndex) {
if (this.strings().length > this.currentStringIndex) {
this.currentStringPosition = 0;
this.currentString = this.strings[this.currentStringIndex];
this.currentString = this.strings()[this.currentStringIndex];
this.typeString();
} else {
this.currentStringPosition = 0;
this.currentStringIndex = 0;
this.currentString = this.strings[this.currentStringIndex];
this.currentString = this.strings()[this.currentStringIndex];
this.typeString(); // this.currentStringIndex++;
}
}, this.fadeOutDelay);
}, this.fadeOutDelay());
}
}
3 changes: 1 addition & 2 deletions libs/ngx-typed-writer/src/lib/ngx-typed-writer.module.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgxTypedWriterComponent } from './ngx-typed-writer.component';

@NgModule({
imports: [CommonModule],
imports: [],
declarations: [NgxTypedWriterComponent],
exports: [NgxTypedWriterComponent],
})
Expand Down
Loading

0 comments on commit 5b987a0

Please sign in to comment.