https://stopru.in.ua/js/scripts.js

1/* Description: Custom JS file */
2
3/* Navigation */
4// Collapse the navbar by adding the top-nav-collapse class
5window.onscroll = function () {
6	scrollFunction();
7	scrollFunctionBTT(); // back to top button
8};
9
10window.onload = function () {
11	scrollFunction();
12};
13
14function scrollFunction() {
15	if (document.documentElement.scrollTop > 30) {
16		document.getElementById("navbarExample").classList.add("top-nav-collapse");
17	} else if ( document.documentElement.scrollTop < 30 ) {
18		document.getElementById("navbarExample").classList.remove("top-nav-collapse");
19	}
20}
21
22// Navbar on mobile
23let elements = document.querySelectorAll(".navbar-nav .nav-link:not(.dropdown-toggle)");
24
25for (let i = 0; i < elements.length; i++) {
26	elements[i].addEventListener("click", () => {
27		document.querySelector(".offcanvas-collapse").classList.toggle("open");
28	});
29}
30
31document.querySelector(".navbar-toggler").addEventListener("click", () => {
32  	document.querySelector(".offcanvas-collapse").classList.toggle("open");
33});
34
35// Hover on desktop
36function toggleDropdown(e) {
37	const _d = e.target.closest(".dropdown");
38	let _m = document.querySelector(".dropdown-menu", _d);
39
40	setTimeout(
41		function () {
42		const shouldOpen = _d.matches(":hover");
43		_m.classList.toggle("show", shouldOpen);
44		_d.classList.toggle("show", shouldOpen);
45
46		_d.setAttribute("aria-expanded", shouldOpen);
47		},
48		e.type === "mouseleave" ? 300 : 0
49	);
50}
51
52// On hover
53const dropdownCheck = document.querySelector('.dropdown');
54
55if (dropdownCheck !== null) { 
56	document.querySelector(".dropdown").addEventListener("mouseleave", toggleDropdown);
57	document.querySelector(".dropdown").addEventListener("mouseover", toggleDropdown);
58
59	// On click
60	document.querySelector(".dropdown").addEventListener("click", (e) => {
61		const _d = e.target.closest(".dropdown");
62		let _m = document.querySelector(".dropdown-menu", _d);
63		if (_d.classList.contains("show")) {
64			_m.classList.remove("show");
65			_d.classList.remove("show");
66		} else {
67			_m.classList.add("show");
68			_d.classList.add("show");
69		}
70	});
71}
72
73
74/* Image Slider - Swiper */
75var imageSlider = new Swiper('.image-slider', {
76	autoplay: {
77		delay: 2000,
78		disableOnInteraction: false
79	},
80	loop: true,
81	spaceBetween: 30,
82	slidesPerView: 5,
83	breakpoints: {
84		// when window is <= 575px
85		575: {
86			slidesPerView: 1,
87			spaceBetween: 10
88		},
89		// when window is <= 767px
90		767: {
91			slidesPerView: 2,
92			spaceBetween: 20
93		},
94		// when window is <= 991px
95		991: {
96			slidesPerView: 3,
97			spaceBetween: 20
98		},
99		// when window is <= 1199px
100		1199: {
101			slidesPerView: 4,
102			spaceBetween: 20
103		},
104
105	}
106});
107
108
109/* Text Slider - Swiper */
110var textSlider = new Swiper('.text-slider', {
111	autoplay: {
112		delay: 6000,
113		disableOnInteraction: false
114	},
115	loop: true,
116	navigation: {
117		nextEl: '.swiper-button-next',
118		prevEl: '.swiper-button-prev'
119	}
120});
121
122
123/* Video Modal */
124var videoBtn = document.querySelector('.video-btn')
125var videoModal = document.getElementById('videoModal')
126var video = document.getElementById('video')
127var videoSrc
128
129var checkVideoSrc = document.querySelector('.video-btn');
130if (checkVideoSrc !== null) { 
131	videoBtn.addEventListener('click',function(e){
132		videoSrc = videoBtn.getAttribute('data-bs-src')
133	})
134}
135
136var checkVideoModal = document.getElementById('videoModal');
137if (checkVideoModal !== null) { 
138	videoModal.addEventListener('shown.bs.modal',(e)=>{
139		video.setAttribute('src', videoSrc + '?autoplay=1&amp;modestbranding=1&amp;showinfo=0')
140	})
141
142	videoModal.addEventListener('hide.bs.modal',(e)=>{
143		video.setAttribute('src', videoSrc)
144	})
145}
146
147
148/* Back To Top Button */
149// Get the button
150myButton = document.getElementById("myBtn");
151
152// When the user scrolls down 20px from the top of the document, show the button
153function scrollFunctionBTT() {
154	if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
155		myButton.style.display = "block";
156	} else {
157		myButton.style.display = "none";
158	}
159}
160
161// When the user clicks on the button, scroll to the top of the document

162function topFunction() {
163	document.body.scrollTop = 0; // for Safari
164	document.documentElement.scrollTop = 0; // for Chrome, Firefox, IE and Opera
165}