/* ----------- Script to add icons in the footer ----------- */ function addSocialIcons() { const iconColor = '#fff'; // define svg icons - in this case round icons const tiktokURL = "https://www.tiktok.com/@siouxcityschools"; const tiktokIcon = ''; const linkedinURL = "https://www.linkedin.com/company/sioux-city-community-school-district/"; const linkedin = ''; /* END SETTINGS */ const iconsToBeAdded = [tiktokIcon, linkedin]; const iconsUrlsToBeAdded = [tiktokURL, linkedinURL]; //ofc, they should match const socialIconsWrapper = document.querySelectorAll("#cms-footer .footer-social-links")[0]; if (socialIconsWrapper) { console.log(1) if (iconsToBeAdded) { console.log(2) 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); socialIconsWrapper.appendChild(listElement); }); } } } document.addEventListener("appLoaded", addSocialIcons); /* ----------- END Script to add new icons in the footer ----------- */ /* ----------- Script to change the social icons in the footer ----------- */ function changeFooterIcons() { // REQUIRES: urls added from the CMS /* SETTINGS */ // define color of the icon - can be CSS variable const iconColor = '#fff'; // define svg icons - in this case round icons const fbIcon = ''; const twIcon = ''; const instaIcon = ''; const ytIcon = ''; /* 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; } }); } } document.addEventListener("appLoaded", changeFooterIcons); /* ----------- END Script to change the social icons in the footer ----------- */ (function (ready) { if ( document.readyState === "complete" || document.readyState === "interactive" ) { ready(); } else { document.addEventListener("appLoaded", ready); } })(function domReady() { /* the document is now ready. */ console.log('test'); var searchField = document.getElementById('searchCatalogue'); if (searchField) { console.log('search field'); } }); /* ----------- Script to add menu dropdowns below menu buttons div in order to use pos relative - absolute ----------- */ function topMenuDropdowns() { const mainMenu = document.querySelectorAll("#m4 .m4-menu--bar-item-wrapper > div"); for (let i = 0; i < mainMenu.length; i++) { var idElement = ""; var currentSubmenu = ""; console.log(mainMenu[i]) if (mainMenu[i].classList.contains("m4--menu-item") && mainMenu[i].style.display == "none") { let lastVisibleIndex = i - 2; mainMenu[lastVisibleIndex].classList.add("lastInViewHeaderMenu"); return true; } if (mainMenu[i].classList.contains("m4--menu-item")) { idElement = mainMenu[i].id; if (idElement) { currentSubmenu = document.getElementById("drawer-" + idElement); } if (currentSubmenu) { mainMenu[i].append(currentSubmenu) } } } } setTimeout(() => { // topMenuDropdowns(); }, 3000); window.onresize = function () { setTimeout(() => { // topMenuDropdowns(); }, 500); }; /* ----------- END Script to add menu dropdowns below menu buttons div in order to use pos relative - absolute ----------- */ /* ----------- Script to determine submenu position ----------- */ function determineSubmenuPosition() { const mainMenu = document.querySelectorAll("#m4 .m4-menu--bar-item-wrapper > div"); let visibleMenuItems = 0; for (let i = 0; i < mainMenu.length; i++) { var idElement = ""; var currentSubmenu = ""; if (mainMenu[i].classList.contains("m4--menu-item")) { idElement = mainMenu[i].id; visibleMenuItems++; if (idElement) { currentSubmenu = document.getElementById("drawer-" + idElement); var leftDistance = mainMenu[i].offsetLeft; var parentWidth = mainMenu[i].parentElement.clientWidth; } if (currentSubmenu) { currentSubmenu.classList.add("submenu__" + visibleMenuItems); // console.log(leftDistance) if (parentWidth - leftDistance >= 280) { currentSubmenu.style.left = leftDistance + "px"; currentSubmenu.style.right = "auto"; } else { currentSubmenu.style.left = "auto"; currentSubmenu.style.right = 0 + "px"; } if (mainMenu[i].style.display == "none") { console.log(idElement) currentSubmenu.style.left = "auto"; currentSubmenu.style.right = 280 + "px"; } } } } } setTimeout(() => { determineSubmenuPosition(); }, 3200); var resizeTimer; window.addEventListener("resize", function (e) { console.log('resize'); clearTimeout(resizeTimer); resizeTimer = setTimeout(function () { console.log('resize2222'); determineSubmenuPosition(); }, 250); }); /* ----------- END Script to determine submenu position ----------- */ /* ----------- Add title on hero image from last element from breadcrumbs(if no alt, then from alt) ----------- */ function addTitleToImage() { var pageTitle; const topfullSection = document.querySelectorAll("#page .ts-full-width-row")[0]; if (topfullSection) { const topImageContainer = topfullSection.querySelector(".ts-full-width .image-container"); if (topImageContainer) { const pageBreadcrumbTitle = document.querySelector("#page-wrapper .breadcrumb ul li:last-child a").innerText; console.log(pageBreadcrumbTitle) if (pageBreadcrumbTitle) { pageTitle = pageBreadcrumbTitle; } else { const topImage = topImageContainer.querySelector("img"); if (topImage) { var topImageTitle = topImage.getAttribute('alt'); pageTitle = topImageTitle; } } if (pageTitle) { topImageContainer.classList.add("customHeroSection"); let heroTitle = document.createElement("h1"); heroTitle.classList.add("pageTitle"); heroTitle.innerText = pageTitle; topImageContainer.appendChild(heroTitle); } } } } setTimeout(() => { addTitleToImage(); }, 1000); // document.addEventListener("appLoaded", // ); /* ----------- END Add title on hero image from last element from breadcrumbs(if no alt, then from alt) ----------- */ /* ----------- Move Breadcrumbs below Image ----------- */ function moveBreadcrubmsBelowImage() { const breadcrumbsNav = document.querySelector("#page-wrapper nav.breadcrumb"); const topfullSection = document.querySelectorAll("#page .ts-full-width-row")[0]; if (topfullSection) { const topImageContainer = topfullSection.querySelector(".ts-full-width .image-container"); if (topImageContainer && breadcrumbsNav) { topImageContainer.parentNode.classList.add("movedBreadcrumbs"); topImageContainer.parentNode.appendChild(breadcrumbsNav); } } if (breadcrumbsNav) { // Optional; replace text in home link in breadcrumbs with svg icon const homeIcon = ''; const firstBreadcrumbItem = breadcrumbsNav.querySelector("ul li:nth-child(1) a"); if (firstBreadcrumbItem) { firstBreadcrumbItem.innerHTML = homeIcon; } } } document.addEventListener("appLoaded", moveBreadcrubmsBelowImage); /* ----------- END Move Breadcrumbs below Image ----------- */ /* ----------- Add Custom Buttons to Calendar ----------- */ function addCustomButtonsToCalendar() { const eventCalendarContainer = document.querySelector(".event-cal .event-cal-container"); if (eventCalendarContainer) { var buttons = { '2022-23 Academic Calendar': 'https://cmsv2-shared-assets.apptegy.net/Schools/Sioux-City-Schools-3389/Homepage-Assets/Board-Academic-Calendar_2022-23.pdf', '2023-24 Academic Calendar': 'https://cmsv2-shared-assets.apptegy.net/Schools/Sioux-City-Schools-3389/Homepage-Assets/SCCSD_Board-Academic-Calendar_2023-2024.pdf', 'Staff Calendars': ' /o/sccs/page/staff-calendars', 'High School Athletics & Activities': 'https://www.missouririverconf.org/g5-bin/client.cgi?G5genie=167', '2022-2023 AB Calendar': 'https://cmsv2-shared-assets.apptegy.net/Schools/Sioux-City-Schools-3389/Homepage-Assets/SCCSD_AB-Calendar_1-20-23_through_6-30-23.pdf' }; if (window.clientWorkStateTemp.pathPrefix == "/o/east-high") { buttons = { '2022-23 Academic Calendar': 'https://cmsv2-shared-assets.apptegy.net/Schools/Sioux-City-Schools-3389/Homepage-Assets/Board-Academic-Calendar_2022-23.pdf', '2023-24 Academic Calendar': 'https://cmsv2-shared-assets.apptegy.net/Schools/Sioux-City-Schools-3389/Homepage-Assets/SCCSD_Board-Academic-Calendar_2023-2024.pdf', 'Staff Calendars': ' /o/sccs/page/staff-calendars', 'High School Athletics & Activities': 'https://missouririverconf.org/public/genie/167/school/3/', '2022-2023 AB Calendar': 'https://cmsv2-shared-assets.apptegy.net/Schools/Sioux-City-Schools-3389/Homepage-Assets/SCCSD_AB-Calendar_1-20-23_through_6-30-23.pdf' }; } else if (window.clientWorkStateTemp.pathPrefix == "/o/north-high") { buttons = { '2022-23 Academic Calendar': 'https://cmsv2-shared-assets.apptegy.net/Schools/Sioux-City-Schools-3389/Homepage-Assets/Board-Academic-Calendar_2022-23.pdf', '2023-24 Academic Calendar': 'https://cmsv2-shared-assets.apptegy.net/Schools/Sioux-City-Schools-3389/Homepage-Assets/SCCSD_Board-Academic-Calendar_2023-2024.pdf', 'Staff Calendars': ' /o/sccs/page/staff-calendars', 'High School Athletics & Activities': 'https://missouririverconf.org/public/genie/167/school/4/', '2022-2023 AB Calendar': 'https://cmsv2-shared-assets.apptegy.net/Schools/Sioux-City-Schools-3389/Homepage-Assets/SCCSD_AB-Calendar_1-20-23_through_6-30-23.pdf' }; } else if (window.clientWorkStateTemp.pathPrefix == "/o/west-high") { buttons = { '2022-23 Academic Calendar': 'https://cmsv2-shared-assets.apptegy.net/Schools/Sioux-City-Schools-3389/Homepage-Assets/Board-Academic-Calendar_2022-23.pdf', '2023-24 Academic Calendar': 'https://cmsv2-shared-assets.apptegy.net/Schools/Sioux-City-Schools-3389/Homepage-Assets/SCCSD_Board-Academic-Calendar_2023-2024.pdf', 'Staff Calendars': ' /o/sccs/page/staff-calendars', 'High School Athletics & Activities': 'https://missouririverconf.org/public/genie/167/school/5/', '2022-2023 AB Calendar': 'https://cmsv2-shared-assets.apptegy.net/Schools/Sioux-City-Schools-3389/Homepage-Assets/SCCSD_AB-Calendar_1-20-23_through_6-30-23.pdf' }; } let eventCalendarCustomButtons = document.createElement("div"); eventCalendarCustomButtons.classList.add('eventCalendarCustomButtons'); for (const key in buttons) { let customCalendarButton = document.createElement("a"); customCalendarButton.setAttribute('target', '_blank'); customCalendarButton.setAttribute('href', `${buttons[key]}`); customCalendarButton.innerText = `${key}`; eventCalendarCustomButtons.appendChild(customCalendarButton); } eventCalendarContainer.insertAdjacentElement('beforebegin', eventCalendarCustomButtons); } } document.addEventListener("appLoaded", addCustomButtonsToCalendar); /* ----------- END Add Custom Buttons to Calendar ----------- */ /* ----------- Add Search Area for single course pages ----------- */ const backToUrlsArray = ['/o/sccs/page/virtual', '/o/sccs/page/dual-credit', '/o/sccs/page/advanced-placement', '/o/sccs/page/pathways', '/o/sccs/page/courses']; const backToButtons = document.querySelectorAll("#page .button .title"); const customFilterCourses = document.getElementById("custom-course-filter"); var isSingleCoursePage = false; // if page contains a button with 'Back to Previous Page' text and one of the urls defined above - then it is a Single Course Page; This approach should be replaced with a custom code html with a specific id, defined from a CMSv2 Page if (backToButtons) { for (let i = 0; i < backToButtons.length; i++) { if (backToButtons[i].textContent.includes('Back to Previous Page')) { let buttonParent = backToButtons[i].closest("a.button"); if (buttonParent) { let currentHref = buttonParent.getAttribute('href'); if (backToUrlsArray.includes(currentHref)) { isSingleCoursePage = true; document.body.classList.add("singleCoursePage") buttonParent.href = '/o/sccs/page/courses'; // backToButtons[i].innerText = "Back to all courses"; } } } } } if (customFilterCourses) { isSingleCoursePage = true; } if (isSingleCoursePage) { const siouxCoursesDb = "https://core-docs.s3.amazonaws.com/documents/asset/uploaded_file/938/techops/2999252/sccs_course_guide.json"; var siouxCoursesResults; fetch(siouxCoursesDb) .then(res => res.json()) .then(function (res) { siouxCoursesResults = res.sort(function (a, b) { return a.course_name.localeCompare(b.course_name); }); createSelect(); }) .catch(function () { }); } function createSelect() { const secondRow = document.querySelectorAll(".ts-one-column-row.standard-row")[0]; var filterCourseHTMLWrapper = document.createElement('aside'); filterCourseHTMLWrapper.classList.add("filterCourseHTMLWrapper") var filterCourseHTML = ""; filterCourseHTML += "

"; filterCourseHTML += ""; filterCourseHTML += "

" + siouxCoursesResults[i]["course_name"] + "

"; filterCourseHTML += "

"; // console.log(filterCourseHTML) filterCourseHTMLWrapper.innerHTML = filterCourseHTML; secondRow.appendChild(filterCourseHTMLWrapper); } function filterCourses() { var input, filter, ul, li, a, i, txtValue; input = document.getElementById("searchCourses"); filter = input.value.toUpperCase(); ul = document.getElementById("filterSelectCoursesList"); li = ul.getElementsByTagName("li"); for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; txtValue = a.textContent || a.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].style.display = "none"; } } } /* ----------- END Add Search Area for single course pages ----------- */