old-portfolio/frontend-hideyoshi.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixes ClickedOutside Directive

Browse Source
This commit is contained in:
Vitor Hideyoshi
2023-10-14 18:45:23 -03:00
parent 20ff1da64d
commit eda55e6c0e
1 changed files with 46 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/app/shared/directive/clicked-outside/clicked-outside.directive.ts
View File

@@ -28,16 +28,17 @@ export class ClickedOutsideDirective implements AfterViewInit, OnDestroy {
ngAfterViewInit(): void { ngAfterViewInit(): void {
const mouseDownListener$ = fromEvent(document, 'mousedown'); const clickListener$ = fromEvent(this.document, 'click');
const mouseUpListener$ = fromEvent(document,'mouseup');
this.eventListener = mouseUpListener$.pipe( this.eventListener = clickListener$.pipe(
combineLatestWith(mouseDownListener$), filter((click) => {
filter(([downClick, upClick]) => { return (
return (downClick.target as HTMLElement) (
.contains(this.element.nativeElement) && (!this.isInside( this.isOutside(click.target as HTMLElement) ||
upClick.target as HTMLElement this.isInIncludedList(click.target as HTMLElement)
) || this.includedList(upClick.target as HTMLElement)); ) &&
this.notInIgnoredList(click.target as HTMLElement)
);
}) })
). subscribe( () => { ). subscribe( () => {
!this.clickOutsideStopWatching && this.clickOutside.emit(); !this.clickOutsideStopWatching && this.clickOutside.emit();
@@ -49,31 +50,44 @@ export class ClickedOutsideDirective implements AfterViewInit, OnDestroy {
this.eventListener?.unsubscribe(); this.eventListener?.unsubscribe();
} }
private isInside(elementToCheck: HTMLElement): boolean { private isOutside(elementToCheck: HTMLElement): boolean {
return ( let status = true;
elementToCheck === this.element.nativeElement if (this.element.nativeElement === elementToCheck ||
|| this.element.nativeElement.contains(elementToCheck) this.element.nativeElement.contains(elementToCheck)) {
|| (this.ignoreElementList && this.checkIgnoredList(elementToCheck)) status = false;
}
); console.log('isOutside', status)
return status;
} }
private checkIgnoredList(elementToCheck: HTMLElement): boolean { private notInIgnoredList(elementToCheck: HTMLElement): boolean {
return this.ignoreElementList.some( if (!this.ignoreElementList || this.ignoreElementList.length === 0) {
(ignoreElement) => { return false;
return ignoreElement === elementToCheck || }
ignoreElement.contains(elementToCheck)
} let validateIsIgnored = (ignoreElement: HTMLDivElement): boolean => {
) return ignoreElement === elementToCheck
|| ignoreElement.contains(elementToCheck)
|| elementToCheck.contains(ignoreElement)
}
return !this.ignoreElementList.some(validateIsIgnored)
} }
private includedList(elementToCheck: HTMLElement): boolean { private isInIncludedList(elementToCheck: HTMLElement): boolean {
return this.includeClickedOutside && this.includeClickedOutside.some( if (!this.includeClickedOutside || this.includeClickedOutside.length === 0) {
(includedElement) => { return false;
return includedElement === elementToCheck || }
includedElement.contains(elementToCheck)
} let validateIsIncluded = (includedElement: HTMLDivElement): boolean => {
) return includedElement === elementToCheck
|| includedElement.contains(elementToCheck)
|| elementToCheck.contains(includedElement)
}
return !this.includeClickedOutside.some(validateIsIncluded)
} }
} }