const _$ = window.clientWorkStateTemp; const orgID = _$.secondaryOrgId; const orgName = _$.alias; document.addEventListener('appLoaded', () => { /* Report and Anon alerts header banners */ var firstButtonUrl = '/o/hcs/page/bullying-intimidation-harassment-reporting'; var firstButtonTarget = '_self'; var firstButtonImgSrc = 'https://cmsv2-shared-assets.apptegy.net/Schools/Huntsville-City-Schools-4113/report-bullying.svg'; var firstButtonText = 'Report Bullying'; var secondButtonUrl = 'https://www.anonymousalerts.com/huntsvillecityschools/default.aspx'; var secondButtonTarget = '_blank'; var secondButtonImgSrc = 'https://cmsv2-shared-assets.apptegy.net/Schools/Huntsville-City-Schools-4113/anon-alerts.svg'; var secondButtonText = 'Anonymous Alerts'; var headerButtonsHTML = '

'; headerButtonsHTML += '

'; headerButtonsHTML += ''; headerButtonsHTML += '' + firstButtonText + '

'; headerButtonsHTML += ' '; headerButtonsHTML += ''; headerButtonsHTML += '' + secondButtonText + '

'; headerButtonsHTML += ' '; headerButtonsHTML += '

'; headerButtonsHTML += '

'; var header = document.querySelector('#view-header'); var headerHeight = header.offsetHeight; const headerBarWrapper = header.querySelector('.header-bar-wrapper'); headerBarWrapper.insertAdjacentHTML('beforeend', headerButtonsHTML); if (headerBarWrapper.classList.contains('sticky')) { header.classList.add('sticky-header'); } function closeBadge() { header.classList.add('small-badge', 'minimized-logos'); //localStorage.setItem('isClosed', true); } function openBadge() { header.classList.remove('small-badge', 'minimized-logos'); //localStorage.setItem('isClosed', false); } // const isClosedValue = localStorage.getItem('isClosed'); // if (isClosedValue != 'true') { // openBadge(); // } else { // closeBadge(); // } // const minimizeLogosButton = header.querySelector('.minimize_logos'); // minimizeLogosButton.addEventListener('click', (e) => { // e.preventDefault(); // // if (header.classList.contains('small-badge')) { // openBadge(); // } else { // closeBadge(); // } // }); window.addEventListener('scroll', () => { const scroll = window.scrollY; if (scroll >= headerHeight) { header.classList.remove('default-badge'); header.classList.add('small-badge', 'fixed-position'); } else { header.classList.remove('fixed-position'); if (!header.classList.contains('minimized-logos')) { header.classList.remove('small-badge'); header.classList.add('default-badge'); } } }); /* END Report and Anon alerts header banners */ }); /* Events date format */ function formatDate(inputDate) { // Check if the input contains a date range separator " â€” " if (inputDate.includes(' — ')) { const dateParts = inputDate.split(' — '); const startDate = new Date(dateParts[0] + ' 2023'); const endDate = new Date(dateParts[1] + ' 2023'); const startMonth = startDate.getMonth() + 1; // Months are 0-based const startDay = startDate.getDate(); const endMonth = endDate.getMonth() + 1; // Months are 0-based const endDay = endDate.getDate(); const formattedStartDate = `${startMonth}/${startDay}`; const formattedEndDate = `${endMonth}/${endDay}`; return `${formattedStartDate} - ${formattedEndDate}`; } else { // If it's not a date range, assume it's a single date in the format "MMM D" const singleDate = new Date(inputDate + ' 2023'); const singleMonth = singleDate.getMonth() + 1; // Months are 0-based const singleDay = singleDate.getDate(); const formattedSingleDate = `${singleMonth}/${singleDay}`; return formattedSingleDate; } } (function (ready) { if ( document.readyState === 'complete' || document.readyState === 'interactive' ) { ready(); } else { document.addEventListener('appLoaded', ready); } })(function domReady() { /* the document is now ready. */ if (document.getElementById('home') !== null) { document.querySelector('#view-header').classList.add('homeHeader'); /* Events date format */ const intervalEv = setInterval(function () { var eventsSection = document.querySelector('#events-e4.bold'); if (eventsSection) { var eventsCard = eventsSection.querySelectorAll( '.events-info .events-card' ); var eventsCardLength = eventsCard.length; for (let i = 0; i < eventsCardLength; i++) { var eventCard = eventsCard[i]; var eventDate = eventCard.querySelector('.events-date'); var eventDateText = eventDate.innerHTML.trim(); var dateFormated = formatDate(eventDateText); eventDate.innerHTML = dateFormated; } clearInterval(intervalEv); } setTimeout(function () { clearInterval(intervalEv); }, 4000); }, 500); } }); /* end Events date format */ /* --------- START Homepage Videos -------------- */ const pageName1 = 'homepage-videos'; const apiUrl = 'https://thrillshare-cmsv2.services.thrillshare.com/api/v4/o/' + orgID + '/cms/pages/' + pageName1; const extraClass = 'homepage-videos-wrap'; // image height in px document.addEventListener('appLoaded', () => { if (!document.querySelector('#home')) { return; } fetch(apiUrl) .then((response) => response.json()) .then((result) => { const pageContent = result.content; const customHomepageComponent = document.querySelector('#homepage-videos'); customHomepageComponent.classList.add('swiper'); const customInner = document.createElement('div'); customInner.classList.add(extraClass, 'swiper-wrapper'); // for each page component/layout/section pageContent.forEach((pageElement) => { if (pageElement.component == 'ts-left-sidebar') { let leftSidebarItem = pageElement.config; const customInnerElement = document.createElement('div'); customInnerElement.classList.add('video-element', 'swiper-slide'); var contentWrapInner = document.createElement('div'); contentWrapInner.classList.add('video-element-inner'); leftSidebarItem.forEach((leftSidebarHalf, index) => { leftSidebarHalf.forEach((element) => { 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-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('video-placeholder'); let imageElementLink = document.createElement('a'); imageElementLink.setAttribute('href', imageUrl); imageElementLink.setAttribute('target', 'blank'); imageElementLink.classList.add('video-placeholder-image'); imageElementLink.appendChild(imageElement); imageElementWrap.appendChild(imageElementLink); contentWrapInner.appendChild(imageElementWrap); } else { let imageElementWrap = document.createElement('div'); imageElementWrap.classList.add('video-placeholder'); imageElementWrap.appendChild(imageElement); contentWrapInner.appendChild(imageElementWrap); } } } 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; } } } }); customInnerElement.appendChild(contentWrapInner); }); customInner.appendChild(customInnerElement); } setTimeout(() => { const swiper = new Swiper('#homepage-videos', { slidesPerView: 5, spaceBetween: 30, // loop: true, speed: 500, grabCursor: false, autoplay: { delay: 50000, disableOnInteraction: false, }, navigation: { nextEl: '.swiper-button-next-custom-vids', prevEl: '.swiper-button-prev-custom-vids', }, breakpoints: { // when window width is >= 320px 320: { slidesPerView: 1, }, 600: { slidesPerView: 2, }, 960: { slidesPerView: 3, }, 1280: { slidesPerView: 4, }, 1600: { slidesPerView: 5, }, }, }); }, 100); }); customHomepageComponent.appendChild(customInner); }); }); /* --------- END Homepage Videos -------------- */ /* --------- START Homepage Numbers -------------- */ const pageName2 = 'homepage-about-us'; const apiUrl2 = 'https://thrillshare-cmsv2.services.thrillshare.com/api/v4/o/' + orgID + '/cms/pages/' + pageName2; document.addEventListener('appLoaded', () => { if (!document.querySelector('#home')) { return; } fetch(apiUrl2) .then((response) => response.json()) .then((result) => { const pageContent = result.content; const customHomepageComponent = document.querySelector( '#custom-homepage-about' ); customHomepageComponent.classList.add('swiper'); const customInner = document.createElement('div'); customInner.classList.add( 'customInner', 'about-us-numbers', 'swiper-wrapper' ); // for each page component/layout/section pageContent.forEach((pageElement) => { if (pageElement.component == 'ts-left-sidebar') { let leftSidebarItem = pageElement.config; const customInnerElement = document.createElement('div'); customInnerElement.classList.add( 'abount-us-counter-element', 'swiper-slide' ); var contentWrapInner = document.createElement('div'); contentWrapInner.classList.add('about-us-element'); leftSidebarItem.forEach((leftSidebarHalf, index) => { leftSidebarHalf.forEach((element) => { if (element.component == 'ts-heading') { const titleContent = element.config.content; if (titleContent) { const stringWithoutTags = titleContent.replace( /<\/?[^>]+(>|$)/g, '' ); // const numericValue = parseFloat(stringWithoutTags.replace(/[^0-9.]/g, '')); const titleElementWrap = document.createElement('div'); // const stringWithSpan = stringWithoutTags.replace(numericValue, ''); var stringWithSpan = stringWithoutTags.replace( /\d+/g, '$&' ); // titleElementWrap.setAttribute("data-animate-value", numericValue) titleElementWrap.classList.add( 'title-wrap', 'counter-to-animate' ); titleElementWrap.innerHTML = stringWithSpan; 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); } } }); customInnerElement.appendChild(contentWrapInner); }); customInner.appendChild(customInnerElement); } }); function addItemsHTML(callback) { customHomepageComponent.appendChild(customInner); callback(); } function addItemsSlider() { const swiper = new Swiper('#custom-homepage-about', { slidesPerView: 1, // loop: true, // speed: 500, grabCursor: false, // autoplay: { // delay: 50000, // disableOnInteraction: false, // }, navigation: { nextEl: '.swiper-button-next-custom-counter', prevEl: '.swiper-button-prev-custom-counter', }, grid: { rows: 2, }, breakpoints: { // when window width is >= 320px 320: { slidesPerView: 1, }, 600: { slidesPerView: 3, }, 960: { slidesPerView: 5, }, }, }); } addItemsHTML(addItemsSlider); const animationDuration = 3000; const frameDuration = 1000 / 60; const totalFrames = Math.round(animationDuration / frameDuration); const easeOutQuad = (t) => t * (2 - t); // Function to handle animation when an element is in viewport function handleIntersection(entries, observer) { entries.forEach((entry) => { if (entry.isIntersecting) { const numberToAnimate = entry.target.getAttribute('data-animate-value'); entry.target.classList.add('animated-number'); entry.target.style.setProperty('--num', numberToAnimate); // new code let frame = 0; const countTo = parseInt(entry.target.innerHTML, 10); const counter = setInterval(() => { frame++; const progress = easeOutQuad(frame / totalFrames); const currentCount = Math.round(countTo * progress); if (parseInt(entry.target.innerHTML, 10) !== currentCount) { entry.target.innerHTML = currentCount; } if (frame === totalFrames) { clearInterval(counter); } }, frameDuration); // Remove the Intersection Observer entry to avoid triggering again observer.unobserve(entry.target); } }); } // Create an Intersection Observer const observer = new IntersectionObserver(handleIntersection); // Select the elements with the class "stats-headline" to observe const elementsToObserve = document.querySelectorAll( '.counter-to-animate .counter' ); // Add the elements to the observer elementsToObserve.forEach((element) => { observer.observe(element); }); }); }); /* --------- END Homepage Numbers -------------- */ /* --------- START FLIP CARDS -------------- */ const pageName3 = 'homepage-strategic-planning'; const apiUrl3 = 'https://thrillshare-cmsv2.services.thrillshare.com/api/v4/o/' + orgID + '/cms/pages/' + pageName3; document.addEventListener('appLoaded', () => { if (!document.querySelector('#home')) { return; } fetch(apiUrl3) .then((response) => response.json()) .then((result) => { const pageContent = result.content; const customHomepageComponent = document.querySelector('#flip-area'); customHomepageComponent.classList.add('swiper'); const customInner = document.createElement('div'); customInner.classList.add('flip-area-inner', 'swiper-wrapper'); // for each page component/layout/section pageContent.forEach((pageElement) => { if (pageElement.component == 'ts-left-sidebar') { let leftSidebarItem = pageElement.config; const sliderItem = document.createElement('div'); sliderItem.classList.add('swiper-slide'); const customInnerElement = document.createElement('div'); customInnerElement.classList.add('flip-card'); const contentWrapInner = document.createElement('div'); contentWrapInner.classList.add('flip-card-inner'); const flipCardFront = document.createElement('div'); flipCardFront.classList.add('flip-card-front'); const flipCardBack = document.createElement('div'); flipCardBack.classList.add('flip-card-back'); leftSidebarItem.forEach((leftSidebarHalf, index) => { leftSidebarHalf.forEach((element) => { if (element.component == 'ts-button') { let eachButton = element.config.button.buttons; if (eachButton) { eachButton.forEach((element) => { const customInnerElement = document.createElement('div'); customInnerElement.classList.add('flip-card-icon'); let buttonIcon = element.icon; if (element.open_link_in_new_tab) { buttonTarget = true; } if (buttonIcon) { let buttonIconElement = document.createElement('span'); buttonIconElement.classList.add('icon-wrap'); // buttonIconElement.appendChild(buttonIcon); buttonIconElement.innerHTML = buttonIcon; customInnerElement.appendChild(buttonIconElement); } flipCardFront.appendChild(customInnerElement); }); } } if (element.component == 'ts-heading') { let titleContent = element.config.content; if (titleContent) { let titleElementWrap = document.createElement('div'); titleElementWrap.classList.add('flip-card-title'); titleElementWrap.innerHTML = titleContent; flipCardFront.appendChild(titleElementWrap); } } if (element.component == 'ts-text') { let textContent = element.config.content; if (textContent) { let textElementWrap = document.createElement('div'); textElementWrap.classList.add('flip-card-text'); textElementWrap.innerHTML = textContent; flipCardBack.appendChild(textElementWrap); } } }); contentWrapInner.appendChild(flipCardFront); contentWrapInner.appendChild(flipCardBack); customInnerElement.appendChild(contentWrapInner); sliderItem.appendChild(customInnerElement); }); customInner.appendChild(sliderItem); } }); function addHTML(callback) { customHomepageComponent.appendChild(customInner); callback(); } function addSlider() { const swiper = new Swiper('#flip-area', { slidesPerView: 1, // loop: true, speed: 500, grabCursor: false, autoplay: { delay: 50000, disableOnInteraction: false, }, navigation: { nextEl: '.swiper-button-next-custom-flip', prevEl: '.swiper-button-prev-custom-flip', }, breakpoints: { // when window width is >= 320px 320: { slidesPerView: 1, }, 490: { slidesPerView: 2, }, 720: { slidesPerView: 3, }, 960: { slidesPerView: 4, }, 1280: { slidesPerView: 5, }, }, }); } addHTML(addSlider); }); }); /* --------- END FLIP CARDS -------------- */ /* Button Link PDF Icon */ (() => { if (document.querySelector('#page')) { const pdfReplacer = () => { if ( document.querySelector('#page') && document.querySelector('.button.link') ) { const svgs = document.querySelectorAll('#page .button.link svg'); svgs.forEach((svg) => { const pdfIcon = document.createElement('img'); pdfIcon.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/PDF_file_icon.svg/32px-PDF_file_icon.svg.png'; pdfIcon.style.height = '20px'; svg.replaceWith(pdfIcon); const parentA = pdfIcon.parentNode; const title = parentA.querySelector('.title'); const siblingA = pdfIcon.nextSibling === title ? pdfIcon : pdfIcon.nextSibling; title.parentNode.insertBefore(pdfIcon, title); parentA.insertBefore(title, siblingA); pdfIcon.style.display = 'block'; }); } }; const lazyLoadCheck = () => { const targetNode = document.querySelector('#page'); if (!targetNode) return; const observer = new MutationObserver((mutationsList) => { mutationsList.forEach((m) => { let condition = m.addedNodes.length > 0 && m.addedNodes[0].nodeName.toLowerCase() == 'svg'; if (condition) { pdfReplacer(); } }); }); const config = { childList: true, subtree: true }; observer.observe(targetNode, config); }; lazyLoadCheck(); pdfReplacer(); window.addEventListener('click', (event) => { pdfReplacer(); }); } })(); /* Button Link PDF Icon */ /* --------- START Footer Disclaimer rework -------------- */ document.addEventListener('appLoaded', () => { // Find the div element with the class .additional-text var additionalTextDiv = document.querySelector('#footer-f1 .additional-text'); // Find the div element with the id #cms-footer var cmsFooterDiv = document.querySelector('#cms-footer .apptegy-copyright'); if (additionalTextDiv) { // Append the additionalTextDiv to cmsFooterDiv cmsFooterDiv.appendChild(additionalTextDiv); } }); /* --------- END Footer Disclaimer rework -------------- */ /* --------- START Events Buttons -------------- */ function addCustomButtonsToCalendar() { const eventCalendarContainer = document.querySelector( '.event-cal .event-cal-container' ); if (eventCalendarContainer) { var buttons = { '2023-24 School Year Calendar': 'https://5il.co/27mwv', '2024-25 School Year Calendar': 'https://5il.co/27t5r', '2023-24 District Assessment Schedule': '/o/hcs/page/2023-24-district-assessment-schedule', }; let eventCalendarCustomButtons = document.createElement('div'); eventCalendarCustomButtons.classList.add('custom-buttons'); eventCalendarCustomButtons.style.display = 'flex'; eventCalendarCustomButtons.style.alignSelf = 'center'; for (const key in buttons) { let customCalendarButton = document.createElement('a'); customCalendarButton.setAttribute('target', '_blank'); customCalendarButton.setAttribute('href', `${buttons[key]}`); customCalendarButton.innerText = `${key}`; customCalendarButton.style.margin = '6px 10px'; customCalendarButton.style.display = 'flex'; customCalendarButton.style.alignItems = 'center'; customCalendarButton.style.minHeight = '40px'; if (key !== '2023-24 District Assessment Schedule') { let pdfIcon = document.createElement('img'); pdfIcon.setAttribute( 'src', 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/PDF_file_icon.svg/32px-PDF_file_icon.svg.png' ); pdfIcon.setAttribute('height', '20px'); pdfIcon.style.display = 'block'; pdfIcon.style.margin = '6px 10px'; customCalendarButton.insertBefore( pdfIcon, customCalendarButton.firstChild ); } customCalendarButton.style.textDecoration = 'none'; customCalendarButton.style.color = '#193768'; eventCalendarCustomButtons.appendChild(customCalendarButton); } eventCalendarContainer.insertAdjacentElement( 'beforebegin', eventCalendarCustomButtons ); } } window.addEventListener('appLoaded', addCustomButtonsToCalendar); /* --------- END Events Buttons -------------- */ // ----------------- // Add Custom Modal Modal START // ----------------- // theese need to be added for each site specifically // var modalCondition = window.location.href.indexOf('/events') > -1; // the condition for the modal to appear; leave 'true' to appear everyone on the website // const modalPageName = 'modal-info-text'; const modalCondition = true; if (typeof modalPageName === 'undefined' || modalPageName === null) { var modalPageName = 'modal-info-text'; } const modalApiUrl = 'https://thrillshare-cmsv2.services.thrillshare.com/api/v4/o/' + orgID + '/cms/pages/' + modalPageName; var modalSectionTitle = 'Modal Title'; // The title of the modal; this will be overwritten by the setting defined in the CMS var modalTextColor = '#fff'; // The color of the text; this will be overwritten by the setting defined in the CMS var modalBackgroundColor = 'var(--primary-color)'; // The bg color of the text; this will be overwritten by the setting defined in the CMS var modalPositionOnPage = 'bottom'; // Can be "bottom", "top", "centered", "fullscreen"; this will be overwritten by the setting defined in the CMS var modalSecondsActive = 5; // how many seconds the modal is active; this will be overwritten by the setting defined in the CMS var modalDisplayLogo = false; // if logo is displayed var logoOpacity = 100; // this will be overwritten by the setting defined in the CMS var logoMaxWidth = 100; // this will be overwritten by the setting defined in the CMS var logoMaxHeight = 100; // this will be overwritten by the setting defined in the CMS var modalLogoSrc = _$.globals.logo.url; const modalExtraClass = 'programComponent'; const appElement = document.querySelector('#app'); var disableModal = false; const isValidUrl = (urlString) => { var urlPattern = new RegExp( '^(https?:\\/\\/)?' + // validate protocol '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // validate domain name '((\\d{1,3}\\.){3}\\d{1,3}))' + // validate OR ip (v4) address '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // validate port and path '(\\?[;&a-z\\d%_.~+=-]*)?' + // validate query string '(\\#[-a-z\\d_]*)?$', 'i' ); // validate fragment locator return !!urlPattern.test(urlString); }; if (modalCondition) { fetch(modalApiUrl) .then((response) => response.json()) .then((result) => { const pageContent = result.content; const htmlContent = document.createElement('div'); htmlContent.classList.add('htmlContent', 'modalHtml'); // 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'] == 'section_title') { modalSectionTitle = element['value']; } if (element['setting'] == 'text_color') { modalTextColor = element['value'].trim(); } if (element['setting'] == 'background_color') { if (element['value'].trim()) { modalBackgroundColor = element['value'].trim(); } } if (element['setting'] == 'position_on_page') { modalPositionOnPage = element['value'].trim(); } if (element['setting'] == 'seconds_active') { modalSecondsActive = Number(element['value']); } if (element['setting'] == 'display_logo') { modalDisplayLogo = element['value'].trim(); } if (element['setting'] == 'logo_opacity') { logoOpacity = Number(element['value']); } if (element['setting'] == 'logo_max_width') { logoMaxWidth = Number(element['value']); } if (element['setting'] == 'logo_max_height') { logoMaxHeight = Number(element['value']); } if ( element['setting'] == 'logo_custom_image' && isValidUrl(element['value'].trim()) ) { modalLogoSrc = element['value'].trim(); } if (element['setting'] == 'disable') { if (element['value'] == 'true') { disableModal = true; } } } } }); } // if it's our desired repetitive element else if (pageElement.component == 'ts-one-column') { let oneColumnItem = pageElement.config; oneColumnItem.forEach((oneColumnComponent, index) => { oneColumnComponent.forEach((element) => { 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; htmlContent.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; htmlContent.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-element'); buttonElement.innerHTML = buttonText; buttonElement.href = buttonURL; if (buttonTarget) { buttonElement.target = '_blank'; } htmlContent.appendChild(buttonElement); } } }); }); } }); if (!disableModal) { createModal( htmlContent, modalSectionTitle, modalTextColor, modalBackgroundColor, modalPositionOnPage ); } setTimeout(() => { appElement.classList.add('hiddenModal'); }, modalSecondsActive * 1000); }); } 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; } function createModal( htmlContent, modalSectionTitle, modalTextColor, modalBackgroundColor, modalPositionOnPage ) { appElement.classList.add( 'hasCustomModal', 'hasCustomModal--' + modalPositionOnPage ); const modalOuter = document.createElement('div'); modalOuter.classList.add('modalOuter'); modalOuter.style.setProperty('--text-color', modalTextColor); modalOuter.style.setProperty('--background-color', modalBackgroundColor); const modalTitle = document.createElement('h3'); modalTitle.classList.add('modalTitle'); modalTitle.innerText = modalSectionTitle; const modalElement = document.createElement('div'); modalElement.classList.add('modalElement'); const modalInner = document.createElement('div'); modalInner.classList.add('modalInner'); const closeModal = document.createElement('div'); closeModal.classList.add('closeModal'); closeModal.id = 'closeModal'; const triggerModalWhenHidden = document.createElement('div'); triggerModalWhenHidden.classList.add('triggerModalWhenHidden'); triggerModalWhenHidden.id = 'triggerModalWhenHidden'; modalInner.appendChild(modalTitle); modalInner.appendChild(htmlContent); modalElement.appendChild(closeModal); modalElement.appendChild(modalInner); // modal logo if (modalDisplayLogo == 'true' || modalDisplayLogo == 'yes') { const modalLogo = document.createElement('div'); modalLogo.classList.add('modalLogo'); const modalLogoImg = document.createElement('img'); modalLogoImg.classList.add('modalLogoImg'); modalLogoImg.src = modalLogoSrc; modalLogo.style.setProperty('--logo-opacity', logoOpacity / 100); modalLogo.style.setProperty('--logo-max-width', logoMaxWidth + 'px'); modalLogo.style.setProperty('--logo-max-height', logoMaxHeight + 'px'); modalLogo.appendChild(modalLogoImg); modalElement.appendChild(modalLogo); } modalOuter.appendChild(modalElement); appElement.prepend(modalOuter); appElement.appendChild(triggerModalWhenHidden); } document.addEventListener('click', function (e) { const target = e.target.closest('#closeModal'); if (target) { appElement.classList.add('hiddenModal'); } }); document.addEventListener('click', function (e) { const target = e.target.closest('#triggerModalWhenHidden'); if (target) { appElement.classList.remove('hiddenModal'); } }); document.addEventListener('appLoaded', () => {}); // ----------------- // Add Custom Modal Modal END // ----------------- // Truncate Events window.addEventListener('appLoaded', () => { document.querySelector('.events-list') && (() => { const loadJQuery = () => { const jQueryScript = document.createElement('script'); jQueryScript.src = 'https://code.jquery.com/jquery-3.7.1.min.js'; jQueryScript.onload = loadDotdotdot; document.head.appendChild(jQueryScript); }; const loadDotdotdot = () => { const dotdotdotScript = document.createElement('script'); dotdotdotScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/1.8.1/jquery.dotdotdot.min.js'; dotdotdotScript.onload = truncateEvents; document.head.appendChild(dotdotdotScript); }; const countEvents = () => { const element = document.querySelector('.empty-container') || document.querySelector('.event-list-item'); return element ? true : false; }; const checkEventsLoad = () => { return new Promise((resolve, reject) => { const intervalId = setInterval(() => { const status = this.$nuxt.$store.state.events.fetchingEvents; if (status === 'SUCCESS' && countEvents()) { clearInterval(intervalId); resolve(status); } else if (status === 'ERROR') { clearInterval(intervalId); reject('Failed to load events.'); } }, 50); }); }; const resetEvents = () => { document.querySelectorAll('.readMoreButton').forEach((button) => { button.remove(); }); document .querySelectorAll('.events-list .event-list-item .description') .forEach((eventCard) => { eventCard.style.visibility = 'hidden'; eventCard.style.position = 'absolute'; $(eventCard).trigger('destroy.dot'); }); }; const displayEventDescriptions = () => { document .querySelectorAll('.events-list .event-list-item .description') .forEach((eventCard) => { eventCard.style.visibility = 'initial'; eventCard.style.position = 'initial'; }); }; const readMoreButton = (node) => { const parentNode = node.parentNode; const readMoreButton = parentNode.querySelector('.readMoreButton'); if (readMoreButton) { readMoreButton.remove(); } const allTags = parentNode.querySelectorAll('.event-tag'); const nodeToClone = allTags[allTags.length - 1].parentNode; const readMore = nodeToClone.cloneNode(true); const title = parentNode.querySelector('.title'); const pill = readMore.children[0]; const toolTip = readMore.children[1]; pill.innerText = 'Read More'; pill.style.color = 'white'; pill.style.backgroundColor = 'var(--heading)'; pill.style.cursor = 'pointer'; readMore.addEventListener('click', () => { title.click(); }); pill.classList.add('readMoreButton'); toolTip.innerText = 'Read More'; nodeToClone.insertAdjacentElement('afterend', readMore); }; const truncateEvents = () => { if (window.location.href.includes('?id=')) { resetEvents(); displayEventDescriptions(); return; } const events = document.querySelectorAll( '.events-list .event-list-item .description' ); resetEvents(); events.forEach((eventCard) => { if (eventCard.innerHTML.length < 1) { return; } $(eventCard).dotdotdot({ height: 100, }); readMoreButton(eventCard); }); displayEventDescriptions(); }; const fixEvents = async () => { try { await checkEventsLoad(); truncateEvents(); } catch (error) { console.error(error); } }; // execute promise loadJQuery(); window.addEventListener('click', (e) => { fixEvents(); }); window.addEventListener('appLoaded', (event) => { fixEvents(); }); window.addEventListener('popstate', (event) => { fixEvents(); }); let oldOpen = XMLHttpRequest.prototype.open; XMLHttpRequest.prototype.open = function () { this.addEventListener('loadend', fixEvents); oldOpen.apply(this, arguments); }; })(); }); // Truncate Events

TEST: District Site

Capital Plan

2020-2021 In-Process Projects

2018-2020 Enhancements

2018-2020 Enhancements

2013-2018 Capital Plan