`); const contentContainer = document.querySelector(".pageCloneContent .page-inner"); // Map for class names (only apply when isBaseColumn is true) const columnClassMap = isBaseColumn ? { "ts-one-column": "single-column", "ts-two-column": "double-column", "ts-three-column": "triple-column", "ts-four-column": "quadruple-column", "ts-full-width-column": "full-width-column", "ts-left-sidebar-column": "left-sidebar", "ts-right-sidebar-column": "right-sidebar", } : {}; const rowClassMap = isBaseColumn ? { "ts-one-column-row": "single-column-row", "ts-two-column-row": "double-column-row", "ts-three-column-row": "triple-column-row", "ts-four-column-row": "quadruple-column-row", "ts-full-width-row": "full-width-column-row", "ts-left-sidebar-row": "left-sidebar-row", "ts-right-sidebar-row": "right-sidebar-row", } : {}; // Generate and insert the HTML const htmlContent = pageContent.map(pageElement => { const componentType = pageElement.component || "default-row"; const columnItems = pageElement.config || []; const rowClass = rowClassMap[componentType + "-row"] || ""; const standardRowClass = componentType === 'ts-full-width' ? '' : 'standard-row'; const columnsHtml = Array.isArray(columnItems) ? columnItems.map(columnGroup => { const columnClass = columnClassMap[componentType] || ""; return `

${Array.isArray(columnGroup) ? columnGroup.map(components).join("") : ""}

`; }).join("") : ""; return `

${columnsHtml}

`; }).join(""); contentContainer.innerHTML = htmlContent; } function components(componentBlock) { const { component, config } = componentBlock; let htmlItem = ""; // Initialize htmlItem within the function if (component === "ts-heading" && config.content) { htmlItem += `

${config.content}

`; } if (component === "ts-text" && config.content) { htmlItem += `

${config.content}

`; } if (component === "ts-image" && config.image.url) { const { url, link_url, alt_text, image_alignment, open_link_in_new_tab, display, set_ratio, preferred_width } = config.image; let imageWidth = 'auto'; if (display === 'percentage') imageWidth = `${set_ratio * 100}%`; else if (display === 'manually-adjust') imageWidth = `${preferred_width}px`; htmlItem += `

`; if (link_url) { htmlItem += ` $${alt_text}$ `; } else { htmlItem += ` $${alt_text}$ `; } htmlItem += `

`; } if (component === "ts-divider" && config.divider) { const { color, thickness } = config.divider; if (thickness) { htmlItem += `

`; } } if (component === "ts-spacer" && config.spacer.height) { htmlItem += `

`; } if (component === "ts-video" && config.video.url) { let videoUrl = config.video.url; if (videoUrl.includes('youtu.be/')) { videoUrl = `https://www.youtube.com/embed/${videoUrl.split('youtu.be/')[1]}`; } else if (videoUrl.includes('youtube.com/watch?v=')) { videoUrl = `https://www.youtube.com/embed/${videoUrl.split('youtube.com/watch?v=')[1]}`; } else if (videoUrl.includes('vimeo.com/')) { const vimeoVideoID = videoUrl.match(/vimeo\.com\/(\d+)/)?.[1]; if (vimeoVideoID) { videoUrl = `https://player.vimeo.com/video/${vimeoVideoID}`; } else { console.log('Invalid Vimeo URL'); } } htmlItem += `

`; } if (component === "ts-quote" && config.quote) { const { color, author, design, source, content } = config.quote; htmlItem += `

`; if (design === 'design-2') { htmlItem += `

`; } htmlItem += `

${content}

`; htmlItem += `

${author}

${source}

`; htmlItem += `

`; } if (component === "ts-embed" && config.embed) { htmlItem += `

${config.embed}

`; } if (component === "ts-card" && config.card) { const { design, content, headline, hasImage, wrapText, imageRight, hasHeadline, image } = config.card; const cardDesign = design === 'box-shadow' ? 'shadow' : design; htmlItem += `

`; if (hasImage) { htmlItem += `

$${image.alt_text}$

`; } htmlItem += `

`; if (hasHeadline) { htmlItem += `

${headline}

`; } htmlItem += `

${content}

`; htmlItem += `

`; } if (component === "ts-button" && config.button) { const { size, type, style, theme, alignment, has_icons, pill, buttons } = config.button; const buttonStyleOption = style != null ? `style-${style}` : ''; const buttonStyleTop = style === "2" ? '' : ''; const buttonStyleBottom = style === "2" ? '' : ''; htmlItem += `

`; buttons.forEach(btnElement => { const { open_link_in_new_tab, title, link, icon } = btnElement; if (has_icons) { htmlItem += `

${icon}

${title}

`; } else { htmlItem += `${style === "2" ? buttonStyleTop : ''}

${title}

${style === "2" ? buttonStyleBottom : ''}`; } }); htmlItem += `

`; } if (component === "ts-accordion" && config.accordion) { const { items, theme, icon_style, allow_multiple_open_panels } = config.accordion; htmlItem += `

`; items.forEach((accordionItem, index) => { const { text, content } = accordionItem; htmlItem += `

`; if (text) { htmlItem += `

`; } if (content) { htmlItem += `

`; content.forEach(component => { htmlItem += components(component); // Add component's HTML }); htmlItem += `

`; } htmlItem += `

`; }); htmlItem += `

`; } if (component === "ts-table-v2" && config.table.content) { const { content, theme, alternatingColors } = config.table; htmlItem += `

${content}

`; } if (component === "ts-slider" && config.slider) { const { has_dots, has_arrows, is_autoplay, dot_position, arrow_position, images } = config.slider; htmlItem += `

`; images.forEach(({ url, alt_text, link_url, open_link_in_new_tab }) => { htmlItem += `

`; if (link_url) { htmlItem += ` $${alt_text}$ `; } else { htmlItem += ` $${alt_text}$ `; } htmlItem += `

`; }); htmlItem += `

`; // Close swiper-wrapper // Add Swiper pagination and navigation arrows dynamically if (has_dots) { htmlItem += `

`; } if (has_arrows) { htmlItem += `

`; } htmlItem += `

`; // Close swiper and block // addCSSFile('https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css'); // addJSFile('https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js'); } if (component === "ts-gallery" && config.gallery) { const { columns, images } = config.gallery; htmlItem += `

`; images.forEach(({ url, alt_text }) => { htmlItem += `

$${alt_text}$

`; }); htmlItem += `

`; } return htmlItem; // Return the generated HTML } function initAcc() { const accordionTitles = document.querySelectorAll('.accordionTitle'); accordionTitles.forEach(button => { button.addEventListener('click', () => { const parentH2 = button.closest('h2'); const allowMultipleOpenPanels = parentH2.classList.contains('allowMultipleOpenPanels'); if (!allowMultipleOpenPanels) { const accordionBlock = parentH2.closest('.accordion-block'); accordionBlock.querySelectorAll('h2').forEach(h2 => { if (h2 !== parentH2) h2.parentElement.classList.remove('active'); }); } parentH2.parentElement.classList.toggle('active'); }); }); } function addCSSFile(url) { if (!document.querySelector(`link[href="${url}"]`)) { const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = url; document.head.appendChild(link); } } function addJSFile(url) { return new Promise((resolve, reject) => { if (document.querySelector(`script[src="${url}"]`)) { resolve(); // Script is already loaded } else { const script = document.createElement('script'); script.src = url; script.defer = true; script.onload = resolve; // Resolve when script is loaded script.onerror = reject; // Reject if there's an error loading the script document.body.appendChild(script); } }); } async function callSlider(sliderContainer, sliderAutoplay) { try { // Load Swiper styles and scripts addCSSFile('https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css'); await addJSFile('https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js'); // Wait for Swiper to be available const waitForSwiper = () => new Promise(resolve => { const interval = setInterval(() => { if (typeof Swiper !== 'undefined') { clearInterval(interval); resolve(); } }, 50); // Retry every 50ms }); await waitForSwiper(); // Initialize Swiper new Swiper(sliderContainer, { loop: true, autoplay: sliderAutoplay ? { delay: 3000, // 3 seconds between slides disableOnInteraction: false, } : false, navigation: { nextEl: sliderContainer.querySelector('.slider-swiper-button-next'), prevEl: sliderContainer.querySelector('.slider-swiper-button-prev'), }, pagination: { el: sliderContainer.querySelector('.slider-swiper-pagination'), clickable: true, }, keyboard: { enabled: true, }, }); } catch (err) { console.error('Failed to initialize Swiper:', err); } } });

${text}`; if (icon_style === 'minus' || icon_style === 'plus') { htmlItem += ``; } else if (icon_style === 'chevron') { htmlItem += ``; } else if (icon_style === 'caret') { htmlItem += ``; } htmlItem += `