https://bakuinform.az/js/app.js

1/**
2 * @author Novruz Rahimov
3 * @email [email protected]
4 * @create date 2023-10-09 22:41:19
5 * @modify date 2023-10-10 00:02:35
6 */
7
8if (typeof Fancybox !== "undefined") {
9	Fancybox.bind("[data-fancybox]", { Thumbs: { type: "classic" } });
10}
11
12if (typeof Swiper !== 'undefined') {
13	new Swiper("#index-hero-slider", {
14		loop: true,
15		autoplay: {
16			disableOnInteraction: false,
17			pauseOnMouseEnter: true,
18			delay: 3000,
19		},
20		// autoHeight: true,
21		watchSlidesProgress: true,
22		// modules: [Pagination],
23		slidesPerView: 1,
24		navigation: {
25			nextEl: '.swiper-button-next',
26			prevEl: '.swiper-button-prev',
27		},
28		pagination: {
29			el: '.swiper-pagination',
30			clickable: true
31		},
32	});
33
34	new Swiper("#news-page-slider", {
35		loop: true,
36		autoplay: {
37			disableOnInteraction: false,
38			pauseOnMouseEnter: true,
39			delay: 2000,
40		},
41		autoHeight: true,
42		watchSlidesProgress: true,
43		// modules: [Pagination],
44		slidesPerView: 1,
45		navigation: {
46			nextEl: '.swiper-button-next',
47			prevEl: '.swiper-button-prev',
48		},
49		pagination: {
50			el: '.swiper-pagination',
51			clickable: true
52		},
53	});
54}
55
56let p = new URLSearchParams(location.search)
57const calendar = typeof VanillaCalendar !== 'undefined' && new VanillaCalendar('#calendar', {
58	// input: true,
59	settings: {
60		selected: {
61			dates: (new URLSearchParams(location.search)).get('date') ? [(new URLSearchParams(location.search)).get('date')] : null,
62		},
63		visibility: {
64			theme: 'light',
65		},
66		range: {
67			max: (new Date()).toISOString().split('T')[0]
68		},
69		
70	},
71	actions: {
72		clickDay(event, dates) {
73			calendar.HTMLElement.classList.remove(calendar.CSSClasses.calendarHidden);
74			location.search = "?date=" + encodeURIComponent(dates[0]);
75		},
76	},
77});
78
79document.body.addEventListener('click', e => {
80	if (e.target.closest('.vanilla-calendar')) return e.preventDefault();
81	if (e.target.closest('.index-hero-news-head-icon')) {
82		if (document.querySelector('.vanilla-calendar')) calendar.HTMLElement.classList.toggle(calendar.CSSClasses.calendarHidden);
83		else calendar.init();
84	} else if (document.querySelector('.vanilla-calendar')) calendar.HTMLElement.classList.add(calendar.CSSClasses.calendarHidden);
85}, true)
86
87// document.querySelector('.vanilla-calendar').addEventListener('click', e => e.preventDefault());
88document.querySelector('.header-mob-burger-icon').addEventListener('click', (e) => e.currentTarget.closest('header').classList.toggle('active'));
89
90document.querySelectorAll('.nav-mob .header-right-icon').forEach(el => el.addEventListener('click', e => e.currentTarget.closest('header.active').classList.remove('active')));
91
92
93class CustomScrollBar extends HTMLElement {
94	constructor() {
95		super();
96	}
97
98	connectedCallback() {
99		this.attachShadow({ mode: "open" });
100
101		this.trackColor = this.dataset.trackColor || "#f2f2f2";
102		this.trackWidth = this.dataset.trackWidth || "6px";
103		this.thumbColor = this.dataset.thumbColor || "#c1c1c1";
104		this.targetEl = document.querySelector(`${this.dataset.target}`);
105
106		const style = document.createElement("style");
107		style.textContent = `
108		.custom-scrollbar {

109			width: 6px;
110			height: 100%;
111			position: absolute;
112			top: 0;
113			right: 0;
114			z-index: 99;
115			height: 803px;
116		}
117
118		.custom-scrollbar__track {
119			width: 100%;
120			height: 100%;
121			background-color: var(--border-color);
122			position: sticky;
123			top: 0;
124			height: 579px;
125		}
126
127		.custom-scrollbar__thumb {
128			width: 100%;
129			background-color: var(--border-secondary-color);
130			border-radius: 8px;
131			position: absolute;
132			top: 0;
133		}
134
135		.custom-scrollbar__thumb::hover {
136			background-color: red;
137		}`;
138
139		this.shadowRoot.appendChild(style);
140
141		// add css to document head
142		if (!this.targetEl) {
143			console.warn(`CustomScrollBar: target element not found`, this, this.dataset.target);
144			return;
145		}
146
147		const observer = new IntersectionObserver((entries) => {
148			entries.forEach((entry) => {
149				if (entry.isIntersecting) {
150					this.setTargetElCSS();
151					this.setScrollThumbHeight();
152				}
153			});
154		});
155
156		observer.observe(this.targetEl);
157
158		this.shadowRoot.innerHTML += `<div class="custom-scrollbar m-visible"><div class="custom-scrollbar__track"><div class="custom-scrollbar__thumb"></div></div></div>`;
159
160		this.targetEl.addEventListener("scroll", () => this.moveScrollThumb());
161	}
162
163	moveScrollThumb() {
164		// this.shadowRoot.querySelector(".custom-scrollbar").style.top = `${this.targetEl.scrollTop}px`;
165		const scrollBarThumb = this.shadowRoot.querySelector(".custom-scrollbar__thumb");
166		const scrollBarTrackHeight = this.shadowRoot.querySelector(".custom-scrollbar__track").offsetHeight;
167		const scrollThumbTop = (this.targetEl.scrollTop / this.targetEl.scrollHeight) * scrollBarTrackHeight;
168		scrollBarThumb.style.top = `${scrollThumbTop}px`;
169
170	}
171
172	setTargetElCSS() {
173		this.targetEl.style["-ms-overflow-style"] = "none"; /* Firefox */
174		this.targetEl.style.scrollbarWidth = "none"; /* Firefox */
175	}
176
177	setScrollThumbHeight() {
178		// get the scroll bar element
179		const scrollBarTrack = this.shadowRoot.querySelector('.custom-scrollbar__track');
180		const scrollBarThumb = this.shadowRoot.querySelector('.custom-scrollbar__thumb');
181
182		// get the scroll bar track height
183		const scrollBarTrackHeight = scrollBarTrack.offsetHeight;
184
185		// get the target element height
186		const targetElHeight = this.targetEl.offsetHeight;
187
188		// get the target element scroll height
189		const targetElScrollHeight = this.targetEl.scrollHeight;
190
191		// calculate the scroll thumb height
192		const scrollThumbHeight = (targetElHeight / targetElScrollHeight) * scrollBarTrackHeight;
193
194		// set the scroll thumb height
195		scrollBarThumb.style.height = `${scrollThumbHeight}px`;
196
197		// attach click-drag event on the thumb
198		let isDragging = false;
199		let currentY;
200		scrollBarThumb.addEventListener("mousedown", (e) => {
201			isDragging = true;
202			currentY = e.clientY;
203			// prevent dragging hilights
204			this.preventContentHighlight("remove");
205		});
206		document.addEventListener("mouseup", () => {
207			isDragging = false;
208			// remove prevent dragging highlights
209			this.preventContentHighlight("add");
210		});
211		document.addEventListener("mousemove", (e) => {
212			if (!isDragging) return;
213			const deltaY = e.clientY - currentY;
214			currentY = e.clientY;
215			this.targetEl.scrollTop +=
216				deltaY * (targetElScrollHeight / scrollBarTrackHeight);
217		});
218	}
219
220	// prevent content highlight when dragging the thumb
221	preventContentHighlight(action) {
222		if (action) this.targetEl.classList.add("prevent-scroll");
223		else this.targetEl.classList.add("prevent-scroll");
224	}
225}
226
227customElements.define("custom-scrollbar", CustomScrollBar);
228
229const captchaButton = document.querySelector('.google-recaptcha-button');
230captchaButton && captchaButton.addEventListener('click', (e) => {
231	e.preventDefault();
232
233	const key = captchaButton.dataset.sitekey;
234	if (!key) throw Error('reCaptcha sitekey is missing');
235
236	const form = captchaButton.closest('form')
237	let status = form.checkValidity();
238	if (!status) return form.reportValidity();
239	
240	grecaptcha.ready(function () {
241		grecaptcha.execute(key, { action: 'submit' }).then(function (token) {
242			form.querySelector('#g-recaptcha-response').value = token;
243			form.submit();
244		});
245	});
246})