@gemx-dev/heatmap-react 3.5.46 → 3.5.48

package/src/helpers/iframe-helper/navigation-blocker.ts

@@ -1,367 +0,0 @@
-export class IframeNavigationBlocker {
-  private doc: Document;
-  private win: Window;
-  private isEnabled = true;
-  private originalWindowOpen: typeof window.open;
-
-  constructor(iframe: HTMLIFrameElement) {
-    if (!iframe.contentDocument || !iframe.contentWindow) {
-      throw new Error('Iframe document or window not accessible');
-    }
-
-    this.doc = iframe.contentDocument;
-    this.win = iframe.contentWindow;
-    this.originalWindowOpen = this.win.open.bind(this.win);
-
-    this.init();
-  }
-
-  private init(): void {
-    console.log('[NavigationBlocker] Initializing...');
-
-    // Block navigation through links
-    this.blockLinkNavigation();
-
-    // Block form submissions
-    this.blockFormSubmissions();
-
-    // Block window.open and location methods
-    this.blockWindowNavigation();
-
-    // Block beforeunload to prevent navigation
-    this.blockBeforeUnload();
-  }
-
-  private blockLinkNavigation(): void {
-    this.doc.addEventListener(
-      'click',
-      (e) => {
-        if (!this.isEnabled) return;
-
-        const target = e.target as HTMLElement;
-        const link = target.closest('a');
-
-        if (link) {
-          const href = link.getAttribute('href');
-
-          // Allow hash links (same-page navigation)
-          if (!href || href === '' || href === '#' || href.startsWith('#')) {
-            console.log('[NavigationBlocker] Allowed hash navigation:', href);
-            return;
-          }
-
-          // Block javascript: links
-          if (href.startsWith('javascript:')) {
-            console.log('[NavigationBlocker] Blocked javascript: protocol');
-            e.preventDefault();
-            e.stopPropagation();
-            e.stopImmediatePropagation();
-            return;
-          }
-
-          // Block all external links
-          if (
-            href.startsWith('http') ||
-            href.startsWith('//') ||
-            href.startsWith('/') ||
-            href.startsWith('.')
-          ) {
-            console.log('[NavigationBlocker] Blocked navigation to:', href);
-            e.preventDefault();
-            e.stopPropagation();
-            e.stopImmediatePropagation();
-
-            this.notifyBlockedNavigation(href);
-            return;
-          }
-
-          // Block target="_blank"
-          const targetAttr = link.getAttribute('target');
-          if (targetAttr && targetAttr !== '_self') {
-            console.log('[NavigationBlocker] Blocked new window/tab:', href);
-            e.preventDefault();
-            e.stopPropagation();
-            e.stopImmediatePropagation();
-            return;
-          }
-        }
-      },
-      true,
-    ); // Capture phase (true)
-
-    // Add attribute to CSS to style disabled links
-    this.doc.querySelectorAll('a[href]').forEach((link) => {
-      const href = link.getAttribute('href');
-      if (href && !href.startsWith('#')) {
-        link.setAttribute('data-navigation-blocked', 'true');
-      }
-    });
-  }
-
-  private blockFormSubmissions(): void {
-    this.doc.addEventListener(
-      'submit',
-      (e) => {
-        if (!this.isEnabled) return;
-
-        const form = e.target as HTMLFormElement;
-        const action = form.getAttribute('action');
-
-        // Allow forms without action or action = #
-        if (!action || action === '' || action === '#') {
-          console.log('[NavigationBlocker] Allowed same-page form submission');
-          e.preventDefault();
-          this.handleFormSubmit(form);
-          return;
-        }
-
-        // Block external form submissions
-        console.log('[NavigationBlocker] Blocked form submission to:', action);
-        e.preventDefault();
-        e.stopPropagation();
-        e.stopImmediatePropagation();
-        this.notifyBlockedNavigation(action);
-      },
-      true,
-    );
-  }
-
-  private blockWindowNavigation(): void {
-    // Override window.open
-    this.win.open = ((...args: any[]) => {
-      if (!this.isEnabled) {
-        return this.originalWindowOpen(...args);
-      }
-
-      const url = args[0]?.toString() || 'popup';
-      console.log('[NavigationBlocker] Blocked window.open:', url);
-      this.notifyBlockedNavigation(url);
-      return null;
-    }) as any;
-
-    // Block location.href through prototype
-    const locationProto = Object.getPrototypeOf(this.win.location);
-    const originalHrefDescriptor = Object.getOwnPropertyDescriptor(locationProto, 'href');
-
-    if (originalHrefDescriptor && originalHrefDescriptor.set) {
-      const originalHrefSetter = originalHrefDescriptor.set;
-
-      Object.defineProperty(locationProto, 'href', {
-        ...originalHrefDescriptor,
-        set: (value: string) => {
-          if (!this.isEnabled) {
-            return originalHrefSetter.call(this.win.location, value);
-          }
-
-          // Allow hash changes
-          if (value.startsWith('#')) {
-            return originalHrefSetter.call(this.win.location, value);
-          }
-
-          console.log('[NavigationBlocker] Blocked location.href =', value);
-          this.notifyBlockedNavigation(value);
-        },
-      });
-    }
-
-    // Block location methods
-    const originalAssign = this.win.location.assign;
-    console.log(
-      `🚀 🐥 ~ IframeNavigationBlocker ~ blockWindowNavigation ~ this.win.location:`,
-      this.win.location,
-    );
-    const originalReplace = this.win.location.replace;
-    const originalReload = this.win.location.reload;
-
-    Object.defineProperty(this.win.location, 'assign', {
-      writable: true,
-      value: ((url: string | URL) => {
-        if (!this.isEnabled) {
-          return originalAssign.call(this.win.location, url);
-        }
-        console.log('[NavigationBlocker] Blocked location.assign:', url);
-        this.notifyBlockedNavigation(url.toString());
-      }) as any,
-    });
-
-    // this.win.location.assign = ((url: string | URL) => {
-    //   if (!this.isEnabled) {
-    //     return originalAssign.call(this.win.location, url);
-    //   }
-    //   console.log('[NavigationBlocker] Blocked location.assign:', url);
-    //   this.notifyBlockedNavigation(url.toString());
-    // }) as any;
-
-    Object.defineProperty(this.win.location, 'replace', {
-      writable: true,
-      value: ((url: string | URL) => {
-        if (!this.isEnabled) {
-          return originalReplace.call(this.win.location, url);
-        }
-        console.log('[NavigationBlocker] Blocked location.replace:', url);
-        this.notifyBlockedNavigation(url.toString());
-      }) as any,
-    });
-
-    Object.defineProperty(this.win.location, 'reload', {
-      writable: true,
-      value: (() => {
-        if (!this.isEnabled) {
-          return originalReload.call(this.win.location);
-        }
-        console.log('[NavigationBlocker] Blocked location.reload');
-        this.notifyBlockedNavigation('reload');
-      }) as any,
-    });
-
-    // Block history navigation
-    const originalPushState = this.win.history.pushState;
-    const originalReplaceState = this.win.history.replaceState;
-
-    this.win.history.pushState = ((state: any, title: string, url?: string | URL | null) => {
-      if (!this.isEnabled) {
-        return originalPushState.call(this.win.history, state, title, url);
-      }
-
-      // Allow hash-only changes
-      const urlStr = url?.toString() || '';
-      if (!urlStr || urlStr.startsWith('#')) {
-        return originalPushState.call(this.win.history, state, title, url);
-      }
-
-      console.log('[NavigationBlocker] Blocked history.pushState:', url);
-      this.notifyBlockedNavigation(urlStr);
-    }) as any;
-
-    this.win.history.replaceState = ((state: any, title: string, url?: string | URL | null) => {
-      if (!this.isEnabled) {
-        return originalReplaceState.call(this.win.history, state, title, url);
-      }
-
-      const urlStr = url?.toString() || '';
-      if (!urlStr || urlStr.startsWith('#')) {
-        return originalReplaceState.call(this.win.history, state, title, url);
-      }
-
-      console.log('[NavigationBlocker] Blocked history.replaceState:', url);
-      this.notifyBlockedNavigation(urlStr);
-    }) as any;
-  }
-
-  private blockBeforeUnload(): void {
-    // Block page unload (navigation away)
-    this.win.addEventListener('beforeunload', (e) => {
-      if (!this.isEnabled) return;
-
-      console.log('[NavigationBlocker] Blocked beforeunload');
-      e.preventDefault();
-      e.returnValue = '';
-      return '';
-    });
-
-    // Monitor popstate (back/forward navigation)
-    this.win.addEventListener('popstate', (e) => {
-      if (!this.isEnabled) return;
-
-      console.log('[NavigationBlocker] Detected popstate, may block if needed');
-      // Can add logic to block back/forward if needed
-    });
-  }
-
-  private handleFormSubmit(form: HTMLFormElement): void {
-    // Handle in-page form submissions if needed
-    const formData = new FormData(form);
-    // Polyfill for FormData.entries() for environments that don't support it
-    const data: Record<string, any> = {};
-    formData.forEach((value, key) => {
-      // If the field already exists, convert to array (handle multiple values, e.g. checkboxes)
-      if (Object.prototype.hasOwnProperty.call(data, key)) {
-        if (Array.isArray(data[key])) {
-          data[key].push(value);
-        } else {
-          data[key] = [data[key], value];
-        }
-      } else {
-        data[key] = value;
-      }
-    });
-
-    console.log('[NavigationBlocker] Handling form data:', data);
-
-    // Dispatch custom event to parent
-    window.dispatchEvent(
-      new CustomEvent('iframe-form-submit', {
-        detail: { form, data },
-      }),
-    );
-  }
-
-  private notifyBlockedNavigation(url: string): void {
-    console.warn('[NavigationBlocker] Navigation blocked to:', url);
-
-    // Dispatch event to parent
-    window.dispatchEvent(
-      new CustomEvent('iframe-navigation-blocked', {
-        detail: { url, timestamp: Date.now() },
-      }),
-    );
-
-    // Optional: Show message
-    if (this.shouldShowMessage(url)) {
-      this.showBlockedMessage(url);
-    }
-  }
-
-  private shouldShowMessage(url: string): boolean {
-    // Có thể customize logic này
-    return !url.startsWith('#') && url !== 'reload';
-  }
-
-  private showBlockedMessage(url: string): void {
-    const message = this.doc.createElement('div');
-    message.style.cssText = `
-      position: fixed;
-      top: 20px;
-      right: 20px;
-      background: #ff6b6b;
-      color: white;
-      padding: 12px 20px;
-      border-radius: 8px;
-      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-      z-index: 999999;
-      font-family: system-ui, -apple-system, sans-serif;
-      font-size: 14px;
-      max-width: 300px;
-      word-break: break-word;
-    `;
-
-    const shortUrl = url.length > 50 ? url.substring(0, 47) + '...' : url;
-    message.innerHTML = `
-      <div style="font-weight: 600; margin-bottom: 4px;">Navigation Blocked</div>
-      <div style="font-size: 12px; opacity: 0.9;">${shortUrl}</div>
-    `;
-
-    this.doc.body.appendChild(message);
-
-    setTimeout(() => {
-      message.style.opacity = '0';
-      message.style.transition = 'opacity 0.3s';
-      setTimeout(() => message.remove(), 300);
-    }, 3000);
-  }
-
-  public enable(): void {
-    this.isEnabled = true;
-    console.log('[NavigationBlocker] Enabled');
-  }
-
-  public disable(): void {
-    this.isEnabled = false;
-    console.log('[NavigationBlocker] Disabled');
-  }
-
-  public destroy(): void {
-    this.isEnabled = false;
-    console.log('[NavigationBlocker] Destroyed');
-  }
-}

package/src/helpers/iframe-helper/style-replacer.ts

@@ -1,231 +0,0 @@
-import type { IframeStyleConfig } from '../../types';
-
-export class IframeStyleReplacer {
-  private doc: Document;
-  private win: Window;
-  private config: IframeStyleConfig;
-  private regex = /([-.\d]+)(vh|svh|lvh|dvh|vw|svw|lvw|dvw)/gi;
-
-  constructor(iframe: HTMLIFrameElement, config: IframeStyleConfig) {
-    if (!iframe.contentDocument || !iframe.contentWindow) {
-      throw new Error('Iframe document or window not accessible');
-    }
-
-    this.doc = iframe.contentDocument;
-    this.win = iframe.contentWindow;
-    this.config = config;
-  }
-
-  private px(value: number): string {
-    return `${value.toFixed(2)}px`;
-  }
-
-  private convert(value: string, unit: string): string {
-    const num = parseFloat(value);
-    if (isNaN(num)) return value;
-
-    const map: Record<string, number> = {
-      vh: this.config.targetHeight,
-      svh: this.config.targetHeight,
-      lvh: this.config.targetHeight,
-      dvh: this.config.targetHeight,
-      vw: this.config.targetWidth,
-      svw: this.config.targetWidth,
-      lvw: this.config.targetWidth,
-      dvw: this.config.targetWidth,
-    };
-
-    return this.px((num / 100) * (map[unit.toLowerCase()] || 0));
-  }
-
-  private replaceInText(cssText: string): string {
-    return cssText.replace(this.regex, (_, value, unit) => this.convert(value, unit));
-  }
-
-  private processInlineStyles(): number {
-    let count = 0;
-    this.doc.querySelectorAll('[style]').forEach((el) => {
-      const style = el.getAttribute('style');
-      if (style && this.regex.test(style)) {
-        this.regex.lastIndex = 0;
-        el.setAttribute('style', this.replaceInText(style));
-        count++;
-      }
-    });
-    console.log(`[IframeStyleReplacer] Replaced ${count} inline style elements`);
-    return count;
-  }
-
-  private processStyleTags(): number {
-    let count = 0;
-    this.doc.querySelectorAll('style').forEach((tag) => {
-      const css = tag.textContent || '';
-      if (this.regex.test(css)) {
-        this.regex.lastIndex = 0;
-        tag.textContent = this.replaceInText(css);
-        count++;
-      }
-    });
-    console.log(`[IframeStyleReplacer] Replaced ${count} <style> tags`);
-    return count;
-  }
-
-  private processRule(rule: CSSRule): number {
-    let count = 0;
-
-    if ('style' in rule && rule.style) {
-      const style = (rule as CSSStyleRule).style;
-      for (let i = 0; i < style.length; i++) {
-        const prop = style[i];
-        const value = style.getPropertyValue(prop);
-        if (value && this.regex.test(value)) {
-          this.regex.lastIndex = 0;
-          style.setProperty(prop, this.replaceInText(value), style.getPropertyPriority(prop));
-          count++;
-        }
-      }
-    }
-
-    if ('cssRules' in rule) {
-      const rules = rule as unknown as CSSStyleSheet;
-      for (const r of Array.from(rules.cssRules || [])) {
-        count += this.processRule(r);
-      }
-    }
-
-    return count;
-  }
-
-  private processStylesheets(): number {
-    let total = 0;
-    Array.from(this.doc.styleSheets).forEach((sheet) => {
-      try {
-        // Bỏ qua external CSS (cross-origin)
-        if (sheet.href && !sheet.href.startsWith(this.win.location.origin)) {
-          console.log('[IframeStyleReplacer] Skipping external CSS:', sheet.href);
-          return;
-        }
-
-        const rules = sheet.cssRules || sheet.rules;
-        if (!rules) return;
-
-        for (const rule of Array.from(rules)) {
-          total += this.processRule(rule);
-        }
-      } catch (e) {
-        console.warn('[IframeStyleReplacer] Cannot read stylesheet (CORS?):', (e as Error).message);
-      }
-    });
-    console.log(`[IframeStyleReplacer] Replaced ${total} rules in stylesheets`);
-    return total;
-  }
-
-  private async processLinkedStylesheets(): Promise<number> {
-    const links = this.doc.querySelectorAll<HTMLLinkElement>('link[rel="stylesheet"]');
-    let count = 0;
-
-    for (const link of Array.from(links)) {
-      if (!link.href.startsWith(this.win.location.origin)) {
-        console.log('[IframeStyleReplacer] Skipping external CSS:', link.href);
-        continue;
-      }
-
-      try {
-        const res = await fetch(link.href);
-        let css = await res.text();
-
-        if (this.regex.test(css)) {
-          this.regex.lastIndex = 0;
-          css = this.replaceInText(css);
-
-          const style = this.doc.createElement('style');
-          style.textContent = css;
-          style.dataset.originalHref = link.href;
-
-          link.parentNode?.insertBefore(style, link);
-          link.remove();
-          count++;
-        }
-      } catch (e) {
-        console.warn('[IframeStyleReplacer] Cannot load CSS:', link.href, e);
-      }
-    }
-
-    console.log(`[IframeStyleReplacer] Replaced ${count} linked CSS files`);
-    return count;
-  }
-
-  private getFinalHeight(): number {
-    // Trigger reflow
-    void this.doc.body.offsetHeight;
-
-    return Math.max(
-      this.doc.body.scrollHeight,
-      this.doc.body.offsetHeight,
-      this.doc.documentElement.scrollHeight,
-      this.doc.documentElement.offsetHeight,
-      this.doc.documentElement.clientHeight,
-    );
-  }
-
-  private getFinalWidth(): number {
-    return Math.max(
-      this.doc.body.scrollWidth,
-      this.doc.body.offsetWidth,
-      this.doc.documentElement.scrollWidth,
-      this.doc.documentElement.offsetWidth,
-      this.doc.documentElement.clientWidth,
-    );
-  }
-
-  private async waitForResources(): Promise<void> {
-    if ('fonts' in this.doc) {
-      await (this.doc as any).fonts.ready;
-    }
-
-    const images = Array.from(this.doc.images).filter((img) => !img.complete);
-    if (images.length > 0) {
-      await Promise.all(
-        images.map(
-          (img) =>
-            new Promise((resolve) => {
-              img.onload = img.onerror = resolve;
-            }),
-        ),
-      );
-    }
-  }
-
-  public async run(): Promise<{ height: number; width: number }> {
-    try {
-      console.log('[IframeStyleReplacer] Starting viewport units replacement...');
-
-      this.processInlineStyles();
-      this.processStyleTags();
-      this.processStylesheets();
-
-      await this.processLinkedStylesheets();
-      // await this.waitForResources();
-
-      return await new Promise((resolve) => {
-        requestAnimationFrame(() => {
-          const height = this.getFinalHeight();
-          const width = this.getFinalWidth();
-
-          console.log('[IframeStyleReplacer] Calculated dimensions:', { height, width });
-          resolve({ height, width });
-        });
-      });
-    } catch (err) {
-      console.error('[IframeStyleReplacer] Critical error:', err);
-      return {
-        height: this.doc.body.scrollHeight || 1000,
-        width: this.doc.body.scrollWidth || 1000,
-      };
-    }
-  }
-
-  public updateConfig(config: Partial<IframeStyleConfig>): void {
-    this.config = { ...this.config, ...config };
-  }
-}

package/src/helpers/iframe.ts

@@ -1,42 +0,0 @@
-import { decode } from '@gemx-dev/clarity-decode';
-import { DecodedEvent, DecodedPayload } from '../types';
-
-export function findLastSizeOfDom(data: DecodedPayload[]) {
-  const firstDoc = data.find((item) => item.envelope.sequence === 1)?.doc;
-  const docSorted = firstDoc?.sort(sort);
-  const firstEvent = docSorted?.[0];
-  const docSize = {
-    width: firstEvent?.data.width,
-    height: firstEvent?.data.height,
-  };
-
-  const newData = JSON.parse(JSON.stringify(data)) as DecodedPayload[];
-  const reversedData = newData.reverse();
-  const lastResizeEvent = reversedData.find((item) => !!item.resize);
-  const firstEventResize = lastResizeEvent?.resize?.[0];
-  const resize = {
-    width: firstEventResize?.data.width,
-    height: firstEventResize?.data.height,
-  };
-
-  return {
-    doc: docSize,
-    resize: resize,
-    size: {
-      width: resize.width ?? docSize.width,
-      height: resize.height ?? docSize.height,
-    },
-  };
-}
-
-function sort(a: DecodedEvent, b: DecodedEvent): number {
-  return a.time - b.time;
-}
-
-export function decodePayloads(payload: string): DecodedPayload | null {
-  try {
-    return decode(payload) as unknown as DecodedPayload;
-  } catch (error) {
-    return null;
-  }
-}

package/src/helpers/index.ts

@@ -1,8 +0,0 @@
-export * from './elm-callout';
-export * from './elm-getter';
-export * from './iframe';
-
-export * from './viz-canvas';
-export * from './viz-elements';
-
-export * from './iframe-helper';