const orgID = window.clientWorkStateTemp.org; const pageName1 = 'homepage-programs'; const apiUrl = 'https://thrillshare-cmsv2.services.thrillshare.com/api/v4/o/' + orgID + '/cms/pages/' + pageName1; var titleStyle = 'light'; // can be 'light', 'bold' or 'purple' var numberOfColumns = 4; const imageSize = 150; // image height in px const extraClass = "programComponent"; // image height in px console.log(apiUrl) fetch(apiUrl) .then((response) => response.json()) .then((result) => { const pageContent = result.content; const customHomepageComponent = document.querySelector('#custom-homepage-component'); const customInner = document.createElement('div'); customInner.classList.add("customInner", extraClass) // 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'] == 'number_of_columns') { numberOfColumns = element['value']; } if (element['setting'] == 'title_style') { titleStyle = element['value']; } } } }); } // title is here else if (pageElement.component == 'ts-one-column') { if (pageElement.config[0][0].component == "ts-heading") { let sectionTitle = pageElement.config[0][0].config.content; if (sectionTitle) { let sectionTitleWrap = document.createElement('div'); sectionTitleWrap.classList.add("sectionTitle", "heading-block"); sectionTitleWrap.innerHTML = sectionTitle; // Add svg decoration for purple style if (titleStyle == 'purple') { const svgDecorationPurple = ''; const svgDecorationElement = document.createElement("div"); svgDecorationElement.classList.add("svgDecorationElement"); svgDecorationElement.innerHTML = svgDecorationPurple; sectionTitleWrap.insertAdjacentElement('beforeend', svgDecorationElement) } customHomepageComponent.appendChild(sectionTitleWrap); } } } // 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("customInnerElement"); leftSidebarItem.forEach((leftSidebarHalf, index) => { // If right part of the "Left Sidebar" if(index == 1){ var contentWrap = document.createElement('div'); contentWrap.classList.add("content-wrap"); 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; 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("image-wrap"); let imageElementLink = document.createElement('a'); imageElementLink.setAttribute('href', imageUrl); imageElementLink.setAttribute('target', 'blank'); imageElementLink.classList.add("image-wrap"); imageElementLink.appendChild(imageElement); imageElementWrap.appendChild(imageElementLink); customInnerElement.appendChild(imageElementWrap); } else { let imageElementWrap = document.createElement('div'); imageElementWrap.classList.add("image-wrap"); imageElementWrap.appendChild(imageElement); customInnerElement.appendChild(imageElementWrap); } } } if (element.component == 'ts-heading') { let titleContent = element.config.content; if (titleContent) { let titleElementWrap = document.createElement('div'); titleElementWrap.classList.add("title-wrap"); 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("text-wrap"); textElementWrap.innerHTML = textContent; contentWrapInner.appendChild(textElementWrap); } } if (element.component == 'ts-button') { let buttonTarget = false; let buttonText = element.config.button.buttons[0].title; let buttonURL = element.config.button.buttons[0].link; if (element.config.button.buttons[0].open_link_in_new_tab) { buttonTarget = true; } if (buttonText) { let buttonElement = document.createElement('a'); buttonElement.classList.add("button-element"); buttonElement.innerHTML = buttonText; buttonElement.href = buttonURL; if (buttonTarget) { buttonElement.target = "_blank"; } contentWrapInner.appendChild(buttonElement); } } }); // If right part of the "Left Sidebar" if (index == 1) { contentWrap.appendChild(contentWrapInner); customInnerElement.appendChild(contentWrap); } }); customInner.appendChild(customInnerElement); } }); customHomepageComponent.appendChild(customInner); customHomepageComponent.classList.add('style--' + titleStyle); customHomepageComponent.classList.add('columns--' + numberOfColumns); }); 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; }

New Mexico School for the Deaf

Theo the Therapy Dog