Styling changes to have fade in/out animation for modals (#226)

* Styling changes to have fade in/out animation for modals * Fixed scrolling effects --------- Co-authored-by: Satya Deep Maheshwari <[email protected]>
RoronoaSrinu · May 11, 2023 · e609a5b · e609a5b
1 parent eeb8287
commit e609a5b
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 24 deletions.
diff --git a/blocks/header/header.js b/blocks/header/header.js
@@ -1,6 +1,7 @@
 import {
   readBlockConfig, decorateIcons, makeLinksRelative, getRootPath, decorateAnchor,
 } from '../../scripts/scripts.js';
+import { closeLoginModal, openLoginModal } from '../login/login.js';
 
 import {
   loadNavTools,
@@ -51,20 +52,15 @@ function addLoginEventListener(nav) {
   if (loginButton) {
     loginButton.addEventListener('click', () => {
       const loginEle = document.querySelector('.login-overlay');
-      const bodyEle = document.querySelector('body');
       const eleDisplay = window.getComputedStyle(loginEle).getPropertyValue('display');
 
       if (eleDisplay === 'none') {
-        loginEle.classList.add('modal');
-        window.scrollTo(0, 0); // Scrolling to Top
-        bodyEle.classList.add('overflow-hidden');
-        bodyEle.classList.remove('overflowY-hidden');
+        openLoginModal();
         if (document.getElementById('querySearchModal')) {
           document.getElementById('querySearchModal').classList.remove('show', 'appear');
         }
       } else if (loginEle.classList.contains('modal')) {
-        loginEle.classList.remove('modal');
-        bodyEle.classList.remove('overflow-hidden');
+        closeLoginModal();
       }
     });
   }
@@ -130,7 +126,7 @@ async function delayedNavTools() {
       } else {
         document.body.classList.add('overflowY-hidden');
         document.getElementById('querySearchModal').classList.remove('show', 'appear');
-        document.querySelector('.login-overlay').classList.remove('modal');
+        closeLoginModal();
         document.body.classList.remove('overflow-hidden');
       }
       nav.setAttribute('aria-expanded', expanded ? 'false' : 'true');

diff --git a/blocks/header/nav-utils.js b/blocks/header/nav-utils.js
@@ -1,4 +1,5 @@
 import { getMetadata } from '../../scripts/scripts.js';
+import { closeLoginModal } from '../login/login.js';
 
 const NEDBANK_HOST = 'personal.nedbank.co.za';
 const REPLACE_SCRIPTS = new Map([
@@ -112,15 +113,30 @@ export function toggleHamburger() {
   }
 }
 
-export function toggleSearch() {
+export async function toggleSearch() {
   if (document.getElementById('querySearchModal').style) {
     document.getElementById('querySearchModal').removeAttribute('style');
   }
-  document.getElementById('querySearchModal').classList.toggle('show');
-  document.getElementById('querySearchModal').classList.toggle('appear');
-  document.querySelector('.login-overlay').classList.remove('modal');
-  document.body.classList.remove('overflow-hidden');
-  document.body.classList.toggle('overflowY-hidden');
+
+  /* Ensure animation effects get applied query modal show/hide by delaying adding "show"
+  and removing "appear" since animation effects */
+  if (document.getElementById('querySearchModal').classList.contains('appear')) {
+    document.getElementById('querySearchModal').classList.remove('show');
+    /* Delay hiding modal for animation effects */
+    setTimeout(() => {
+      document.getElementById('querySearchModal').classList.remove('appear');
+      document.body.classList.remove('overflow-hidden');
+    }, 150);
+  } else {
+    await closeLoginModal();
+    document.getElementById('querySearchModal').classList.add('appear');
+    document.body.classList.add('overflow-hidden');
+    /* Delay showing modal for animation effects */
+    setTimeout(() => {
+      document.getElementById('querySearchModal').classList.add('show');
+      window.scrollTo(0, 0); // Scrolling to Top of the page
+    }, 150);
+  }
 }
 
 function configureHamburgerLoginBtn() {

diff --git a/blocks/header/nb-clientlibs/styles/clientlibs-base.less b/blocks/header/nb-clientlibs/styles/clientlibs-base.less
@@ -6688,6 +6688,7 @@
         padding-right: 15px;
     }
 
+
     .modal-dialog {
         position: relative;
         width: auto;

diff --git a/blocks/login/login.css b/blocks/login/login.css
@@ -8,6 +8,13 @@
   overflow-x: hidden;
   overflow-y: auto;
   padding: 0;
+  transition: opacity 0.15s linear;
+}
+.login-overlay.fade-in {
+  opacity: 1;
+}
+.login-overlay.fade-out {
+  opacity: 0;
 }
 .login-overlay * > h1 {
   margin-bottom: 0.5rem;

diff --git a/blocks/login/login.js b/blocks/login/login.js
@@ -2,6 +2,40 @@ import {
   decorateIcons, makeLinksRelative, decorateButtons, getRootPath, decorateAnchor,
 } from '../../scripts/scripts.js';
 
+function delay(time) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, time);
+  });
+}
+
+export async function closeLoginModal() {
+  const loginEle = document.querySelector('.login-overlay');
+  const mainEle = document.querySelector('body');
+
+  loginEle.classList.remove('fade-in');
+  loginEle.classList.add('fade-out');
+
+  /* Delaying the removal of modal class to allow the fade-out animation to complete */
+  await delay(150);
+  loginEle.classList.remove('modal');
+  mainEle.classList.remove('overflow-hidden');
+}
+
+export async function openLoginModal() {
+  const loginEle = document.querySelector('.login-overlay');
+  const bodyEle = document.querySelector('body');
+
+  loginEle.classList.add('modal');
+  /* Delaying the fade-in class addition to allow the modal to be displayed */
+  await delay(150);
+  loginEle.classList.remove('fade-out');
+  loginEle.classList.add('fade-in');
+  window.scrollTo(0, 0); // Scrolling to Top
+
+  bodyEle.classList.add('overflow-hidden');
+  bodyEle.classList.remove('overflowY-hidden');
+}
+
 export default async function decorate(block) {
   const resp = await fetch(`${getRootPath()}/login.plain.html`);
   if (resp && resp.status === 200) {
@@ -19,10 +53,7 @@ export default async function decorate(block) {
 
     if (overLayClose) {
       overLayClose.addEventListener('click', () => {
-        const loginEle = document.querySelector('.login-overlay');
-        const mainEle = document.querySelector('body');
-        loginEle.classList.remove('modal');
-        mainEle.classList.remove('overflow-hidden');
+        closeLoginModal();
       });
     }
 

diff --git a/blocks/login/login.less b/blocks/login/login.less
@@ -8,6 +8,15 @@ autocomment();
     overflow-x: hidden;
     overflow-y: auto;
     padding: 0;
+    transition: opacity 0.15s linear;
+
+    &.fade-in {
+        opacity: 1;
+    }
+
+    &.fade-out {
+        opacity: 0;
+    }
 
     *>h1 {
         margin-bottom: 0.5rem;
@@ -23,7 +32,7 @@ autocomment();
         font-weight: @font-weight-medium;
         border-bottom: 1px solid #E5EDEC;
         font-size: @font-size-base;
-        
+
         a {
             &:hover {
                 color: @dotcoza-color-greens-default;
@@ -116,7 +125,7 @@ autocomment();
 
             .login-main {
                 margin: 0 18px;
-                
+
                 .button-container {
                     margin-bottom: 0;
                     a {
@@ -233,14 +242,14 @@ autocomment();
                         }
                     }
                 }
-    
+
                 .login-main {
                     margin: 8px 7.37% @spacing-07 7.37% !important;
 
                     .button-container {
                         margin-top: 48px;
                     }
-    
+
                     > div {
                         flex-direction: row;
                         flex-wrap: unset;

diff --git a/scripts/delayed.js b/scripts/delayed.js
@@ -187,6 +187,8 @@ setTimeout(() => {
   const head = document.getElementsByTagName('head')[0];
   if (head) {
     const atBodyStyle = document.getElementById('at-body-style');
-    head.removeChild(atBodyStyle);
+    if (atBodyStyle !== null) {
+      head.removeChild(atBodyStyle);
+    }
   }
 }, 30000);
diff --git a/styles/styles.less b/styles/styles.less
@@ -113,7 +113,6 @@ body {
 		top: 0px;
 		position: fixed;
 		display: block;
-
 		&.fade {
 			height: 0;
 		}