@saasquatch/squatch-js 2.8.2-15 → 2.8.2-16

package/dist/squatch.esm.js

@@ -1116,51 +1116,34 @@ class EmbedWidget extends Widget {
       this.container = container;
     }
   }
+  //Old code for testing
   async load() {
-    var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+    var _a2, _b, _c, _d, _e;
     const brandingConfig = (_b = (_a2 = this.context.widgetConfig) == null ? void 0 : _a2.values) == null ? void 0 : _b.brandingConfig;
-    const initialHeight = brandingConfig == null ? void 0 : brandingConfig.loadingHeight;
-    (_d = (_c = brandingConfig == null ? void 0 : brandingConfig.color) == null ? void 0 : _c.loadingSkeleton) == null ? void 0 : _d.background;
-    (_f = (_e = brandingConfig == null ? void 0 : brandingConfig.color) == null ? void 0 : _e.loadingSkeleton) == null ? void 0 : _f.animationBackground;
-    (_g = brandingConfig == null ? void 0 : brandingConfig.border) == null ? void 0 : _g.borderColor;
-    const sizes = (_h = brandingConfig == null ? void 0 : brandingConfig.widgetSize) == null ? void 0 : _h.embeddedWidgets;
+    const sizes = (_c = brandingConfig == null ? void 0 : brandingConfig.widgetSize) == null ? void 0 : _c.embeddedWidgets;
     const maxWidth = (sizes == null ? void 0 : sizes.maxWidth) ? formatWidth(sizes.maxWidth) : "";
     const minWidth = (sizes == null ? void 0 : sizes.minWidth) ? formatWidth(sizes.minWidth) : "";
-    console.log({
-      brandingConfig,
-      initialHeight,
-      widgetConfig: this.context.widgetConfig
-    });
-    const frame = this._createFrame({
-      minWidth,
-      maxWidth,
-      initialHeight
-    });
+    const frame = this._createFrame({ minWidth, maxWidth });
     const element = this._findElement();
-    frame.style.display = "none";
-    const injectContents = (target) => {
-      target.appendChild(frame);
-    };
-    if ((_i = this.context) == null ? void 0 : _i.container) {
+    if ((_d = this.context) == null ? void 0 : _d.container) {
       element.style.visibility = "hidden";
       element.style.height = "0";
       element.style["overflow-y"] = "hidden";
     }
     if (this.container) {
       if (element.shadowRoot) {
-        if (((_j = element.shadowRoot.lastChild) == null ? void 0 : _j.nodeName) === "IFRAME") {
+        if (((_e = element.shadowRoot.lastChild) == null ? void 0 : _e.nodeName) === "IFRAME") {
           element.shadowRoot.replaceChild(frame, element.shadowRoot.lastChild);
         } else {
-          injectContents(element.shadowRoot);
+          element.shadowRoot.appendChild(frame);
         }
       } else if (element.firstChild) {
-        element.innerHTML = "";
-        injectContents(element);
+        element.replaceChild(frame, element.firstChild);
       } else {
-        injectContents(element);
+        element.appendChild(frame);
       }
     } else if (!element.firstChild || element.firstChild.nodeName === "#text") {
-      injectContents(element);
+      element.appendChild(frame);
     }
     const { contentWindow } = frame;
     if (!contentWindow) {
@@ -1168,29 +1151,14 @@ class EmbedWidget extends Widget {
     }
     const frameDoc = contentWindow.document;
     frameDoc.open();
-    console.log({ content: this.content, context: this.context, this: this });
-    const domain = this.widgetApi.domain;
-    frameDoc.write(`
-      ${((_k = brandingConfig == null ? void 0 : brandingConfig.main) == null ? void 0 : _k.brandFont) && `
-        <link rel="preconnect" href="https://fast${domain === "https://staging.referralsaasquatch.com" && "-staging"}.ssqt.io">
-        <link rel="preconnect" href="https://fonts.gstatic.com">
-        <link rel="preconnect" href="https://fonts.googleapis.com">
-        <link rel="preload" href="https://fonts.googleapis.com/css2?family=${encodeURIComponent(
-      (_l = brandingConfig == null ? void 0 : brandingConfig.main) == null ? void 0 : _l.brandFont
-    )}" as="style">`}
-      <script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>
-      <style data-styles>
-        html { visibility:hidden;}
-      </style>
-      ${this.content}
-
-      `);
+    frameDoc.write(this.content);
+    frameDoc.write(
+      `<script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>`
+    );
     frameDoc.close();
     domready(frameDoc, async () => {
-      frame.style.display = "block";
       const _sqh = contentWindow.squatch || contentWindow.widgetIdent;
-      frame.height = initialHeight || frameDoc.body.scrollHeight;
-      console.log({ height: frameDoc.body.scrollHeight });
+      frame.height = frameDoc.body.scrollHeight;
       const ro = new contentWindow["ResizeObserver"]((entries) => {
         for (const entry of entries) {
           const { height } = entry.contentRect;
@@ -1207,6 +1175,126 @@ class EmbedWidget extends Widget {
       }
     });
   }
+  // async load() {
+  //   const brandingConfig = this.context.widgetConfig?.values?.brandingConfig;
+  //   // @ts-ignore
+  //   const initialHeight = brandingConfig?.loadingHeight;
+  //   const skeletonBackgroundColor =
+  //     brandingConfig?.color?.loadingSkeleton?.background;
+  //   const skeletonShimmerColor =
+  //     brandingConfig?.color?.loadingSkeleton?.animationBackground;
+  //   const borderColor = brandingConfig?.border?.borderColor;
+  //   const sizes = brandingConfig?.widgetSize?.embeddedWidgets;
+  //   const maxWidth = sizes?.maxWidth ? formatWidth(sizes.maxWidth) : "";
+  //   const minWidth = sizes?.minWidth ? formatWidth(sizes.minWidth) : "";
+  //   console.log({
+  //     brandingConfig,
+  //     initialHeight,
+  //     widgetConfig: this.context.widgetConfig,
+  //   });
+  //   // const skeletonHTML = getSkeleton({
+  //   //   height: initialHeight,
+  //   //   skeletonBackgroundColor,
+  //   //   skeletonShimmerColor,
+  //   //   borderColor,
+  //   // });
+  //   // const skeletonContainer = document.createElement("div");
+  //   // skeletonContainer.innerHTML = skeletonHTML;
+  //   const frame = this._createFrame({
+  //     minWidth,
+  //     maxWidth,
+  //     initialHeight,
+  //   });
+  //   const element = this._findElement();
+  //   // element.innerHTML = skeletonHTML;
+  //   // Hide frame initially
+  //   frame.style.display = "none";
+  //   const injectContents = (target: HTMLElement | ShadowRoot) => {
+  //     // Optional: Clear target to prevent duplicates if load() is called twice
+  //     // target.innerHTML = "";
+  //     // target.appendChild(skeletonContainer);
+  //     target.appendChild(frame);
+  //   };
+  //   if (this.context?.container) {
+  //     // Custom container is used
+  //     element.style.visibility = "hidden";
+  //     element.style.height = "0";
+  //     element.style["overflow-y"] = "hidden";
+  //   }
+  //   if (this.container) {
+  //     if (element.shadowRoot) {
+  //       if (element.shadowRoot.lastChild?.nodeName === "IFRAME") {
+  //         element.shadowRoot.replaceChild(frame, element.shadowRoot.lastChild);
+  //       } else {
+  //         injectContents(element.shadowRoot);
+  //       }
+  //     } else if (element.firstChild) {
+  //       // If replacing, wipe and reload
+  //       element.innerHTML = "";
+  //       injectContents(element);
+  //     } else {
+  //       injectContents(element);
+  //     }
+  //   }
+  //   // else if (!element.firstChild || element.firstChild.nodeName === "#text") {
+  //   //   injectContents(element);
+  //   // }
+  //   const { contentWindow } = frame;
+  //   if (!contentWindow) {
+  //     throw new Error("Frame needs a content window");
+  //   }
+  //   const frameDoc = contentWindow.document;
+  //   frameDoc.open();
+  //   console.log({ content: this.content, context: this.context, this: this });
+  //   const domain = this.widgetApi.domain;
+  //   frameDoc.write(`
+  //     ${
+  //       brandingConfig?.main?.brandFont &&
+  //       `
+  //       <link rel="preconnect" href="https://fast${
+  //         domain === "https://staging.referralsaasquatch.com" && "-staging"
+  //       }.ssqt.io">
+  //       <link rel="preconnect" href="https://fonts.gstatic.com">
+  //       <link rel="preconnect" href="https://fonts.googleapis.com">
+  //       <link rel="preload" href="https://fonts.googleapis.com/css2?family=${encodeURIComponent(
+  //         brandingConfig?.main?.brandFont
+  //       )}" as="style">`
+  //     }
+  //     <script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>
+  //     <style data-styles>
+  //       html { visibility:hidden;}
+  //     </style>
+  //     ${this.content}
+  //     `);
+  //   frameDoc.close();
+  //   domready(frameDoc, async () => {
+  //     // if (skeletonContainer && skeletonContainer.parentNode) {
+  //     //   skeletonContainer.parentNode.removeChild(skeletonContainer);
+  //     // }
+  //     frame.style.display = "block";
+  //     const _sqh = contentWindow.squatch || contentWindow.widgetIdent;
+  //     // @ts-ignore -- number will be cast to string by browsers
+  //     frame.height = initialHeight || frameDoc.body.scrollHeight;
+  //     console.log({ height: frameDoc.body.scrollHeight });
+  //     // Adjust frame height when size of body changes
+  //     /* istanbul ignore next: hard to test */
+  //     const ro = new contentWindow["ResizeObserver"]((entries) => {
+  //       for (const entry of entries) {
+  //         const { height } = entry.contentRect;
+  //         // @ts-ignore -- number will be cast to string by browsers
+  //         frame.height = height;
+  //       }
+  //     });
+  //     const container = await this._findInnerContainer(frame);
+  //     ro.observe(container);
+  //     if (this._shouldFireLoadEvent()) {
+  //       this._loadEvent(_sqh);
+  //       _log("loaded");
+  //     } else if (frameDoc) {
+  //       this._attachLoadEventListener(frameDoc, _sqh);
+  //     }
+  //   });
+  // }
   /**
    * Un-hide if element is available and refresh data
    */