cf-pagetree-parser 1.0.0

package/src/parsers/media.js

@@ -0,0 +1,376 @@
+/**
+ * ============================================================================
+ * PAGETREE PARSER - Media Element Parsers
+ * ============================================================================
+ *
+ * Image/V2, Icon/V1, Video/V1, Divider/V1
+ *
+ * ============================================================================
+ */
+
+import {
+  generateId,
+  generateFractionalIndex,
+  parseInlineStyle,
+  parseValueWithUnit,
+  normalizeColor,
+  parseAnimationAttrs,
+} from '../utils.js';
+
+import {
+  parseSpacing,
+  spacingToAttrsAndParams,
+  parseBorderRadius,
+  parseBorder,
+  borderToParams,
+  parseShadow,
+  shadowToParams,
+  parseTextAlign,
+  parseBackground,
+} from '../styles.js';
+
+/**
+ * Parse Image/V2
+ */
+export function parseImage(element, parentId, index) {
+  const id = generateId();
+
+  const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
+  const spacing = parseSpacing(wrapperStyles);
+  const textAlign = parseTextAlign(wrapperStyles['text-align']);
+
+  // Find the img element
+  const img = element.querySelector('img');
+  const imgStyles = img ? parseInlineStyle(img.getAttribute('style') || '') : {};
+
+  const src = img ? img.getAttribute('src') : '';
+  const alt = img ? img.getAttribute('alt') : '';
+
+  const width = parseValueWithUnit(imgStyles.width || '100%', '%');
+  const height = parseValueWithUnit(imgStyles.height, 'px');
+  const borderRadius = parseBorderRadius(imgStyles);
+  const border = parseBorder(imgStyles);
+  const shadow = parseShadow(imgStyles['box-shadow']);
+  const objectFit = imgStyles['object-fit'] || 'cover';
+
+  // Parse animation attributes
+  const { attrs: animationAttrs, params: animationParams } = parseAnimationAttrs(element);
+
+  const node = {
+    type: 'Image/V2',
+    id,
+    version: 0,
+    parentId,
+    fractionalIndex: generateFractionalIndex(index),
+    attrs: {
+      alt,
+      style: {
+        'text-align': textAlign,
+      },
+      ...animationAttrs,
+    },
+    params: {
+      imageUrl: [{ type: 'text', innerText: src }],
+      'padding-top--unit': 'px',
+      'padding-bottom--unit': 'px',
+      '--style-padding-horizontal--unit': 'px',
+      '--style-padding-horizontal': 0,
+      ...animationParams,
+    },
+    selectors: {
+      '.elImage': {
+        attrs: {
+          style: {
+            width: width ? width.value : 100,
+            'object-fit': objectFit,
+          },
+          'data-image-quality': 100,
+          'data-skip-corners-settings': borderRadius ? 'false' : 'true',
+          'data-skip-shadow-settings': shadow ? 'false' : 'true',
+        },
+        params: {
+          'width--unit': width ? width.unit : '%',
+        },
+      },
+    },
+  };
+
+  // Apply spacing
+  const { attrs: spacingAttrs, params: spacingParams } = spacingToAttrsAndParams(spacing);
+  Object.assign(node.attrs.style, spacingAttrs.style);
+  Object.assign(node.params, spacingParams);
+
+  // Apply height if specified
+  if (height) {
+    node.selectors['.elImage'].attrs.style.height = height.value;
+    node.selectors['.elImage'].params['height--unit'] = height.unit;
+  }
+
+  // Apply border-radius
+  if (borderRadius) {
+    node.selectors['.elImage'].attrs.style['border-radius'] = borderRadius.value;
+    node.selectors['.elImage'].params['border-radius--unit'] = borderRadius.unit;
+  }
+
+  // Apply border
+  if (border.width || border.style || border.color) {
+    Object.assign(node.selectors['.elImage'].params, borderToParams(border));
+  }
+
+  // Apply shadow
+  if (shadow) {
+    Object.assign(node.selectors['.elImage'].params, shadowToParams(shadow));
+  }
+
+  return node;
+}
+
+/**
+ * Parse Icon/V1
+ */
+export function parseIcon(element, parentId, index) {
+  const id = generateId();
+
+  const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
+  const spacing = parseSpacing(wrapperStyles);
+  const textAlign = parseTextAlign(wrapperStyles['text-align']);
+
+  // Find the icon element
+  const icon = element.querySelector('i');
+  // Prefer data-icon attribute, fallback to class from <i> element
+  const iconAttr = element.getAttribute('data-icon');
+  const iconClass = iconAttr || (icon ? icon.getAttribute('class') : 'fas fa-star');
+  const iconStyles = icon ? parseInlineStyle(icon.getAttribute('style') || '') : {};
+
+  // Read from data attributes first (most reliable), fallback to inline styles
+  const sizeAttr = element.getAttribute('data-size');
+  const fontSize = sizeAttr
+    ? parseValueWithUnit(sizeAttr)
+    : parseValueWithUnit(iconStyles['font-size'] || '48px');
+
+  const colorAttr = element.getAttribute('data-color');
+  const color = colorAttr
+    ? normalizeColor(colorAttr)
+    : normalizeColor(iconStyles.color || '#3b82f6');
+
+  const opacityAttr = element.getAttribute('data-opacity');
+  const opacity = opacityAttr || iconStyles.opacity;
+
+  // Parse animation attributes
+  const { attrs: animationAttrs, params: animationParams } = parseAnimationAttrs(element);
+
+  const node = {
+    type: 'Icon/V1',
+    id,
+    version: 0,
+    parentId,
+    fractionalIndex: generateFractionalIndex(index),
+    attrs: {
+      style: {},
+      ...animationAttrs,
+    },
+    params: {
+      ...animationParams,
+    },
+    selectors: {
+      '.fa_icon': {
+        attrs: {
+          className: iconClass,
+          style: {
+            'font-size': fontSize ? fontSize.value : 48,
+            color,
+          },
+        },
+        params: {
+          'font-size--unit': fontSize ? fontSize.unit : 'px',
+        },
+      },
+      '.iconElement': {
+        attrs: {
+          style: {
+            'text-align': textAlign,
+          },
+        },
+      },
+    },
+  };
+
+  // Apply opacity if present
+  if (opacity) {
+    node.selectors['.fa_icon'].attrs.style.opacity = parseFloat(opacity);
+  }
+
+  // Apply spacing
+  const { attrs: spacingAttrs, params: spacingParams } = spacingToAttrsAndParams(spacing);
+  Object.assign(node.attrs.style, spacingAttrs.style);
+  Object.assign(node.params, spacingParams);
+
+  return node;
+}
+
+/**
+ * Parse Video/V1
+ */
+export function parseVideo(element, parentId, index) {
+  const id = generateId();
+
+  const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
+  const spacing = parseSpacing(wrapperStyles);
+
+  // Get video URL and type from data attributes
+  const videoUrl = element.getAttribute('data-video-url') || '';
+  const videoType = element.getAttribute('data-video-type') || 'youtube';
+
+  // Find container div for styling
+  const container = element.querySelector('div');
+  const containerStyles = container ? parseInlineStyle(container.getAttribute('style') || '') : {};
+
+  const borderRadius = parseBorderRadius(containerStyles);
+  const shadow = parseShadow(containerStyles['box-shadow']);
+  const border = parseBorder(containerStyles);
+  const background = parseBackground(containerStyles);
+
+  const node = {
+    type: 'Video/V1',
+    id,
+    version: 0,
+    parentId,
+    fractionalIndex: generateFractionalIndex(index),
+    attrs: {
+      'data-video-type': videoType,
+      'data-skip-background-settings': background.color ? 'false' : 'true',
+      'data-skip-shadow-settings': shadow ? 'false' : 'true',
+      'data-skip-corners-settings': borderRadius ? 'false' : 'true',
+      style: {},
+    },
+    params: {
+      'video_url': videoUrl,
+      'padding-top--unit': 'px',
+      'padding-bottom--unit': 'px',
+      '--style-padding-horizontal--unit': 'px',
+      '--style-padding-horizontal': 0,
+    },
+    selectors: {},
+  };
+
+  // Apply spacing
+  const { attrs: spacingAttrs, params: spacingParams } = spacingToAttrsAndParams(spacing);
+  Object.assign(node.attrs.style, spacingAttrs.style);
+  Object.assign(node.params, spacingParams);
+
+  // Apply border-radius
+  if (borderRadius) {
+    node.attrs.style['border-radius'] = borderRadius.value;
+    node.params['border-radius--unit'] = borderRadius.unit;
+  }
+
+  // Apply shadow
+  if (shadow) {
+    Object.assign(node.params, shadowToParams(shadow));
+  }
+
+  // Apply border
+  if (border.width || border.style || border.color) {
+    Object.assign(node.params, borderToParams(border));
+  }
+
+  // Apply background color
+  if (background.color) {
+    node.params['--style-background-color'] = background.color;
+  }
+
+  return node;
+}
+
+/**
+ * Parse Divider/V1
+ */
+export function parseDivider(element, parentId, index) {
+  const id = generateId();
+
+  const wrapperStyles = parseInlineStyle(element.getAttribute('style') || '');
+  const spacing = parseSpacing(wrapperStyles);
+
+  // Find the divider line element
+  const line = element.querySelector('div');
+  const lineStyles = line ? parseInlineStyle(line.getAttribute('style') || '') : {};
+
+  // Parse border-top for thickness, style, and color
+  // Format: "1px solid #e2e8f0" or "3px dashed rgb(181, 69, 69)"
+  let borderWidth = 1;
+  let borderStyle = 'solid';
+  let borderColor = '#e2e8f0';
+
+  if (lineStyles['border-top']) {
+    // Match: thickness style color (where color can be hex, rgb, rgba, or named)
+    const match = lineStyles['border-top'].match(/^(\d+(?:\.\d+)?px)\s+(solid|dashed|dotted)\s+(.+)$/i);
+    if (match) {
+      borderWidth = parseFloat(match[1]);
+      borderStyle = match[2].toLowerCase();
+      borderColor = normalizeColor(match[3].trim());
+    }
+  }
+
+  const width = parseValueWithUnit(lineStyles.width || '100%', '%');
+
+  // Parse alignment from margin
+  // "0 auto" = center, "0 auto 0 0" = left, "0 0 0 auto" = right
+  let margin = '0 auto';
+  if (lineStyles.margin) {
+    margin = lineStyles.margin;
+  }
+
+  // Parse box shadow
+  const shadow = parseShadow(lineStyles['box-shadow']);
+
+  // Check data attribute for shadow settings
+  const skipShadowSettings = element.getAttribute('data-skip-shadow-settings') !== 'false';
+
+  const node = {
+    type: 'Divider/V1',
+    id,
+    version: 0,
+    parentId,
+    fractionalIndex: generateFractionalIndex(index),
+    attrs: {
+      style: {},
+    },
+    params: {
+      'padding-top--unit': 'px',
+      'padding-bottom--unit': 'px',
+      '--style-padding-horizontal--unit': 'px',
+      '--style-padding-horizontal': 0,
+      'margin-top--unit': 'px',
+    },
+    selectors: {
+      '.elDivider': {
+        attrs: {
+          style: {
+            width: width ? width.value : 100,
+            margin: margin,
+          },
+          'data-skip-shadow-settings': skipShadowSettings ? 'true' : 'false',
+        },
+        params: {
+          'width--unit': width ? width.unit : '%',
+          '--style-border-top-width': borderWidth,
+          '--style-border-top-width--unit': 'px',
+          '--style-border-style': borderStyle,
+          '--style-border-color': borderColor,
+        },
+      },
+    },
+  };
+
+  // Apply spacing
+  const { attrs: spacingAttrs, params: spacingParams } = spacingToAttrsAndParams(spacing);
+  Object.assign(node.attrs.style, spacingAttrs.style);
+  Object.assign(node.params, spacingParams);
+
+  // Apply shadow if present
+  if (shadow) {
+    Object.assign(node.selectors['.elDivider'].params, shadowToParams(shadow));
+  }
+
+  return node;
+}

package/src/parsers/placeholders.js

@@ -0,0 +1,196 @@
+/**
+ * ============================================================================
+ * PAGETREE PARSER - Placeholder Parsers
+ * ============================================================================
+ *
+ * Parsers for placeholder elements that output actual ClickFunnels element types.
+ * These placeholders render as visual boxes in FunnelWind but output the
+ * proper ClickFunnels element types in the pagetree for seamless import.
+ *
+ * - CheckoutPlaceholder → Checkout/V2
+ * - OrderSummaryPlaceholder → CheckoutOrderSummary/V1
+ * - ConfirmationPlaceholder → OrderConfirmation/V1
+ *
+ * ============================================================================
+ */
+
+import {
+  generateId,
+  generateFractionalIndex,
+  parseInlineStyle,
+} from '../utils.js';
+
+import { parseSpacing, spacingToAttrsAndParams } from '../styles.js';
+
+/**
+ * Parse CheckoutPlaceholder
+ * Outputs a Checkout/V2 element - the actual ClickFunnels checkout form
+ */
+export function parseCheckoutPlaceholder(element, parentId, index) {
+  const id = generateId();
+  const tosTextId = generateId();
+  const tosTextInner = generateId();
+  const ctaHeaderId = generateId();
+  const ctaHeaderInner = generateId();
+
+  const styles = parseInlineStyle(element.getAttribute('style') || '');
+  const spacing = parseSpacing(styles);
+
+  const node = {
+    type: 'Checkout/V2',
+    id,
+    version: 0,
+    parentId,
+    fractionalIndex: generateFractionalIndex(index),
+    attrs: {
+      style: {
+        '--container-font-family': 'var(--style-guide-font-family-content)',
+        '--input-headline-font-family': 'var(--style-guide-font-family-subheadline)',
+        '--multiple-payments-font-family': 'sans-serif',
+        '--input-background-color': '#FFFFFF',
+      },
+    },
+    selectors: {
+      '.elButton': {
+        params: {
+          '--style-border-style': 'solid',
+          'border-radius--unit': 'px',
+        },
+        attrs: {
+          style: {
+            'border-style': 'none',
+            'border-radius': 6,
+          },
+          'data-skip-corners-settings': 'false',
+        },
+      },
+    },
+    children: [
+      {
+        type: 'p',
+        slotName: 'tos-text',
+        id: tosTextId,
+        version: 0,
+        parentId: id,
+        fractionalIndex: 'a0',
+        children: [
+          {
+            type: 'text',
+            innerText: 'By completing this purchase, you agree to our terms of service.',
+            id: tosTextInner,
+            version: 0,
+            parentId: tosTextId,
+            fractionalIndex: 'a0',
+          },
+        ],
+      },
+      {
+        type: 'p',
+        slotName: 'cta-header',
+        id: ctaHeaderId,
+        version: 0,
+        parentId: id,
+        fractionalIndex: 'a1',
+        children: [
+          {
+            type: 'text',
+            innerText: 'Complete Your Order Today!',
+            id: ctaHeaderInner,
+            version: 0,
+            parentId: ctaHeaderId,
+            fractionalIndex: 'a0',
+          },
+        ],
+      },
+    ],
+  };
+
+  // Apply spacing
+  const { attrs: spacingAttrs } = spacingToAttrsAndParams(spacing);
+  if (spacingAttrs.style) {
+    Object.assign(node.attrs.style, spacingAttrs.style);
+  }
+
+  return node;
+}
+
+/**
+ * Parse OrderSummaryPlaceholder
+ * Outputs a CheckoutOrderSummary/V1 element - displays cart items and totals
+ */
+export function parseOrderSummaryPlaceholder(element, parentId, index) {
+  const id = generateId();
+
+  const styles = parseInlineStyle(element.getAttribute('style') || '');
+  const spacing = parseSpacing(styles);
+
+  const node = {
+    type: 'CheckoutOrderSummary/V1',
+    id,
+    version: 0,
+    parentId,
+    fractionalIndex: generateFractionalIndex(index),
+    params: {
+      open: true,
+      state: 'ok',
+      linkWithCheckout: true,
+      // linkedCheckoutId will need to be set manually in ClickFunnels to link to the checkout
+    },
+  };
+
+  // Apply spacing if present
+  const { attrs: spacingAttrs, params: spacingParams } = spacingToAttrsAndParams(spacing);
+  if (spacingAttrs.style && Object.keys(spacingAttrs.style).length > 0) {
+    node.attrs = { style: spacingAttrs.style };
+  }
+  if (Object.keys(spacingParams).length > 0) {
+    Object.assign(node.params, spacingParams);
+  }
+
+  return node;
+}
+
+/**
+ * Parse ConfirmationPlaceholder
+ * Outputs an OrderConfirmation/V1 element - shows purchase receipt
+ */
+export function parseConfirmationPlaceholder(element, parentId, index) {
+  const id = generateId();
+
+  const styles = parseInlineStyle(element.getAttribute('style') || '');
+  const spacing = parseSpacing(styles);
+
+  const node = {
+    type: 'OrderConfirmation/V1',
+    id,
+    version: 0,
+    parentId,
+    fractionalIndex: generateFractionalIndex(index),
+    selectors: {
+      '.elOrderConfirmationV1': {
+        attrs: {
+          'data-skip-corners-settings': 'false',
+          style: {
+            'border-radius': '8px',
+          },
+        },
+        params: {
+          '--style-border-width': '1px',
+          '--style-border-style': 'solid',
+          '--style-border-color': '#ECF0F5',
+        },
+      },
+    },
+  };
+
+  // Apply spacing if present
+  const { attrs: spacingAttrs, params: spacingParams } = spacingToAttrsAndParams(spacing);
+  if (spacingAttrs.style && Object.keys(spacingAttrs.style).length > 0) {
+    node.attrs = { style: spacingAttrs.style };
+  }
+  if (Object.keys(spacingParams).length > 0) {
+    node.params = spacingParams;
+  }
+
+  return node;
+}

package/src/parsers/popup.js

@@ -0,0 +1,133 @@
+/**
+ * ============================================================================
+ * PAGETREE PARSER - Popup Parser
+ * ============================================================================
+ *
+ * Parses cf-popup (ModalContainer/V1) elements for the popup property.
+ *
+ * ============================================================================
+ */
+
+import {
+  generateId,
+  parseInlineStyle,
+  parseValueWithUnit,
+} from '../utils.js';
+
+import {
+  parseShadow,
+  shadowToParams,
+} from '../styles.js';
+
+/**
+ * Parse ModalContainer (popup) from cf-popup rendered HTML
+ *
+ * @param {HTMLElement} element - The popup wrapper element with data-type="ModalContainer/V1"
+ * @param {function} parseChildren - Callback to parse child elements
+ * @returns {Object} The ModalContainer/V1 pagetree node
+ */
+export function parseModalContainer(element, parseChildren) {
+  const id = generateId();
+
+  // Get popup settings from data attributes
+  const width = element.getAttribute('data-popup-width') || '750px';
+  const overlay = element.getAttribute('data-popup-overlay') || 'rgba(0,0,0,0.5)';
+  const rounded = element.getAttribute('data-popup-rounded') || '16px';
+  const border = element.getAttribute('data-popup-border');
+  const borderColor = element.getAttribute('data-popup-border-color') || '#000000';
+  const shadowAttr = element.getAttribute('data-popup-shadow');
+
+  // Find the modal container to get actual styles
+  const modalEl = element.querySelector('.cf-popup-modal, .containerModal');
+  const modalStyles = modalEl ? parseInlineStyle(modalEl.getAttribute('style') || '') : {};
+
+  // Find the inner container for width
+  const innerEl = element.querySelector('.elModalInnerContainer');
+
+  // Parse values
+  const parsedWidth = parseValueWithUnit(width, 'px');
+  const parsedRounded = parseValueWithUnit(rounded, 'px');
+  const parsedMt = parseValueWithUnit(modalStyles['margin-top'] || '45px', 'px');
+  const parsedMb = parseValueWithUnit(modalStyles['margin-bottom'] || '10px', 'px');
+
+  // Build the node
+  const node = {
+    id,
+    version: 0,
+    type: 'ModalContainer/V1',
+    selectors: {
+      '.containerModal': {
+        attrs: {
+          'data-skip-corners-settings': parsedRounded ? 'false' : 'true',
+          'data-skip-shadow-settings': shadowAttr ? 'false' : 'true',
+          style: {
+            'margin-bottom': parsedMb ? parsedMb.value : 10,
+            'margin-top': parsedMt ? parsedMt.value : 45,
+          },
+        },
+        params: {
+          'margin-bottom--unit': parsedMb ? parsedMb.unit : 'px',
+          'margin-top--unit': parsedMt ? parsedMt.unit : 'px',
+        },
+      },
+      '.modal-wrapper': {
+        params: {
+          '--style-background-color': overlay,
+          '--style-padding-horizontal--unit': 'px',
+          '--style-padding-horizontal': 0,
+        },
+      },
+      '.elModalInnerContainer': {
+        params: {
+          'width--unit': parsedWidth ? parsedWidth.unit : 'px',
+        },
+        attrs: {
+          style: {
+            width: parsedWidth ? parsedWidth.value : 750,
+          },
+        },
+      },
+    },
+    children: [],
+  };
+
+  // Apply border-radius
+  if (parsedRounded) {
+    node.selectors['.containerModal'].attrs.style['border-radius'] = parsedRounded.value;
+    node.selectors['.containerModal'].params['border-radius--unit'] = parsedRounded.unit;
+  }
+
+  // Apply border if present
+  if (border) {
+    const parsedBorder = parseValueWithUnit(border, 'px');
+    if (parsedBorder) {
+      node.selectors['.containerModal'].params['--style-border-style'] = 'solid';
+      node.selectors['.containerModal'].params['--style-border-width'] = parsedBorder.value;
+      node.selectors['.containerModal'].params['--style-border-width--unit'] = parsedBorder.unit;
+      node.selectors['.containerModal'].params['--style-border-color'] = borderColor;
+    }
+  }
+
+  // Apply shadow if present
+  if (shadowAttr) {
+    const shadow = parseShadow(modalStyles['box-shadow']);
+    if (shadow) {
+      Object.assign(node.selectors['.containerModal'].params, shadowToParams(shadow));
+    }
+  }
+
+  // Parse children (sections inside the popup)
+  // Look for sections inside the inner container
+  const sectionsContainer = innerEl || modalEl;
+  if (sectionsContainer) {
+    const sectionChildren = sectionsContainer.querySelectorAll(':scope > section, :scope > [data-type="SectionContainer/V1"]');
+    sectionChildren.forEach((child, index) => {
+      const childNode = parseChildren(child, id, index);
+      if (childNode) {
+        node.children.push(childNode);
+      }
+    });
+  }
+
+  return node;
+}