@one-commerce/sdk-backoffice-vue3 1.12.0-alpha.0 → 1.12.1-alpha.0

package/lib/bundles/bundle.esm.js

@@ -280,6 +280,8 @@ class Sdk extends Events {
 
     _defineProperty(this, "autoheight", true);
 
+    _defineProperty(this, "heightMutationObserver", null);
+
     _defineProperty(this, "origin", void 0);
 
     _defineProperty(this, "isInitialized", false);
@@ -318,19 +320,50 @@ class Sdk extends Events {
     this.channel.subscribe(main.Message.FRAME_HEIGHT_REQUEST, payload => {
       if (this.autoheight) {
         Sdk.log('Request for iframe height');
-        const body = document.body,
-              html = document.documentElement;
-        const height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
-        this.channel.postMessage(main.Message.FRAME_HEIGHT_CHANGE, height);
+        this.sendFrameHeight();
       }
     });
     this.channel.connect().then(() => {
       Sdk.log('Connected with ONe SDK');
+
+      if (this.autoheight) {
+        this.initializeHeightObserver();
+      }
     });
     this.setupOptions(options);
     Sdk.log('Initialized.');
   }
 
+  sendFrameHeight() {
+    const body = document.body,
+          html = document.documentElement;
+    const height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
+    this.channel.postMessage(main.Message.FRAME_HEIGHT_CHANGE, height);
+  }
+
+  initializeHeightObserver() {
+    if ("MutationObserver" in window) {
+      const onMutationObserved = () => {
+        this.sendFrameHeight();
+      };
+
+      const target = document.querySelector('body'),
+            config = {
+        attributes: true,
+        attributeOldValue: false,
+        characterData: true,
+        characterDataOldValue: false,
+        childList: true,
+        subtree: true
+      };
+      this.heightMutationObserver = new MutationObserver(onMutationObserved);
+      Sdk.log('Create body MutationObserver');
+      this.heightMutationObserver.observe(target, config);
+    } else {
+      Sdk.warn('MutationObserver not available. Auto-height functionality disabled.');
+    }
+  }
+
   setupOptions(options) {
     if (options) {
       if (typeof options.debug !== 'undefined') {