const orgIDState = window.clientWorkStateTemp.org; const pageName2 = 'homepage-spotlight'; const apiUrlSpotlight = 'https://thrillshare-cmsv2.services.thrillshare.com/api/v4/o/' + orgIDState + '/cms/pages/' + pageName2; // Set default values - We'll change this from "Spotlight" to match what's in logs var titleStyle = 'bold'; // can be 'light', 'bold' or 'purple' var spotlightSectionTitle = 'We Are LRSD'; // Change default to match what shows up in the logs var hideSection = false; var extraClassSection = "spotlightSection"; // image height in px // Check if tiny-slider is available function isTinySliderLoaded() { return typeof tns === 'function'; } fetch(apiUrlSpotlight) .then((response) => response.json()) .then((result) => { // console.log('API Response received:', result); const pageContent = result.content; const customHomepageComponent = document.querySelector('#graduateContainer'); const customInner = document.createElement('div'); customInner.classList.add("graduateSlider", extraClassSection); // Variables to track our items and settings var n = 0; var leftSidebarComponents = []; var foundConfig = false; var foundTable = false; // Process the page content with the new nested structure if (pageContent && Array.isArray(pageContent)) { // console.log('Processing page content, length:', pageContent.length); // Let's first try to extract the settings from any table component pageContent.forEach((rootItem, rootIndex) => { // console.log(`Processing root item [${rootIndex}], component: ${rootItem.component}`); // Check for first-level ts-full-width component if (rootItem.component === 'ts-full-width') { // console.log('Found ts-full-width component'); if (rootItem.config && Array.isArray(rootItem.config)) { rootItem.config.forEach((configArray, configIndex) => { if (Array.isArray(configArray)) { configArray.forEach(fullWidthElement => { if (fullWidthElement.component === 'ts-table-v2') { foundTable = true; // console.log('Found ts-table-v2 component'); if (fullWidthElement.config && fullWidthElement.config.table && fullWidthElement.config.table.content) { const configTable = fullWidthElement.config.table.content; // console.log('Table content:', configTable); try { const jsonConfig = JSON.parse(convertTableToJson(configTable)); // console.log('Parsed table JSON:', jsonConfig); foundConfig = true; jsonConfig.forEach(element => { // Case-insensitive comparison for better matching if (element['setting'] && element['setting'].toLowerCase() === 'section_title') { if (element['value'] && element['value'].trim() !== '') { spotlightSectionTitle = element['value'].trim(); // console.log("Found section title:", spotlightSectionTitle); } } if (element['setting'] && element['setting'].toLowerCase() === 'hide_section') { if (element['value'] && element['value'].trim() !== '') { hideSection = element['value'].trim(); // console.log("Found hide section setting:", hideSection); } } }); } catch (e) { console.error("Error parsing table JSON:", e); } } } }); } }); } } // Handle the root BASE_COLUMN which contains our left sidebar components if (rootItem.component === 'BASE_COLUMN' && rootItem.config && Array.isArray(rootItem.config)) { rootItem.config.forEach((configRow, rowIndex) => { if (Array.isArray(configRow)) { configRow.forEach(configItem => { if (configItem.component === 'ts-left-sidebar') { leftSidebarComponents.push(configItem); } }); } }); } // Also handle any direct ts-left-sidebar components that might be at the root level if (rootItem.component === 'ts-left-sidebar') { leftSidebarComponents.push(rootItem); } }); if (!foundTable) { console.warn("No settings table found in the content!"); } // Log found components and settings // console.log("Section title after processing:", spotlightSectionTitle); // console.log("Found config:", foundConfig); // console.log("Found left sidebar components:", leftSidebarComponents.length); } // Process each left sidebar component to create slider items leftSidebarComponents.forEach(pageElement => { let leftSidebarItem = pageElement.config; const customInnerElement = document.createElement('div'); customInnerElement.classList.add("graduate-item"); leftSidebarItem.forEach((leftSidebarHalf, index) => { // If right part of the "Left Sidebar" if (index == 1) { var contentWrapInner = document.createElement('div'); contentWrapInner.classList.add("content-wrap-inner"); } // Ensure leftSidebarHalf is an array before trying to iterate if (Array.isArray(leftSidebarHalf)) { leftSidebarHalf.forEach(element => { if (element.component == 'ts-image') { // Check if element.config.image exists before accessing properties if (element.config && element.config.image) { let imageSRC = element.config.image.url; let imageUrl = element.config.image.link_url; let imageAltText = element.config.image.alt_text; let starsContainer = document.createElement('div'); starsContainer.classList.add("stars-container"); let svgCode = ` `; starsContainer.innerHTML = svgCode; const svgElement = starsContainer.querySelector('svg'); if (imageSRC) { let imageElement = document.createElement('img'); imageElement.src = imageSRC; if (imageAltText) { imageElement.alt = imageAltText; } if (imageUrl) { let imageElementWrap = document.createElement('div'); imageElementWrap.classList.add("graduate-image"); let imageElementLink = document.createElement('a'); imageElementLink.setAttribute('href', imageUrl); imageElementLink.setAttribute('target', 'blank'); imageElementLink.classList.add("graduate-image-link"); imageElementLink.appendChild(imageElement); imageElementWrap.appendChild(imageElementLink); imageElementWrap.appendChild(svgElement); customInnerElement.appendChild(imageElementWrap); } else { let imageElementWrap = document.createElement('div'); imageElementWrap.classList.add("graduate-image"); imageElementWrap.appendChild(imageElement); imageElementWrap.appendChild(svgElement); customInnerElement.appendChild(imageElementWrap); } } } } if (element.component == 'ts-heading') { // Make sure we can access the content property let titleContent = element.config && element.config.content ? element.config.content : ''; if (titleContent) { let titleElementWrap = document.createElement('div'); titleElementWrap.classList.add("graduate-name"); titleElementWrap.setAttribute('tabindex', '0'); titleElementWrap.innerHTML = titleContent; contentWrapInner.appendChild(titleElementWrap); } } if (element.component == 'ts-text') { // Make sure we can access the content property let textContent = element.config && element.config.content ? element.config.content : ''; if (textContent) { let textElementWrap = document.createElement('div'); textElementWrap.classList.add("graduate-school"); textElementWrap.setAttribute('tabindex', '0'); textElementWrap.innerHTML = textContent; contentWrapInner.appendChild(textElementWrap); } } }); } // If right part of the "Left Sidebar" if (index == 1) { customInnerElement.appendChild(contentWrapInner); } }); // Add the element to the slider container customInner.appendChild(customInnerElement); n += 1; }); if (hideSection !== 'yes') { function addHTML(callback) { // Force the section title to be the one we want // console.log("Using section title for display:", spotlightSectionTitle); const spotlightSectionTitleDiv = document.createElement('h2'); spotlightSectionTitleDiv.classList.add("growing-graduates-title"); spotlightSectionTitleDiv.innerHTML = spotlightSectionTitle; customHomepageComponent.appendChild(spotlightSectionTitleDiv); // Check if we have any items to display if (n > 0) { // Append the slider to the container customHomepageComponent.appendChild(customInner); // Add classes to the container customHomepageComponent.classList.add('style--' + titleStyle); customHomepageComponent.classList.add('itemsLength--' + n); // Only initialize the slider if we have items if (typeof callback === 'function') { callback(); } } else { console.warn("No spotlight items found to display"); } } function sliderSettings() { // Check if tiny-slider library is loaded if (!isTinySliderLoaded()) { console.error("Tiny Slider library not found. Make sure it's properly loaded."); return; } // Make sure we have items in the container before initializing const sliderContainer = document.querySelector('.graduateSlider'); if (!sliderContainer || sliderContainer.children.length === 0) { console.warn("No slides found in the slider container"); return; } try { const graduateTnsSlider = tns({ container: '.graduateSlider', items: 1, nav: false, controlsPosition: 'bottom', loop: true, responsive: { 640: { edgePadding: 20, gutter: 20, items: 1 }, 768: { gutter: 30, items: 3 }, 2100: { gutter: 40, items: 5, loop: true } }, onInit: (info) => { // Add safety checks to prevent errors if elements don't exist if (info.slideItems[info.index]) info.slideItems[info.index].classList.add('tns-slide-current-1'); if (info.slideItems[info.index + 1]) info.slideItems[info.index + 1].classList.add('tns-slide-current-2'); if (info.slideItems[info.index + 2]) info.slideItems[info.index + 2].classList.add('tns-slide-current-3'); if (info.slideItems[info.index + 3]) info.slideItems[info.index + 3].classList.add('tns-slide-current-4'); if (info.slideItems[info.index + 4]) info.slideItems[info.index + 4].classList.add('tns-slide-current-5'); } }); // Set tabindex for slide items let slideItems = document.querySelectorAll('.graduate-item.tns-item'); slideItems.forEach((item) => { item.setAttribute('tabindex', -1); }); // Only set up event listeners if the slider was successfully initialized if (graduateTnsSlider && graduateTnsSlider.events) { graduateTnsSlider.events.on('indexChanged', (info, event) => { if (info.index != info.indexCached) { // Remove current classes for (let i = 1; i <= 5; i++) { let tnsSlide = document.querySelector(`.tns-slide-current-${i}`); if (tnsSlide) { tnsSlide.classList.remove(`tns-slide-current-${i}`); } } // Add new current classes for (let i = 0; i < 5; i++) { if (info.slideItems[info.index + i]) { info.slideItems[info.index + i].classList.add(`tns-slide-current-${i+1}`); } } } }); } // console.log("Slider initialized successfully"); } catch (error) { console.error("Error initializing slider:", error); } } addHTML(sliderSettings); } }) .catch(error => { console.error("Error fetching spotlight data:", error); }); function convertTableToJson(htmlString) { try { const parser = new DOMParser(); const htmlWithTable = parser.parseFromString(htmlString, 'text/html'); const table = htmlWithTable.querySelector("table"); if (!table) { console.error("No table element found in HTML string"); return "[]"; } var header = []; var rows = []; // Make sure the table has at least one row if (!table.rows || table.rows.length === 0) { console.error("Table has no rows"); return "[]"; } // Extract headers, normalizing them to lowercase for case-insensitive matching for (var i = 0; i < table.rows[0].cells.length; i++) { header.push(table.rows[0].cells[i].innerText.trim()); } // Extract data rows for (var i = 1; i < table.rows.length; i++) { var row = {}; for (var j = 0; j < Math.min(table.rows[i].cells.length, header.length); j++) { // Use the original header name for the key row[header[j]] = table.rows[i].cells[j].innerText.trim(); } rows.push(row); } // Print extracted data for debugging // console.log("Extracted table data:", rows); const jsonFromTable = JSON.stringify(rows); return jsonFromTable; } catch (e) { console.error("Error converting table to JSON:", e); return "[]"; } }