Merge pull request #3 from squidit/fix-modals

Fix Modals
squidit · Sep 5, 2023 · 7bebfb3 · 7bebfb3
2 parents f0be9f7 + 092e193
commit 7bebfb3
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 28 deletions.
diff --git a/src/components/sq-modal/sq-modal.component.ts b/src/components/sq-modal/sq-modal.component.ts
@@ -8,7 +8,6 @@ import {
   Inject,
   Input,
   OnChanges,
-  OnDestroy,
   Output,
   SimpleChanges,
   TemplateRef,
@@ -43,7 +42,7 @@ import {
   templateUrl: './sq-modal.component.html',
   styleUrls: ['./sq-modal.component.scss'],
 })
-export class SqModalComponent implements OnChanges, OnDestroy {
+export class SqModalComponent implements OnChanges {
   /**
    * A unique identifier for the modal component.
    */
@@ -174,6 +173,7 @@ export class SqModalComponent implements OnChanges, OnDestroy {
       const modal = this.modal
       if (modal) {
         const body = this.document.getElementsByTagName('body')[0]
+        body.appendChild(modal.nativeElement)
         const backdrop = this.document.getElementById('modal-backdrop') || this.document.createElement('div')
         if (this.open) {
           this.hasHeader = !!this.headerTemplate
@@ -183,23 +183,21 @@ export class SqModalComponent implements OnChanges, OnDestroy {
           this.modals = this.document.getElementsByClassName('modal open')
           setTimeout(() => {
             this.modalNumber = this.modals?.length || 0
-            if (this.modalNumber === 1) {
+            if (this.modalNumber <= 1) {
               backdrop.setAttribute('id', 'modal-backdrop')
               backdrop.setAttribute('class', 'modal-backdrop show')
               body.appendChild(backdrop)
             } else if (this.modalNumber > 1) {
               modal.nativeElement.style.zIndex = 1060 + this.modalNumber + 1
               backdrop.setAttribute('style', `z-index: ${1060 + this.modalNumber};`)
             }
-            body.appendChild(modal.nativeElement)
             this.enableBackdropClick = true
           })
         } else {
           this.modalClose.emit()
-          modal.nativeElement.style.display = 'none'
-          modal.nativeElement.style.zIndex = null
           backdrop.removeAttribute('style')
-          if (backdrop.parentNode && this.modalNumber === 1) {
+          this.removeModalFromBody()
+          if (backdrop.parentNode && this.modalNumber <= 1) {
             backdrop.parentNode.removeChild(backdrop)
             body.classList.remove('block')
           }
@@ -211,9 +209,9 @@ export class SqModalComponent implements OnChanges, OnDestroy {
   }
 
   /**
-   * Performs cleanup when the component is destroyed.
+   * Removes the modal element from document body.
    */
-  ngOnDestroy() {
+  removeModalFromBody() {
     const modal = document.getElementById(this.id)
     if (modal?.parentNode) {
       modal.parentNode.removeChild(modal)

diff --git a/src/components/sq-overlay/sq-overlay.component.scss b/src/components/sq-overlay/sq-overlay.component.scss
@@ -1,4 +1,3 @@
-
 ::ng-deep {
   .overlay {
     padding: 0;
@@ -10,10 +9,13 @@
       justify-content: flex-end;
     }
     .modal-dialog {
-      transition: opacity 0.3s linear, left 0.3s ease-out, right 0.3s ease-out, width 0.3s ease-out, height 0.3s ease-out !important;
-      position: fixed;
+      width: 300px;
       max-width: 100vw;
       height: 100%;
+      margin: 0;
+      position: fixed;
+      transition: opacity 0.3s linear, left 0.3s ease-out, right 0.3s ease-out,
+        width 0.3s ease-out, height 0.3s ease-out !important;
       transform: translate3d(0%, 0, 0) !important;
       .modal-content {
         height: 100%;

diff --git a/src/components/sq-overlay/sq-overlay.component.ts b/src/components/sq-overlay/sq-overlay.component.ts
@@ -8,7 +8,6 @@ import {
   Inject,
   Input,
   OnChanges,
-  OnDestroy,
   Output,
   SimpleChanges,
   TemplateRef,
@@ -32,14 +31,14 @@ import {
  * </sq-overlay>
  * <button (click)='isOverlayOpen = true'>Open Modal</button>
  * 
- * @implements {OnChanges, OnDestroy}
+ * @implements {OnChanges}
  */
 @Component({
   selector: 'sq-overlay',
   templateUrl: './sq-overlay.component.html',
   styleUrls: ['./sq-overlay.component.scss'],
 })
-export class SqOverlayComponent implements OnChanges, OnDestroy {
+export class SqOverlayComponent implements OnChanges {
   /**
    * A unique identifier for the overlay.
    */
@@ -228,39 +227,36 @@ export class SqOverlayComponent implements OnChanges, OnDestroy {
       const overlay = this.overlay
       if (overlay) {
         const body = this.document.getElementsByTagName('body')[0]
+        body.appendChild(overlay.nativeElement)
         const backdrop = this.document.getElementById('modal-backdrop') || this.document.createElement('div')
         if (this.open) {
           this.doCssWidth()
           this.hasFooter = !!this.footerTemplate
           this.hasHeader = !!this.headerTemplate
-          this.modals = this.document.getElementsByClassName('modal open')
           body.classList.add('block')
           overlay.nativeElement.style.display = 'flex'
           window.addEventListener('keydown', this.onKeydown)
+          this.modals = this.document.getElementsByClassName('modal open')
           setTimeout(() => {
             this.modalNumber = this.modals?.length || 0
-            if (this.modalNumber === 1) {
+            if (this.modalNumber <= 1) {
               backdrop.setAttribute('id', 'modal-backdrop')
               backdrop.setAttribute('class', 'modal-backdrop show')
               body.appendChild(backdrop)
             } else if (this.modalNumber > 1) {
               overlay.nativeElement.style.zIndex = 1060 + this.modalNumber + 1
               backdrop.setAttribute('style', `z-index: ${1060 + this.modalNumber};`)
             }
-            body.appendChild(overlay.nativeElement)
             this.enableBackdropClick = true
             this.finishOpening = true
           })
         } else {
           this.overlayClose.emit()
           this.finishOpening = false
           this.undoCssWidth()
-          setTimeout(() => {
-            if (overlay) {
-              overlay.nativeElement.style.display = 'none'
-            }
-          })
-          if (backdrop.parentNode && this.modalNumber === 1) {
+          backdrop.removeAttribute('style')
+          this.removeOverlayFromBody()
+          if (backdrop.parentNode && this.modalNumber <= 1) {
             backdrop.parentNode.removeChild(backdrop)
             body.classList.remove('block')
           }
@@ -272,9 +268,9 @@ export class SqOverlayComponent implements OnChanges, OnDestroy {
   }
 
   /**
-   * Performs cleanup when the component is destroyed.
+   * Removes the overlay element from document body.
    */
-  ngOnDestroy() {
+  removeOverlayFromBody() {
     const overlay = document.getElementById(this.id)
     if (overlay?.parentNode) {
       overlay.parentNode.removeChild(overlay)
@@ -355,7 +351,7 @@ export class SqOverlayComponent implements OnChanges, OnDestroy {
       const backdrop = this.document.getElementById('modal-backdrop') || this.document.createElement('div')
       this.overlayClose.emit()
       this.overlay.nativeElement.style.display = 'none'
-      if (backdrop.parentNode && this.modalNumber === 1) {
+      if (backdrop.parentNode && this.modalNumber <= 1) {
         backdrop.parentNode.removeChild(backdrop)
         body.classList.remove('block')
       }

diff --git a/src/package.json b/src/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@squidit/ngx-css",
-  "version": "1.0.06",
+  "version": "1.0.07",
   "peerDependencies": {
     "@angular/common": ">=15.0.0",
     "@angular/core": ">=15.0.0",