Resizing main iframe container if a drawer does not overlap (SAP#2294)

client/luigi-client.d.ts

@@ -50,6 +50,7 @@ export declare interface DrawerSettings {
   header?: any;
   size?: 'l' | 'm' | 's' | 'xs';
   backdrop?: boolean;
+  overlap?: boolean;
 }
 
 export declare interface Context {

client/src/linkManager.js

@@ -178,6 +178,7 @@ export class linkManager extends LuigiClientBase {
    * @param {any} drawerSettings.header By default, the header is visible. The default title is the node label, but the header could also be an object with a `title` attribute allowing you to specify your own title.  An 'x' icon is displayed to close the drawer view.
    * @param {boolean} drawerSettings.backdrop By default, it is set to `false`. If it is set to `true` the rest of the screen has a backdrop.
    * @param {('l'|'m'|'s'|'xs')} [drawerSettings.size="s"] size of the drawer
+   * @param {boolean} [drawerSettings.overlap=true] enable resizing of main microfrontend iFrame after drawer open
    * @since 1.6.0
    * @example
    * LuigiClient.linkManager().openAsDrawer('projects/pr1/drawer', {header:true, backdrop:true, size:'s'});

core/src/App.html

@@ -802,6 +802,8 @@
   };
 
   const onResize = () => {
+    resizeMicrofrontendIframe();
+
     const isMobileToDesktop =
       window.innerWidth >= CSS_BREAKPOINTS.desktopMinWidth &&
       previousWindowWidth < CSS_BREAKPOINTS.desktopMinWidth;
@@ -1048,14 +1050,37 @@
     }
   };
 
+  const isResizeMF = () => {
+    return (
+      window.innerWidth >= CSS_BREAKPOINTS.desktopMinWidth &&
+      mfDrawer.settings &&
+      !mfDrawer.settings.overlap
+    );
+  };
+
+  const resizeMicrofrontendIframe = () => {
+    if (!isResizeMF()) return;
+
+    const drawer = document.querySelector('.iframeModalCtn._drawer');
+    if (drawer) {
+      let { width } = getComputedStyle(drawer);
+      IframeHelpers.getCurrentMicrofrontendIframe().setAttribute(
+        'style',
+        `width: calc(100% - ${width})`
+      );
+    }
+  };
+
   const drawerIframeCreated = event => {
     drawerIframe = event.detail.modalIframe;
     drawerIframeData = event.detail.modalIframeData;
+    resizeMicrofrontendIframe();
   };
 
   const drawerWCCreated = event => {
     drawerWC = event.detail.modalWC;
     drawerWCData = event.detail.modalWCData;
+    resizeMicrofrontendIframe();
   };
 
   const setDrawerState = event => {
@@ -1077,6 +1102,7 @@
             resetMicrofrontendDrawerData();
           });
         }
+        IframeHelpers.getCurrentMicrofrontendIframe().setAttribute('style', null);
       } catch (e) {
         console.log(e);
       }
@@ -1622,7 +1648,9 @@
     }
   });
 
-  afterUpdate(() => {});
+  afterUpdate(() => {
+    resizeMicrofrontendIframe();
+  })
 
   beforeUpdate(() => {
     breadcrumbsEnabled = GenericHelpers.requestExperimentalFeature('breadcrumbs');

core/src/Modal.html

@@ -115,6 +115,9 @@ <h2 class="fd-title fd-title--h5" id="dialog-title-1">
       if (!settings.size) {
         settings.size = 's';
       }
+      if (settings.overlap === undefined) {
+        settings.overlap = true;
+      }
     } else {
       if (!settings.title) {
         settings.title = nodeObject.label;

docs/luigi-client-api.md

@@ -551,6 +551,7 @@ Opens a view in a drawer. You can specify the size of the drawer, whether the dr
     -   `drawerSettings.header` **any** By default, the header is visible. The default title is the node label, but the header could also be an object with a `title` attribute allowing you to specify your own title.  An 'x' icon is displayed to close the drawer view.
     -   `drawerSettings.backdrop` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** By default, it is set to `false`. If it is set to `true` the rest of the screen has a backdrop.
     -   `drawerSettings.size` **(`"l"` \| `"m"` \| `"s"` \| `"xs"`)** size of the drawer (optional, default `"s"`)
+    -   `drawerSettings.overlap` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** enable resizing of main microfrontend iFrame after drawer open (optional, default `true`)
 
 ##### Examples