(function (ready) { if ( document.readyState === "complete" || document.readyState === "interactive" ) { ready(); } else { document.addEventListener("appLoaded", ready); } })(function domReady() { /* the document is now ready. */ let slideSpeed = 300; let zoomSpeed = 300; let automatedSlideSpeed = 5000; /* Duplicate Description Text */ let descriptionText = document.getElementsByClassName("text-container")[0].innerText; let titleTextEl = document.getElementsByClassName("title-text")[0]; titleTextEl.innerHTML = descriptionText; /* Create slider Controlls */ let slides = document.querySelectorAll( ".slider > .custom-component-loop-wrapper > div" ); let slidesCount = slides.length; let controllsContainer = document.getElementsByClassName("slide-bullets")[0]; for (let i = 0; i < slidesCount; i++) { let circle = createEl("div", null, "circle-el", null); controllsContainer.append(circle); // add events on circles circle.addEventListener("click", function () { nextSlide(this); }); } /* add design arrows */ let leftDesignArrow = createEl("div", null, "left_arrow", null); let rightDesignArrow = createEl("div", null, "right_arrow", null); controllsContainer.append(leftDesignArrow); controllsContainer.append(rightDesignArrow); /* Slider */ let controlCircles = document.getElementsByClassName("circle-el"); let selectedEl = Math.ceil(slidesCount / 2 - 1); let sliderContainer = document.getElementsByClassName( "custom-component-loop-wrapper" )[0]; document.addEventListener("appLoaded", () => { if (document.getElementById("home")) { sliderContainer.classList.add("is-not-in-cms"); } }); /* add selected class */ slides[selectedEl].classList.add("selected"); controlCircles[selectedEl].classList.add("selected"); /* Create Prev Next Buttons */ let slider_parent = document.getElementsByClassName("slider")[0]; let prevBtn = createEl("div", null, "slider_prev_btn", null); let nextBtn = createEl("div", null, "slider_next_btn", null); prevBtn.innerHTML = ` `; nextBtn.innerHTML = ` `; slider_parent.append(prevBtn); slider_parent.append(nextBtn); // add click events on Prev Next prevBtn.addEventListener("click", function () { goToPrevSlide(); }); nextBtn.addEventListener("click", function () { goToNextSlide(); }); /* Init Slider */ let currentSelected = getCurrentSelection(); setTimeout(function () { initSlider(currentSelected); }, 200); /* Automate Slider */ let automatedInterval; let intervalRunning = false; if (!document.hidden) { startInterval(); } /* Stop / Start Slider on tab active */ document.addEventListener( "visibilitychange", function () { if (document.hidden) { stopInterval(); } else { startInterval(); } }, false ); function goToPrevSlide() { let curentIntSelected = getCurrentSelection(); let nextSlideToRun = curentIntSelected - 1; if (curentIntSelected == 0) { nextSlideToRun = slidesCount - 1; } nextSlide(controlCircles[nextSlideToRun]); } function goToNextSlide() { let curentIntSelected = getCurrentSelection(); let nextSlideToRun = curentIntSelected + 1; if (curentIntSelected == slidesCount - 1) { nextSlideToRun = 0; } nextSlide(controlCircles[nextSlideToRun]); } function startInterval() { automatedInterval = setInterval(function () { let curentIntSelected = getCurrentSelection(); let nextSlideToRun = curentIntSelected + 1; if (curentIntSelected == slidesCount - 1) { nextSlideToRun = 0; } nextSlide(controlCircles[nextSlideToRun]); }, automatedSlideSpeed); } function stopInterval() { clearInterval(automatedInterval); } function nextSlide(el) { if (!el.classList.contains("selected")) { if (intervalRunning == false) { intervalRunning = true; stopInterval(); let nextSelected = getSlidePosition(el); let sliderWidthHalf = sliderContainer.offsetWidth / 2; let elWidth; if (!slides[0].classList.contains("selected")) { elWidth = slides[0].getBoundingClientRect().width; } else { elWidth = slides[1].getBoundingClientRect().width; } let elWidthHalf = elWidth / 2; let centerPosition = Math.ceil( sliderWidthHalf - elWidthHalf - nextSelected * elWidth ); let selectedElement = document.querySelectorAll( ".slide-bullets > div.selected" )[0]; let selectedElementPosition = getSlidePosition(selectedElement); slides[selectedElementPosition].classList.remove("selected"); controlCircles[selectedElementPosition].classList.remove("selected"); slides[nextSelected].classList.add("selected"); controlCircles[nextSelected].classList.add("selected"); let tl = anime.timeline({ easing: "linear", }); tl.add({ targets: slides[selectedElementPosition], scale: 1, duration: zoomSpeed, }) .add({ targets: sliderContainer, translateX: centerPosition, duration: slideSpeed, }) .add({ targets: slides[nextSelected], scale: 1.2, duration: zoomSpeed, complete: function () { intervalRunning = false; startInterval(); }, }); } } } function initSlider(nextSelected) { let sliderWidthHalf = sliderContainer.offsetWidth / 2; let elWidth = slides[0].getBoundingClientRect().width; let elWidthHalf = elWidth / 2; let centerPosition = Math.ceil( sliderWidthHalf - elWidthHalf - nextSelected * elWidth ); let tl = anime.timeline({ easing: "linear", }); tl.add({ targets: sliderContainer, translateX: centerPosition, duration: slideSpeed, }).add({ targets: slides[nextSelected], scale: 1.2, duration: zoomSpeed, }); } function getSlidePosition(el) { for (let i = 0; i < controlCircles.length; i++) { if (controlCircles[i] == el) { return i; } } } function getCurrentSelection() { for (let i = 0; i < controlCircles.length; i++) { if (controlCircles[i].classList.contains("selected")) { return i; } } } function createEl(elType, id, classes, inner) { let element = document.createElement(elType); if (typeof id === "string") { element.setAttribute("id", id); } if (typeof classes === "string") { element.classList.add(classes); } if (typeof classes === "object") { let classArray = Object.values(classes); for (let i = 0; i < classArray.length; i++) { element.classList.add(classArray[i]); } } if (inner) { element.innerHTML = inner; } return element; } });

2025-2029 School Excess Levy

Stand Together, Celebrate Together