const _$ = window.clientWorkStateTemp; const orgID = _$.secondaryOrgId; const currentLanguage = _$.translation.locale; 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; } const footerPageName = 'custom-footer'; const footerPageApiUrl = 'https://thrillshare-cmsv2.services.thrillshare.com/api/v4/o/' + orgID + '/cms/pages/' + footerPageName + '?locale=' + currentLanguage; 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'); var stickySocialIcons = document.createElement('div'); stickySocialIcons.classList.add('stickySocialIcons'); 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 appButtonImg = document.createElement('img'); 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' ); stickySocialIcons.appendChild(buttonElementSticky); } 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' ); stickySocialIcons.appendChild(buttonElementSticky); } 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' ); stickySocialIcons.appendChild(buttonElementSticky); } 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' ); stickySocialIcons.appendChild(buttonElementSticky); } 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' ); stickySocialIcons.appendChild(buttonElementSticky); } 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' ); stickySocialIcons.appendChild(buttonElementSticky); } 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' ); stickySocialIcons.appendChild(buttonElementSticky); } 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' ); stickySocialIcons.appendChild(buttonElementSticky); } if (buttonURL.includes('play.google.com')) { buttonElement.classList.add( 'google-play-button', 'social-icon' ); appButtonImg.classList.add('app-link'); appButtonImg.src = `data:image/svg+xml,`; buttonElement.appendChild(appButtonImg); footerAppIcons.appendChild(buttonElement); } if (buttonURL.includes('apps.apple.com')) { buttonElement.classList.add( 'ios-button', 'social-icon' ); appButtonImg.classList.add('app-link'); appButtonImg.src = `data:image/svg+xml,`; buttonElement.appendChild(appButtonImg); 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 (element.component == 'ts-text') { let textContent = element.config.content; if (textContent) { belowButtonsText.innerHTML = textContent; } } } 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); } }); } } }); }); } }); 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 + ". " + footerSiteName + ". All rights reserved. Powered By Apptegy."; } } if (footerLogoArea) { footerLogoArea.appendChild(footerLogo); } if (footerSocialIconsArea) { footerSocialIconsArea.appendChild(footerSocialIcons); } if (footerMobileAppsArea) { footerMobileAppsArea.appendChild(footerAppIcons); } if (footerSiteInfoArea) { footerSiteInfoArea.appendChild(footerSiteInfo); footerSiteInfo.classList.add('notranslate'); } 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); document.getElementById('view-header').appendChild(stickySocialIcons); }); }); /* --------- END CUSTOM FOOTER -------------- */

Kingsborough Elementary

This is a great tutorial video on how to use Family ID. Please take the time to give this a look.

This is an awesome and very informative short tutorial video created by GHS librarian Carla Bengle-Mackey to help you navigate the Family ID program.