diff --git a/src/components/sq-modal/sq-modal.component.html b/src/components/sq-modal/sq-modal.component.html index 80b622a..9cf9e82 100644 --- a/src/components/sq-modal/sq-modal.component.html +++ b/src/components/sq-modal/sq-modal.component.html @@ -1,4 +1,11 @@ -
+
-
+
diff --git a/src/components/sq-modal/sq-modal.component.scss b/src/components/sq-modal/sq-modal.component.scss index 01d2f8d..81e6435 100644 --- a/src/components/sq-modal/sq-modal.component.scss +++ b/src/components/sq-modal/sq-modal.component.scss @@ -13,6 +13,7 @@ border: none; justify-content: flex-end; button.close { + z-index: 1; position: relative; top: 5px; left: -4px; diff --git a/src/components/sq-modal/sq-modal.component.ts b/src/components/sq-modal/sq-modal.component.ts index 6966e66..0c62d41 100644 --- a/src/components/sq-modal/sq-modal.component.ts +++ b/src/components/sq-modal/sq-modal.component.ts @@ -4,6 +4,7 @@ import { ContentChild, ElementRef, EventEmitter, + HostListener, Inject, Input, OnChanges, @@ -19,11 +20,12 @@ import { styleUrls: ['./sq-modal.component.scss'], }) export class SqModalComponent implements OnChanges { + @Input() id = `random-id-${(1 + Date.now() + Math.random()).toString().replace('.', '')}` @Input() open?: boolean @Input() modalSize: 'sm' | 'md' | 'lg' | string = 'md' @Input() modalClass?: string @Input() backdropClass?: string - @Input() needPriority?: boolean + @Input() backdrop = 'static' @Output() modalClose: EventEmitter = new EventEmitter() @Output() leftPress: EventEmitter = new EventEmitter() @@ -38,52 +40,78 @@ export class SqModalComponent implements OnChanges { modalNumber = 0 hasHeader = false document: Document + enableBackdropClick = false + modalsLength = 0 constructor(@Inject(DOCUMENT) public documentImported: Document) { this.onKeydown = this.onKeydown.bind(this) this.document = documentImported || document } + @HostListener('document:click', ['$event']) + backdropClick(event: any) { + if (this.backdrop === 'static' || !this.modal || !this.open || !this.enableBackdropClick) { + return + } + const modalDialog = this.modal.nativeElement.firstElementChild + if (!modalDialog?.contains(event.target)) { + const body = this.document.getElementsByTagName('body')[0] + const backdrop = this.document.getElementById('modal-backdrop') || this.document.createElement('div') + this.modalClose.emit() + this.modal.nativeElement.style.display = 'none' + if (backdrop.parentNode && this.modalsLength === 1) { + backdrop.parentNode.removeChild(backdrop) + body.classList.remove('block') + } + window.removeEventListener('keydown', this.onKeydown) + this.enableBackdropClick = false + } + } + ngOnChanges(changes: SimpleChanges) { - if (changes.hasOwnProperty('open') || changes.hasOwnProperty('needPriority')) { + if (changes.hasOwnProperty('open')) { const body = this.document.getElementsByTagName('body')[0] const backdrop = this.document.getElementById('modal-backdrop') || this.document.createElement('div') - if (this.open && this.modal) { + const modal = this.modal + if (this.open && modal) { this.hasHeader = !!this.headerTemplate - this.modals = this.document.getElementsByClassName('modal open') body.classList.add('block') - this.modal.nativeElement.style.display = 'flex' + modal.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) { + this.modalsLength = this.modals?.length || 0 + if (this.modalsLength === 1) { backdrop.setAttribute('id', 'modal-backdrop') backdrop.setAttribute('class', 'modal-backdrop show') body.appendChild(backdrop) + } else if (this.modalsLength > 1) { + modal.nativeElement.style.zIndex = 1060 + this.modalsLength + 1 + setTimeout(() => { + backdrop.setAttribute('style', `z-index: ${1060 + this.modalsLength};`) + }, 200) } + this.enableBackdropClick = true }) - if (this.needPriority) { - backdrop.setAttribute('style', 'z-index: 1080;') - } - } else if (this.modal) { + } else if (modal) { this.modalClose.emit() - this.modal.nativeElement.style.display = 'none' - if (backdrop.parentNode && this.modalNumber === 1) { + modal.nativeElement.style.display = 'none' + modal.nativeElement.style.zIndex = null + backdrop.removeAttribute('style') + if (backdrop.parentNode && this.modalsLength === 1) { backdrop.parentNode.removeChild(backdrop) body.classList.remove('block') } + this.enableBackdropClick = false window.removeEventListener('keydown', this.onKeydown) - if (this.needPriority) { - backdrop.removeAttribute('style') - } } } } - onKeydown(event: KeyboardEvent) { + onKeydown(event: any) { if (this.open) { this.modals = this.document.getElementsByClassName('modal') - if (this.modals?.length === this.modalNumber) { + if (this.modals?.length === this.modalsLength) { this.events(event.keyCode) } } diff --git a/src/components/sq-overlay/sq-overlay.component.html b/src/components/sq-overlay/sq-overlay.component.html index 2343b03..0708a1d 100644 --- a/src/components/sq-overlay/sq-overlay.component.html +++ b/src/components/sq-overlay/sq-overlay.component.html @@ -1,5 +1,5 @@ -
-
+
+
* { - margin: 0; - } - - &.modal-static { - .modal-dialog { - transform: scale(1.02) !important; - 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, - transform 0.3s ease-out !important; - } - } - } - - .modal.overlay { - padding: 0; - border-radius: 0px; - - button.close { - max-height: 30px; - line-height: 30px; - transition: var(--transition); - z-index: 1; - - span { - font-size: 2.1rem; - font-weight: 300; - transition: var(--transition); - } - - &:hover, - &:focus { - outline: none; - - span { - font-weight: 500; + .modal-content { + height: 100%; + border-radius: 0; + overflow-y: auto; + border: none; + background-color: transparent; + .modal-header { + display: flex; + justify-content: space-between; + align-items: center; + height: 60px; + border-radius: 0; + overflow: hidden; + padding: 1rem 2rem; + &.without-header { + padding: 0 0.08rem; + border: none; + justify-content: flex-end; + .button-close { + margin: 0; + padding: 0; + } + } + .button-close { + max-height: 30px; + line-height: 30px; + opacity: 0.7 !important; + transition: var(--transition); + z-index: 1; + span { + font-size: 2.1rem; + font-weight: 300; + transition: var(--transition); + } + &:hover, + &:focus { + outline: none; + + span { + font-weight: 500; + } + } + } + } + .modal-body { + height: calc(100vh - 120px); + padding: 2rem; + overflow-y: auto; + overflow-x: hidden; + &.without-footer { + height: calc(100vh - 60px); + } + } + .modal-footer { + height: 60px; + border-radius: 0; + overflow: hidden; + padding: 1rem 2rem; + } + .modal-footer > * { + margin: 0; + } + .borderless { + border-color: transparent; } } } - - .without-footer { - height: calc(100vh - 60px); - } - - .without-header { - padding: 0 0.08rem; - border: none; - justify-content: flex-end; - - button.close { - margin: 0; - padding: 0; - } - } - } -} - -#close-button { - opacity: 0.7 !important; - transition: var(--transition) !important; - - &:hover, - &:focus { - outline: none !important; - - span { - font-weight: 500; - } } } diff --git a/src/components/sq-overlay/sq-overlay.component.ts b/src/components/sq-overlay/sq-overlay.component.ts index 624f088..b7a6711 100644 --- a/src/components/sq-overlay/sq-overlay.component.ts +++ b/src/components/sq-overlay/sq-overlay.component.ts @@ -4,6 +4,7 @@ import { ContentChild, ElementRef, EventEmitter, + HostListener, Inject, Input, OnChanges, @@ -20,6 +21,7 @@ import { styleUrls: ['./sq-overlay.component.scss'], }) export class SqOverlayComponent implements OnChanges, OnDestroy { + @Input() id = `random-id-${(1 + Date.now() + Math.random()).toString().replace('.', '')}` @Input() open?: boolean @Input() overlayDirection: 'right' | 'left' = 'right' @Input() width = '475px' @@ -29,6 +31,7 @@ export class SqOverlayComponent implements OnChanges, OnDestroy { @Input() footerColor = 'var(--background_secondary)' @Input() bodyColor = 'var(--background_secondary)' @Input() showClose = true + @Input() backdrop = 'static' @Output() overlayClose: EventEmitter = new EventEmitter() @Output() leftPress: EventEmitter = new EventEmitter() @@ -46,12 +49,25 @@ export class SqOverlayComponent implements OnChanges, OnDestroy { document: Document styleId = '' opened = false + enableBackdropClick = false + finishOpening = false constructor(@Inject(DOCUMENT) public documentImported: Document) { this.onKeydown = this.onKeydown.bind(this) this.document = documentImported || document } + @HostListener('document:click', ['$event']) + backdropClick(event: any) { + if (this.backdrop === 'static' || !this.overlay || !this.open || !this.enableBackdropClick) { + return + } + const modalDialog = this.overlay.nativeElement.firstElementChild + if (!modalDialog?.contains(event.target)) { + this.toCloseOverlay() + } + } + ngOnChanges(changes: SimpleChanges) { if (changes.hasOwnProperty('width')) { if (this.open) { @@ -76,11 +92,12 @@ export class SqOverlayComponent implements OnChanges, OnDestroy { backdrop.setAttribute('class', 'modal-backdrop show') body.appendChild(backdrop) } - this.opened = true + this.enableBackdropClick = true + this.finishOpening = true }) } else if (this.overlay) { this.overlayClose.emit() - this.opened = false + this.finishOpening = false this.undoCssWidth() setTimeout(() => { if (this.overlay) { @@ -91,6 +108,7 @@ export class SqOverlayComponent implements OnChanges, OnDestroy { backdrop.parentNode.removeChild(backdrop) body.classList.remove('block') } + this.enableBackdropClick = false window.removeEventListener('keydown', this.onKeydown) } } @@ -129,7 +147,7 @@ export class SqOverlayComponent implements OnChanges, OnDestroy { } } - onKeydown(event: KeyboardEvent) { + onKeydown(event: any) { if (this.open) { this.modals = this.document.getElementsByClassName('modal open') if (this.modals?.length === this.modalNumber) { @@ -151,4 +169,19 @@ export class SqOverlayComponent implements OnChanges, OnDestroy { break } } + + toCloseOverlay() { + if (this.overlay && this.open) { + const body = this.document.getElementsByTagName('body')[0] + 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) { + backdrop.parentNode.removeChild(backdrop) + body.classList.remove('block') + } + window.removeEventListener('keydown', this.onKeydown) + this.enableBackdropClick = false + } + } }