Add improve of overflow scroll

dixso · Jan 14, 2017 · 50eaf4f · 50eaf4f
1 parent 0f6c059
commit 50eaf4f
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 95 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;
 
@@ -830,30 +792,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;
 
@@ -1044,4 +983,46 @@ describe('Custombox', () => {
       }, 500);
     });
   });
+
+  describe('Scroll', () => {
+    let originalTimeout;
+    beforeEach(() => {
+      originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
+      jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
+    });
+
+    beforeEach(() => {
+      for (let i = 1; i < 3; i++) {
+        let div = document.createElement('div');
+        div.innerHTML = `Lorem ipmsum (${i}) ...`;
+        div.setAttribute('id', `foo-${i}`);
+        document.body.appendChild(div);
+      }
+    });
+
+    afterEach(()=> {
+      getAfterEach();
+
+      jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;
+    });
+
+    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);
+    });
+  });
 });
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'];
@@ -64,6 +65,12 @@ namespace Custombox {
     static check(values: Array<string>, match: string): boolean {
       return values.indexOf(match) > -1;
     }
+
+    static checkLock(content: HTMLElement) {
+      if (content.offsetHeight >= window.innerHeight) {
+        document.body.classList.add(LOCK);
+      }
+    }
   }
 
   class Scroll {
@@ -524,7 +531,10 @@ namespace Custombox {
           }
 
           // Content
-          this.content.bind(OPEN).then(() => this.dispatchEvent('content.onComplete'));
+          this.content.bind(OPEN).then(() => {
+            Snippet.checkLock(this.content.element);
+            this.dispatchEvent('content.onComplete');
+          });
 
           // Dispatch event
           this.dispatchEvent('content.onOpen');
@@ -622,6 +632,9 @@ namespace Custombox {
           }
 
           this.dispatchEvent('content.onClose');
+
+          // Remove lock
+          document.body.classList.remove(LOCK);
         });
     }