703 lines
21 KiB
JavaScript
703 lines
21 KiB
JavaScript
"use strict";
|
|
|
|
/* ---------------------
|
|
[Master JavaScript]
|
|
Template Name: Softora - IT Solutions & Technology HTML Template
|
|
Version: 1.0.0
|
|
Author: Nano Theme
|
|
--------------------- */
|
|
|
|
/* ---------------------
|
|
[Table of Contents]
|
|
|
|
1. Core Features
|
|
1.1.0 Sticky Header (sticky-header)
|
|
1.2.0 Mobile Dropdown Menu (mobile-menu)
|
|
1.3.0 Anchor Prevent Default (anchor-prevent)
|
|
1.4.0 Search Form (search-form)
|
|
2. Sliders & Carousels
|
|
2.1.0 Service Swiper Slide (service-slide)
|
|
2.2.0 Service Swiper Slide Two (service-slide-two)
|
|
2.3.0 Project Swiper Slide (portfolio-swiper)
|
|
2.4.0 Project Two Swiper Slide (portfolio-two-swiper)
|
|
2.5.0 Testimonial Swiper Slide (testimonial-swiper)
|
|
2.6.0 Testimonial Swiper Slide Two (testimonial-swiper-two)
|
|
2.7.0 Testimonial Swiper Slide Three (testimonial-swiper-three)
|
|
2.8.0 Team Swiper Slide (team-swiper)
|
|
3. UI Enhancements
|
|
3.1.0 Counter Up (counter-up)
|
|
3.2.0 Scroll to Top (scroll-top)
|
|
3.3.0 Video Popup
|
|
3.4.0 Isotope
|
|
3.5.0 Rotating Image
|
|
3.6.0 Progress Bar
|
|
3.7.0 Pricing Plan Switching
|
|
3.8.0 Copyright Year
|
|
3.9.0 WOW Activation
|
|
3.10.0 Tooltip Activation
|
|
3.11.0 Toast Activation
|
|
3.12.0 Popover Activation
|
|
3.13.0 Preloader
|
|
--------------------- */
|
|
|
|
// 1.1 Sticky Header
|
|
|
|
const navarToggler = document.querySelector('.navbar-toggler');
|
|
const header = document.querySelector('.header-area');
|
|
|
|
if (navarToggler) {
|
|
navarToggler.addEventListener('click', () => {
|
|
header.classList.toggle('mobile-menu-open');
|
|
});
|
|
}
|
|
|
|
/*
|
|
if (header) {
|
|
function stickyNavigation() {
|
|
if (window.pageYOffset > 10) {
|
|
header.classList.add('sticky-on');
|
|
} else {
|
|
header.classList.remove('sticky-on');
|
|
}
|
|
}
|
|
|
|
window.addEventListener('load', stickyNavigation);
|
|
window.addEventListener('scroll', stickyNavigation);
|
|
}
|
|
*/
|
|
|
|
// 1.2 Mobile Dropdown Menu
|
|
|
|
/*
|
|
function mobileDropdownMenu() {
|
|
const sbdropdown = document.querySelectorAll('.softora-dd');
|
|
if (sbdropdown.length > 0) {
|
|
const navUrl = document.querySelectorAll('.navbar-nav li ul');
|
|
navUrl.forEach(url => {
|
|
url.insertAdjacentHTML('beforebegin', '<div class="dropdown-toggler"><i class="bi bi-caret-down-fill"></i></div>');
|
|
});
|
|
|
|
const ddtrogglers = document.querySelectorAll('.dropdown-toggler');
|
|
ddtrogglers.forEach(ddtoggler => {
|
|
ddtoggler.addEventListener('click', () => {
|
|
const ddNext = ddtoggler.nextElementSibling;
|
|
slideToggle(ddNext, 300);
|
|
});
|
|
});
|
|
}
|
|
}
|
|
window.addEventListener('load', mobileDropdownMenu);
|
|
*/
|
|
|
|
// 1.3 Anchor Prevent Default
|
|
|
|
const anchors = document.querySelectorAll('a[href="#"]');
|
|
anchors.forEach(anchor => {
|
|
anchor.addEventListener('click', e => e.preventDefault());
|
|
});
|
|
|
|
// 1.4 Search Form
|
|
|
|
const searchButton = document.getElementById('searchButton');
|
|
const searchClose = document.getElementById('searchClose');
|
|
const searchFormPopup = document.querySelector('.search-form-popup');
|
|
const searchOverlay = document.getElementById('searchOverlay');
|
|
|
|
if (searchButton) {
|
|
searchButton.addEventListener('click', () => {
|
|
searchFormPopup.classList.add('open');
|
|
searchOverlay.classList.add('open');
|
|
});
|
|
searchClose.addEventListener('click', () => {
|
|
searchFormPopup.classList.remove('open');
|
|
searchOverlay.classList.remove('open');
|
|
});
|
|
}
|
|
|
|
// 2.1.0 Service Swiper Slide
|
|
|
|
const serviceSwiper = document.querySelector('.service-swiper-slider');
|
|
|
|
if (serviceSwiper) {
|
|
// Check if Swiper is defined
|
|
if (typeof Swiper !== 'undefined') {
|
|
new Swiper('.service-swiper-slider', {
|
|
loop: true,
|
|
slidesPerView: 3,
|
|
spaceBetween: 30,
|
|
autoplay: {
|
|
delay: 5000,
|
|
disableOnInteraction: false,
|
|
},
|
|
pagination: {
|
|
el: ".service-pagination",
|
|
clickable: true,
|
|
},
|
|
breakpoints: {
|
|
320: {
|
|
slidesPerView: 1,
|
|
spaceBetween: 0,
|
|
},
|
|
768: {
|
|
slidesPerView: 2,
|
|
spaceBetween: 20,
|
|
},
|
|
1200: {
|
|
slidesPerView: 3,
|
|
spaceBetween: 30,
|
|
},
|
|
},
|
|
});
|
|
}
|
|
}
|
|
|
|
// 2.2.0 Service Swiper Slide Two
|
|
|
|
const serviceSwiperTwo = document.querySelector('.service-swiper-slider-two');
|
|
|
|
if (serviceSwiperTwo) {
|
|
if (typeof Swiper !== 'undefined') {
|
|
new Swiper('.service-swiper-slider-two', {
|
|
loop: true,
|
|
slidesPerView: 6,
|
|
spaceBetween: 30,
|
|
centeredSlides: true,
|
|
autoplay: {
|
|
delay: 5000,
|
|
disableOnInteraction: false,
|
|
},
|
|
pagination: {
|
|
el: ".service-pagination-two",
|
|
clickable: true,
|
|
},
|
|
breakpoints: {
|
|
320: {
|
|
slidesPerView: 1,
|
|
spaceBetween: 10,
|
|
},
|
|
480: {
|
|
slidesPerView: 1.5,
|
|
spaceBetween: 20,
|
|
},
|
|
576: {
|
|
slidesPerView: 2,
|
|
spaceBetween: 20,
|
|
},
|
|
768: {
|
|
slidesPerView: 2.5,
|
|
spaceBetween: 20,
|
|
},
|
|
992: {
|
|
slidesPerView: 3,
|
|
spaceBetween: 20,
|
|
},
|
|
1200: {
|
|
slidesPerView: 4,
|
|
spaceBetween: 30,
|
|
},
|
|
1400: {
|
|
slidesPerView: 5,
|
|
spaceBetween: 30,
|
|
},
|
|
1800: {
|
|
slidesPerView: 6,
|
|
spaceBetween: 30,
|
|
},
|
|
},
|
|
});
|
|
}
|
|
}
|
|
|
|
// 2.3.0 Project Swiper Slide
|
|
|
|
const projectSwiper = document.querySelector('.project-swiper');
|
|
|
|
if (projectSwiper) {
|
|
if (typeof Swiper !== 'undefined') {
|
|
new Swiper('.project-swiper', {
|
|
loop: true,
|
|
slidesPerView: 4,
|
|
spaceBetween: 30,
|
|
navigation: {
|
|
nextEl: '.project-button-next',
|
|
prevEl: '.project-button-prev',
|
|
},
|
|
autoplay: {
|
|
delay: 5000,
|
|
disableOnInteraction: false,
|
|
},
|
|
breakpoints: {
|
|
320: {
|
|
slidesPerView: 1,
|
|
spaceBetween: 10,
|
|
},
|
|
480: {
|
|
slidesPerView: 1,
|
|
spaceBetween: 20,
|
|
},
|
|
576: {
|
|
slidesPerView: 2,
|
|
spaceBetween: 20,
|
|
},
|
|
768: {
|
|
slidesPerView: 3,
|
|
spaceBetween: 20,
|
|
},
|
|
1200: {
|
|
slidesPerView: 4,
|
|
spaceBetween: 30,
|
|
},
|
|
},
|
|
});
|
|
}
|
|
}
|
|
|
|
// 2.4.0 Project Two Swiper Slide
|
|
|
|
const swiperInstances = [];
|
|
const projectTwoSwipers = document.querySelectorAll('.project-two-swiper');
|
|
|
|
if (projectTwoSwipers.length > 0) {
|
|
if (typeof Swiper !== 'undefined') {
|
|
projectTwoSwipers.forEach((swiperEl, index) => {
|
|
const projectSwiper = new Swiper(swiperEl, {
|
|
loop: true,
|
|
slidesPerView: 'auto',
|
|
spaceBetween: 30,
|
|
pagination: {
|
|
el: swiperEl.querySelector('.project-two-pagination'),
|
|
clickable: true,
|
|
},
|
|
grabCursor: true,
|
|
watchSlidesProgress: true,
|
|
});
|
|
|
|
swiperInstances.push(projectSwiper);
|
|
|
|
swiperEl.querySelectorAll('.project-two-card').forEach(slide => {
|
|
slide.addEventListener('click', () => {
|
|
swiperEl.querySelectorAll('.project-two-card').forEach(s => {
|
|
s.classList.remove('slide-expand');
|
|
});
|
|
slide.classList.add('slide-expand');
|
|
});
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
const tabSwipers = document.querySelectorAll('[data-bs-toggle="tab"]');
|
|
|
|
if (tabSwipers.length > 0) {
|
|
tabSwipers.forEach(tabBtn => {
|
|
tabBtn.addEventListener('shown.bs.tab', (e) => {
|
|
const targetTab = document.querySelector(e.target.getAttribute('data-bs-target'));
|
|
const targetSwiperEl = targetTab.querySelector('.project-two-swiper');
|
|
|
|
if (targetSwiperEl) {
|
|
const swiperIndex = Array.from(document.querySelectorAll('.project-two-swiper')).indexOf(targetSwiperEl);
|
|
const projectSwiper = swiperInstances[swiperIndex];
|
|
|
|
setTimeout(() => {
|
|
projectSwiper.update();
|
|
}, 100);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// 2.5.0 Testimonial Swiper Slide
|
|
|
|
const testimonialSwiper = document.querySelector('.testimonial-swiper');
|
|
|
|
if (testimonialSwiper) {
|
|
if (typeof Swiper !== 'undefined') {
|
|
new Swiper('.testimonial-swiper', {
|
|
loop: true,
|
|
spaceBetween: 0,
|
|
slidesPerView: 1,
|
|
autoplay: {
|
|
delay: 5000,
|
|
disableOnInteraction: false,
|
|
},
|
|
pagination: {
|
|
el: ".testimonial-pagination",
|
|
clickable: true,
|
|
},
|
|
navigation: {
|
|
nextEl: '.testimonial-button-next',
|
|
prevEl: '.testimonial-button-prev',
|
|
},
|
|
});
|
|
}
|
|
}
|
|
|
|
// 2.6.0 Testimonial Swiper Slide Two
|
|
|
|
const testimonialSwiperTwo = document.querySelector('.testimonial-swiper-two');
|
|
|
|
if (testimonialSwiperTwo) {
|
|
if (typeof Swiper !== 'undefined') {
|
|
new Swiper('.testimonial-swiper-two', {
|
|
loop: true,
|
|
spaceBetween: 30,
|
|
slidesPerView: 3,
|
|
centeredSlides: true,
|
|
autoplay: {
|
|
delay: 5000,
|
|
disableOnInteraction: false,
|
|
},
|
|
pagination: {
|
|
el: ".testimonial-swiper-two-pagination",
|
|
clickable: true,
|
|
},
|
|
breakpoints: {
|
|
320: {
|
|
slidesPerView: 1,
|
|
spaceBetween: 10,
|
|
},
|
|
480: {
|
|
slidesPerView: 1,
|
|
spaceBetween: 20,
|
|
},
|
|
768: {
|
|
slidesPerView: 2,
|
|
spaceBetween: 20,
|
|
},
|
|
1200: {
|
|
slidesPerView: 3,
|
|
spaceBetween: 30,
|
|
},
|
|
},
|
|
});
|
|
}
|
|
}
|
|
|
|
// 2.7.0 Team Swiper Slide
|
|
|
|
const teamSwiper = document.querySelector('.team-swiper');
|
|
|
|
if (teamSwiper) {
|
|
if (typeof Swiper !== 'undefined') {
|
|
new Swiper('.team-swiper', {
|
|
loop: true,
|
|
spaceBetween: 30,
|
|
slidesPerView: 4,
|
|
autoplay: {
|
|
delay: 5000,
|
|
disableOnInteraction: false,
|
|
},
|
|
navigation: {
|
|
nextEl: '.team-button-next',
|
|
prevEl: '.team-button-prev',
|
|
},
|
|
breakpoints: {
|
|
320: {
|
|
slidesPerView: 1.5,
|
|
spaceBetween: 10,
|
|
},
|
|
480: {
|
|
slidesPerView: 2,
|
|
spaceBetween: 20,
|
|
},
|
|
576: {
|
|
slidesPerView: 2.5,
|
|
spaceBetween: 20,
|
|
},
|
|
768: {
|
|
slidesPerView: 3,
|
|
spaceBetween: 20,
|
|
},
|
|
992: {
|
|
slidesPerView: 4,
|
|
spaceBetween: 20,
|
|
}
|
|
},
|
|
});
|
|
}
|
|
}
|
|
|
|
// 3.1.0 Counter Up
|
|
|
|
const counterElements = document.querySelectorAll('.counter');
|
|
|
|
if (counterElements.length > 0) {
|
|
if (window.counterUp) {
|
|
const counterUp = window.counterUp.default;
|
|
|
|
const callback = (entries) => {
|
|
entries.forEach(entry => {
|
|
const counterElement = entry.target;
|
|
if (entry.isIntersecting && !counterElement.classList.contains('is-visible')) {
|
|
counterUp(counterElement, {
|
|
duration: 2000,
|
|
delay: 20
|
|
});
|
|
counterElement.classList.add('is-visible');
|
|
}
|
|
});
|
|
};
|
|
|
|
const IO = new IntersectionObserver(callback, {
|
|
threshold: 1
|
|
});
|
|
counterElements.forEach(element => IO.observe(element));
|
|
}
|
|
}
|
|
|
|
// 3.2.0 Scroll to Top
|
|
|
|
const scrollButton = document.getElementById('scrollTopButton');
|
|
const topDistance = 600;
|
|
|
|
if (scrollButton) {
|
|
window.addEventListener('scroll', () => {
|
|
if (document.body.scrollTop > topDistance || document.documentElement.scrollTop > topDistance) {
|
|
scrollButton.classList.add('scrolltop-show');
|
|
scrollButton.classList.remove('scrolltop-hide');
|
|
} else {
|
|
scrollButton.classList.add('scrolltop-hide');
|
|
scrollButton.classList.remove('scrolltop-show');
|
|
}
|
|
});
|
|
|
|
scrollButton.addEventListener('click', () => {
|
|
window.scrollTo({
|
|
top: 0,
|
|
left: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
});
|
|
|
|
function updateScrollProgress() {
|
|
const scrollY = window.scrollY;
|
|
const windowHeight = window.innerHeight;
|
|
const documentHeight = document.documentElement.scrollHeight;
|
|
const scrollPercent = (scrollY / (documentHeight - windowHeight)) * 100;
|
|
scrollButton.style.setProperty('--scroll-progress', `${scrollPercent}%`);
|
|
}
|
|
|
|
window.addEventListener('scroll', updateScrollProgress);
|
|
}
|
|
|
|
// 3.3.0 Video Popup
|
|
|
|
const videoPopup = document.getElementById("videoPopup");
|
|
const videoFrame = document.getElementById("videoFrame");
|
|
const closeBtn = document.getElementById("videoCloseButton");
|
|
const videoBtns = document.querySelectorAll(".video-btn");
|
|
|
|
if (closeBtn && videoBtns.length > 0) {
|
|
videoBtns.forEach(button => {
|
|
button.addEventListener("click", function () {
|
|
let videoUrl = this.getAttribute("data-video");
|
|
|
|
if (videoUrl) {
|
|
let separator = videoUrl.includes("?") ? "&" : "?";
|
|
|
|
if (videoUrl.includes("youtu.be")) {
|
|
let videoId = videoUrl.split("/").pop();
|
|
videoUrl = `https://www.youtube.com/embed/${videoId}`;
|
|
}
|
|
|
|
if (videoUrl.includes("youtube.com/watch")) {
|
|
let videoId = new URL(videoUrl).searchParams.get("v");
|
|
videoUrl = `https://www.youtube.com/embed/${videoId}`;
|
|
}
|
|
|
|
if (videoUrl.includes("youtube.com") || videoUrl.includes("vimeo.com")) {
|
|
videoUrl += `${separator}autoplay=1`;
|
|
}
|
|
|
|
videoFrame.src = videoUrl;
|
|
videoFrame.setAttribute("allow", "autoplay; encrypted-media");
|
|
videoPopup.style.display = "flex";
|
|
}
|
|
});
|
|
});
|
|
|
|
closeBtn.addEventListener("click", () => {
|
|
videoPopup.style.display = "none";
|
|
videoFrame.src = "";
|
|
});
|
|
|
|
window.addEventListener("click", (event) => {
|
|
if (event.target === videoPopup) {
|
|
videoPopup.style.display = "none";
|
|
videoFrame.src = "";
|
|
}
|
|
});
|
|
}
|
|
|
|
// 3.4.0 Isotope
|
|
|
|
const grids = document.querySelectorAll('.softora-filter');
|
|
|
|
if (grids.length > 0) {
|
|
if (typeof Isotope !== 'undefined' && typeof imagesLoaded !== 'undefined') {
|
|
grids.forEach(grid => {
|
|
imagesLoaded(grid, () => {
|
|
const iso = new Isotope(grid, {
|
|
itemSelector: '.filter-item',
|
|
percentPosition: true,
|
|
layoutMode: 'masonry',
|
|
masonry: {
|
|
columnWidth: '.filter-item'
|
|
}
|
|
});
|
|
|
|
const filtersElem = grid.closest('.softora-container').querySelector('.softora-filter-nav');
|
|
|
|
if (filtersElem) {
|
|
filtersElem.addEventListener('click', (event) => {
|
|
if (!event.target.matches('button')) return;
|
|
const filterValue = event.target.getAttribute('data-filter');
|
|
iso.arrange({
|
|
filter: filterValue
|
|
});
|
|
});
|
|
|
|
const radioButtonGroup = (buttonGroup) => {
|
|
buttonGroup.addEventListener('click', (event) => {
|
|
if (!event.target.matches('button')) return;
|
|
buttonGroup.querySelector('.active').classList.remove('active');
|
|
event.target.classList.add('active');
|
|
});
|
|
};
|
|
|
|
radioButtonGroup(filtersElem);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
// 3.5.0 Rotating Image
|
|
|
|
const rotatingImages = document.querySelectorAll('.rotatingImage');
|
|
|
|
if (rotatingImages.length > 0) {
|
|
window.addEventListener('scroll', () => {
|
|
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
|
const rotateValue = scrollTop % 360;
|
|
rotatingImages.forEach(image => {
|
|
image.style.transform = `rotate(${rotateValue}deg)`;
|
|
});
|
|
});
|
|
}
|
|
|
|
// 3.6.0 Progress Bar
|
|
|
|
const progressBars = document.querySelectorAll('.progress-bar');
|
|
|
|
if (progressBars.length > 0) {
|
|
progressBars.forEach(function (progressBar) {
|
|
const value = parseInt(progressBar.getAttribute('data-value'), 10); // Added radix
|
|
|
|
progressBar.style.width = value + '%';
|
|
const spanElements = progressBar.closest('.progress-item').querySelectorAll('.progress-info span');
|
|
if (spanElements.length > 1) {
|
|
const percentSpan = spanElements[1];
|
|
percentSpan.textContent = value + '%';
|
|
percentSpan.style.marginRight = (100 - value) + '%';
|
|
}
|
|
});
|
|
}
|
|
|
|
// 3.7.0 Pricing Plan Switching
|
|
|
|
const switchButtons = document.querySelectorAll(".pricing-plan-switching .btn");
|
|
const priceCards = document.querySelectorAll(".price-table-one");
|
|
|
|
if (switchButtons.length > 0 && priceCards.length > 0) {
|
|
switchButtons.forEach(btn => {
|
|
btn.addEventListener("click", () => {
|
|
switchButtons.forEach(b => b.classList.remove("active"));
|
|
btn.classList.add("active");
|
|
|
|
const isYearly = btn.textContent.trim().toLowerCase() === "yearly";
|
|
|
|
priceCards.forEach(card => {
|
|
const priceDisplay = card.querySelector(".price-display");
|
|
const priceAmountEl = card.querySelector(".price-amount");
|
|
const priceTypeEl = card.querySelector(".price-type");
|
|
priceDisplay.classList.add("fade-out");
|
|
|
|
setTimeout(() => {
|
|
const newPrice = isYearly ? card.dataset.yearly : card.dataset.monthly;
|
|
const newLabel = isYearly ? "/Year" : "/Month";
|
|
priceAmountEl.textContent = `$${newPrice}`;
|
|
priceTypeEl.textContent = newLabel;
|
|
priceDisplay.classList.remove("fade-out");
|
|
priceDisplay.classList.add("fade-in");
|
|
setTimeout(() => {
|
|
priceDisplay.classList.remove("fade-in");
|
|
}, 400);
|
|
}, 300);
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
// 3.8.0 Copyright Year
|
|
|
|
const year = document.getElementById("year");
|
|
if (year) {
|
|
const currentYear = new Date().getFullYear();
|
|
year.textContent = currentYear;
|
|
}
|
|
|
|
// 3.9.0 WOW Activation
|
|
|
|
const wowjs = document.querySelectorAll('.wow').length;
|
|
|
|
if (wowjs > 0) {
|
|
if (typeof WOW !== 'undefined') {
|
|
new WOW().init();
|
|
}
|
|
}
|
|
|
|
// 3.10 Tooltip Activation
|
|
|
|
if (typeof bootstrap !== 'undefined') {
|
|
let softoraTooltip = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
|
|
let tooltipList = softoraTooltip.map(function (sbTooltip) {
|
|
return new bootstrap.Tooltip(sbTooltip);
|
|
});
|
|
|
|
// 3.11 Toast Activation
|
|
|
|
let softoraToast = [].slice.call(document.querySelectorAll('.toast'));
|
|
let toastList = softoraToast.map(function (sbToast) {
|
|
return new bootstrap.Toast(sbToast);
|
|
});
|
|
toastList.forEach(toast => toast.show());
|
|
|
|
// 3.12 Popover Activation
|
|
|
|
let softoraPopover = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
|
|
let popoverList = softoraPopover.map(function (sbPopover) {
|
|
return new bootstrap.Popover(sbPopover);
|
|
});
|
|
}
|
|
|
|
// 3.13 Preloader
|
|
|
|
const preloader = document.getElementById('preloader');
|
|
|
|
if (preloader) {
|
|
window.addEventListener('load', function () {
|
|
let fadeOut = setInterval(function () {
|
|
if (!preloader.style.opacity) {
|
|
preloader.style.opacity = 1;
|
|
}
|
|
if (preloader.style.opacity > 0) {
|
|
preloader.style.opacity -= 0.1;
|
|
} else {
|
|
clearInterval(fadeOut);
|
|
preloader.remove();
|
|
}
|
|
}, 100);
|
|
});
|
|
}
|