From e609a5b8a2c761f05495811c30b5938c37e0ba98 Mon Sep 17 00:00:00 2001 From: Satya Deep Maheshwari Date: Thu, 11 May 2023 12:23:43 +0530 Subject: [PATCH] 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 --- blocks/header/header.js | 12 ++---- blocks/header/nav-utils.js | 28 ++++++++++--- .../nb-clientlibs/styles/clientlibs-base.less | 1 + blocks/login/login.css | 7 ++++ blocks/login/login.js | 39 +++++++++++++++++-- blocks/login/login.less | 17 ++++++-- scripts/delayed.js | 4 +- styles/styles.less | 1 - 8 files changed, 85 insertions(+), 24 deletions(-) diff --git a/blocks/header/header.js b/blocks/header/header.js index f9ca1b9..5a52a3c 100644 --- 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 index a26ea16..b87435a 100644 --- 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 index 9b1532d..0ce1cd7 100644 --- 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 index 177f52d..8021700 100644 --- 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 index a34d0d5..660d338 100644 --- 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 index e7a20ad..d8621c6 100644 --- 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 index c42f43f..3f9bed0 100644 --- 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 index 334a5b2..082ddfa 100644 --- a/styles/styles.less +++ b/styles/styles.less @@ -113,7 +113,6 @@ body { top: 0px; position: fixed; display: block; - &.fade { height: 0; }