392 lines
13 KiB
JavaScript
392 lines
13 KiB
JavaScript
/**
|
|
* JPM Security & Services - Main Script
|
|
* Handles interactive elements and functionality for all website versions
|
|
*/
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Determine which version of the website is being used
|
|
const currentPage = window.location.pathname.split('/').pop();
|
|
|
|
// Common functionality for all versions
|
|
initCommonFunctionality();
|
|
|
|
// Version-specific functionality
|
|
if (currentPage === 'index.html' || currentPage === '') {
|
|
initVersion1();
|
|
} else if (currentPage === 'index2.html') {
|
|
initVersion2();
|
|
} else if (currentPage === 'index3.html') {
|
|
initVersion3();
|
|
} else if (currentPage === 'index4.html') {
|
|
initVersion4();
|
|
} else if (currentPage === 'index5.html') {
|
|
initVersion5();
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Common functionality for all website versions
|
|
*/
|
|
function initCommonFunctionality() {
|
|
// Smooth scrolling for anchor links
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
|
|
const targetId = this.getAttribute('href');
|
|
if (targetId === '#') return;
|
|
|
|
const targetElement = document.querySelector(targetId);
|
|
if (targetElement) {
|
|
// Get navbar height for offset (if navbar exists)
|
|
let navbarHeight = 0;
|
|
const navbar = document.querySelector('.navbar, .header');
|
|
if (navbar) {
|
|
navbarHeight = navbar.offsetHeight;
|
|
}
|
|
|
|
const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navbarHeight;
|
|
|
|
window.scrollTo({
|
|
top: targetPosition,
|
|
behavior: 'smooth'
|
|
});
|
|
|
|
// Close mobile menu if open (different selectors for different versions)
|
|
const mobileMenu = document.querySelector('.navbar-collapse.show, .mobile-menu.active, .fullscreen-menu.active');
|
|
if (mobileMenu) {
|
|
// Different ways to close the menu depending on version
|
|
const menuToggle = document.querySelector('.navbar-toggler, .menu-toggle, .mobile-menu-toggle');
|
|
if (menuToggle) {
|
|
menuToggle.click();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// Form submission handling for all contact forms
|
|
const contactForms = document.querySelectorAll('.contact-form');
|
|
if (contactForms.length > 0) {
|
|
contactForms.forEach(form => {
|
|
form.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
// Get form data
|
|
const formData = new FormData(this);
|
|
const formValues = Object.fromEntries(formData.entries());
|
|
|
|
// Here you would typically send the data to a server
|
|
// For demonstration, we'll just show an alert
|
|
alert('Bedankt voor uw bericht! We nemen zo spoedig mogelijk contact met u op.');
|
|
|
|
// Reset the form
|
|
this.reset();
|
|
});
|
|
});
|
|
}
|
|
|
|
// Back to top button functionality
|
|
const backToTopButton = document.querySelector('.back-to-top');
|
|
if (backToTopButton) {
|
|
window.addEventListener('scroll', function() {
|
|
if (window.scrollY > 300) {
|
|
backToTopButton.classList.add('active');
|
|
} else {
|
|
backToTopButton.classList.remove('active');
|
|
}
|
|
});
|
|
|
|
backToTopButton.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
});
|
|
}
|
|
|
|
// Preloader functionality (for versions that have it)
|
|
const preloader = document.querySelector('.preloader');
|
|
if (preloader) {
|
|
window.addEventListener('load', function() {
|
|
setTimeout(function() {
|
|
preloader.classList.add('fade-out');
|
|
setTimeout(function() {
|
|
preloader.style.display = 'none';
|
|
}, 500);
|
|
}, 1000);
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Version 1 specific functionality
|
|
*/
|
|
function initVersion1() {
|
|
// Navbar scroll behavior
|
|
const navbar = document.querySelector('.navbar');
|
|
if (navbar) {
|
|
window.addEventListener('scroll', function() {
|
|
if (window.scrollY > 50) {
|
|
navbar.style.padding = '10px 0';
|
|
navbar.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
|
|
} else {
|
|
navbar.style.padding = '15px 0';
|
|
navbar.style.boxShadow = 'none';
|
|
}
|
|
});
|
|
}
|
|
|
|
// Animation on scroll (simple implementation)
|
|
const animateElements = document.querySelectorAll('.service-card, .about-image, .contact-info, .contact-form');
|
|
|
|
const animateOnScroll = function() {
|
|
animateElements.forEach(element => {
|
|
const elementPosition = element.getBoundingClientRect().top;
|
|
const windowHeight = window.innerHeight;
|
|
|
|
if (elementPosition < windowHeight - 100) {
|
|
element.style.opacity = '1';
|
|
element.style.transform = 'translateY(0)';
|
|
}
|
|
});
|
|
};
|
|
|
|
// Set initial state for animation
|
|
animateElements.forEach(element => {
|
|
element.style.opacity = '0';
|
|
element.style.transform = 'translateY(20px)';
|
|
element.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
|
|
});
|
|
|
|
// Run animation check on load and scroll
|
|
window.addEventListener('load', animateOnScroll);
|
|
window.addEventListener('scroll', animateOnScroll);
|
|
}
|
|
|
|
/**
|
|
* Version 2 specific functionality
|
|
*/
|
|
function initVersion2() {
|
|
// Mobile menu toggle
|
|
const menuToggle = document.querySelector('.menu-toggle');
|
|
const mobileMenu = document.querySelector('.mobile-menu');
|
|
|
|
if (menuToggle && mobileMenu) {
|
|
menuToggle.addEventListener('click', function() {
|
|
this.classList.toggle('active');
|
|
mobileMenu.classList.toggle('active');
|
|
});
|
|
}
|
|
|
|
// Active link highlighting
|
|
const sections = document.querySelectorAll('section[id]');
|
|
const navLinks = document.querySelectorAll('.side-nav nav ul li a, .mobile-menu nav ul li a');
|
|
|
|
window.addEventListener('scroll', function() {
|
|
let current = '';
|
|
|
|
sections.forEach(section => {
|
|
const sectionTop = section.offsetTop;
|
|
const sectionHeight = section.clientHeight;
|
|
|
|
if (window.scrollY >= sectionTop - 200) {
|
|
current = section.getAttribute('id');
|
|
}
|
|
});
|
|
|
|
navLinks.forEach(link => {
|
|
link.classList.remove('active');
|
|
if (link.getAttribute('href') === `#${current}`) {
|
|
link.classList.add('active');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Version 3 specific functionality
|
|
*/
|
|
function initVersion3() {
|
|
// Navbar scroll behavior
|
|
const navbar = document.querySelector('.navbar');
|
|
if (navbar) {
|
|
window.addEventListener('scroll', function() {
|
|
if (window.scrollY > 50) {
|
|
navbar.classList.add('scrolled');
|
|
} else {
|
|
navbar.classList.remove('scrolled');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Active link highlighting
|
|
const sections = document.querySelectorAll('section[id]');
|
|
const navLinks = document.querySelectorAll('.navbar-nav .nav-link');
|
|
|
|
window.addEventListener('scroll', function() {
|
|
let current = '';
|
|
|
|
sections.forEach(section => {
|
|
const sectionTop = section.offsetTop;
|
|
const sectionHeight = section.clientHeight;
|
|
|
|
if (window.scrollY >= sectionTop - 200) {
|
|
current = section.getAttribute('id');
|
|
}
|
|
});
|
|
|
|
navLinks.forEach(link => {
|
|
link.classList.remove('active');
|
|
if (link.getAttribute('href') === `#${current}`) {
|
|
link.classList.add('active');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Version 4 specific functionality
|
|
*/
|
|
function initVersion4() {
|
|
// Mobile menu toggle
|
|
const menuToggle = document.querySelector('.mobile-menu-toggle');
|
|
const mobileMenu = document.querySelector('.mobile-menu');
|
|
|
|
if (menuToggle && mobileMenu) {
|
|
menuToggle.addEventListener('click', function() {
|
|
this.classList.toggle('active');
|
|
mobileMenu.classList.toggle('active');
|
|
});
|
|
}
|
|
|
|
// Header scroll behavior
|
|
const header = document.querySelector('.header');
|
|
if (header) {
|
|
window.addEventListener('scroll', function() {
|
|
if (window.scrollY > 50) {
|
|
header.classList.add('scrolled');
|
|
} else {
|
|
header.classList.remove('scrolled');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Active link highlighting
|
|
const sections = document.querySelectorAll('section[id]');
|
|
const navLinks = document.querySelectorAll('.main-nav ul li a, .mobile-menu ul li a');
|
|
|
|
window.addEventListener('scroll', function() {
|
|
let current = '';
|
|
|
|
sections.forEach(section => {
|
|
const sectionTop = section.offsetTop;
|
|
const sectionHeight = section.clientHeight;
|
|
|
|
if (window.scrollY >= sectionTop - 200) {
|
|
current = section.getAttribute('id');
|
|
}
|
|
});
|
|
|
|
navLinks.forEach(link => {
|
|
link.classList.remove('active');
|
|
if (link.getAttribute('href') === `#${current}`) {
|
|
link.classList.add('active');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Version 5 specific functionality
|
|
*/
|
|
function initVersion5() {
|
|
// Initialize AOS (Animate On Scroll) library if available
|
|
if (typeof AOS !== 'undefined') {
|
|
AOS.init({
|
|
duration: 800,
|
|
easing: 'ease-in-out',
|
|
once: true,
|
|
mirror: false
|
|
});
|
|
}
|
|
|
|
// Custom cursor
|
|
const cursor = document.querySelector('.cursor');
|
|
const cursorFollower = document.querySelector('.cursor-follower');
|
|
|
|
if (cursor && cursorFollower) {
|
|
document.addEventListener('mousemove', function(e) {
|
|
cursor.style.left = e.clientX + 'px';
|
|
cursor.style.top = e.clientY + 'px';
|
|
|
|
setTimeout(function() {
|
|
cursorFollower.style.left = e.clientX + 'px';
|
|
cursorFollower.style.top = e.clientY + 'px';
|
|
}, 100);
|
|
});
|
|
|
|
document.addEventListener('mousedown', function() {
|
|
cursor.classList.add('active');
|
|
cursorFollower.classList.add('active');
|
|
});
|
|
|
|
document.addEventListener('mouseup', function() {
|
|
cursor.classList.remove('active');
|
|
cursorFollower.classList.remove('active');
|
|
});
|
|
|
|
// Add hover effect to links and buttons
|
|
const hoverElements = document.querySelectorAll('a, button, .btn, .menu-toggle, .menu-close');
|
|
hoverElements.forEach(element => {
|
|
element.addEventListener('mouseenter', function() {
|
|
cursor.classList.add('active');
|
|
cursorFollower.classList.add('active');
|
|
});
|
|
|
|
element.addEventListener('mouseleave', function() {
|
|
cursor.classList.remove('active');
|
|
cursorFollower.classList.remove('active');
|
|
});
|
|
});
|
|
}
|
|
|
|
// Fullscreen menu toggle
|
|
const menuToggle = document.querySelector('.menu-toggle');
|
|
const menuClose = document.querySelector('.menu-close');
|
|
const fullscreenMenu = document.querySelector('.fullscreen-menu');
|
|
|
|
if (menuToggle && menuClose && fullscreenMenu) {
|
|
menuToggle.addEventListener('click', function() {
|
|
fullscreenMenu.classList.add('active');
|
|
document.body.style.overflow = 'hidden';
|
|
});
|
|
|
|
menuClose.addEventListener('click', function() {
|
|
fullscreenMenu.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
});
|
|
|
|
// Close menu when clicking on a menu link
|
|
const menuLinks = document.querySelectorAll('.menu-link');
|
|
menuLinks.forEach(link => {
|
|
link.addEventListener('click', function() {
|
|
fullscreenMenu.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
});
|
|
});
|
|
}
|
|
|
|
// Header scroll behavior
|
|
const header = document.querySelector('.header');
|
|
if (header) {
|
|
window.addEventListener('scroll', function() {
|
|
if (window.scrollY > 50) {
|
|
header.classList.add('scrolled');
|
|
} else {
|
|
header.classList.remove('scrolled');
|
|
}
|
|
});
|
|
}
|
|
} |