Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

code refactoring for home.component.ts file #363

Merged
merged 1 commit into from
Nov 16, 2023
Merged

code refactoring for home.component.ts file #363

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 33 additions & 44 deletions src/app/home/home.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,10 @@ export class HomeComponent implements AfterViewInit, OnDestroy {
});

const editor: HTMLElement = document.getElementById(this.EDITOR_KEY)!;
if (this.isIndexHighlightSelected(editor)) return;
if (this.highlightedMarkingIndex >= 0) {
this.processTextMarkingSelected(editor);
return;
}

this.slideFadeAnimationCard(textMarkingIndex);

Expand Down Expand Up @@ -277,22 +280,16 @@ export class HomeComponent implements AfterViewInit, OnDestroy {
}

/**
* Checks if a highlighting has been selected while a chosen suggestion has been hit.
* Selected marking is processed and replaced by the selected suggestion option.
*
* @param {any} editor - The editor element to be updated.
* */
isIndexHighlightSelected(editor: any): boolean {
let isSelected = false;

if (this.highlightedMarkingIndex >= 0) {
this.cardSuggestionsToRemove.forEach((removeItem) => {
this.replaceSuggestedNode(editor, removeItem);
});
this.postSuggestedText(editor);
isSelected = true;
}
processTextMarkingSelected(editor: any): void {
this.cardSuggestionsToRemove.forEach((removeItem) => {
this.replaceSuggestedNode(editor, removeItem);
});

return isSelected;
this.postSuggestedText(editor);
}

/**
Expand Down Expand Up @@ -353,9 +350,10 @@ export class HomeComponent implements AfterViewInit, OnDestroy {
'.sticky .card'
) as NodeListOf<HTMLElement>;

if (this.checkMoveUpAnimationState(cards)) {
this.postSuggestedText(editor);
} else if (this.suggestedMarkingCardCounter === cards.length) {
if (
this.checkMoveUpAnimationState(cards) ||
this.suggestedMarkingCardCounter === cards.length
) {
this.postSuggestedText(editor);
}
}
Expand All @@ -368,20 +366,11 @@ export class HomeComponent implements AfterViewInit, OnDestroy {
* @returns {boolean} - Returns `true` if any card in the provided list still contains the animation classes; otherwise, returns `false`.
*/
checkMoveUpAnimationState(cards: NodeListOf<HTMLElement>): boolean {
let hasAnimationClass = false;

cards.forEach((cardClassList) => {
if (
!cardClassList.classList.value.includes('move-up-animation') &&
!cardClassList.classList.value.includes(
'move-up-multiple-animation'
)
) {
hasAnimationClass = true;
}
});

return hasAnimationClass;
return Array.from(cards).some(
(card) =>
card.classList.contains('move-up-animation') ||
card.classList.contains('move-up-multiple-animation')
);
}

/**
Expand Down Expand Up @@ -421,9 +410,7 @@ export class HomeComponent implements AfterViewInit, OnDestroy {
editor.childNodes.forEach(
(childNode: ChildNode, index: number) => {
const isLastChildNode =
index === editor.childNodes.length - 1
? true
: false;
index === editor.childNodes.length - 1;
const p = document.createElement('p');
p.innerHTML = childNode.textContent!;
if (childNode.textContent === this.EMPTY_STRING) {
Expand Down Expand Up @@ -460,7 +447,9 @@ export class HomeComponent implements AfterViewInit, OnDestroy {
});
}

private seperateParagraphIndex(tempProcessedText: ProcessedText | undefined): void {
private seperateParagraphIndex(
tempProcessedText: ProcessedText | undefined
): void {
let tempIndexValue = 0;
tempProcessedText?.textMarkings.forEach((textMarking, index) => {
if (tempIndexValue > textMarking.to) {
Expand Down Expand Up @@ -516,7 +505,6 @@ export class HomeComponent implements AfterViewInit, OnDestroy {
node.textContent.includes(currentNode) &&
isWithinRange === 0 // if the index is within range
) {

const lengthDiff = Math.abs(
suggestedNode.length - currentNode.length
);
Expand Down Expand Up @@ -546,11 +534,12 @@ export class HomeComponent implements AfterViewInit, OnDestroy {
* @param {number} textMarkingIndex selected marking index
*/
updateTempMarkings(textMarkingIndex: number): void {
if(this.characterCountPrePost === 0) return; // if no changes are needed
if (this.characterCountPrePost === 0) return; // if no changes are needed
const pIndexSelected = this.findRange(textMarkingIndex);

this.tempProcessedText!.textMarkings.forEach((textMarking, index) => {
if (index > textMarkingIndex &&
if (
index > textMarkingIndex &&
pIndexSelected[0] <= index &&
pIndexSelected[1] > index
) {
Expand All @@ -560,7 +549,7 @@ export class HomeComponent implements AfterViewInit, OnDestroy {
});
}

private findRange(index: number): [number, number]{
private findRange(index: number): [number, number] {
let rangeStart: number | null = null;
let rangeEnd: number | null = null;

Expand All @@ -585,11 +574,13 @@ export class HomeComponent implements AfterViewInit, OnDestroy {
}

// Handle edge case for the first index and last index
rangeEnd = rangeEnd === null ? this.tempProcessedText!.textMarkings.length : rangeEnd;
rangeEnd =
rangeEnd === null
? this.tempProcessedText!.textMarkings.length
: rangeEnd;
rangeStart = rangeStart === null ? 0 : rangeStart;

return [rangeStart, rangeEnd]

return [rangeStart, rangeEnd];
}

// TODO there might be a bug here that creates double spaces in the text, test more
Expand Down Expand Up @@ -931,9 +922,7 @@ export class HomeComponent implements AfterViewInit, OnDestroy {
editor.childNodes.forEach(
(childNode: ChildNode, index: number) => {
const isLastChildNode =
index === editor.childNodes.length - 1
? true
: false;
index === editor.childNodes.length - 1;
const p: HTMLParagraphElement =
document.createElement('p');
p.innerHTML = childNode.textContent!;
Expand Down