https://eafghans.com/js/main.js

1// Preloader functionality
2window.addEventListener("load", function () {
3    const preloader = document.getElementById("preloader");
4    const content = document.getElementById("content");
5    const lottiePlayer = document.querySelector("dotlottie-player");
6    const minimumLoadingTime = 1000; // 1 second minimum
7    const startTime = Date.now();
8    
9    console.log("Page loaded, preloader status:", preloader.style.display);
10    console.log("Found lottie player:", !!lottiePlayer);
11  
12    // Ensure the preloader hides after the Lottie animation loads
13    if (lottiePlayer) {
14        lottiePlayer.addEventListener("ready", function () {
15            console.log("Lottie animation is ready");
16            const elapsedTime = Date.now() - startTime;
17            const remainingTime = Math.max(0, minimumLoadingTime - elapsedTime);
18            
19            setTimeout(() => {
20                preloader.style.display = "none";
21                content.style.display = "block";
22            }, remainingTime);
23        });
24
25        lottiePlayer.addEventListener("error", function (error) {
26            console.error("Lottie animation error:", error);
27        });
28    } else {
29        console.warn("Lottie player not found!");
30    }
31  
32    // Fallback timeout to prevent infinite loading
33    setTimeout(() => {
34        console.log("Timeout check - preloader status:", preloader.style.display);
35        if (preloader.style.display !== "none") {
36            console.warn("Fallback triggered: Hiding preloader");
37            preloader.style.display = "none";
38            content.style.display = "block";
39        }
40    }, 5000); // 5 second maximum loading time
41});
42
43
44// Check if the device width is greater than 768px
45function initAOS() {
46    if (window.innerWidth > 768) {
47        AOS.init({ duration: 1200 });
48    } else {
49        document.querySelectorAll('[data-aos]').forEach(el => {
50            el.removeAttribute('data-aos');
51        });
52    }
53}
54
55// Run on load
56initAOS();
57
58// Run on resize
59window.addEventListener('resize', initAOS);
60
61
62// Tab switching function
63function switchTab(select) {
64    const target = select.value;
65    document.querySelector('.tab-pane.active').classList.remove('active', 'show');
66    document.querySelector(target).classList.add('active', 'show');
67    
68    // Sync dropdown with active tab for larger screens
69    const tabs = document.querySelectorAll('.nav-link');

70    tabs.forEach(tab => tab.classList.remove('active'));
71    document.querySelector(`[data-bs-target="${target}"]`).classList.add('active');
72}
73
74// Scroll event for fixed top div
75const fixedTopDiv = document.querySelector('.fixed-top');
76
77window.addEventListener('scroll', () => {
78    // Check if the page has been scrolled 50px or more
79    if (window.scrollY > 50) {
80        fixedTopDiv.classList.add('scrolled');
81    } else {
82        fixedTopDiv.classList.remove('scrolled');
83    }
84});
85
86// Marquee functionality
87const marquee = document.getElementById('marquee');
88
89// Set the initial speed
90let speed = 5; // Speed in seconds
91marquee.style.animationDuration = `${speed}s`;
92
93// Slow down the speed function
94function slowDown() {
95    speed += 1; // Increase speed duration
96    marquee.style.animationDuration = `${speed}s`;
97}
98
99// Event listeners for mouse enter and leave
100marquee.addEventListener('mouseenter', () => {
101    marquee.style.animationPlayState = 'paused'; // Pause on hover
102});
103
104marquee.addEventListener('mouseleave', () => {
105    marquee.style.animationPlayState = 'running'; // Resume on mouse leave
106    slowDown(); // Slow down the speed
107});
108
109// URL hash handling
110document.addEventListener("DOMContentLoaded", function () {
111    const hash = window.location.hash;
112
113    if (hash) {
114        // Split the hash by "/" to get primary and secondary tabs
115        const [primaryTabId, secondaryTabId] = hash.substring(1).split("/");
116
117        // Activate the primary tab if it exists
118        const primaryTabButton = document.querySelector(`button[data-bs-target="#${primaryTabId}"]`);
119        if (primaryTabButton) {
120            const primaryTab = new bootstrap.Tab(primaryTabButton);
121            primaryTab.show();
122
123            // Activate the secondary tab if it exists
124            if (secondaryTabId) {
125                const secondaryTabButton = document.querySelector(`#${primaryTabId} .nav-link[data-bs-target="#${secondaryTabId}"]`);
126                if (secondaryTabButton) {
127                    const secondaryTab = new bootstrap.Tab(secondaryTabButton);
128                    secondaryTab.show();
129                }
130            }
131        }
132    }
133
134    // Optional: Update URL when switching tabs
135    document.querySelectorAll('#services-tab-list .nav-link, #passport-submenu-tab-list .nav-link, #aoid-secondary-tabs .nav-link').forEach(tabLink => {
136        tabLink.addEventListener('shown.bs.tab', function () {
137            const primaryTarget = document.querySelector('#services-tab-list .nav-link.active').getAttribute('data-bs-target').substring(1);
138            const secondaryTarget = document.querySelector(`#${primaryTarget} .nav-pills .nav-link.active`).getAttribute('data-bs-target').substring(1);
139            history.replaceState(null, null, `#${primaryTarget}/${secondaryTarget}`);
140        });
141    });
142});
143
144
145// jump to script from other pages.