/* config code*/ /* get info */ const getInfo = new GetInfo(); const currentLanguage = getInfo.orgTranslation; const orgID = getInfo.orgID; /* END */ /* custom sections layout type. ex: "ts-left-sidebar", "ts-right-sidebar", "ts-one-column", "ts-two-column" */ const headerButtonsLayoutType = "ts-right-sidebar"; const programsLayoutType = "ts-two-column"; const theNumbersLayoutType = "ts-left-sidebar"; /* END */ const cmsPageApiConfig = { // static in this situation apiURL: 'https://thrillshare-cmsv2.services.thrillshare.com/api/v4/o/'+orgID+'/cms/pages/homepage-custom-sections?locale=' + currentLanguage, requiredData: [ { requiredComponent: "ts-full-width", requestedFields: { "ts-table-v2": ["content"] }, limit: 1 }, { requiredComponent: theNumbersLayoutType, requestedFields: { "ts-button": ["icon", "link", "title", "mailto", "open_link_in_new_tab"], "ts-heading": ["content"], "ts-text": ["content"] }, limit: 8 }, { requiredComponent: programsLayoutType, requestedFields: { "ts-button": ["icon", "link", "title", "mailto", "open_link_in_new_tab"], "ts-image": ["url", "link_url", "set_ratio", "decorative_image", "open_link_in_new_tab", "alt_text"] }, limit: 9 } ] }; document.addEventListener("appLoaded", () => { // programs custom section const selectors = ["#programs-list", "#by-the-numbers-new"]; const exists = UtilityHelpers.elementExists(selectors); if (exists) { // Fetch data let dataFetcherPage; let currentConfig; dataFetcherPage = new DataFetcher(cmsPageApiConfig.apiURL); currentConfig = cmsPageApiConfig; //const dataFetcher = new DataFetcher(cmsPageApiConfig.apiURL); dataFetcherPage.fetchData().then(fetchedData => { if (fetchedData) { // Process data const dataProcessor = new CMSPageDataProcessor(currentConfig); const processedData = dataProcessor.processData(fetchedData); const programsList = document.getElementById("programs-list"); const byTheNumbersList = document.getElementById("by-the-numbers-new"); //extract settings from the first table from full width layout const settingsComponentData = processedData["ts-full-width"]; const settings = dataProcessor.extractSettings(settingsComponentData); if (programsList) { const programsData = processedData[programsLayoutType]; if (programsData) { const programsHTML = programsData.map(item => { // const buttonHTML = CMSPageHTMLBuilder.createButton(item['ts-button']); const imageHTML = CMSPageHTMLBuilder.createImage(item['ts-image']); //const buttonDetails = CMSPageHTMLBuilder.extractButtonDetails(item['ts-button']); const buttonHTML = CMSPageHTMLBuilder.createButton(item['ts-button'], { buttonClass: 'button-program', buttonNoLinkClass: 'program-no-link', iconClass: 'program__icon', titleClass: 'program__title' }); return `

${buttonHTML}

${imageHTML}

`; }).join(''); programsList.insertAdjacentHTML('beforeEnd', programsHTML); // ------------------- const programs_title = document.querySelector('#programs-title .home-custom-title'); if (settings) { const programs_title_val = settings['programs_title']; if (programs_title_val && programs_title) { programs_title.innerHTML = programs_title_val; } } } } if (byTheNumbersList) { const byTheNumbersData = processedData[theNumbersLayoutType]; const byTheNumbersTotalEntries = byTheNumbersData.length; const byTheNumbersHTML = byTheNumbersData.map(item => { const buttonDetails = CMSPageHTMLBuilder.extractButtonDetails(item['ts-button']); const headingHTML = CMSPageHTMLBuilder.createSimpleElement(item['ts-heading']); const textHTML = CMSPageHTMLBuilder.createSimpleElement(item['ts-text']); return `

${buttonDetails.icon}

${headingHTML}

${textHTML}

`; }).join(''); if (byTheNumbersTotalEntries) { byTheNumbersList.classList.add("by-the-numbers--" + byTheNumbersTotalEntries) } byTheNumbersList.insertAdjacentHTML("afterBegin", byTheNumbersHTML); // Usage new ByTheNumbersAnimator('.by-the-numbers-item', { mobileBreakpoint: 991, animationSpeed: 3000, // Total duration of the animation animationStep: 60, // Duration between each increment viewportOffset: 50 }); if (settings) { const by_the_numbers_title = settings['by_the_numbers_title']; const by_the_numbers_bg_image = settings['by_the_numbers_bg_image']; const byTheNumersTitle = document.getElementById("by-the-numbers-title"); if (by_the_numbers_title && byTheNumersTitle) { byTheNumersTitle.innerHTML = "

" + by_the_numbers_title + "

"; } if (by_the_numbers_bg_image) { document.getElementById("app").style.setProperty('--byTheNumbersBgImage', 'url(' + by_the_numbers_bg_image + ')'); } } } } else { console.error("Failed to fetch data."); } }).then(() => { // your function }).catch(error => { console.error("An error occurred:", error); }); } /* end programs */ });

MEGA Event #2