/* --------- CUSTOM FOOTER -------------- */ const footerPageName = 'custom-footer'; const footerPageApiUrl = 'https://thrillshare-cmsv2.services.thrillshare.com/api/v4/o/' + orgID + '/cms/pages/' + footerPageName; const footerSiteName = _$.homepage.footer.organization_info.name; var logo_size_desktop = 300; var logo_size_mobile = 160; var text_color = '#fff'; var bg_color = 'var(--primary-color)'; var copyright = 'yes'; var footerLogo = document.createElement('div'); footerLogo.classList.add("footerLogo"); var footerSiteInfo = document.createElement('div'); footerSiteInfo.classList.add("footerSiteInfo"); var footerSocialIcons = document.createElement('div'); footerSocialIcons.classList.add("footerSocialIcons"); var footerAppIcons = document.createElement('div'); footerAppIcons.classList.add("footerAppIcons"); var footerImageBg = document.createElement('div'); footerImageBg.classList.add("footerImageBg"); var footerMenu1 = document.createElement('div'); footerMenu1.classList.add("footerMenu1"); var footerMenu2 = document.createElement('div'); footerMenu2.classList.add("footerMenu2"); const roundIcons = { facebook: '', twitter: '', instagram: '', youtube: '', linkedin: '', dropbox: '', flickr: '', peachjar: '' }; const coloredIcons = { facebook: '', twitter: '', instagram: '', youtube: '', linkedin: '', dropbox: '', flickr: '', peachjar: '' }; document.addEventListener("appLoaded", () => { fetch(footerPageApiUrl) .then((response) => response.json()) .then((result) => { const footerCustomContent = result.content; const customFooter = document.querySelector('#custom-footer-outer'); // for each page component/layout/section footerCustomContent.forEach((pageElement, fourColIndex) => { if (fourColIndex > 21) { return; } 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'] == 'logo_size_desktop') { logo_size_desktop = Number(element['value']); } if (element['setting'] == 'logo_size_mobile') { logo_size_mobile = Number(element['value']); } if (element['setting'] == 'text_color') { text_color = element['value'].trim(); } if (element['setting'] == 'bg_color') { bg_color = element['value'].trim(); } if (element['setting'] == 'copyright') { copyright = element['value'].trim(); } } } }); } // if it's our desired repetitive element else if (pageElement.component == 'ts-four-column') { let tsFourColumnItem = pageElement.config; const customFooterInner = document.createElement('div'); customFooterInner.classList.add("customFooterInner"); tsFourColumnItem.forEach((leftSidebarHalf, index) => { leftSidebarHalf.forEach(element => { if (index == 0) { 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); footerLogo.appendChild(imageElementWrap); } else { let imageElementWrap = document.createElement('div'); imageElementWrap.classList.add("image-wrap"); imageElementWrap.appendChild(imageElement); footerLogo.appendChild(imageElementWrap); } } } } if (index == 1) { 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; footerSiteInfo.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; footerSiteInfo.appendChild(textElementWrap); } } } if (index == 2) { if (element.component == 'ts-button') { element.config.button.buttons.forEach(btnElement => { let buttonTarget = false; let buttonText = btnElement.title; let buttonURL = btnElement.link; if (btnElement.open_link_in_new_tab) { buttonTarget = true; } if (buttonURL) { let buttonElement = document.createElement('a'); let buttonElementSticky = document.createElement('a'); // buttonElement.innerHTML = buttonText; buttonElement.href = buttonURL; buttonElementSticky.href = buttonURL; // if (buttonTarget) { buttonElement.target = "_blank"; buttonElementSticky.target = "_blank"; // } if (buttonText && buttonText.toLowerCase().includes("facebook")) { buttonElement.innerHTML = roundIcons.facebook; buttonElement.classList.add('facebook-button', 'social-icon'); footerSocialIcons.appendChild(buttonElement); buttonElementSticky.innerHTML = coloredIcons.facebook; buttonElementSticky.classList.add('facebook-button', 'social-icon'); } if (buttonText && buttonText.toLowerCase().includes("twitter")) { buttonElement.innerHTML = roundIcons.twitter; buttonElement.classList.add('twitter-button', 'social-icon'); footerSocialIcons.appendChild(buttonElement); buttonElementSticky.innerHTML = coloredIcons.twitter; buttonElementSticky.classList.add('twitter-button', 'social-icon'); } if (buttonText && buttonText.toLowerCase().includes("instagram")) { buttonElement.innerHTML = roundIcons.instagram; buttonElement.classList.add('instagram-button', 'social-icon'); footerSocialIcons.appendChild(buttonElement); buttonElementSticky.innerHTML = coloredIcons.instagram; buttonElementSticky.classList.add('instagram-button', 'social-icon'); } if (buttonText && buttonText.toLowerCase().includes("youtube")) { buttonElement.innerHTML = roundIcons.youtube; buttonElement.classList.add('youtube-button', 'social-icon'); footerSocialIcons.appendChild(buttonElement); buttonElementSticky.innerHTML = coloredIcons.youtube; buttonElementSticky.classList.add('youtube-button', 'social-icon'); } if (buttonText && buttonText.toLowerCase().includes("linkedin")) { buttonElement.innerHTML = roundIcons.linkedin; buttonElement.classList.add('linkedin-button', 'social-icon'); footerSocialIcons.appendChild(buttonElement); buttonElementSticky.innerHTML = coloredIcons.linkedin; buttonElementSticky.classList.add('linkedin-button', 'social-icon'); } if (buttonText && buttonText.toLowerCase().includes("dropbox")) { buttonElement.innerHTML = roundIcons.dropbox; buttonElement.classList.add('dropbox-button', 'social-icon'); footerSocialIcons.appendChild(buttonElement); buttonElementSticky.innerHTML = coloredIcons.dropbox; buttonElementSticky.classList.add('dropbox-button', 'social-icon'); } if (buttonText && buttonText.toLowerCase().includes("flickr")) { buttonElement.innerHTML = roundIcons.flickr; buttonElement.classList.add('flickr-button', 'social-icon'); footerSocialIcons.appendChild(buttonElement); buttonElementSticky.innerHTML = coloredIcons.flickr; buttonElementSticky.classList.add('flickr-button', 'social-icon'); } if (buttonText && buttonText.toLowerCase().includes("peach")) { buttonElement.innerHTML = roundIcons.peachjar; buttonElement.classList.add('peachjar-button', 'social-icon'); footerSocialIcons.appendChild(buttonElement); buttonElementSticky.innerHTML = coloredIcons.peachjar; buttonElementSticky.classList.add('peachjar-button', 'social-icon'); } if (buttonURL.includes("play.google.com")) { buttonElement.classList.add('google-play-buton', 'social-icon'); footerAppIcons.appendChild(buttonElement); } if (buttonURL.includes("apps.apple.com")) { buttonElement.classList.add('ios-button', 'social-icon'); footerAppIcons.appendChild(buttonElement); } } }); } } if (index == 3) { 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); footerImageBg.appendChild(imageElementWrap); } else { let imageElementWrap = document.createElement('div'); imageElementWrap.classList.add("image-wrap"); imageElementWrap.appendChild(imageElement); footerImageBg.appendChild(imageElementWrap); } } } } }); }); } else if (pageElement.component == 'ts-two-column') { let tsFourColumnItem = pageElement.config; tsFourColumnItem.forEach((leftSidebarHalf, index) => { leftSidebarHalf.forEach(element => { if (index == 0) { if (element.component == 'ts-button') { element.config.button.buttons.forEach(btnElement => { let buttonTarget = false; let buttonText = btnElement.title; let buttonURL = btnElement.link; if (btnElement.open_link_in_new_tab) { buttonTarget = true; } if (buttonURL) { let buttonElement = document.createElement('a'); buttonElement.href = buttonURL; buttonElement.href = buttonURL; if (buttonTarget) { buttonElement.target = "_blank"; } buttonElement.innerText = buttonText; footerMenu1.appendChild(buttonElement); } }); } } if (index == 1) { if (element.component == 'ts-button') { element.config.button.buttons.forEach(btnElement => { let buttonTarget = false; let buttonText = btnElement.title; let buttonURL = btnElement.link; if (btnElement.open_link_in_new_tab) { buttonTarget = true; } if (buttonURL) { let buttonElement = document.createElement('a'); buttonElement.href = buttonURL; buttonElement.href = buttonURL; if (buttonTarget) { buttonElement.target = "_blank"; } buttonElement.innerText = buttonText; footerMenu2.appendChild(buttonElement); } }); } 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; footerMenu2.appendChild(textElementWrap); } } } }); }); } }); const footerLogoArea = document.querySelector('#footer-logo-area'); const footerSocialIconsArea = document.querySelector('#footer-social-icons-area'); const footerMobileAppsArea = document.querySelector('#footer-mobile-apps-area'); const footerCopyRightArea = document.querySelector('#footer-copyright-area'); const footerSiteInfoArea = document.querySelector('#footer-siteInfo-area'); const footerBgImage = document.querySelector('#footer-bg-image'); const footerMenuCol1 = document.querySelector('#footer-menus-col-1'); const footerMenuCol2 = document.querySelector('#footer-menus-col-2'); if (footerCopyRightArea) { if (copyright == 'yes') { let copyRightHtml = document.createElement('div'); copyRightHtml.classList.add("copyright"); footerCopyRightArea.appendChild(copyRightHtml); const currentYear = new Date().getFullYear(); copyRightHtml.innerHTML = "Copyright © " + currentYear + ". Baltimore City Public Schools . All rights reserved. Powered By Thrillshare."; } } if (footerLogoArea) { footerLogoArea.appendChild(footerLogo); } if (footerSocialIconsArea) { footerSocialIconsArea.appendChild(footerSocialIcons); } if (footerMobileAppsArea) { footerMobileAppsArea.appendChild(footerAppIcons); } if (footerSiteInfoArea) { footerSiteInfoArea.appendChild(footerSiteInfo); } if (footerBgImage) { footerBgImage.appendChild(footerImageBg); } if (footerMenuCol1) { footerMenuCol1.appendChild(footerMenu1); } if (footerMenuCol2) { footerMenuCol2.appendChild(footerMenu2); } customFooter.style.setProperty('--logo-size-d', logo_size_desktop + "px"); customFooter.style.setProperty('--logo-size-m', logo_size_mobile + "px"); customFooter.style.setProperty('--bgColor', bg_color); customFooter.style.setProperty('--textColor', text_color); }); }); /* --------- END CUSTOM FOOTER -------------- */

Inside Scoop: For Staff

Thrillshare training on August 10-12