/* ----------- Add class on header if page is not homepage ----------- */ function addClassOnInternalPagesHeader() { if (document.getElementById("home") == null) { document.getElementById("view-header").classList.add("is-not-homepage"); } } document.addEventListener("appLoaded", () => { addClassOnInternalPagesHeader(); setTimeout(() => { addClassOnInternalPagesHeader(); }, 2000); }); /* ----------- END Add class on header if page is not homepage ----------- */ document.addEventListener("appLoaded", () => { document.getElementById("view-header").classList.add("loaded-header"); document.getElementById("container").classList.add("loaded-container"); // add watch button on video area; const videoIDElement = document.querySelector("#video-component .main-video .video-player.player") if (videoIDElement) { const videoID = videoIDElement.getAttribute("video-id"); const videoUrl = 'https://www.youtube.com/watch?v=' + videoID; const videoInfo = document.querySelector("#video-component .main-video .video-info"); if (videoInfo) { const moreBtn = document.createElement("a"); moreBtn.classList.add("moreBtn"); moreBtn.href = videoUrl; moreBtn.target = "_blank"; moreBtn.innerText = "watch here"; videoInfo.appendChild(moreBtn); } } // Cool Preview Block const previewElementList = document.querySelectorAll("#programs-v3 .card-slider .programs-wrapper .program"); const cssWordSelector = ".program-title"; previewElementList.forEach(previewElement => { let previewWordElement = previewElement.querySelector(cssWordSelector); let previewWord = previewWordElement.innerText; let letter = previewWord.charAt(0); previewWordElement.innerHTML = `${previewWord[0]}${previewWord.substring(1)}`; let initialElement = document.createElement("div"); initialElement.classList.add("initialElement"); initialElement.innerText = letter; previewElement.appendChild(initialElement); }); }); /* --------- Homepage liveFeed -------------- */ const liveFeedApiUrl = window.clientWorkStateTemp.links.v4.live_feed.main; const numberOfliveFeedDisplayed = 14; const customliveFeedParent = "#cms-live-feed .card-slider"; const lfClassName = "liveFeed"; const lfpreTitle = "SCUC ISD"; const lfTitle = null; const seeMoreliveFeed = "see all posts" const seeMoreURL = "live-feed"; const liveFeedbackgroundColor = "var(--secondary-color)"; const liveFeedbackgroundImage = window.clientWorkStateTemp.globals.settings.liveFeedFallbackImage.url; const defaultImage = window.clientWorkStateTemp.globals.settings.liveFeedFallbackImage.url; const isSlider = true; const liveFeedStatusLength = 150; document.addEventListener("appLoaded", () => { if (document.getElementById("home") !== null) { fetch(liveFeedApiUrl).then(response => { return response.json(); }).then(result => { if (window.innerWidth < 1024) { document.getElementById("home").classList.add("nativeLiveFeed"); } else { document.getElementById("home").classList.add("customLiveFeed"); parseliveFeedData(result); } }).catch(err => { }); } }); function parseliveFeedData(result) { var index = 0; const customliveFeedParentElement = document.querySelector(customliveFeedParent); customliveFeedParentElement.innerHTML = ""; if (liveFeedbackgroundColor) { customliveFeedParentElement.style.setProperty('--bgColor', liveFeedbackgroundColor); } if (liveFeedbackgroundImage) { customliveFeedParentElement.classList.add("has-bg-image"); customliveFeedParentElement.style.setProperty("--bgImage", "url('" + liveFeedbackgroundImage + "')"); } customliveFeedParentElement.insertAdjacentHTML("afterbegin", "

"); var elementContainer = document.querySelector('.custom-' + lfClassName + '__inner'); if (lfTitle) { elementContainer.insertAdjacentHTML("afterbegin", "

"); var liveFeedHeader = document.querySelector("." + lfClassName + "-header"); var liveFeedHeaderTitle = document.querySelector("." + lfClassName + "-header__title"); if (lfpreTitle) { liveFeedHeaderTitle.innerHTML += "" + lfpreTitle + ""; } liveFeedHeaderTitle.innerHTML += "

" + lfTitle + "

"; if (seeMoreliveFeed) { liveFeedHeader.insertAdjacentHTML("beforeend", "" + seeMoreliveFeed + ""); } } elementContainer.insertAdjacentHTML("beforeend", "

"); var lfSlider = document.querySelector('.lf-list-container'); for (const liveFeed of result.live_feeds) { index++; if (index <= numberOfliveFeedDisplayed) { var liveFeedUrl = null; var liveFeedStatus; if (liveFeed.status.length > liveFeedStatusLength) { liveFeedStatus = liveFeed.status.substring(0, liveFeedStatusLength); liveFeedUrl = '/live-feed#' + liveFeed.id; } else { liveFeedStatus = liveFeed.status; } let elementHtml = createliveFeedHtml(liveFeed.id, liveFeed.original_avatar, liveFeedStatus, liveFeedUrl, liveFeed.image_large, liveFeed.author_name, liveFeed.time_ago); lfSlider.innerHTML += elementHtml; } else { break; } } elementContainer.innerHTML += "

"; if (isSlider) { elementContainer.classList.add("swiperSlider"); elementContainer.classList.add("swiper"); customliveFeedParentElement.classList.add("has-slider"); setTimeout(() => { var liveFeedSwiper = new Swiper('.swiperSlider', { slidesPerView: 3, centeredSlides: true, loop: true, spaceBetween: 20, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, breakpoints: { 320: { slidesPerView: 1 }, 1250: { slidesPerView: 3 } } }); }, 100); } } function createliveFeedHtml(id, avatar, text, liveFeedUrl, image, author, timeago) { let specialClass = ''; if (image) { specialClass = 'has-image'; } let htmlItem = `

`; htmlItem += `

`; if (avatar) { htmlItem += `

`; } htmlItem += `

`; if (author) { htmlItem += `

${author}

`; } if (timeago) { htmlItem += `

${timeago}

`; } htmlItem += `

`; htmlItem += `

`; if (text) { if (liveFeedUrl) { htmlItem += `

${text}... Read More

`; } else { htmlItem += `

${text}

`; } } htmlItem += `

`; htmlItem += `

`; if (image) { htmlItem += `

`; } else { htmlItem += `

`; } htmlItem += `

`; htmlItem += `

`; return htmlItem; } /* --------- END Homepage liveFeed -------------- */ /* ----------- Script to change the social icons in the footer ----------- */ function changeFooterIcons() { // REQUIRES: urls added from the CMS /* SETTINGS */ // define svg icons - in this case round icons const fbIcon = ''; const twIcon = ''; const instaIcon = ''; const ytIcon = ''; const linkedinIcon = ''; /* END SETTINGS */ const socialIcons = document.querySelectorAll("#cms-footer .footer-social-links li a"); // define elements if (socialIcons) { // loop through icons - logic can adapt to fit the situation socialIcons.forEach(function (socialIcon) { let socialIconURL = socialIcon.href; // check what type of button if (socialIconURL.includes("facebook.com")) { socialIcon.classList.add('facebook-button'); // optional since we alrady add the icon below with color/fill already defined socialIcon.innerHTML = fbIcon; } if (socialIconURL.includes("twitter.com")) { socialIcon.classList.add('twitter-button'); // optional socialIcon.innerHTML = twIcon; } if (socialIconURL.includes("instagram.com")) { socialIcon.classList.add('instagram-button'); // optional socialIcon.innerHTML = instaIcon; } if (socialIconURL.includes("youtube.com")) { socialIcon.classList.add('youtube-button'); // optional socialIcon.innerHTML = ytIcon; } if (socialIconURL.includes("linkedin.com")) { socialIcon.classList.add('linkedin-button'); // optional socialIcon.innerHTML = linkedinIcon; } }); } } document.addEventListener("appLoaded", changeFooterIcons); /* ----------- END Script to change the social icons in the footer ----------- */ /* ---------- LET'S TALK CUSTOM WIDGET --------------- */ const scriptId = 'ifletstalk'; const containerElement = document.getElementById("container"); var currentSchoolAlias; const letsTalkLogoSrc = "https://cmsv2-shared-assets.apptegy.net/Global/Images/Universal/LT_Logo_HEX_ffffff.svg"; const letsTalkLogoSrcMobile = "https://cmsv2-shared-assets.apptegy.net/Global/Images/Universal/shortLTLightBlue.svg"; if (window.clientWorkStateTemp.alias) { currentSchoolAlias = window.clientWorkStateTemp.alias; } else { currentSchoolAlias = 'district'; } const scripsToBeAdded = [ // [ // 'alias', // 'script source', // 'iframe source' // ], [ 'district', '//www.k12insight.com/Lets-Talk/EmbedJS.aspx', '//www.k12insight.com/Lets-Talk/embed.aspx?k=WNXDXTLT' ], [ 'bes', '//www.k12insight.com/Lets-Talk/EmbedJS.aspx', '//www.k12insight.com/Lets-Talk/Dialogue.aspx?k=WNXDXTLT@DYXB7B3LT' ], [ 'dle', '//www.k12insight.com/Lets-Talk/EmbedJS.aspx', '//www.k12insight.com/Lets-Talk/Dialogue.aspx?k=WNXDXTLT@DYXB7G4LT' ], [ 'ecm', '//www.k12insight.com/Lets-Talk/EmbedJS.aspx', '//www.k12insight.com/Lets-Talk/Dialogue.aspx?k=WNXDXTLT@DYXB7G4LT' ], [ 'ectc', '//www.k12insight.com/Lets-Talk/EmbedJS.aspx', '//www.k12insight.com/Lets-Talk/Dialogue.aspx?k=WNXDXTLT@DYXT5B4LT' ], [ 'fes', '//www.k12insight.com/Lets-Talk/EmbedJS.aspx', '//www.k12insight.com/Lets-Talk/Dialogue.aspx?k=WNXDXTLT@DYXG4Z6LT' ], [ 'fms', '//www.k12insight.com/Lets-Talk/EmbedJS.aspx', '//www.k12insight.com/Lets-Talk/Dialogue.aspx?k=WNXDXTLT@DYXG4ZXLT' ], [ 'fhs', '//www.k12insight.com/Lets-Talk/EmbedJS.aspx', '//www.k12insight.com/Lets-Talk/Dialogue.aspx?k=WNXDXTLT@DYXG4Z8LT' ], [ 'mse', '//www.k12insight.com/Lets-Talk/EmbedJS.aspx', '//www.k12insight.com/Lets-Talk/Dialogue.aspx?k=WNXDXTLT@DYXT5BXLT' ], [ 'mhs', '//www.k12insight.com/Lets-Talk/EmbedJS.aspx', '//www.k12insight.com/Lets-Talk/Dialogue.aspx?k=WNXDXTLT@DYXT5B1LT' ], [ 'pax', '//www.k12insight.com/Lets-Talk/EmbedJS.aspx', '//www.k12insight.com/Lets-Talk/Dialogue.aspx?k=WNXDXTLT@DYXT5B2LT' ], [ 'swh', '//www.k12insight.com/Lets-Talk/EmbedJS.aspx', '//www.k12insight.com/Lets-Talk/Dialogue.aspx?k=WNXDXTLT@DYXB7G8LT' ], [ 'wms', '//www.k12insight.com/Lets-Talk/EmbedJS.aspx', '//www.k12insight.com/Lets-Talk/Dialogue.aspx?k=WNXDXTLT@DYXT5B8LT' ], [ 'wvs', '//www.k12insight.com/Lets-Talk/EmbedJS.aspx', '//www.k12insight.com/Lets-Talk/Dialogue.aspx?k=WNXDXTLT@DY6R6R6LT' ], [ 'wde', '//www.k12insight.com/Lets-Talk/EmbedJS.aspx', '//www.k12insight.com/Lets-Talk/Dialogue.aspx?k=WNXDXTLT@DYXT5B9LT' ], [ 'wit', '//www.k12insight.com/Lets-Talk/EmbedJS.aspx', '//www.k12insight.com/Lets-Talk/Dialogue.aspx?k=WNXDXTLT@DYXT5B6LT' ], [ 'whs', '//www.k12insight.com/Lets-Talk/EmbedJS.aspx', '//www.k12insight.com/Lets-Talk/Dialogue.aspx?k=WNXDXTLT@DYXT5B7LT' ], [ 'vrb', '//www.k12insight.com/Lets-Talk/EmbedJS.aspx', '//www.k12insight.com/Lets-Talk/Dialogue.aspx?k=WNXDXTLT@DYXB7G2LT' ] ]; const loadScript = (FILE_URL, async = true, type = "text/javascript") => { return new Promise((resolve, reject) => { try { const scriptEle = document.createElement("script"); scriptEle.type = type; scriptEle.async = async; scriptEle.src = FILE_URL; scriptEle.addEventListener("appLoaded", (ev) => { resolve({ status: true }); }); scriptEle.addEventListener("error", (ev) => { reject({ status: false, message: `Failed to load the script ï¼„{FILE_URL}` }); }); document.body.appendChild(scriptEle); } catch (error) { reject(error); } }); }; // Function to create and load the iframe function loadIframe(url) { // Create the iframe element var iframe = document.createElement('iframe'); // Set attributes for the iframe iframe.setAttribute('src', url); iframe.setAttribute('width', '100%'); // Adjust the width as needed iframe.setAttribute('height', '100%'); // Adjust the height as needed iframe.setAttribute('frameborder', '0'); // Remove iframe border iframe.addEventListener("appLoaded", () => { setHeight(iframe); }); setTimeout(() => { setHeight(iframe); }, 3000); // Append the iframe to the container div return iframe; } document.addEventListener("appLoaded", () => { for (let i = 0; i < scripsToBeAdded.length; i++) { const schoolData = scripsToBeAdded[i]; const schoolAlias = schoolData[0]; const schoolScriptSrc = schoolData[1]; const schoolIframeSrc = schoolData[2]; if (currentSchoolAlias == schoolAlias) { // Load script loadScript(schoolScriptSrc) .then(data => { console.log("Script loaded successfully", data); }) .catch(err => { console.error(err); }); //create iframe const iframe = loadIframe(schoolIframeSrc); iframe.id = scriptId; const letsTalkArea = document.createElement("div"); letsTalkArea.classList.add("letsTalkArea"); const letsTalkTrigger = document.createElement("div"); letsTalkTrigger.classList.add("letsTalkTrigger"); letsTalkTrigger.id = "letsTalkTrigger"; const letsTalkTriggerText = document.createElement("span"); letsTalkTriggerText.classList.add("letsTalkTriggerText"); letsTalkTriggerText.innerText = "Contact Us"; const letsTalkLogoImage = document.createElement("img"); letsTalkLogoImage.classList.add("letsTalkLogoImage"); letsTalkLogoImage.alt = "Let's Talk"; letsTalkLogoImage.src = letsTalkLogoSrc; const iframeArea = document.createElement("div"); iframeArea.classList.add("iframeArea"); const iframeContainer = document.createElement("div"); iframeContainer.classList.add("iframeContainer"); letsTalkTrigger.addEventListener("click", () => { letsTalkArea.classList.toggle("activeLetsTalk"); }) // MOBILE const mobileButton = document.createElement("a"); mobileButton.classList.add("mobileButton"); mobileButton.href = 'https:' + schoolIframeSrc; mobileButton.target = "_blank"; const letsTalkLogoImageMobile = document.createElement("img"); letsTalkLogoImageMobile.classList.add("letsTalkLogoImageMobile"); letsTalkLogoImageMobile.alt = "Let's Talk"; letsTalkLogoImageMobile.src = letsTalkLogoSrcMobile; // Append iframeContainer.appendChild(iframe); iframeArea.appendChild(iframeContainer); mobileButton.appendChild(letsTalkLogoImageMobile); letsTalkTrigger.appendChild(letsTalkTriggerText); letsTalkTrigger.appendChild(letsTalkLogoImage); letsTalkArea.appendChild(letsTalkTrigger); letsTalkArea.appendChild(iframeArea); letsTalkArea.appendChild(mobileButton); containerElement.appendChild(letsTalkArea); } } }); /* ---------- END LET'S TALK CUSTOM WIDGET --------------- */

Sandbox