Add improve of overflow scroll

dixso · Jan 14, 2017 · 06b9ad9 · 06b9ad9
1 parent 0f6c059
commit 06b9ad9
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 96 deletions.
diff --git 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
@@ -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
@@ -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<string> = ['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);
         });
     }