Merge c52869b into 511bfbe

inkline · Jun 5, 2019 · 429cc7e · 429cc7e
2 parents 511bfbe + c52869b
commit 429cc7e
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 1 deletion.
diff --git a/src/css/core/_modal.styl b/src/css/core/_modal.styl
@@ -0,0 +1,2 @@
+body.-modal
+    overflow: hidden
diff --git a/src/css/core/index.styl b/src/css/core/index.styl
@@ -4,6 +4,7 @@
 
 @require '_normalize'
 @require '_print'
+@require '_modal'
 @require '_icons'
 @require 'code'
 @require 'images'

diff --git a/src/factories/PopupManager.js b/src/factories/PopupManager.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import { isKey } from '@inkline/inkline/src/helpers/index';
+import { addClass, isKey, removeClass } from '@inkline/inkline/src/helpers/index';
 
 export class PopupManager {
     instances = {};
@@ -48,12 +48,16 @@ export class PopupManager {
         } else {
             this.modalStack.push({ id: id });
         }
+
+        addClass(window.document.body, '-modal');
     }
 
     closeModal(id) {
         const modalIndex = this.modalStack.findIndex((m) => m.id === id);
 
         this.modalStack.splice(modalIndex, 1);
+
+        removeClass(window.document.body, '-modal');
     }
 
     getTopPopup() {

diff --git a/tests/unit/factories/PopupManager.spec.js b/tests/unit/factories/PopupManager.spec.js
@@ -158,6 +158,12 @@ describe('Factories', () => {
                 expect(popupManager.modalStack.length).toEqual(1);
                 expect(popupManager.modalStack[0].$el.style.zIndex).toEqual(1000);
             });
+
+            it('should add ".-modal" modifier class to document body', () => {
+                popupManager.openModal('abc');
+
+                expect(window.document.body.classList.contains('-modal')).toEqual(true);
+            });
         });
 
         describe('closeModal()', () => {
@@ -167,6 +173,13 @@ describe('Factories', () => {
 
                 expect(popupManager.modalStack.length).toEqual(0);
             });
+
+            it('should remove ".-modal" modifier class from document body', () => {
+                popupManager.openModal('abc');
+                popupManager.closeModal('abc');
+
+                expect(window.document.body.classList.contains('-modal')).toEqual(false);
+            });
         });
 
         describe('getTopPopup()', () => {