From 825cf84db41b0ba5d0952c8bb202870c621960c9 Mon Sep 17 00:00:00 2001
From: Philipp Pracht <philipp.pracht@sap.com>
Date: Mon, 15 Nov 2021 13:34:30 +0100
Subject: [PATCH] attempt to sync style change in main and frame

---
 client/src/lifecycleManager.js | 25 ++++++++++++++++
 core/src/Backdrop.html         | 54 +++++++++++++++++++++++++++++-----
 2 files changed, 72 insertions(+), 7 deletions(-)

diff --git a/client/src/lifecycleManager.js b/client/src/lifecycleManager.js
index 237d749fcb..794958a701 100644
--- a/client/src/lifecycleManager.js
+++ b/client/src/lifecycleManager.js
@@ -102,6 +102,31 @@ class LifecycleManager extends LuigiClientBase {
       setAuthData(e.data.authData);
     });
 
+    helpers.addEventListener('luigi.ux.overflow-backdrop', e => {
+      console.log('luigi.ux.overflow-backdrop', e);
+      if (e.data.visible) {
+        if (e.data.offsetY > 0 || e.data.offsetX > 0) {
+          const bdStyle = document.querySelector('head style[lui-backdrop-style]');
+          const stag = bdStyle || document.createElement('style');
+          stag.innerHTML = `
+          .lui-backdrop-overlay {
+            position: fixed;
+            top: ${e.data.offsetY}px; 
+            left: ${e.data.offsetX}px;
+            bottom: 0;
+            right: 0;
+          }
+          `;
+          stag.setAttribute('lui-backdrop-style', true);
+          document.head.appendChild(stag);
+
+          document.querySelector('body > .main').classList.add('lui-backdrop-overlay');
+        }
+      } else {
+        document.querySelector('body > .main').classList.remove('lui-backdrop-overlay');
+      }
+    });
+
     helpers.addEventListener('luigi.navigate', e => {
       setContext(e.data);
       if (!this.currentContext.internal.isNavigateBack && !this.currentContext.withoutSync) {
diff --git a/core/src/Backdrop.html b/core/src/Backdrop.html
index 9fd06c7045..b21f16a769 100644
--- a/core/src/Backdrop.html
+++ b/core/src/Backdrop.html
@@ -53,19 +53,50 @@
     if (!backdropDisabled) {
       setBackdropClass();
       EventListenerHelpers.addEventListener('message', e => {
-        if (!IframeHelpers.getValidMessageSource(e)) return;
+        const msgSrc = IframeHelpers.getValidMessageSource(e);
+        if (!msgSrc) return;
         if (disable !== true) {
           if ('luigi.add-backdrop' === e.data.msg) {
-            if (isValidForArea(e)) {
-              backdropActive = true;
+            if (true) {
+              const message = {
+                msg: 'luigi.ux.overflow-backdrop',
+                visible: true,
+                offsetX: msgSrc.getBoundingClientRect().left,
+                offsetY: msgSrc.getBoundingClientRect().top
+              };
+              IframeHelpers.sendMessageToIframe(msgSrc, message);
+              setTimeout(() => {
+                document.body.classList.add('lui-overflow-backdrop');
+              }, 1);
             } else {
-              backdropActive = false;
+              if (isValidForArea(e)) {
+                backdropActive = true;
+              } else {
+                backdropActive = false;
+              }
+              dispatch('stateChanged', { backdropActive: true });
             }
-            dispatch('stateChanged', { backdropActive: true });
           }
           if ('luigi.remove-backdrop' === e.data.msg) {
-            backdropActive = false;
-            dispatch('stateChanged', { backdropActive: false });
+            if (true) {
+              const message = {
+                msg: 'luigi.ux.overflow-backdrop',
+                visible: false
+              };
+              IframeHelpers.sendMessageToIframe(msgSrc, message);
+              const style = document
+                .querySelector('.iframeContainer')
+                .getAttribute('style');
+              document
+                .querySelector('.iframeContainer')
+                .setAttribute('style', 'transition: none !important');
+              setTimeout(() => {
+                document.body.classList.remove('lui-overflow-backdrop');
+              }, 1);
+            } else {
+              backdropActive = false;
+              dispatch('stateChanged', { backdropActive: false });
+            }
           }
         }
       });
@@ -93,4 +124,13 @@
     right: 0;
     z-index: 2;
   }
+
+  :global(html body.lui-overflow-backdrop .iframeContainer) {
+    position: fixed;
+    top: 0 !important;
+    left: 0 !important;
+    z-index: 1000000;
+    transition: none !important;
+    background-color: transparent;
+  }
 </style>