Merge branch 'feature-wc-support' into web-components-grid

hardl · Dec 2, 2020 · fefc010 · fefc010
2 parents 1372c81 + 8372fe6
commit fefc010
Show file tree

Hide file tree

Showing 10 changed files with 703 additions and 388 deletions.
diff --git a/client/src/luigi-client.js b/client/src/luigi-client.js
@@ -84,10 +84,8 @@ class LuigiClient {
   /**
    * @private
    */
-  storageManager(){
+  storageManager() {
     return storageManager;
   }
-
-
 }
 export default LuigiClient = new LuigiClient();
diff --git a/core/src/App.html b/core/src/App.html
@@ -926,7 +926,7 @@
     modalWCData = event.detail.modalWCData;
   };
 
-  const closeModal = (event) => {
+  const closeModal = event => {
     if (modalIframe) {
       getUnsavedChangesModalPromise(modalIframe.contentWindow).then(() => {
         resetMicrofrontendModalData();
@@ -1327,7 +1327,13 @@
       if ('storage' === e.data.msg) {
         let getValidMessageSource = IframeHelpers.getValidMessageSource(e);
         let microfrontendId = getValidMessageSource.luigi.id;
-        StorageHelper.process(microfrontendId, e.origin, e.data.data.id, e.data.data.operation, e.data.data.params);
+        StorageHelper.process(
+          microfrontendId,
+          e.origin,
+          e.data.data.id,
+          e.data.data.operation,
+          e.data.data.params
+        );
       }
     });
 

diff --git a/core/src/Modal.html b/core/src/Modal.html
@@ -1,9 +1,12 @@
-<svelte:window on:keydown="{handleKeydown}" />
-<div class="{(isModal || (isDrawer && settings.backdrop))?'fd-dialog fd-dialog--active':'drawer-dialog'}"
-  style="{isModal?'z-index:1001':''}">
+<svelte:window on:keydown="{handleKeydown}"/>
+<div
+  class="{(isModal || (isDrawer && settings.backdrop))?'fd-dialog fd-dialog--active':'drawer-dialog'}"
+  style="{isModal?'z-index:1001':''}"
+>
   <div
     class="fd-dialog__content {isDrawer? (settings.backdrop?'drawer drawer-dialog__content drawer__backdrop':'drawer drawer-dialog__content'):'lui-modal-mf'}"
-    data-testid="modal-mf">
+    data-testid="modal-mf"
+  >
     {#if isModal || (isDrawer && settings.header)}
     <div class="fd-dialog__header fd-bar fd-bar--header">
       <Backdrop on:stateChanged="{backdropStateChanged}"></Backdrop>
@@ -129,7 +132,7 @@ <h3 class="fd-dialog__title">{settings.title}</h3>
       if (nodeObject.webcomponent) {
         //"Workaround" because we need a webcomponent client api to hide/show the loadingIndicator
         showLoadingIndicator = false;
-        setModalSize();
+        await setModalSize();
         WebComponentService.renderWebComponent(
           nodeObject.viewUrl,
           document.querySelector('.iframeModalCtn'),
@@ -158,7 +161,7 @@ <h3 class="fd-dialog__title">{settings.title}</h3>
     }
   };
 
-  const setModalSize = () => {
+  const setModalSize = async () => {
     const elem = document.getElementsByClassName('lui-modal-mf');
     let modalSize = '80%';
     if (settings.size) {
@@ -168,19 +171,17 @@ <h3 class="fd-dialog__title">{settings.title}</h3>
         modalSize = '60%';
       } else if (settings.size === 's') {
         modalSize = '40%';
-      };
+      }
     }
     elem[0].setAttribute('style', `width:${modalSize};height:${modalSize}`);
-  }
-
+  };
 
   const createIframeModal = async (viewUrl, componentData) => {
     if (isDrawer) {
       await setDrawerSize();
     } else {
-      setModalSize();
+      await setModalSize();
     }
-
     if (viewUrl) {
       viewUrl = RoutingHelpers.substituteViewUrl(viewUrl, componentData);
     }
@@ -247,15 +248,20 @@ <h3 class="fd-dialog__title">{settings.title}</h3>
     }
 
     if ('luigi.close-modal' === e.data.msg) {
-      dispatch('close', { 'type': 'modal' });
+      dispatch('close', { type: 'modal' });
     }
   };
 
-  const backdropStateChanged = (event) => {
-    if (event && event.detail && event.detail.backdropActive && event.detail.drawer) {
+  const backdropStateChanged = event => {
+    if (
+      event &&
+      event.detail &&
+      event.detail.backdropActive &&
+      event.detail.drawer
+    ) {
       //renderBackdrop = false;
     }
-  }
+  };
 
   onMount(() => {
     EventListenerHelpers.addEventListener('message', onMessage);
@@ -276,7 +282,7 @@ <h3 class="fd-dialog__title">{settings.title}</h3>
 
 <style type="text/scss">
   @import 'styles/variables';
-  .drawer-dialog{
+  .drawer-dialog {
     position: absolute;
     top: $topNavHeight;
     bottom: 0;
@@ -286,16 +292,16 @@ <h3 class="fd-dialog__title">{settings.title}</h3>
   }
 
   .drawer {
-    bottom:0;
+    bottom: 0;
     width: 25vw;
     overflow-y: auto;
     left: auto;
     right: 0;
     height: 100%;
   }
 
-  .drawer__backdrop{
-    top:$topNavHeight;
+  .drawer__backdrop {
+    top: $topNavHeight;
   }
 
   .iframeModalCtn {
@@ -329,21 +335,21 @@ <h3 class="fd-dialog__title">{settings.title}</h3>
     height: 100%;
   }
 
-  .drawer-dialog__content{
+  .drawer-dialog__content {
     max-width: none;
     max-height: none;
     min-width: 0;
   }
 
-  .drawer-dialog--active{
-    display:block;
+  .drawer-dialog--active {
+    display: block;
     background-color: transparent;
   }
 
   @media (max-width: 599px) {
     .drawer-dialog__content:not(.fd-dialog__content--mobile) {
-        max-width: none;
-        min-width: 50vw;
+      max-width: none;
+      min-width: 50vw;
     }
   }
 
@@ -354,4 +360,4 @@ <h3 class="fd-dialog__title">{settings.title}</h3>
       padding-bottom: 0;
     }
   }
-</style>
+</style>
diff --git a/core/src/utilities/helpers/index.js b/core/src/utilities/helpers/index.js
@@ -7,4 +7,4 @@ export * from './navigation-helpers';
 export * from './routing-helpers';
 export * from './state-helpers';
 export * from './event-listener-helpers';
-export * from './storage-helper'
+export * from './storage-helper';