From 6d68efbccb18336062e5d0088989b8a64b5241bf Mon Sep 17 00:00:00 2001 From: Avinash Gusain Date: Wed, 27 Dec 2023 14:06:37 +0530 Subject: [PATCH 01/22] dynamic height to banner and set top --- src/email-recovery.js | 60 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) diff --git a/src/email-recovery.js b/src/email-recovery.js index f862693..05911a8 100644 --- a/src/email-recovery.js +++ b/src/email-recovery.js @@ -13,8 +13,68 @@ document.addEventListener('DOMContentLoaded', function() { newDiv.appendChild(contentDiv) newDiv.appendChild(link) insertIntoDOM(newDiv) + // Measure the height after the element is inserted into the DOM + const banner = document.getElementById('recovery-email-banner') + if (banner) { + const bannerHeight = banner.clientHeight + 'px' + const topHeight = (banner.clientHeight + 50) + 'px' + setHeaderTopStyle('body#body-user #header', bannerHeight) + setHeaderTopStyle('body#body-settings #header', bannerHeight) + setHeaderTopStyle('body#body-public #header', bannerHeight) + setContentStyle('body#body-user #content', topHeight) + setContentStyle('body#body-settings #content', topHeight) + setContentStyle('body#body-public #content', topHeight) + setContentStyle('body#body-user #content-vue', topHeight) + setMenuTopStyle('body #header #user-menu #header-menu-user-menu', topHeight) + banner.style.height = bannerHeight + } + }) +/** + * + * @param selector + * @param topValue + */ +function setMenuTopStyle(selector, topValue) { + const interval = setInterval(function() { + const element = document.querySelector(selector) + if (element) { + clearInterval(interval) // Stop the interval + element.style.top = topValue + } + }, 1000) // Interval set to 1 second (1000 milliseconds) +} + +/** + * + * @param selector + * @param topValue + */ +function setHeaderTopStyle(selector, topValue) { + const element = document.querySelector(selector) + if (element) { + element.style.top = topValue + } +} + +/* +* @param selector +* @param topValue +*/ +/** + * + * @param selector + * @param topValue + */ +function setContentStyle(selector, topValue) { + const element = document.querySelector(selector) + if (element) { + element.style.cssText += `margin-top: ${topValue} !important;` + const heightValue = `calc(100% - env(safe-area-inset-bottom) - ${topValue} - var(--body-container-margin)) !important` + element.style.cssText += `height: ${heightValue};` + } +} /** * * @param className -- GitLab From 884c608b4f3783a4a18c37f075110d6bda151056 Mon Sep 17 00:00:00 2001 From: Avinash Gusain Date: Wed, 27 Dec 2023 14:07:17 +0530 Subject: [PATCH 02/22] remove unused css --- scss/email-recovery.scss | 62 ++-------------------------------------- 1 file changed, 2 insertions(+), 60 deletions(-) diff --git a/scss/email-recovery.scss b/scss/email-recovery.scss index 4fbf9ae..349ef6c 100644 --- a/scss/email-recovery.scss +++ b/scss/email-recovery.scss @@ -13,7 +13,7 @@ font-size: 16px; font-weight: 400; line-height: 24px; - padding: 16px 7%; + padding: 16px 6%; #recovery-email-banner-container{ display:inline-flex; img { @@ -35,47 +35,6 @@ } -body#body-user #header, -body#body-settings #header, -body#body-public #header { - top: 56px; -} -#header .header-right .header-menu__wrapper{ - top:106px; -} - -#body-user #content, -#body-settings #content, -#body-public #content, -#body-public #content, -#body-user #content-vue { - margin-top: 100px !important; - height: calc(100% - env(safe-area-inset-bottom) - 106px - var(--body-container-margin)); - @media only screen and (min-width: 769px) and (max-width: 1024) { - margin-top: 130px !important; - height: calc(100% - env(safe-area-inset-bottom) - 130px - var(--body-container-margin)); - } - @media only screen and (min-width: 481px) and (max-width: 768px) { - margin-top: 162px !important; - height: calc(100% - env(safe-area-inset-bottom) - 162px - var(--body-container-margin)); - } - @media only screen and (max-width: 399px) { - margin-top: 186px !important; - height: calc(100% - env(safe-area-inset-bottom) - 186px - var(--body-container-margin)); - } - - -} -@media only screen and (max-width: 1024px) { - body#body-user #header, - body#body-settings #header, - body#body-public #header { - top: 80px; - } - #header .header-right .header-menu__wrapper{ - top:130px; - } -} @media only screen and (max-width: 768px) { .recovery-email-banner { display: block; @@ -83,22 +42,5 @@ body#body-public #header { padding: 8px 0 0 30px; } } - body#body-user #header, - body#body-settings #header, - body#body-public #header { - top: 112px; - } - #header .header-right .header-menu__wrapper{ - top:162px; - } -} -@media only screen and (max-width: 399px) { - body#body-user #header, - body#body-settings #header, - body#body-public #header { - top: 136px; - } - #header .header-right .header-menu__wrapper{ - top:186px; - } } + -- GitLab From 07a2875ae2ad0e74593662b6cb1500f5ba159557 Mon Sep 17 00:00:00 2001 From: Avinash Gusain Date: Wed, 27 Dec 2023 14:09:29 +0530 Subject: [PATCH 03/22] remove unused comment --- src/email-recovery.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/email-recovery.js b/src/email-recovery.js index 05911a8..4c4913b 100644 --- a/src/email-recovery.js +++ b/src/email-recovery.js @@ -58,10 +58,6 @@ function setHeaderTopStyle(selector, topValue) { } } -/* -* @param selector -* @param topValue -*/ /** * * @param selector -- GitLab From 3a187e47e95faa0a85f90cfaa3b33678367b106e Mon Sep 17 00:00:00 2001 From: Avinash Gusain Date: Wed, 27 Dec 2023 21:40:19 +0530 Subject: [PATCH 04/22] removed extra js --- src/email-recovery.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/email-recovery.js b/src/email-recovery.js index 4c4913b..835c585 100644 --- a/src/email-recovery.js +++ b/src/email-recovery.js @@ -18,14 +18,10 @@ document.addEventListener('DOMContentLoaded', function() { if (banner) { const bannerHeight = banner.clientHeight + 'px' const topHeight = (banner.clientHeight + 50) + 'px' - setHeaderTopStyle('body#body-user #header', bannerHeight) - setHeaderTopStyle('body#body-settings #header', bannerHeight) - setHeaderTopStyle('body#body-public #header', bannerHeight) - setContentStyle('body#body-user #content', topHeight) - setContentStyle('body#body-settings #content', topHeight) - setContentStyle('body#body-public #content', topHeight) - setContentStyle('body#body-user #content-vue', topHeight) - setMenuTopStyle('body #header #user-menu #header-menu-user-menu', topHeight) + setHeaderTopStyle('#header', bannerHeight) + setContentStyle('#content', topHeight) + setContentStyle('#content-vue', topHeight) + setMenuTopStyle('#header-menu-user-menu', topHeight) banner.style.height = bannerHeight } -- GitLab From 9986d4b5082ca0aaca8a9181d49e1a5a1ac0471c Mon Sep 17 00:00:00 2001 From: Avinash Gusain Date: Thu, 28 Dec 2023 13:31:51 +0530 Subject: [PATCH 05/22] function name chanes and z-index removed --- scss/email-recovery.scss | 1 - src/email-recovery.js | 32 +++++++++++++++++++------------- 2 files changed, 19 insertions(+), 14 deletions(-) diff --git a/scss/email-recovery.scss b/scss/email-recovery.scss index 349ef6c..7d3f694 100644 --- a/scss/email-recovery.scss +++ b/scss/email-recovery.scss @@ -3,7 +3,6 @@ position: absolute; top: 0px; width: 100%; - z-index: 1000; min-height: 50px; box-sizing: border-box; justify-content: center; diff --git a/src/email-recovery.js b/src/email-recovery.js index 835c585..b8a3c4a 100644 --- a/src/email-recovery.js +++ b/src/email-recovery.js @@ -18,21 +18,23 @@ document.addEventListener('DOMContentLoaded', function() { if (banner) { const bannerHeight = banner.clientHeight + 'px' const topHeight = (banner.clientHeight + 50) + 'px' - setHeaderTopStyle('#header', bannerHeight) - setContentStyle('#content', topHeight) - setContentStyle('#content-vue', topHeight) - setMenuTopStyle('#header-menu-user-menu', topHeight) + setTopStyle('#header', bannerHeight) + setImportantMarginTopAndCalculateHeight('#content', topHeight) + setImportantMarginTopAndCalculateHeight('#content-vue', topHeight) + setTopStyleWhenElementAvailable('#header-menu-user-menu', topHeight) banner.style.height = bannerHeight } }) /** + * Sets the 'top' style to an element once it becomes available in the DOM. * - * @param selector - * @param topValue + * @param {string} selector - The CSS selector for the element. + * @param {string} topValue - The value to be set for the 'top' property. */ -function setMenuTopStyle(selector, topValue) { + +function setTopStyleWhenElementAvailable(selector, topValue) { const interval = setInterval(function() { const element = document.querySelector(selector) if (element) { @@ -43,11 +45,13 @@ function setMenuTopStyle(selector, topValue) { } /** + * Sets the 'top' style property of an element. + * The element is selected based on the provided CSS selector. * - * @param selector - * @param topValue + * @param {string} selector + * @param {string} topValue */ -function setHeaderTopStyle(selector, topValue) { +function setTopStyle(selector, topValue) { const element = document.querySelector(selector) if (element) { element.style.top = topValue @@ -55,11 +59,13 @@ function setHeaderTopStyle(selector, topValue) { } /** + * Apply a margin-top style with !important and calculate a new height for the element. * - * @param selector - * @param topValue + * @param {string} selector - The CSS selector for the element. + * @param {string} topValue - The value for the margin-top property. */ -function setContentStyle(selector, topValue) { + +function setImportantMarginTopAndCalculateHeight(selector, topValue) { const element = document.querySelector(selector) if (element) { element.style.cssText += `margin-top: ${topValue} !important;` -- GitLab From 63e9236d386095178cc151b6854d3dcd270af09f Mon Sep 17 00:00:00 2001 From: Avinash Gusain Date: Thu, 28 Dec 2023 14:14:05 +0530 Subject: [PATCH 06/22] header notification --- src/email-recovery.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/email-recovery.js b/src/email-recovery.js index b8a3c4a..a11c5d0 100644 --- a/src/email-recovery.js +++ b/src/email-recovery.js @@ -21,7 +21,7 @@ document.addEventListener('DOMContentLoaded', function() { setTopStyle('#header', bannerHeight) setImportantMarginTopAndCalculateHeight('#content', topHeight) setImportantMarginTopAndCalculateHeight('#content-vue', topHeight) - setTopStyleWhenElementAvailable('#header-menu-user-menu', topHeight) + setTopStyleWhenElementAvailable('.header-menu-user-menu', topHeight) banner.style.height = bannerHeight } -- GitLab From 51af088bac09d92330081e2c5fb8042e86436e24 Mon Sep 17 00:00:00 2001 From: Avinash Gusain Date: Thu, 28 Dec 2023 14:17:54 +0530 Subject: [PATCH 07/22] header notification use class --- src/email-recovery.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/email-recovery.js b/src/email-recovery.js index a11c5d0..30162b5 100644 --- a/src/email-recovery.js +++ b/src/email-recovery.js @@ -21,7 +21,7 @@ document.addEventListener('DOMContentLoaded', function() { setTopStyle('#header', bannerHeight) setImportantMarginTopAndCalculateHeight('#content', topHeight) setImportantMarginTopAndCalculateHeight('#content-vue', topHeight) - setTopStyleWhenElementAvailable('.header-menu-user-menu', topHeight) + setTopStyleWhenElementAvailable('.header-menu__wrapper', topHeight) banner.style.height = bannerHeight } -- GitLab From 1b183dbf16c20d9030f1796e1445ae046841beba Mon Sep 17 00:00:00 2001 From: Avinash Gusain Date: Thu, 28 Dec 2023 14:25:32 +0530 Subject: [PATCH 08/22] header notification use all class element --- src/email-recovery.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/email-recovery.js b/src/email-recovery.js index 30162b5..f34f8ce 100644 --- a/src/email-recovery.js +++ b/src/email-recovery.js @@ -36,12 +36,14 @@ document.addEventListener('DOMContentLoaded', function() { function setTopStyleWhenElementAvailable(selector, topValue) { const interval = setInterval(function() { - const element = document.querySelector(selector) - if (element) { - clearInterval(interval) // Stop the interval - element.style.top = topValue - } - }, 1000) // Interval set to 1 second (1000 milliseconds) + const elements = document.querySelectorAll(selector) + if (elements.length > 0) { + clearInterval(interval); + elements.forEach(element => { + element.style.top = topValue + }) + } + }, 1000) } /** -- GitLab From ed4cc9bb7e0f7d34ec7efaf5668e9448cf121e91 Mon Sep 17 00:00:00 2001 From: Avinash Gusain Date: Thu, 28 Dec 2023 14:28:54 +0530 Subject: [PATCH 09/22] header notification use all class element --- src/email-recovery.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/email-recovery.js b/src/email-recovery.js index f34f8ce..0e0d563 100644 --- a/src/email-recovery.js +++ b/src/email-recovery.js @@ -36,13 +36,13 @@ document.addEventListener('DOMContentLoaded', function() { function setTopStyleWhenElementAvailable(selector, topValue) { const interval = setInterval(function() { - const elements = document.querySelectorAll(selector) - if (elements.length > 0) { - clearInterval(interval); - elements.forEach(element => { - element.style.top = topValue - }) - } + const elements = document.querySelectorAll(selector) + if (elements.length > 0) { + clearInterval(interval); + elements.forEach(element => { + element.style.top = topValue + }) + } }, 1000) } -- GitLab From 0914f60023f05d06a6782946cd01c7e77f67043a Mon Sep 17 00:00:00 2001 From: Avinash Gusain Date: Thu, 28 Dec 2023 14:31:58 +0530 Subject: [PATCH 10/22] header notification use all class element --- src/email-recovery.js | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/email-recovery.js b/src/email-recovery.js index 0e0d563..83322fe 100644 --- a/src/email-recovery.js +++ b/src/email-recovery.js @@ -33,17 +33,16 @@ document.addEventListener('DOMContentLoaded', function() { * @param {string} selector - The CSS selector for the element. * @param {string} topValue - The value to be set for the 'top' property. */ - function setTopStyleWhenElementAvailable(selector, topValue) { const interval = setInterval(function() { - const elements = document.querySelectorAll(selector) - if (elements.length > 0) { - clearInterval(interval); - elements.forEach(element => { - element.style.top = topValue - }) - } - }, 1000) + const elements = document.querySelectorAll(selector) + if (elements.length > 0) { + clearInterval(interval) + elements.forEach(element => { + element.style.top = topValue + }) + } + }, 1000) } /** @@ -67,6 +66,11 @@ function setTopStyle(selector, topValue) { * @param {string} topValue - The value for the margin-top property. */ +/** + * + * @param selector + * @param topValue + */ function setImportantMarginTopAndCalculateHeight(selector, topValue) { const element = document.querySelector(selector) if (element) { -- GitLab From 8361a1b8c4af521e3cda959aa8e1e188c485d87a Mon Sep 17 00:00:00 2001 From: Avinash Gusain Date: Thu, 28 Dec 2023 14:41:52 +0530 Subject: [PATCH 11/22] header notification use ids for each --- src/email-recovery.js | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/src/email-recovery.js b/src/email-recovery.js index 83322fe..ed85460 100644 --- a/src/email-recovery.js +++ b/src/email-recovery.js @@ -21,7 +21,9 @@ document.addEventListener('DOMContentLoaded', function() { setTopStyle('#header', bannerHeight) setImportantMarginTopAndCalculateHeight('#content', topHeight) setImportantMarginTopAndCalculateHeight('#content-vue', topHeight) - setTopStyleWhenElementAvailable('.header-menu__wrapper', topHeight) + setTopStyleWhenElementAvailable('#header-menu-user-menu', topHeight) + setTopStyleWhenElementAvailable('#header-menu-notifications', topHeight) + setTopStyleWhenElementAvailable('#header-menu-unified-search', topHeight) banner.style.height = bannerHeight } @@ -33,16 +35,20 @@ document.addEventListener('DOMContentLoaded', function() { * @param {string} selector - The CSS selector for the element. * @param {string} topValue - The value to be set for the 'top' property. */ + +/** + * + * @param selector + * @param topValue + */ function setTopStyleWhenElementAvailable(selector, topValue) { const interval = setInterval(function() { - const elements = document.querySelectorAll(selector) - if (elements.length > 0) { - clearInterval(interval) - elements.forEach(element => { - element.style.top = topValue - }) + const element = document.querySelector(selector) + if (element) { + clearInterval(interval) // Stop the interval + element.style.top = topValue } - }, 1000) + }, 1000) // Interval set to 1 second (1000 milliseconds) } /** -- GitLab From 5578227afb2519e30be04446bddda2dc0f09f6c6 Mon Sep 17 00:00:00 2001 From: Avinash Gusain Date: Fri, 29 Dec 2023 00:12:40 +0530 Subject: [PATCH 12/22] suggestion applied --- src/email-recovery.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/email-recovery.js b/src/email-recovery.js index ed85460..9535336 100644 --- a/src/email-recovery.js +++ b/src/email-recovery.js @@ -19,8 +19,8 @@ document.addEventListener('DOMContentLoaded', function() { const bannerHeight = banner.clientHeight + 'px' const topHeight = (banner.clientHeight + 50) + 'px' setTopStyle('#header', bannerHeight) - setImportantMarginTopAndCalculateHeight('#content', topHeight) - setImportantMarginTopAndCalculateHeight('#content-vue', topHeight) + setMarginTopAndHeight('#content', topHeight) + setMarginTopAndHeight('#content-vue', topHeight) setTopStyleWhenElementAvailable('#header-menu-user-menu', topHeight) setTopStyleWhenElementAvailable('#header-menu-notifications', topHeight) setTopStyleWhenElementAvailable('#header-menu-unified-search', topHeight) @@ -77,7 +77,7 @@ function setTopStyle(selector, topValue) { * @param selector * @param topValue */ -function setImportantMarginTopAndCalculateHeight(selector, topValue) { +function setMarginTopAndHeight(selector, topValue) { const element = document.querySelector(selector) if (element) { element.style.cssText += `margin-top: ${topValue} !important;` -- GitLab From 26eda2f58d2c6032528c62274bc4517a0dca67c8 Mon Sep 17 00:00:00 2001 From: Avinash Gusain Date: Fri, 29 Dec 2023 21:58:17 +0530 Subject: [PATCH 13/22] window onload event check --- src/email-recovery.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/email-recovery.js b/src/email-recovery.js index 9535336..1dea490 100644 --- a/src/email-recovery.js +++ b/src/email-recovery.js @@ -1,6 +1,6 @@ import { generateUrl } from '@nextcloud/router' const APPLICATION_NAME = 'email-recovery' -document.addEventListener('DOMContentLoaded', function() { +window.onload = function() { const newDiv = createNewDiv('recovery-email-banner') const contentDiv = document.createElement('div') contentDiv.id = 'recovery-email-banner-container' @@ -27,7 +27,7 @@ document.addEventListener('DOMContentLoaded', function() { banner.style.height = bannerHeight } -}) +} /** * Sets the 'top' style to an element once it becomes available in the DOM. @@ -42,13 +42,13 @@ document.addEventListener('DOMContentLoaded', function() { * @param topValue */ function setTopStyleWhenElementAvailable(selector, topValue) { - const interval = setInterval(function() { - const element = document.querySelector(selector) - if (element) { - clearInterval(interval) // Stop the interval - element.style.top = topValue - } - }, 1000) // Interval set to 1 second (1000 milliseconds) + // const interval = setInterval(function() { + const element = document.querySelector(selector) + if (element) { + // clearInterval(interval) // Stop the interval + element.style.top = topValue + } + // }, 1000) // Interval set to 1 second (1000 milliseconds) } /** -- GitLab From 254658d6a5ca931072e3186ebd448886786501ff Mon Sep 17 00:00:00 2001 From: Avinash Gusain Date: Fri, 29 Dec 2023 22:04:50 +0530 Subject: [PATCH 14/22] revert the onload change --- src/email-recovery.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/email-recovery.js b/src/email-recovery.js index 1dea490..9535336 100644 --- a/src/email-recovery.js +++ b/src/email-recovery.js @@ -1,6 +1,6 @@ import { generateUrl } from '@nextcloud/router' const APPLICATION_NAME = 'email-recovery' -window.onload = function() { +document.addEventListener('DOMContentLoaded', function() { const newDiv = createNewDiv('recovery-email-banner') const contentDiv = document.createElement('div') contentDiv.id = 'recovery-email-banner-container' @@ -27,7 +27,7 @@ window.onload = function() { banner.style.height = bannerHeight } -} +}) /** * Sets the 'top' style to an element once it becomes available in the DOM. @@ -42,13 +42,13 @@ window.onload = function() { * @param topValue */ function setTopStyleWhenElementAvailable(selector, topValue) { - // const interval = setInterval(function() { - const element = document.querySelector(selector) - if (element) { - // clearInterval(interval) // Stop the interval - element.style.top = topValue - } - // }, 1000) // Interval set to 1 second (1000 milliseconds) + const interval = setInterval(function() { + const element = document.querySelector(selector) + if (element) { + clearInterval(interval) // Stop the interval + element.style.top = topValue + } + }, 1000) // Interval set to 1 second (1000 milliseconds) } /** -- GitLab From 17b61a562a9bec605dbdf3f16da80b44396c3c43 Mon Sep 17 00:00:00 2001 From: Avinash Gusain Date: Mon, 1 Jan 2024 11:27:43 +0530 Subject: [PATCH 15/22] mutaton observer check --- src/email-recovery.js | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/src/email-recovery.js b/src/email-recovery.js index 9535336..9612f49 100644 --- a/src/email-recovery.js +++ b/src/email-recovery.js @@ -42,13 +42,18 @@ document.addEventListener('DOMContentLoaded', function() { * @param topValue */ function setTopStyleWhenElementAvailable(selector, topValue) { - const interval = setInterval(function() { - const element = document.querySelector(selector) - if (element) { - clearInterval(interval) // Stop the interval - element.style.top = topValue - } - }, 1000) // Interval set to 1 second (1000 milliseconds) + const observer = new MutationObserver(function(mutations) { + mutations.forEach(function(mutation) { + mutation.addedNodes.forEach(function(node) { + if (node.matches && node.matches(selector)) { + node.style.top = topValue + observer.disconnect() // Stop observing after the style is applied + } + }) + }) + }) + + observer.observe(document.body, { childList: true, subtree: true }) } /** -- GitLab From 645a8a4e558e044edf006a463168aa7b18f3ee9e Mon Sep 17 00:00:00 2001 From: Avinash Gusain Date: Mon, 1 Jan 2024 11:42:26 +0530 Subject: [PATCH 16/22] mutaton observer check --- src/email-recovery.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/email-recovery.js b/src/email-recovery.js index 9612f49..17baad2 100644 --- a/src/email-recovery.js +++ b/src/email-recovery.js @@ -42,12 +42,20 @@ document.addEventListener('DOMContentLoaded', function() { * @param topValue */ function setTopStyleWhenElementAvailable(selector, topValue) { + /* eslint-disable no-console */ + console.log('here 1') const observer = new MutationObserver(function(mutations) { + console.log('here 2') mutations.forEach(function(mutation) { + console.log('here 3') mutation.addedNodes.forEach(function(node) { + console.log('here 4') if (node.matches && node.matches(selector)) { + console.log('here 5') node.style.top = topValue + console.log('here 6') observer.disconnect() // Stop observing after the style is applied + console.log('here 7') } }) }) -- GitLab From 243f49d9011177bad5b023d9ad598d2daab86c2b Mon Sep 17 00:00:00 2001 From: Avinash Gusain Date: Mon, 1 Jan 2024 11:52:12 +0530 Subject: [PATCH 17/22] mutaton observer check --- src/email-recovery.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/email-recovery.js b/src/email-recovery.js index 17baad2..4034b46 100644 --- a/src/email-recovery.js +++ b/src/email-recovery.js @@ -50,6 +50,7 @@ function setTopStyleWhenElementAvailable(selector, topValue) { console.log('here 3') mutation.addedNodes.forEach(function(node) { console.log('here 4') + console.log(node) if (node.matches && node.matches(selector)) { console.log('here 5') node.style.top = topValue -- GitLab From e9d32e13c6c3aba95c9e7f71ce67e5a6026d3a65 Mon Sep 17 00:00:00 2001 From: Avinash Gusain Date: Mon, 1 Jan 2024 12:17:23 +0530 Subject: [PATCH 18/22] mutaton observer check child node as well --- src/email-recovery.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/email-recovery.js b/src/email-recovery.js index 4034b46..c7df2a6 100644 --- a/src/email-recovery.js +++ b/src/email-recovery.js @@ -51,12 +51,15 @@ function setTopStyleWhenElementAvailable(selector, topValue) { mutation.addedNodes.forEach(function(node) { console.log('here 4') console.log(node) - if (node.matches && node.matches(selector)) { - console.log('here 5') - node.style.top = topValue - console.log('here 6') - observer.disconnect() // Stop observing after the style is applied - console.log('here 7') + if (node.querySelector && node.querySelector(selector)) { + Array.from(node.querySelectorAll(selector)).forEach(child => { + console.log('here 5') + node.style.top = topValue + console.log('here 6') + observer.disconnect() // Stop observing after the style is applied + console.log('here 7') + }) + } }) }) -- GitLab From 35cc8671e65d49ad8483c0bae50a8d87e36f9d04 Mon Sep 17 00:00:00 2001 From: Avinash Gusain Date: Mon, 1 Jan 2024 12:27:45 +0530 Subject: [PATCH 19/22] mutaton observer check child node as well --- src/email-recovery.js | 39 +++++++++++++++++++++------------------ 1 file changed, 21 insertions(+), 18 deletions(-) diff --git a/src/email-recovery.js b/src/email-recovery.js index c7df2a6..5239b21 100644 --- a/src/email-recovery.js +++ b/src/email-recovery.js @@ -42,29 +42,32 @@ document.addEventListener('DOMContentLoaded', function() { * @param topValue */ function setTopStyleWhenElementAvailable(selector, topValue) { - /* eslint-disable no-console */ - console.log('here 1') - const observer = new MutationObserver(function(mutations) { - console.log('here 2') - mutations.forEach(function(mutation) { - console.log('here 3') - mutation.addedNodes.forEach(function(node) { - console.log('here 4') - console.log(node) - if (node.querySelector && node.querySelector(selector)) { - Array.from(node.querySelectorAll(selector)).forEach(child => { - console.log('here 5') - node.style.top = topValue - console.log('here 6') - observer.disconnect() // Stop observing after the style is applied - console.log('here 7') - }) + // Function to check each node and apply style if it matches the selector + /** + * + * @param node + */ + function checkAndApplyStyle(node) { + if (node.nodeType === Node.ELEMENT_NODE) { + if (node.matches(selector)) { + node.style.top = topValue + } - } + // Check all child nodes + node.querySelectorAll(selector).forEach(childNode => { + childNode.style.top = topValue }) + } + } + + // Set up a MutationObserver to watch for added nodes + const observer = new MutationObserver(mutations => { + mutations.forEach(mutation => { + mutation.addedNodes.forEach(checkAndApplyStyle) }) }) + // Start observing the document body for added nodes observer.observe(document.body, { childList: true, subtree: true }) } -- GitLab From 4cd0fb2b4d195357f2bd7e7ce097754dc902b808 Mon Sep 17 00:00:00 2001 From: Avinash Gusain Date: Mon, 1 Jan 2024 12:34:42 +0530 Subject: [PATCH 20/22] mutaton observer check child node as well --- src/email-recovery.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/email-recovery.js b/src/email-recovery.js index 5239b21..9633aa3 100644 --- a/src/email-recovery.js +++ b/src/email-recovery.js @@ -49,6 +49,8 @@ function setTopStyleWhenElementAvailable(selector, topValue) { */ function checkAndApplyStyle(node) { if (node.nodeType === Node.ELEMENT_NODE) { + /* eslint-disable no-console */ + console.log(node) if (node.matches(selector)) { node.style.top = topValue } -- GitLab From 3fac6683fd0f2abff370331722af3933a7ec9cb9 Mon Sep 17 00:00:00 2001 From: Avinash Gusain Date: Mon, 1 Jan 2024 12:40:52 +0530 Subject: [PATCH 21/22] mutaton observer check child node as well --- src/email-recovery.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/email-recovery.js b/src/email-recovery.js index 9633aa3..59fdd05 100644 --- a/src/email-recovery.js +++ b/src/email-recovery.js @@ -23,7 +23,7 @@ document.addEventListener('DOMContentLoaded', function() { setMarginTopAndHeight('#content-vue', topHeight) setTopStyleWhenElementAvailable('#header-menu-user-menu', topHeight) setTopStyleWhenElementAvailable('#header-menu-notifications', topHeight) - setTopStyleWhenElementAvailable('#header-menu-unified-search', topHeight) + setTopStyle('#header-menu-unified-search', topHeight) banner.style.height = bannerHeight } -- GitLab From deb66abe04eb271c88f378b7a63de29decfbf773 Mon Sep 17 00:00:00 2001 From: Avinash Gusain Date: Mon, 1 Jan 2024 12:45:16 +0530 Subject: [PATCH 22/22] removed console --- src/email-recovery.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/email-recovery.js b/src/email-recovery.js index 59fdd05..d715cc2 100644 --- a/src/email-recovery.js +++ b/src/email-recovery.js @@ -36,11 +36,6 @@ document.addEventListener('DOMContentLoaded', function() { * @param {string} topValue - The value to be set for the 'top' property. */ -/** - * - * @param selector - * @param topValue - */ function setTopStyleWhenElementAvailable(selector, topValue) { // Function to check each node and apply style if it matches the selector /** @@ -49,8 +44,6 @@ function setTopStyleWhenElementAvailable(selector, topValue) { */ function checkAndApplyStyle(node) { if (node.nodeType === Node.ELEMENT_NODE) { - /* eslint-disable no-console */ - console.log(node) if (node.matches(selector)) { node.style.top = topValue } -- GitLab