/* ---- START District Home on Schools ---- */ // Dynamically append the HTML code to #app const widgetSection = ` `; // Appending the widget section to #app document.addEventListener('appLoaded', function () { document.querySelector('body:not(.montgomery-public-schools) #app').insertAdjacentHTML('beforeend', widgetSection); }); /* ---- END District Home & Login Widget ---- */ document.addEventListener("appLoaded", function () { const section1 = document.querySelector("div.main:nth-child(4)"); const section2 = document.querySelector("div.main:nth-child(5)"); if (section1 && section2) { // Create the wrapper element const wrapper = document.createElement("div"); wrapper.className = "custom-live-feed-parent-wrapper"; // Insert the wrapper before the first section section1.parentNode.insertBefore(wrapper, section1); // Move both sections into the wrapper wrapper.appendChild(section1); wrapper.appendChild(section2); } }); /* ==== EXTERNAL SCRIPT ==== */ const schoolAlias = window.clientWorkStateTemp.alias; /* ----------- Script to add icons in the footer ----------- */ function createSocialIconsArea() { var facebookURL = twitterURL = instagramURL = youtubeURL = ""; const socialIconsInFooter = document.querySelectorAll("#cms-footer #footer-f2 .contact-data .social-media li a"); // social icons from footer const placeToAddTheIconsIn = document.querySelector("#cms-footer .download-links"); if (socialIconsInFooter) { // loop through icons - pull the rul socialIconsInFooter.forEach(function (socialIcon) { let socialIconURL = socialIcon.href; // check what type of button if (socialIconURL.includes("facebook.com")) { facebookURL = socialIconURL; } if (socialIconURL.includes("twitter.com")) { twitterURL = socialIconURL; } if (socialIconURL.includes("instagram.com")) { instagramURL = socialIconURL; } if (socialIconURL.includes("youtube.com")) { youtubeURL = socialIconURL; } }); } // define svg icons - in this case round icons const tiktokURL = "#"; const tiktokIcon = ''; const linkedinURL = "#"; const linkedinIcon = ''; const fbIcon = ''; const twIcon = ''; const instaIcon = ''; const ytIcon = ''; /* END SETTINGS */ var iconsToBeAdded = [fbIcon, twIcon, instaIcon, ytIcon]; var iconsUrlsToBeAdded = [facebookURL, twitterURL, instagramURL, youtubeURL]; //ofc, they should match if (placeToAddTheIconsIn) { if (iconsToBeAdded) { var wrapper1 = document.createElement("div"); wrapper1.classList.add("custom-social-icons"); var wrapper2 = document.createElement("ul"); wrapper2.classList.add("social-icons"); iconsToBeAdded.forEach((icon, index) => { let listElement = document.createElement("li"); let listElementLink = document.createElement("a"); listElement.setAttribute("data-testid", "social-icon"); listElementLink.setAttribute("href", iconsUrlsToBeAdded[index]); listElementLink.setAttribute("target", "_blank"); listElementLink.innerHTML = icon; listElement.appendChild(listElementLink); wrapper2.appendChild(listElement); }); wrapper1.appendChild(wrapper2); placeToAddTheIconsIn.insertAdjacentElement('beforeEnd', wrapper1); } } } document.addEventListener("appLoaded", createSocialIconsArea); /* ----------- END Script to add new icons in the footer ----------- */ /* ---------- HOMEPAGE CUSTOM AREA --------------- */ const orgID = window.clientWorkStateTemp.org; const pageName1 = 'homepage-text'; 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 var backgroundColor = 'var(--secondary-color)'; // image height in px const extraClass = "homepage-text-area"; // image height in px document.addEventListener("appLoaded", () => { if (document.getElementById("home") !== null) { fetch(apiUrl) .then((response) => response.json()) .then((result) => { const pageContent = result.content; const customHomepageComponent = document.querySelector('#homepage-text'); 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]; console.log(element['value']) if (element['setting'] == 'number_of_columns') { numberOfColumns = element['value']; } if (element['setting'] == 'title_style') { titleStyle = element['value']; } if (element['setting'] == 'backgroundColor') { backgroundColor = element['value']; } } } }); } // 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("homepageCustomArea"); 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-wrap"); 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.style.setProperty('--bgcolor', backgroundColor); 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; } /* ---------- END HOMEPAGE CUSTOM AREA --------------- */ const orgID2 = window.clientWorkStateTemp.org; const pageName2 = 'homepage-core-values'; const apiUrl2 = 'https://thrillshare-cmsv2.services.thrillshare.com/api/v4/o/' + orgID2 + '/cms/pages/' + pageName2; const extraClass2 = "homepage-core-values-area"; // image height in px var first_title = "Core"; var second_title = "Values"; var first_title_color = "var(--primary-color)"; var second_title_color = "var(--secondary-color)"; document.addEventListener("appLoaded", () => { if (document.getElementById("home") !== null) { fetch(apiUrl2) .then((response) => response.json()) .then((result) => { const pageContent = result.content; const customHomepageComponent = document.querySelector('#homepage-core-values'); const customInner = document.createElement('div'); customInner.classList.add("customInner", extraClass2) if (customHomepageComponent) { // 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'] == 'first_title') { first_title = element['value']; } if (element['setting'] == 'second_title') { second_title = element['value']; } if (element['setting'] == 'first_title_color') { first_title_color = element['value']; } if (element['setting'] == 'second_title_color') { second_title_color = element['value']; } } } }); } // 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("core-value-item"); 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-video') { let videoUrl = element.config.video.url; if (videoUrl) { // Extract the video ID from the URL var videoId = extractVideoId(videoUrl); // Create the iframe element var iframe = document.createElement("iframe"); iframe.width = "560"; // Set the desired width iframe.height = "315"; // Set the desired height iframe.src = "https://www.youtube.com/embed/" + videoId; iframe.frameborder = "0"; iframe.allowfullscreen = true; // Add the iframe to the DOM contentWrapInner.appendChild(iframe); // Function to extract the video ID from the URL function extractVideoId(url) { var match = url.match(/v=([a-zA-Z0-9_-]+)/); if (match && match[1]) { return match[1]; } return null; } } } }); // If right part of the "Left Sidebar" if (index == 1) { contentWrap.appendChild(contentWrapInner); customInnerElement.appendChild(contentWrap); } }); customInner.appendChild(customInnerElement); } }); if (first_title) { const first_titleHTML = document.createElement('h2'); first_titleHTML.classList.add("first_title"); first_titleHTML.innerText = first_title; customHomepageComponent.appendChild(first_titleHTML); } if (second_title) { const second_titleHTML = document.createElement('h4'); second_titleHTML.classList.add("second_title"); second_titleHTML.innerText = second_title; customHomepageComponent.appendChild(second_titleHTML); } customHomepageComponent.appendChild(customInner); customHomepageComponent.style.setProperty('--first_title_color', first_title_color); customHomepageComponent.style.setProperty('--second_title_color', second_title_color); } }); } });

McKee Middle School