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

[v0.0.1] Fixes Drag Event in ClickOutside Directive

Browse Source
This commit is contained in:
Vitor Hideyoshi
2022-09-12 06:18:56 -03:00
parent f2c6550166
commit 835c4d0cc4
2 changed files with 23 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/header/header.component.ts
View File

@@ -97,6 +97,7 @@ export class HeaderComponent {
this.navSliderStatus = false; this.navSliderStatus = false;
this.userSliderStatus = false; this.userSliderStatus = false;
this.profileDropdownState = false;
} }
private createSignupPopup() { private createSignupPopup() {
@@ -119,6 +120,7 @@ export class HeaderComponent {
this.navSliderStatus = false; this.navSliderStatus = false;
this.userSliderStatus = false; this.userSliderStatus = false;
this.profileDropdownState = false;
} }
private closeLoginPopup() { private closeLoginPopup() {

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

@@ -1,6 +1,6 @@
import { DOCUMENT } from '@angular/common'; import { DOCUMENT } from '@angular/common';
import { AfterViewInit, Directive, ElementRef, EventEmitter, Inject, Input, OnDestroy, Output, ViewChild } from '@angular/core'; import { AfterViewInit, Directive, ElementRef, EventEmitter, Inject, Input, OnDestroy, Output, ViewChild } from '@angular/core';
import { filter, fromEvent, Subscription } from 'rxjs'; import { combineLatest, combineLatestWith, filter, fromEvent, merge, Subscription } from 'rxjs';
@Directive({ @Directive({
selector: '[appClickedOutside]' selector: '[appClickedOutside]'
@@ -19,7 +19,7 @@ export class ClickedOutsideDirective implements AfterViewInit, OnDestroy {
@Output() @Output()
clickOutside: EventEmitter<void> = new EventEmitter(); clickOutside: EventEmitter<void> = new EventEmitter();
clickListener!: Subscription; eventListener!: Subscription;
constructor( constructor(
private element: ElementRef, private element: ElementRef,
@@ -28,20 +28,25 @@ export class ClickedOutsideDirective implements AfterViewInit, OnDestroy {
ngAfterViewInit(): void { ngAfterViewInit(): void {
const mouseDownListener$ = fromEvent(document, 'mousedown');
const mouseUpListener$ = fromEvent(document,'mouseup');
this.eventListener = mouseUpListener$.pipe(
this.clickListener = fromEvent(this.document, 'click') combineLatestWith(mouseDownListener$),
.pipe( filter(([downClick, upClick]) => {
filter((event) => { return (downClick.target as HTMLElement)
return !this.isInside(event.target as HTMLElement) || this.includedList(event.target as HTMLElement); .contains(this.element.nativeElement) && (!this.isInside(
upClick.target as HTMLElement
) || this.includedList(upClick.target as HTMLElement));
}) })
). subscribe( () => { ). subscribe( () => {
!this.clickOutsideStopWatching && this.clickOutside.emit(); !this.clickOutsideStopWatching && this.clickOutside.emit();
}); });
} }
ngOnDestroy(): void { ngOnDestroy(): void {
this.clickListener?.unsubscribe(); this.eventListener?.unsubscribe();
} }
private isInside(elementToCheck: HTMLElement): boolean { private isInside(elementToCheck: HTMLElement): boolean {