"use strict"; /*Namespace ------------------------------------------------------- */ var blogbull = blogbull || {}; /* Preloader **-----------------------------------------------------*/ blogbull.PreLoader = { init: function () { let preloader = document.querySelector("#wpi-preloader"); if (preloader) { preloader.classList.add("wpi-preloader-exit"); setTimeout(function () { preloader.style.display = "none"; }, 1000); } }, }; /* Display Clock **-----------------------------------------------------*/ blogbull.currentClock = { init: function () { if (document.getElementsByClassName("wpi-display-clock").length > 0) { setInterval(function () { let currentTime = new Date(); let hours = currentTime.getHours(); let minutes = currentTime.getMinutes(); let seconds = currentTime.getSeconds(); let ampm = hours >= 12 ? "PM" : "AM"; hours = hours % 12; hours = hours ? hours : 12; minutes = minutes < 10 ? "0" + minutes : minutes; seconds = seconds < 10 ? "0" + seconds : seconds; let timeString = '' + hours + "" + ":" + '' + minutes + "" + ":" + '' + seconds + "" + " " + '' + ampm + ""; document.getElementsByClassName( "wpi-display-clock" )[0].innerHTML = timeString; }, 1000); } }, }; /* Slider **-----------------------------------------------------*/ blogbull.slider = { init: function () { this.bannerSlider(); this.popularSlider(); this.widgetSlider(); }, bannerSlider: function () { let MainBanner = new Swiper(".site-banner-hero", { slidesPerView: "1", loop: document.querySelectorAll('.swiper-slide').length >= 3, spaceBetween: 24, direction: 'horizontal', speed: 800, autoplay: { delay: 5000, // Add a delay for autoplay (optional, you can adjust the timing) }, navigation: { nextEl: ".banner-slider-next", prevEl: ".banner-slider-prev", }, breakpoints: { 640: { slidesPerView: 2, }, 992: { slidesPerView: 3, }, 1400: { slidesPerView: 4, }, }, }); }, popularSlider: function () { let sliderWrapper = document.querySelector( ".wpi-popular-init" ); if (sliderWrapper) { let sliderOptions; let sliderData = sliderWrapper.getAttribute("data-slider") || {}; if (sliderData) { sliderOptions = JSON.parse(sliderData); } let swiper = new Swiper(sliderWrapper, sliderOptions); } }, widgetSlider: function () { let sliderWrapper = document.querySelectorAll( ".wpi-swiper-init" ); if (sliderWrapper) { sliderWrapper.forEach(function (item) { let parentWrapper = item.parentNode; let navNext = parentWrapper.querySelector( ".widget-slider-next" ); let navPrev = parentWrapper.querySelector( ".widget-slider-prev" ); let paginate = parentWrapper.querySelector(".wpi-widget-pagination"); let defaultOptions = { slidesPerView: 1, loop: document.querySelectorAll('.swiper-slide').length >= 3, lazyloading: true, navigation: { nextEl: navNext, prevEl: navPrev, }, pagination: { el: paginate, clickable: true, }, }; let data = item.getAttribute("data-slider") || {}; if (data) { var dataOptions = JSON.parse(data); } let sliderOptions = { ...defaultOptions, ...dataOptions, }; let swiper = new Swiper(item, sliderOptions); let containerWidth = item.clientWidth; if (containerWidth < 500) { swiper.params.slidesPerView = 1; swiper.update(); } }); } }, }; /* Background Image **-----------------------------------------------------*/ blogbull.setBackgroundImage = { init: function () { let bgImageContainer = document.querySelectorAll(".entry-background-image"); if (bgImageContainer) { bgImageContainer.forEach(function (item) { let image = item.querySelector("img"); if (image) { let imageSrc = image.getAttribute("src"); if (imageSrc) { item.style.backgroundImage = "url(" + imageSrc + ")"; image.style.display = "none"; } } }); } let pageSections = document.querySelectorAll(".data-bg"); pageSections.forEach(function (section) { let background = section.getAttribute("data-background"); if (background) { section.style.backgroundImage = "url(" + background + ")"; } }); }, }; /* Display Clock **-----------------------------------------------------*/ blogbull.displayClock = { init: function () { if (document.getElementsByClassName("wpi-current-time").length > 0) { setInterval(function () { let currentTime = new Date(); let hours = currentTime.getHours(); let minutes = currentTime.getMinutes(); let seconds = currentTime.getSeconds(); let ampm = hours >= 12 ? "PM" : "AM"; hours = hours % 12; hours = hours ? hours : 12; minutes = minutes < 10 ? "0" + minutes : minutes; seconds = seconds < 10 ? "0" + seconds : seconds; let timeString = '' + hours + "" + ":" + '' + minutes + "" + ":" + '' + seconds + "" + " " + '' + ampm + ""; document.getElementsByClassName( "wpi-current-time" )[0].innerHTML = timeString; }, 1000); } }, }; /* Preloader **-----------------------------------------------------*/ blogbull.ProgressBar = { init: function () { const progressBar = document.getElementById('progressBar'); // Check if progressBar exists before proceeding if (progressBar) { const totalHeight = document.body.scrollHeight - window.innerHeight; const scrollPosition = window.scrollY; const scrollPercentage = (scrollPosition / totalHeight) * 100; progressBar.style.width = scrollPercentage + '%'; // Update progress on scroll window.addEventListener('scroll', function () { const scrollPosition = window.scrollY; const scrollPercentage = (scrollPosition / totalHeight) * 100; progressBar.style.width = scrollPercentage + '%'; }); } }, }; /* Scroll-to-Top Button with Progress Indicator **-----------------------------------------------------*/ blogbull.scrollToTop = { init: function () { this.scrollToTopBtn = document.getElementById("scrollToTopBtn"); if (!this.scrollToTopBtn) return; // Exit if the button does not exist this.progressCircle = document.getElementById("progressCircle"); if (!this.progressCircle) return; // Exit if the progress circle does not exist this.progressCircle = this.progressCircle.querySelector("circle"); if (!this.progressCircle) return; // Exit if the circle element does not exist this.radius = this.progressCircle.r.baseVal.value; this.circumference = 2 * Math.PI * this.radius; this.progressCircle.style.strokeDasharray = `${this.circumference} ${this.circumference}`; this.progressCircle.style.strokeDashoffset = this.circumference; // Bind the scroll and click events window.addEventListener('scroll', this.handleScroll.bind(this)); this.scrollToTopBtn.addEventListener('click', this.scrollToTop.bind(this)); }, handleScroll: function () { if (!this.scrollToTopBtn || !this.progressCircle) return; // Exit if elements are missing if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) { this.scrollToTopBtn.style.display = "flex"; } else { this.scrollToTopBtn.style.display = "none"; } requestAnimationFrame(this.updateProgressIndicator.bind(this)); }, scrollToTop: function () { window.scrollTo({top: 0, behavior: 'smooth'}); }, updateProgressIndicator: function () { if (!this.progressCircle) return; // Exit if the circle element does not exist const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; const progress = scrollTop / scrollHeight; const dashOffset = this.circumference * (1 - progress); this.progressCircle.style.strokeDashoffset = dashOffset; } }; blogbull.tabbedWidget = { init: function () { const widgetContainers = document.querySelectorAll(".wpi-tabbed-widget"); widgetContainers.forEach((container) => { const tabs = container.querySelectorAll( ".tabbed-widget-header .tabbed-header-item" ); const tabPanes = container.querySelectorAll( ".tabbed-widget-content .tabbed-content-item" ); tabs.forEach((tab) => { tab.addEventListener("click", function (event) { const tabid = this.getAttribute("tab-data"); tabs.forEach((tab) => tab.classList.remove("active")); tabPanes.forEach((tabPane) => tabPane.classList.remove("active") ); this.classList.add("active"); container .querySelector(`.content-${tabid}`) .classList.add("active"); }); }); }); }, }; /* Load functions at proper events *--------------------------------------------------*/ /** * Is the DOM ready? * * This implementation is coming from https://gomakethings.com/a-native-javascript-equivalent-of-jquerys-ready-method/ * * @param {Function} fn Callback function to run. */ function blogbullDomReady(fn) { if (typeof fn !== "function") { return; } if ( document.readyState === "interactive" || document.readyState === "complete" ) { return fn(); } document.addEventListener("DOMContentLoaded", fn, false); } blogbullDomReady(function () { blogbull.currentClock.init(); blogbull.slider.init(); blogbull.setBackgroundImage.init(); blogbull.displayClock.init(); blogbull.scrollToTop.init(); blogbull.tabbedWidget.init(); }); window.addEventListener("load", function (event) { blogbull.PreLoader.init(); }); window.addEventListener("scroll", function (event) { blogbull.ProgressBar.init(); }); (function () { const section = 'wpi-ticker-init'; const sliders = document.querySelectorAll(`.${section}`); if (sliders.length === 0) { return; } const initSwiper = function () { sliders.forEach(slider => { const speedValue = slider.getAttribute('data-news-ticker-speed'); const wrapperClass = `${section}-wrapper`; const slideClass = `${section}-item`; const speed = !isNaN(parseInt(speedValue)) ? parseInt(speedValue) : 8000; const swiperInstance = new Swiper(slider, { wrapperClass: wrapperClass, slideClass: slideClass, scrollbar: false, direction: 'horizontal', slidesPerView: 'auto', speed: speed, initialSlide: 0, loop: document.querySelectorAll('.swiper-slide').length >= 3, parallax: false, spaceBetween: 0, allowTouchMove: false, waitForTransition: false, watchSlidesProgress: false, autoplay: {delay: 0, disableOnInteraction: false,}, }); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (!entry.isIntersecting) { swiperInstance.autoplay.stop(); } else { swiperInstance.autoplay.start(); } }); }, {threshold: 0}); observer.observe(slider); }); }; document.addEventListener('DOMContentLoaded', () => { initSwiper(); }); })();