@sitepulse/web 1.0.1 → 1.0.2

package/dist/index.js

@@ -1241,6 +1241,7 @@ function renderCampaignDOM(campaign, handlers = {}) {
   let originalPaddingTop = null;
   let originalPaddingBottom = null;
   let resizeObserver = null;
+  const shiftedElements = [];
   if (isBanner && typeof document !== "undefined" && document.body) {
     try {
       const isBottom = design.position === "bottom";
@@ -1262,14 +1263,64 @@ function renderCampaignDOM(campaign, handlers = {}) {
         }
       } catch {
       }
+      const findTopFixedElements = () => {
+        const candidates = [];
+        try {
+          const elements = Array.from(
+            document.querySelectorAll(
+              'header, nav, [role="banner"], [class*="header"], [class*="navbar"], [class*="nav-fixed"], [class*="sticky"]'
+            )
+          );
+          Array.from(document.body.children).forEach((child) => {
+            if (child instanceof HTMLElement && child !== wrapper && child !== overlayEl && !elements.includes(child)) {
+              elements.push(child);
+            }
+          });
+          for (const el of elements) {
+            if (el === wrapper || el === overlayEl || !el.isConnected) continue;
+            const style = window.getComputedStyle(el);
+            const pos = style.position;
+            if (pos === "fixed" || pos === "sticky") {
+              const rect = el.getBoundingClientRect();
+              if (rect.top <= 15 && rect.height > 0 && rect.height < window.innerHeight * 0.5) {
+                candidates.push(el);
+              }
+            }
+          }
+        } catch {
+        }
+        return candidates;
+      };
       const updateOffset = () => {
         if (!wrapper || !document.body) return;
         const bannerHeight = wrapper.offsetHeight;
         if (bannerHeight > 0) {
           if (isBottom) {
             document.body.style.paddingBottom = `${basePaddingBottom + bannerHeight}px`;
+            document.documentElement.style.setProperty(
+              "--sitepulse-bottom-banner-height",
+              `${bannerHeight}px`
+            );
           } else {
             document.body.style.paddingTop = `${basePaddingTop + bannerHeight}px`;
+            document.documentElement.style.setProperty(
+              "--sitepulse-top-banner-height",
+              `${bannerHeight}px`
+            );
+            document.documentElement.classList.add("has-sitepulse-top-banner");
+            const fixedHeaders = findTopFixedElements();
+            for (const el of fixedHeaders) {
+              if (!shiftedElements.some((r) => r.el === el)) {
+                shiftedElements.push({
+                  el,
+                  originalTop: el.style.top,
+                  originalTransform: el.style.transform,
+                  originalTransition: el.style.transition
+                });
+                el.style.transition = el.style.transition ? `${el.style.transition}, transform 0.2s ease` : "transform 0.2s ease";
+                el.style.transform = `translateY(${bannerHeight}px)`;
+              }
+            }
           }
         }
       };
@@ -1302,6 +1353,23 @@ function renderCampaignDOM(campaign, handlers = {}) {
         if (originalPaddingBottom !== null) {
           document.body.style.paddingBottom = originalPaddingBottom;
         }
+        document.documentElement.style.setProperty(
+          "--sitepulse-top-banner-height",
+          "0px"
+        );
+        document.documentElement.style.setProperty(
+          "--sitepulse-bottom-banner-height",
+          "0px"
+        );
+        document.documentElement.classList.remove("has-sitepulse-top-banner");
+        for (const record of shiftedElements) {
+          if (record.el && record.el.isConnected) {
+            record.el.style.transform = record.originalTransform;
+            record.el.style.transition = record.originalTransition;
+            record.el.style.top = record.originalTop;
+          }
+        }
+        shiftedElements.length = 0;
       } catch {
       }
     }

package/dist/index.mjs

@@ -1202,6 +1202,7 @@ function renderCampaignDOM(campaign, handlers = {}) {
   let originalPaddingTop = null;
   let originalPaddingBottom = null;
   let resizeObserver = null;
+  const shiftedElements = [];
   if (isBanner && typeof document !== "undefined" && document.body) {
     try {
       const isBottom = design.position === "bottom";
@@ -1223,14 +1224,64 @@ function renderCampaignDOM(campaign, handlers = {}) {
         }
       } catch {
       }
+      const findTopFixedElements = () => {
+        const candidates = [];
+        try {
+          const elements = Array.from(
+            document.querySelectorAll(
+              'header, nav, [role="banner"], [class*="header"], [class*="navbar"], [class*="nav-fixed"], [class*="sticky"]'
+            )
+          );
+          Array.from(document.body.children).forEach((child) => {
+            if (child instanceof HTMLElement && child !== wrapper && child !== overlayEl && !elements.includes(child)) {
+              elements.push(child);
+            }
+          });
+          for (const el of elements) {
+            if (el === wrapper || el === overlayEl || !el.isConnected) continue;
+            const style = window.getComputedStyle(el);
+            const pos = style.position;
+            if (pos === "fixed" || pos === "sticky") {
+              const rect = el.getBoundingClientRect();
+              if (rect.top <= 15 && rect.height > 0 && rect.height < window.innerHeight * 0.5) {
+                candidates.push(el);
+              }
+            }
+          }
+        } catch {
+        }
+        return candidates;
+      };
       const updateOffset = () => {
         if (!wrapper || !document.body) return;
         const bannerHeight = wrapper.offsetHeight;
         if (bannerHeight > 0) {
           if (isBottom) {
             document.body.style.paddingBottom = `${basePaddingBottom + bannerHeight}px`;
+            document.documentElement.style.setProperty(
+              "--sitepulse-bottom-banner-height",
+              `${bannerHeight}px`
+            );
           } else {
             document.body.style.paddingTop = `${basePaddingTop + bannerHeight}px`;
+            document.documentElement.style.setProperty(
+              "--sitepulse-top-banner-height",
+              `${bannerHeight}px`
+            );
+            document.documentElement.classList.add("has-sitepulse-top-banner");
+            const fixedHeaders = findTopFixedElements();
+            for (const el of fixedHeaders) {
+              if (!shiftedElements.some((r) => r.el === el)) {
+                shiftedElements.push({
+                  el,
+                  originalTop: el.style.top,
+                  originalTransform: el.style.transform,
+                  originalTransition: el.style.transition
+                });
+                el.style.transition = el.style.transition ? `${el.style.transition}, transform 0.2s ease` : "transform 0.2s ease";
+                el.style.transform = `translateY(${bannerHeight}px)`;
+              }
+            }
           }
         }
       };
@@ -1263,6 +1314,23 @@ function renderCampaignDOM(campaign, handlers = {}) {
         if (originalPaddingBottom !== null) {
           document.body.style.paddingBottom = originalPaddingBottom;
         }
+        document.documentElement.style.setProperty(
+          "--sitepulse-top-banner-height",
+          "0px"
+        );
+        document.documentElement.style.setProperty(
+          "--sitepulse-bottom-banner-height",
+          "0px"
+        );
+        document.documentElement.classList.remove("has-sitepulse-top-banner");
+        for (const record of shiftedElements) {
+          if (record.el && record.el.isConnected) {
+            record.el.style.transform = record.originalTransform;
+            record.el.style.transition = record.originalTransition;
+            record.el.style.top = record.originalTop;
+          }
+        }
+        shiftedElements.length = 0;
       } catch {
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitepulse/web",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Official SitePulse Web SDK for telemetry, visitor analytics, and on-site engagement",
   "main": "dist/index.js",
   "module": "dist/index.mjs",