Merge pull request #34 from HideyoshiNakazone/fixes-clicked-outside

Fixes Clicked Outside

.github/workflows/docker-publish.yml

@@ -28,9 +28,9 @@ jobs:
 
   docker:
 
-
     needs: [build]
     runs-on: ubuntu-latest
+    
     steps:
 
       - name: Login to DockerHub

server.js

@@ -10,7 +10,7 @@ app.use(cors());
 app.use(express.static(`${__dirname}/dist/${PKG_NAME}`));
 
 app.get('/*', (req, res) => {
-res.sendFile(path.join(`${__dirname}/dist/${PKG_NAME}/index.html`));
+    res.sendFile(path.join(`${__dirname}/dist/${PKG_NAME}/index.html`));
 });
 
 app.listen(process.env.PORT || 5000);

src/app/footer/footer.component.html

@@ -30,7 +30,7 @@
 
     <!-- Copyright -->
     <div class="text-center p-3" style="background-color: #2E2E2E;">
-        © 2020 Copyright:
+        © 2023 Copyright:
         <a class="text-white" href="https://hideyoshi.com.br/">Hideyoshi Solutions</a>
     </div>
     <!-- Copyright -->

src/app/shared/directive/clicked-outside/clicked-outside.directive.ts

@@ -28,16 +28,17 @@ export class ClickedOutsideDirective implements AfterViewInit, OnDestroy {
 
     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( () => {
             !this.clickOutsideStopWatching && this.clickOutside.emit();
@@ -49,31 +50,44 @@ export class ClickedOutsideDirective implements AfterViewInit, OnDestroy {
         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)
     }
 
 }