https://xn--80adin4afegem8c.xn--p1ai/local/templates/pochta/assets/js/script.js

1window.addEventListener('DOMContentLoaded', function () {
2	const body = document.querySelector('body');
3	const overlay = document.querySelector('.overlay');
4
5
6	//выпадающий список городов
7	const cityDropdownBtn = document.querySelectorAll('.header__city-dropdown-btn');
8	const cityDropdownList = document.querySelectorAll('.header__city-dropdown-list');
9
10	cityDropdownBtn.forEach(function (btn) {
11		btn.addEventListener('click', function (event) {
12			event.stopPropagation();
13			cityDropdownList.forEach(function (dropdown) {
14				dropdown.classList.toggle('_show');
15			});
16		});
17	});
18
19	body.addEventListener('click', function () {
20		cityDropdownList.forEach(function (dropdown) {
21			dropdown.classList.remove('_show');
22		});
23	});
24
25
26	//выпадающий список в меню
27	const menuDropdownList = document.querySelectorAll('.header__dropdown');
28	const menuDropdownItem = document.querySelectorAll('.header__menu-item-dropdown');
29
30	menuDropdownItem.forEach(function (menuItem) {
31		menuItem.addEventListener('mouseenter', function () {
32			menuDropdownList.forEach(function (dropdown) {
33				dropdown.style.display = 'block';
34			});
35		});
36		menuItem.addEventListener('mouseleave', function () {
37			menuDropdownList.forEach(function (dropdown) {
38				dropdown.style.display = 'none';
39			});
40		});
41	});
42
43	menuDropdownList.forEach(function (dropdown) {
44		dropdown.addEventListener('mouseenter', function () {
45			dropdown.style.display = 'block';
46		});
47		dropdown.addEventListener('mouseleave', function () {
48			dropdown.style.display = 'none';
49		});
50	});
51
52
53	//фиксированная шапка для десктопа
54	const fixedHeader = document.querySelector('.header._fixed');
55	const mobHeader = document.querySelector('.header._mob');
56	const fixedMailTop = document.querySelector('.mails-header');
57
58	if (window.innerWidth > 768) {
59		window.addEventListener('scroll', function () {
60			if (window.scrollY > 285) {
61				fixedHeader.classList.remove('d-none');
62				fixedHeader.classList.add('_animation');
63				if (fixedMailTop) {
64					fixedMailTop.classList.add('fixed__mail');
65				}
66			} else {
67				fixedHeader.classList.add('d-none');
68				fixedHeader.classList.remove('_animation');
69				if (fixedMailTop) {
70					fixedMailTop.classList.remove('fixed__mail');
71				}
72			}
73		});
74	} else {
75		window.addEventListener('scroll', function () {
76			if (window.scrollY > 53) {
77				mobHeader.classList.add('position-fixed');
78				mobHeader.classList.add('_animation');
79				fixedMailTop.classList.add('position-fixed');
80				fixedMailTop.classList.add('_animation');
81			} else {
82				mobHeader.classList.remove('position-fixed');
83				mobHeader.classList.remove('_animation');
84				fixedMailTop.classList.remove('position-fixed');
85				fixedMailTop.classList.remove('_animation');
86			}
87		});
88	}
89
90
91	//переключение иконки меню
92	const menuBtn = document.querySelector('.header__menu-btn');
93
94	menuBtn.addEventListener('click', function () {
95		menuBtn.querySelector('img:nth-child(1)').classList.toggle('d-none');
96		menuBtn.querySelector('img:nth-child(2)').classList.toggle('d-none');
97	});
98
99
100	//клик на кнопку личного кабинета
101	const accountBtn = document.querySelector('.header._mob .header__account-btn');
102	accountBtn.addEventListener('click', function () {
103		accountBtn.classList.add('_pressed');
104	});
105
106
107	//слайдер (нам доверяют)
108	if (document.querySelector('.trust-us__slider .swiper')) {
109		const trustUsSlider01 = new Swiper('.trust-us__slider_one .swiper', {
110			loop: true,
111			spaceBetween: 16,
112			slidesPerView: 5,
113			speed: 6000,
114			autoplay: {
115				delay: 0,
116			},
117			breakpoints: {
118				0: {
119					slidesPerView: 1.8,
120				},
121				768: {
122					slidesPerView: 3.5,
123				},
124				1025: {
125					slidesPerView: 5,
126				},
127			}
128		});
129
130		const trustUsSlider02 = new Swiper('.trust-us__slider_two .swiper', {
131			loop: true,
132			spaceBetween: 16,
133			slidesPerView: 5,
134			speed: 6000,
135			autoplay: {
136				delay: 0,
137				reverseDirection: true,
138			},
139			breakpoints: {
140				0: {
141					slidesPerView: 1.8,
142				},
143				768: {
144					slidesPerView: 3.5,
145				},
146				1025: {
147					slidesPerView: 5,
148				},
149			}
150		});
151	}
152
153
154	//слайдер (может заинтересовать)
155	if (document.querySelector('.services-slider')) {
156		const servicesLinksSlider = new Swiper('.services-slider .swiper', {
157			spaceBetween: 20,
158			slidesPerView: 3.7,
159			breakpoints: {
160				0: {
161					slidesPerView: 1.4,
162				},
163				768: {
164					slidesPerView: 2.6,
165				},
166				1025: {
167					slidesPerView: 3.7,
168				},
169			}
170		});
171	}
172
173
174	//слайдер (другие новости)

175	if (document.querySelector('.news-slider')) {
176		const newsSlider = new Swiper('.news-slider .swiper', {
177			spaceBetween: 16,
178			slidesPerView: 3,
179			navigation: {
180				nextEl: '.news-slider .swiper-button-next',
181				prevEl: '.news-slider .swiper-button-prev',
182			},
183			breakpoints: {
184				0: {
185					slidesPerView: 1.4,
186				},
187				768: {
188					slidesPerView: 2,
189				},
190				1025: {
191					slidesPerView: 3,
192				},
193			}
194		});
195	}
196
197
198	//слайдер (может заинтересовать)
199	if (document.querySelector('.hero .swiper')) {
200		const heroSlider = new Swiper('.hero .swiper', {
201			slidesPerView: 1,
202			speed: 500,
203			autoplay: {
204				delay: 5000,
205			},
206			effect: 'fade',
207			fadeEffect: {
208				crossFade: true
209			},
210			pagination: {
211				el: '.hero .swiper-pagination',
212				type: 'bullets',
213				clickable: true,
214			},
215		});
216	}
217
218	if (window.innerWidth <= 820) {
219	//мобильный попап с услугами
220	const servicesListBtn = document.querySelector('.sidebar__list li._active');
221	const servicesListPopup = document.querySelector('.sidebar__popup');
222
223	if (document.querySelector('.sidebar__list li._active')) {
224		servicesListBtn.addEventListener('click', function () {
225			servicesListPopup.style.display = 'block';
226			overlay.style.display = 'block';
227			servicesListBtn.classList.add('_pressed');
228		});
229		overlay.addEventListener('click', function () {
230			servicesListPopup.style.display = 'none';
231			overlay.style.display = 'none';
232			servicesListBtn.classList.remove('_pressed');
233		});
234	}
235}
236	//выпадающий список с аккаунтами
237	const accountsDropdownBtn = document.querySelector('.header__account-btn._authorized');
238	const accountsDropdown = document.querySelector('.header__dropdown-accounts');
239
240	accountsDropdownBtn.addEventListener('click', function () {
241		accountsDropdown.classList.toggle('_shown');
242	});
243	// accountsDropdown.querySelectorAll('.header__dropdown-accounts-list li p').forEach(function (dropdownItem) {
244	// 	dropdownItem.addEventListener('click', function () {
245	// 		accountsDropdown.classList.remove('_shown');
246	// 	});
247	// });
248
249
250	// очищение полей
251	// [data-form-field] - поля, которым надо добавить функцию очищения
252	// [data-form-field-reset] - кнопка для функции очищения
253	const formFieldWraps = document.querySelectorAll('[data-form-field]');
254
255	formFieldWraps.forEach(function (wrap) {
256		if (wrap.querySelector('input')) {
257			const formField = wrap.querySelector('input');
258			const fieldResetBtn = wrap.querySelector('[data-form-field-reset]');
259
260			formField.addEventListener('input', function () {
261				if (this.value == '') {
262					fieldResetBtn.style.display = 'none';
263				} else {
264					fieldResetBtn.style.display = 'flex';
265				}
266			});
267			fieldResetBtn.addEventListener('click', function (event) {
268				event.preventDefault();
269				fieldResetBtn.style.display = 'none';
270				formField.value = '';
271			});
272		}
273	});
274
275
276	// формы на странице профиля
277	const adminProfFormBlocks = document.querySelectorAll('.admin-profile__form-block');
278
279	adminProfFormBlocks.forEach(function (formBlock) {
280		const formFieldWraps = formBlock.querySelectorAll('label');
281
282		formFieldWraps.forEach(function (fieldWrap) {
283			fieldWrap.addEventListener('click', function (event) {
284				event.stopPropagation();
285
286				const formBtns = formBlock.querySelector('.admin-profile__form-btns');
287
288				formBtns.style.display = 'flex';
289				formBtns.addEventListener('click', function (event) {
290					event.stopPropagation();
291					formBtns.style.display = 'flex';
292				});
293				document.body.addEventListener('click', function () {
294					formBtns.style.display = 'none';
295				});
296			});
297		});
298	});
299
300
301	// поиск на странице с письмами
302	const mailsSearchWrap = document.querySelector('.mails-header__search-wrap');
303	const mailsSearch = document.querySelector('.mails-header__search');
304	const mailsSearchInput = document.querySelector('.mails-header__search-form input');
305	const mailsSearchResetBtn = document.querySelector('.mails-header__search-reset');
306	const mailsDateBtn = document.querySelector('.mails-header__date-btn');
307
308	// инициализация datepicker
309	if (document.querySelector('#datepicker')) {
310		let mailsDatepicker = new Datepicker('#datepicker', {
311			multiple: true
312		});
313	}
314
315	// массив с тегами поиска
316	let mailsSearchTagValues = [];
317
318	// выбор даты
319	if (document.querySelector('.mails-header__date-btn')) {
320		mailsDateBtn.addEventListener('click', function () {
321			let selectedDate = mailsDateBtn.dataset.value;
322			selectedDate = selectedDate.replace(/\//g, '.');
323			mailsSearchInput.value = selectedDate;

324			mailsSearchWrap.classList.add('_focus');
325			
326            
327            mailsDateBtn.classList.toggle('active_btn_mailsDateBtn');
328
329            const svgElement = mailsDateBtn.querySelector('svg');
330            const okTextElement = mailsDateBtn.querySelector('.ok-text');
331
332            if (mailsDateBtn.classList.contains('active_btn_mailsDateBtn')) {
333                svgElement.style.display = 'none';
334                okTextElement.style.display = 'block';
335            } else {
336                svgElement.style.display = 'block';
337                okTextElement.style.display = 'none';
338				$('#js_date_search_items').trigger('click');
339				$('#js_date_search_items_delivery').trigger('click');
340			}
341			
342
343			// document.addEventListener('click', function (event) {
344			// 	const svgElement = mailsDateBtn.querySelector('svg');
345			// 	const okTextElement = mailsDateBtn.querySelector('.ok-text');
346	
347			// 	if (!mailsDateBtn.contains(event.target)) {
348			// 		svgElement.style.display = 'inline';
349			// 		okTextElement.style.display = 'none';
350			// 		mailsDateBtn.classList.remove('active_btn_mailsDateBtn');
351			// 	}
352			// });
353			
354		});
355	}
356
357	// фокус формы ввода
358	if (document.querySelector('.mails-header__search-wrap')) {
359		mailsSearchInput.addEventListener('focus', function () {
360			mailsSearchWrap.classList.add('_focus');
361		});
362		mailsSearchResetBtn.addEventListener('click', function () {
363			mailsSearchWrap.classList.remove('_focus');
364			mailsSearchInput.value = '';
365			searchTagsReset();
366			mailsSearchTagValues = [];
367		});
368	}
369
370	// функции для тегов в форме поиска писем
371	function createTag(label) {
372		const tagWrap = document.createElement('div');
373		const tagTitle = document.createElement('span');
374		const tagDeleteBtn = document.createElement('button');
375
376		tagWrap.classList.add('mails-header__search-tag', 'd-flex', 'align-items-center');
377		tagTitle.innerHTML = label;
378		tagDeleteBtn.setAttribute('data-search-tag', label);
379		tagWrap.append(tagTitle);
380		tagWrap.append(tagDeleteBtn);
381
382		return tagWrap;
383	}
384
385	function searchTagsReset() {
386		document.querySelectorAll('.mails-header__search-tag').forEach(function (tag) {
387			tag.parentElement.removeChild(tag);
388		});
389	}
390
391	function removeSearchTags() {
392		document.querySelectorAll('.mails-header__search-tag').forEach(function (tag) {
393			tag.querySelector('button').addEventListener('click', function () {
394				let currentTag = this.parentElement;
395				let currentTagIndex = mailsSearchTagValues.indexOf(this.dataset.searchTag);
396
397				currentTag.remove();
398				mailsSearchTagValues.splice(currentTagIndex, 1);
399			});
400		});
401	}
402
403	function addSearchTags() {
404		searchTagsReset();
405		mailsSearchTagValues.slice().reverse().forEach(function (value) {
406			const tag = createTag(value);
407			mailsSearch.prepend(tag);
408		});
409		removeSearchTags();
410	}
411
412	if (document.querySelector('.mails-header__search-wrap')) {
413		mailsSearchInput.addEventListener('keyup', function (event) {
414			if (event.key === 'Enter') {
415				// mailsSearchTagValues.push(mailsSearchInput.value);
416				// addSearchTags();
417				// mailsSearchInput.value = '';
418			}
419		});
420	}
421
422
423	// вскрытие писем
424	const mails = document.querySelectorAll('.mails__list-item');
425	const mailCheckboxWraps = document.querySelectorAll('.mails__list-item-selection');
426	const mailCheckboxes = document.querySelectorAll('.mails__list-item-selection input');
427	const mailsOpenBlock = document.querySelector('.mails-header__open-block');
428	const mailsOrderBtn = document.querySelector('.mails-header__delivery-btn.desktop');
429	const mailsOrderBtnMob = document.querySelector('.mails-header__delivery-btn.mob');
430	const mailsCancelBtn = document.querySelector('.mails-header__cancel-btn');
431	const mailsNumEl = document.querySelector('.mails-header__mails-num [data-mails-num]');
432	const mailsOpenSumEl = document.querySelector('.mails-header__open-btn [data-open-mails-sum]');
433	const mailStatusEls = document.querySelectorAll('.mails__list-item-status');
434	let top_fix_btn_check__all_mob = document.querySelector('button.check__all.dark-gray-btn.mob');
435	let check__all_mob_wrapp = document.querySelector('.check__all_mob_wrapp');

436	// mails.forEach(function (mail) {
437	// 	mail.addEventListener('click', function () {
438	// 		const checkboxWrap = this.querySelector('.mails__list-item-selection');
439	// 		const checkbox = this.querySelector('.mails__list-item-selection input');
440	// 		const mailStatusEl = this.querySelector('.mails__list-item-status');
441
442	// 		if (document.querySelector('.mails__list-item-selection input')) {
443	// 			if (checkbox.checked === false) {
444	// 				checkbox.checked = true;
445	// 				checkbox.classList.add('checked');
446	// 				mailsOpenBlock.classList.add('_shown');
447	// 				mailsOrderBtn.style.display = 'none';
448	// 				checkboxWrap.style.display = 'flex';
449	// 				mailStatusEl.style.display = 'flex';
450	// 			} else {
451	// 				checkbox.checked = false;
452	// 				checkbox.classList.remove('checked');
453	// 				checkboxWrap.style.display = 'none';
454	// 				mailStatusEl.style.display = 'none';
455	// 			}
456
457	// 			let checkedCheckboxes = document.querySelectorAll('.mails__list-item-selection input.checked');
458	// 			let checkedCheckboxesNum = checkedCheckboxes.length;
459
460	// 			mailsNumEl.textContent = checkedCheckboxesNum;
461	// 			mailsOpenSumEl.textContent = checkedCheckboxesNum * 100;
462	// 		}
463	// 	});
464	// });
465
466	if (document.querySelector('.mails-header__open-block')) {
467		mailsCancelBtn.addEventListener('click', function () {
468			// Выполняется всегда
469			mailsOpenBlock.classList.remove('_shown');
470			mailsOrderBtn.style.display = 'block';
471			mailCheckboxes.forEach(function (checkbox) {
472				checkbox.checked = false;
473				checkbox.classList.remove('checked');
474			});
475	
476			// Проверка ширины экрана
477			if (window.innerWidth <= 1024) {
478				mailsOpenBlock.classList.remove('_shown');
479				mailsOrderBtn.style.display = 'block';
480				mailCheckboxes.forEach(function (checkbox) {
481					checkbox.checked = false;
482					checkbox.classList.remove('checked');
483				});
484	
485				top_fix_btn_check__all_mob.style.display = 'none';
486				mailsOrderBtnMob.style.display = 'flex';
487				check__all_mob_wrapp.style.display = 'none';
488	
489				// Раскомментируйте следующие строки, если нужно скрывать дополнительные элементы
490				// mailCheckboxWraps.forEach(function (wrap) {
491				//     wrap.style.display = 'none';
492				// });
493				// mailStatusEls.forEach(function (statusEl) {
494				//     statusEl.style.display = 'none';
495				// });
496			}
497		});
498	}
499	
500
501
502	// слайдер на странице письма
503	const mailSingleSliderWrap = document.querySelector('.mail-single-slider');
504	const mailSingleSliderClose = document.querySelector('.mail-single-slider__slide-close-btn');
505	const mailSingleFiles = document.querySelectorAll('.mail-single__file');
506
507	if (document.querySelector('.mail-single__files')) {
508		const mailSingleSlider = new Swiper('.mail-single-slider .swiper', {
509			observer: true,
510			effect: 'fade',
511			fadeEffect: {
512				crossFade: true
513			},
514			navigation: {
515				nextEl: '.swiper-button-next',
516				prevEl: '.swiper-button-prev',
517			},
518		});
519
520		mailSingleFiles.forEach(function (file) {
521			file.addEventListener('click', function () {
522				let currentFileId = this.dataset.mailFileId;
523				openMailSingleSlider(currentFileId);
524			});
525		});
526
527		function openMailSingleSlider(fileId) {
528			mailSingleSlider.slideTo(fileId);
529			mailSingleSliderWrap.style.display = 'block';
530			fixedHeader.style.display = 'none';
531			closeMailSingleSlider();
532		}
533
534		function closeMailSingleSlider() {
535			mailSingleSliderClose.addEventListener('click', function () {
536				mailSingleSliderWrap.style.display = 'none';
537				fixedHeader.style.display = 'block';
538			});
539		}
540	}
541
542
543	// пагинация на странице уведомлений
544	if (document.querySelector('.notifications__pagination')) {
545		const mailSingleSlider = new Swiper('.notifications__pagination .swiper', {
546			slidesPerView: 5,
547			navigation: {
548				nextEl: '.swiper-button-next',
549				prevEl: '.swiper-button-prev',
550			},
551		});
552	}
553
554
555	// функция "отметить все прочитанным" на странице уведомлений
556	const notificMarkAsReadBtn = document.querySelector('.notifications__mark-as-read');
557	const notificationItems = document.querySelectorAll('.notifications__item');
558
559	if (document.querySelector('.notifications__mark-as-read')) {
560		notificMarkAsReadBtn.addEventListener('click', function () {

561			notificationItems.forEach(function (item) {
562				item.classList.remove('_unread');
563			});
564		});
565	}
566
567});
568