cf-elements 1.0.2 → 1.0.4

package/cf-elements.js

@@ -99,6 +99,116 @@
     }
   })();
 
+  // ==========================================================================
+  // GOOGLE FONTS - Auto-load fonts from font attributes
+  // ==========================================================================
+
+  // System fonts that don't need to be loaded from Google
+  const SYSTEM_FONTS = new Set([
+    'sans-serif', 'serif', 'monospace', 'cursive', 'fantasy', 'system-ui',
+    'ui-sans-serif', 'ui-serif', 'ui-monospace', 'ui-rounded',
+    'arial', 'helvetica', 'times new roman', 'times', 'courier new', 'courier',
+    'verdana', 'georgia', 'palatino', 'garamond', 'bookman', 'tahoma',
+    'trebuchet ms', 'arial black', 'impact', 'comic sans ms', 'inherit'
+  ]);
+
+  // Track which fonts have been loaded to avoid duplicates
+  const loadedFonts = new Set();
+
+  /**
+   * Extract Google Font names from the document
+   * Scans font attributes on cf-* elements and styleguide data
+   */
+  function extractFontsFromDocument() {
+    const fonts = new Set();
+
+    // 1. Extract from font attributes on elements
+    document.querySelectorAll('[font]').forEach(el => {
+      const font = el.getAttribute('font');
+      if (font) {
+        // Clean and add font name
+        const cleanFont = font.replace(/["']/g, '').split(',')[0].trim();
+        if (cleanFont && !SYSTEM_FONTS.has(cleanFont.toLowerCase())) {
+          fonts.add(cleanFont);
+        }
+      }
+    });
+
+    // 2. Extract from styleguide data if present
+    const styleguideEl = document.getElementById('cf-styleguide-data');
+    if (styleguideEl) {
+      try {
+        const data = JSON.parse(styleguideEl.textContent);
+        if (data.typography) {
+          const { headlineFont, subheadlineFont, contentFont } = data.typography;
+          [headlineFont, subheadlineFont, contentFont].forEach(font => {
+            if (font && !SYSTEM_FONTS.has(font.toLowerCase())) {
+              fonts.add(font);
+            }
+          });
+        }
+      } catch (e) {
+        // Ignore parse errors
+      }
+    }
+
+    // 3. Extract from inline font-family styles in cf-* elements
+    document.querySelectorAll('cf-headline, cf-subheadline, cf-paragraph, cf-button').forEach(el => {
+      const style = el.getAttribute('style') || '';
+      const match = style.match(/font-family:\s*["']?([^"';,]+)/i);
+      if (match) {
+        const font = match[1].trim();
+        if (font && !SYSTEM_FONTS.has(font.toLowerCase())) {
+          fonts.add(font);
+        }
+      }
+    });
+
+    return fonts;
+  }
+
+  /**
+   * Inject Google Fonts stylesheet into document head
+   */
+  function injectGoogleFonts(fonts) {
+    if (!fonts || fonts.size === 0) return;
+
+    // Filter out already loaded fonts
+    const newFonts = Array.from(fonts).filter(f => !loadedFonts.has(f));
+    if (newFonts.length === 0) return;
+
+    // Mark as loaded
+    newFonts.forEach(f => loadedFonts.add(f));
+
+    // Build Google Fonts URL
+    const fontParams = newFonts
+      .map(font => font.replace(/ /g, '+'))
+      .join('&family=');
+
+    const url = `https://fonts.googleapis.com/css2?family=${fontParams}:wght@300;400;500;600;700;800;900&display=swap`;
+
+    // Check if already loaded
+    if (document.querySelector(`link[href^="https://fonts.googleapis.com"][href*="${newFonts[0].replace(/ /g, '+')}"]`)) {
+      return;
+    }
+
+    // Inject link tag
+    const link = document.createElement('link');
+    link.id = 'cf-google-fonts';
+    link.rel = 'stylesheet';
+    link.href = url;
+    document.head.appendChild(link);
+  }
+
+  /**
+   * Auto-load Google Fonts from document
+   * Called before element rendering
+   */
+  function loadGoogleFonts() {
+    const fonts = extractFontsFromDocument();
+    injectGoogleFonts(fonts);
+  }
+
   // ==========================================================================
   // CONSTANTS & MAPPINGS
   // ==========================================================================
@@ -944,9 +1054,10 @@
    *   bg-style    - Background image style: cover, cover-center (default), parallax, w100, w100h100, no-repeat, repeat, repeat-x, repeat-y
    *   gradient    - CSS gradient
    *   overlay     - Overlay color (rgba)
-   *   text-color  - Default text color
+   *   text-color  - Default text color (inherited by child elements)
    *   link-color  - Default link color
-   *   font-family - Default font family (e.g., '"Roboto", sans-serif')
+   *   font        - Default font family (e.g., "Roboto") - inherited by child elements
+   *   font-family - Alias for font
    *   font-weight - Default font weight
    *   header-code - Custom header HTML/scripts
    *   footer-code - Custom footer HTML/scripts
@@ -961,7 +1072,8 @@
       const overlay = attr(this, "overlay");
       const textColor = attr(this, "text-color", "#334155");
       const linkColor = attr(this, "link-color", "#3b82f6");
-      const fontFamily = attr(this, "font-family");
+      // Support both "font" (simple) and "font-family" (explicit) attributes
+      const font = attr(this, "font") || attr(this, "font-family");
       const fontWeight = attr(this, "font-weight");
       const headerCode = attr(this, "header-code");
       const footerCode = attr(this, "footer-code");
@@ -971,8 +1083,15 @@
         width: "100%",
         "min-height": "100vh",
         position: "relative",
+        // Apply text color and font for CSS inheritance
+        color: textColor,
       };
 
+      // Apply font-family for inheritance by child elements
+      if (font) {
+        styles["font-family"] = `"${font}", sans-serif`;
+      }
+
       if (gradient) {
         styles["background"] = gradient;
       } else if (bg) {
@@ -998,7 +1117,7 @@
 
       // Build optional data attributes for settings
       let optionalAttrs = "";
-      if (fontFamily) optionalAttrs += ` data-font-family="${fontFamily}"`;
+      if (font) optionalAttrs += ` data-font="${font}"`;
       if (fontWeight) optionalAttrs += ` data-font-weight="${fontWeight}"`;
       if (headerCode)
         optionalAttrs += ` data-header-code="${encodeURIComponent(
@@ -2058,6 +2177,7 @@
    */
   class CFHeadline extends CFElement {
     render() {
+      const elementId = attr(this, "element-id");
       const size = attr(this, "size", "48px");
       const weight = attr(this, "weight", "bold");
       const font = attr(this, "font");
@@ -2103,6 +2223,7 @@
       // Build data attributes for round-trip conversion
       // Store original size (preset or px) for reliable roundtrip
       let dataAttrs = 'data-type="Headline/V1"';
+      if (elementId) dataAttrs += ` data-element-id="${elementId}"`;
       dataAttrs += ` data-size="${size}"`;
       dataAttrs += ` data-weight="${weight}"`;
       if (hasExplicitColor && color) {
@@ -2119,6 +2240,9 @@
       if (icon) dataAttrs += ` data-icon="${icon}"`;
       if (icon && iconAlign !== "left") dataAttrs += ` data-icon-align="${iconAlign}"`;
 
+      // Build ID attribute for scroll-to and show-hide targeting
+      const idAttr = elementId ? ` id="${elementId}"` : "";
+
       // Build icon HTML if present
       let iconHtml = "";
       if (icon) {
@@ -2136,7 +2260,7 @@
       dataAttrs += animationAttrs;
 
       this.outerHTML = `
-        <div ${dataAttrs} style="${buildStyle(wrapperStyles)}">
+        <div${idAttr} ${dataAttrs} style="${buildStyle(wrapperStyles)}">
           <${tag} style="${buildStyle(textStyles)}">${textWithIcon}</${tag}>
         </div>
       `;
@@ -2149,6 +2273,7 @@
    */
   class CFSubheadline extends CFElement {
     render() {
+      const elementId = attr(this, "element-id");
       const size = attr(this, "size", "24px");
       const weight = attr(this, "weight", "normal");
       const font = attr(this, "font");
@@ -2192,6 +2317,7 @@
       // Build data attributes for round-trip conversion
       // Store original size (preset or px) for reliable roundtrip
       let dataAttrs = 'data-type="SubHeadline/V1"';
+      if (elementId) dataAttrs += ` data-element-id="${elementId}"`;
       dataAttrs += ` data-size="${size}"`;
       dataAttrs += ` data-weight="${weight}"`;
       if (hasExplicitColor && color) {
@@ -2208,6 +2334,9 @@
       if (icon) dataAttrs += ` data-icon="${icon}"`;
       if (icon && iconAlign !== "left") dataAttrs += ` data-icon-align="${iconAlign}"`;
 
+      // Build ID attribute for scroll-to and show-hide targeting
+      const idAttr = elementId ? ` id="${elementId}"` : "";
+
       // Build icon HTML if present
       let iconHtml = "";
       if (icon) {
@@ -2225,7 +2354,7 @@
       dataAttrs += animationAttrs;
 
       this.outerHTML = `
-        <div ${dataAttrs} style="${buildStyle(wrapperStyles)}">
+        <div${idAttr} ${dataAttrs} style="${buildStyle(wrapperStyles)}">
           <${tag} style="${buildStyle(textStyles)}">${textWithIcon}</${tag}>
         </div>
       `;
@@ -2238,6 +2367,7 @@
    */
   class CFParagraph extends CFElement {
     render() {
+      const elementId = attr(this, "element-id");
       const size = attr(this, "size", "16px");
       const weight = attr(this, "weight", "normal");
       const font = attr(this, "font");
@@ -2289,6 +2419,7 @@
       // Build data attributes for round-trip conversion
       // Store original size (preset or px) for reliable roundtrip
       let dataAttrs = 'data-type="Paragraph/V1"';
+      if (elementId) dataAttrs += ` data-element-id="${elementId}"`;
       dataAttrs += ` data-size="${size}"`;
       dataAttrs += ` data-weight="${weight}"`;
       if (hasExplicitColor && color) {
@@ -2307,6 +2438,9 @@
       if (icon) dataAttrs += ` data-icon="${icon}"`;
       if (icon && iconAlign !== "left") dataAttrs += ` data-icon-align="${iconAlign}"`;
 
+      // Build ID attribute for scroll-to and show-hide targeting
+      const idAttr = elementId ? ` id="${elementId}"` : "";
+
       // Build icon HTML if present
       let iconHtml = "";
       if (icon) {
@@ -2324,7 +2458,7 @@
       dataAttrs += animationAttrs;
 
       this.outerHTML = `
-        <div ${dataAttrs} style="${buildStyle(wrapperStyles)}">
+        <div${idAttr} ${dataAttrs} style="${buildStyle(wrapperStyles)}">
           <p style="${buildStyle(textStyles)}">${textWithIcon}</p>
         </div>
       `;
@@ -4588,6 +4722,7 @@
   // Auto-initialize when DOM is ready
   if (document.readyState === "loading") {
     document.addEventListener("DOMContentLoaded", () => {
+      loadGoogleFonts();  // Load fonts before rendering
       styleguideManager.init();
       brandAssetsManager.init();
       initFunnelWind();
@@ -4600,6 +4735,7 @@
   } else {
     // DOM already ready, use requestAnimationFrame to ensure all elements are parsed
     requestAnimationFrame(() => {
+      loadGoogleFonts();  // Load fonts before rendering
       styleguideManager.init();
       brandAssetsManager.init();
       initFunnelWind();
@@ -4616,12 +4752,14 @@
     init: initFunnelWind,
     initAnimations: initAnimations,
     loadAnimateCSS: loadAnimateCSS,
+    loadGoogleFonts: loadGoogleFonts,
     initVideoBackgrounds: initVideoBackgrounds,
     elements: elements,
     StyleguideManager: styleguideManager,
     BrandAssetsManager: brandAssetsManager,
     initStyleguide: (data) => {
       styleguideManager.init(data);
+      loadGoogleFonts();  // Load fonts from styleguide
       initFunnelWind();
     },
     initBrandAssets: (data) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cf-elements",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Zero-dependency markup library that generates ClickFunnels compatible HTML with inline styles",
   "main": "cf-elements.js",
   "browser": "cf-elements.js",