diff --git a/src/custombox.scss b/src/custombox.scss index 7caffed..aece71e 100644 --- a/src/custombox.scss +++ b/src/custombox.scss @@ -4,6 +4,7 @@ $overlay: #{$cb}-overlay; $content: #{$cb}-content; $container: #{$cb}-container; $perspective: #{$cb}-perspective; +$lock: #{$cb}-lock; $index: 9997; // Actions @@ -86,11 +87,14 @@ $effect23: #{$cb}-flash; align-items: center; align-content: stretch; } +.#{$lock} { + overflow: hidden; +} .#{$content} { + overflow-y: auto; > * { max-width: 100%; - max-height: 100%; - overflow-y: auto; + max-height: 95%; } } .#{$cb}-fullscreen.#{$content} { diff --git a/src/custombox.spec.ts b/src/custombox.spec.ts index eb86acb..f735e3f 100644 --- a/src/custombox.spec.ts +++ b/src/custombox.spec.ts @@ -2,6 +2,33 @@ function hasElement(element: string): boolean { return document.body.contains(document.querySelector(element)); } +function getAfterEach() { + for (let i = 1; i < 3; i++) { + let elem = document.getElementById(`foo-${i}`); + elem.parentNode.removeChild(elem); + } + + // custombox-content + let contents = document.querySelectorAll('.custombox-content'); + for (let i = 0, t = contents.length; i < t; i++) { + contents[i].parentNode.removeChild(contents[i]); + } + + // custombox-overlay + let overlays = document.querySelectorAll('.custombox-overlay'); + for (let i = 0, t = overlays.length; i < t; i++) { + overlays[i].parentNode.removeChild(overlays[i]); + } + + // custombox-loader + let loaders = document.querySelectorAll('.custombox-loader'); + for (let i = 0, t = loaders.length; i < t; i++) { + loaders[i].parentNode.removeChild(loaders[i]); + } + + delete Custombox; +} + describe('Custombox', () => { describe('Methods', () => { let originalTimeout; @@ -20,28 +47,7 @@ describe('Custombox', () => { }); afterEach(()=> { - for (let i = 1; i < 3; i++) { - let elem = document.getElementById(`foo-${i}`); - elem.parentNode.removeChild(elem); - } - - // custombox-content - let contents = document.querySelectorAll('.custombox-content'); - for (let i = 0, t = contents.length; i < t; i++) { - contents[i].parentNode.removeChild(contents[i]); - } - - // custombox-overlay - let overlays = document.querySelectorAll('.custombox-overlay'); - for (let i = 0, t = overlays.length; i < t; i++) { - overlays[i].parentNode.removeChild(overlays[i]); - } - - // custombox-loader - let loaders = document.querySelectorAll('.custombox-loader'); - for (let i = 0, t = loaders.length; i < t; i++) { - loaders[i].parentNode.removeChild(loaders[i]); - } + getAfterEach(); delete Custombox; @@ -207,28 +213,7 @@ describe('Custombox', () => { }); afterEach(()=> { - for (let i = 1; i < 3; i++) { - let elem = document.getElementById(`foo-${i}`); - elem.parentNode.removeChild(elem); - } - - // custombox-content - let contents = document.querySelectorAll('.custombox-content'); - for (let i = 0, t = contents.length; i < t; i++) { - contents[i].parentNode.removeChild(contents[i]); - } - - // custombox-overlay - let overlays = document.querySelectorAll('.custombox-overlay'); - for (let i = 0, t = overlays.length; i < t; i++) { - overlays[i].parentNode.removeChild(overlays[i]); - } - - // custombox-loader - let loaders = document.querySelectorAll('.custombox-loader'); - for (let i = 0, t = loaders.length; i < t; i++) { - loaders[i].parentNode.removeChild(loaders[i]); - } + getAfterEach(); delete Custombox; @@ -488,30 +473,7 @@ describe('Custombox', () => { }); afterEach(()=> { - for (let i = 1; i < 3; i++) { - let elem = document.getElementById(`foo-${i}`); - elem.parentNode.removeChild(elem); - } - - // custombox-content - let contents = document.querySelectorAll('.custombox-content'); - for (let i = 0, t = contents.length; i < t; i++) { - contents[i].parentNode.removeChild(contents[i]); - } - - // custombox-overlay - let overlays = document.querySelectorAll('.custombox-overlay'); - for (let i = 0, t = overlays.length; i < t; i++) { - overlays[i].parentNode.removeChild(overlays[i]); - } - - // custombox-loader - let loaders = document.querySelectorAll('.custombox-loader'); - for (let i = 0, t = loaders.length; i < t; i++) { - loaders[i].parentNode.removeChild(loaders[i]); - } - - delete Custombox; + getAfterEach(); jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout; @@ -800,6 +762,25 @@ describe('Custombox', () => { done(); }, 1000); }); + + it('should remove perspective class', (done) => { + new (Custombox as any).modal({ + content: { + effect: 'fall', + target: '#foo-1', + } + }).open(); + + setTimeout(() => { + expect(document.documentElement.classList.contains('custombox-perspective')).toBe(true); + Custombox.modal.close(); + + setTimeout(() => { + expect(document.documentElement.classList.contains('custombox-perspective')).toBe(false); + done(); + }, 750); + }, 500); + }); }); describe('Container', () => { @@ -830,30 +811,7 @@ describe('Custombox', () => { }); afterEach(()=> { - for (let i = 1; i < 3; i++) { - let elem = document.getElementById(`foo-${i}`); - elem.parentNode.removeChild(elem); - } - - // custombox-content - let contents = document.querySelectorAll('.custombox-content'); - for (let i = 0, t = contents.length; i < t; i++) { - contents[i].parentNode.removeChild(contents[i]); - } - - // custombox-overlay - let overlays = document.querySelectorAll('.custombox-overlay'); - for (let i = 0, t = overlays.length; i < t; i++) { - overlays[i].parentNode.removeChild(overlays[i]); - } - - // custombox-loader - let loaders = document.querySelectorAll('.custombox-loader'); - for (let i = 0, t = loaders.length; i < t; i++) { - loaders[i].parentNode.removeChild(loaders[i]); - } - - delete Custombox; + getAfterEach(); jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout; @@ -906,7 +864,6 @@ describe('Custombox', () => { }).open(); }, 200); - setTimeout(() => { expect(document.querySelectorAll('.custombox-container').length).toBe(1); done(); diff --git a/src/custombox.ts b/src/custombox.ts index fcf8d90..f894ee2 100644 --- a/src/custombox.ts +++ b/src/custombox.ts @@ -49,6 +49,7 @@ namespace Custombox { const CB: string = 'custombox'; const OPEN: string = `${CB}-open`; const CLOSE: string = `${CB}-close`; + const LOCK: string = `${CB}-lock`; const FROM: string = 'animateFrom'; const BLOCK: string = 'block'; const positionValues: Array = ['top', 'right', 'bottom', 'left']; @@ -524,7 +525,10 @@ namespace Custombox { } // Content - this.content.bind(OPEN).then(() => this.dispatchEvent('content.onComplete')); + this.content.bind(OPEN).then(() => { + document.body.classList.add(LOCK); + this.dispatchEvent('content.onComplete'); + }); // Dispatch event this.dispatchEvent('content.onOpen'); @@ -622,6 +626,9 @@ namespace Custombox { } this.dispatchEvent('content.onClose'); + + // Remove lock + document.body.classList.remove(LOCK); }); }