const orgIDState = window.__NUXT__.state.org; const pageName2 = 'homepage-spotlight'; const apiUrlSpotlight = 'https://thrillshare-cmsv2.services.thrillshare.com/api/v4/o/' + orgIDState + '/cms/pages/' + pageName2; var titleStyle = 'bold'; // can be 'light', 'bold' or 'purple' var sectionTitle = 'Spotlight'; var hideSection = false; var extraClassSection = "spotlightSection"; // image height in px fetch(apiUrlSpotlight) .then((response) => response.json()) .then((result) => { const pageContent = result.content; const customHomepageComponent = document.querySelector('#graduateContainer'); const customInner = document.createElement('div'); customInner.classList.add("graduateSlider", extraClassSection); var clonedItems = document.createDocumentFragment(); var n = 0; // for each page component/layout/section pageContent.forEach(pageElement => { if (pageElement.component == 'ts-full-width') { pageElement.config[0].forEach(fullWidthElement => { if (fullWidthElement.component == 'ts-table-v2') { const configTable = fullWidthElement.config.table.content; const jsonConfig = JSON.parse(convertTableToJson(configTable)) for (let i = 0; i < jsonConfig.length; i++) { const element = jsonConfig[i]; if (element['setting'] == 'section_title') { sectionTitle = element['value']; } if (element['setting'] == 'hide_section') { hideSection = element['value'].trim(); } } } }); } // if it's our desired repetitive element else if (pageElement.component == 'ts-left-sidebar') { 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"); } leftSidebarHalf.forEach(element => { if (element.component == 'ts-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(starsContainer); 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') { let titleContent = element.config.content; if (titleContent) { let titleElementWrap = document.createElement('div'); titleElementWrap.classList.add("graduate-name"); titleElementWrap.innerHTML = titleContent; contentWrapInner.appendChild(titleElementWrap); } } if (element.component == 'ts-text') { let textContent = element.config.content; if (textContent) { let textElementWrap = document.createElement('div'); textElementWrap.classList.add("graduate-school"); textElementWrap.innerHTML = textContent; contentWrapInner.appendChild(textElementWrap); } } }); // If right part of the "Left Sidebar" if (index == 1) { customInnerElement.appendChild(contentWrapInner); } }); const clonedCustomInnerElement = customInnerElement.cloneNode(true); clonedItems.appendChild(clonedCustomInnerElement); customInner.appendChild(customInnerElement); n += 1; } }); if (hideSection !== 'yes') { function addHTML(callback) { const sectionTitleDiv = document.createElement('h2'); sectionTitleDiv.classList.add("growing-graduates-title"); sectionTitleDiv.innerHTML = sectionTitle; customHomepageComponent.appendChild(sectionTitleDiv); console.log(clonedItems) customInner.appendChild(clonedItems); customHomepageComponent.appendChild(customInner); // customHomepageComponent.style.setProperty('--property', numberOfColumns); customHomepageComponent.classList.add('style--' + titleStyle); customHomepageComponent.classList.add('itemsLength--' + n); callback(); } function sliderSettings() { 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) => { info.slideItems[info.index].classList.add('tns-slide-current-1'); info.slideItems[info.index + 1].classList.add('tns-slide-current-2'); info.slideItems[info.index + 2].classList.add('tns-slide-current-3'); info.slideItems[info.index + 3].classList.add('tns-slide-current-4'); info.slideItems[info.index + 4].classList.add('tns-slide-current-5'); } }); let slideItems = document.querySelectorAll('.graduate-item.tns-item'); slideItems.forEach((item) => { item.setAttribute('tabindex', 0); }); graduateTnsSlider.events.on('indexChanged', (info, event) => { if (info.index != info.indexCached) { let tnsSlide1 = document.querySelector(".tns-slide-current-1"); if (tnsSlide1) { tnsSlide1.classList.remove("tns-slide-current-1"); } let tnsSlide2 = document.querySelector(".tns-slide-current-2"); if (tnsSlide2) { tnsSlide2.classList.remove("tns-slide-current-2"); } let tnsSlide3 = document.querySelector(".tns-slide-current-3"); if (tnsSlide3) { tnsSlide3.classList.remove("tns-slide-current-3"); } let tnsSlide4 = document.querySelector(".tns-slide-current-4"); if (tnsSlide4) { tnsSlide4.classList.remove("tns-slide-current-4"); } let tnsSlide5 = document.querySelector(".tns-slide-current-5"); if (tnsSlide5) { tnsSlide5.classList.remove("tns-slide-current-5"); } // info.slideItems[info.indexCached].classList.remove('tns-slide-current-1'); // info.slideItems[info.index - 1].classList.remove('tns-slide-current-1'); // info.slideItems[info.index].classList.remove('tns-slide-current-2'); // info.slideItems[info.index + 1].classList.remove('tns-slide-current-3'); // info.slideItems[info.index + 2].classList.remove('tns-slide-current-4'); // info.slideItems[info.index + 3].classList.remove('tns-slide-current-5'); 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'); } // info.slideItems[info.index + 2].classList.add('tns-slide-current-3'); // info.slideItems[info.index + 3].classList.add('tns-slide-current-4'); // info.slideItems[info.index + 4].classList.add('tns-slide-current-5'); } }); } addHTML(sliderSettings); } }); function convertTableToJson(htmlString) { const parser = new DOMParser(); const htmlWithTable = parser.parseFromString(htmlString, 'text/html'); const table = htmlWithTable.querySelector("table"); var header = []; var rows = []; for (var i = 0; i < table.rows[0].cells.length; i++) { header.push(table.rows[0].cells[i].innerText); } for (var i = 1; i < table.rows.length; i++) { var row = {}; for (var j = 0; j < table.rows[i].cells.length; j++) { row[header[j]] = table .rows[i] .cells[j] .innerText; } rows.push(row); } const jsonFromTable = JSON.stringify(rows); return jsonFromTable; }

Learn more about Concurrent Credit