https://northbloom.ru/local/templates/nb_s2/js/main.js

1document.addEventListener("DOMContentLoaded", function (){
2	$('.lazy').lazy();
3	const bodyEl = document.body;
4	const bodyAnimate = document.querySelector('.body-animate');
5	if(bodyAnimate)
6		bodyAnimate.classList.add("fade-in");
7	/*====cooki popup remove=====*/
8	const cookiPopup = document.querySelector('.cooki-popup');
9	if(cookiPopup){
10		const cookiCloseButtons = cookiPopup .querySelectorAll('button');
11		for(let btn of cookiCloseButtons){
12			btn.addEventListener('click',()=> {
13				cookiPopup.remove();
14			});
15		}
16	}
17	/*======= header search form======= */
18	const headerEl = document.getElementById('header');
19	const openSearchForm = document.querySelector('#search-btn');
20	const searchFormPopup = document.querySelector('#search-form');
21	const menuToggle = document.querySelector('#menu-toggle');
22	const mobileMenu = document.querySelector('#menu');
23	function hideSerchForm(formBlock){
24		formBlock.classList.remove('active');
25		bodyEl.classList.remove('lock');
26	}
27	function resetActiveMenu(){
28		mobileMenu.classList.remove('active');
29		menuToggle.classList.remove('active');
30	}
31	if(openSearchForm){
32		openSearchForm.addEventListener('click', ()=>{
33			if(searchFormPopup.classList.contains('active')){
34				hideSerchForm(searchFormPopup);
35				if(!window.scrollY >0){
36					/* при закрытии формы поиска, только если не было скролла страницы,  удаляем у header класс active, который делает шапку белой */
37					headerEl.classList.remove('active');
38					console.log(window.scrollY);
39				}
40			}else{
41				resetActiveMenu();
42				searchFormPopup.classList.add('active');
43				bodyEl.classList.add('lock');
44				headerEl.classList.add('active');
45			}
46		});
47		/*====== click for overlay ====*/
48		bodyEl.addEventListener('click', (e)=>{
49			if(!menuToggle.contains(e.target) && !searchFormPopup.contains(e.target) && !openSearchForm.contains(e.target)){
50				if(searchFormPopup.classList.contains('active')){
51					searchFormPopup.classList.remove('active');
52					bodyEl.classList.remove('lock');
53					console.log('line 67');
54				}
55			}
56		});
57	}
58	/*====change header bg for active menu==== */
59	bodyEl.addEventListener('click', (e)=>{
60		if(mobileMenu.classList.contains('active') || searchFormPopup.classList.contains('active')){
61			headerEl.classList.add('active');
62			console.log('line 77');
63		}else{
64			/*удаляем класс acive  у шапки, если страница не скроллилась*/
65			if(window.scrollY == 0){headerEl.classList.remove('active');}
66		}
67	});
68	/*===============MOBILE MENU ==================*/
69	if (menuToggle) {
70		menuToggle.addEventListener('click', ()=> {
71			hideSerchForm(searchFormPopup);
72			if (menuToggle.classList.contains('active')) {
73				resetActiveMenu();
74				bodyEl.classList.remove('lock');
75			} else {
76				menuToggle.classList.add('active');
77				mobileMenu.classList.add('active');
78				bodyEl.classList.add('lock');
79			}
80		});
81		mobileMenu.addEventListener('click', (e)=>{
82			if(e.target == e.currentTarget){
83				mobileMenu.classList.remove('active');
84				menuToggle.classList.remove('active');
85				bodyEl.classList.remove('lock');
86				console.log('line-107');
87				if(window.scrollY == 0){headerEl.classList.remove('active');
88					console.log('line-109');
89				}
90			}
91		});
92		function checkScreenSize() {
93			if (window.innerWidth > 1023) {
94				bodyEl.classList.remove('lock');
95				resetActiveMenu();
96			}
97		}
98		// Проверка размера экрана при загрузке страницы
99		checkScreenSize();
100		// Проверка размера экрана при изменении размера окна
101		window.addEventListener('resize', checkScreenSize);
102	}
103	/*=====CUSTOM SELECT===== */
104	// polyfill for forEach для NodeList
105	if (window.NodeList && !NodeList.prototype.forEach) {
106		NodeList.prototype.forEach = function (callback, thisArg) {
107			thisArg = thisArg || window;
108			for (var i = 0; i < this.length; i++) {
109				callback.call(thisArg, this[i], i, this);
110			}
111		};
112	}
113	document.querySelectorAll('.dropdown').forEach(function (dropDownWrapper) {
114		const dropDownBtn = dropDownWrapper.querySelector('.dropdown__button');
115		const dropDownList = dropDownWrapper.querySelector('.dropdown__list');
116		const dropDownListItems = dropDownList.querySelectorAll('.dropdown__list-item');
117		const dropDownInput = dropDownWrapper.querySelector('.dropdown__input-hidden');
118		// Клик по кнопке. Открыть/Закрыть select
119		dropDownBtn.addEventListener('click', function (e) {
120			dropDownList.classList.toggle('dropdown__list--visible');
121			this.classList.toggle('dropdown__button--active');
122		});
123		// Выбор элемента списка. Запомнить выбранное значение. Закрыть дропдаун

124		dropDownListItems.forEach(function (listItem) {
125			listItem.addEventListener('click', function (e) {
126				e.stopPropagation();
127				dropDownBtn.innerText = this.innerText;
128				dropDownBtn.focus();
129				dropDownInput.value = this.dataset.value;
130				dropDownList.classList.remove('dropdown__list--visible');
131				dropDownBtn.classList.remove('dropdown__button--active');
132			});
133		});
134		// Клик снаружи дропдауна. Закрыть дропдаун
135		document.addEventListener('click', function (e) {
136			if (e.target !== dropDownBtn) {
137				dropDownBtn.classList.remove('dropdown__button--active');
138				dropDownList.classList.remove('dropdown__list--visible');
139			}
140		});
141		// Нажатие на Tab или Escape. Закрыть дропдаун
142		document.addEventListener('keydown', function (e) {
143			if (e.key === 'Tab' || e.key === 'Escape') {
144				dropDownBtn.classList.remove('dropdown__button--active');
145				dropDownList.classList.remove('dropdown__list--visible');
146			}
147		});
148	});
149	/*====input show-pass ===== */
150	const passInputs = document.querySelectorAll('.form-input--pass');
151	if(passInputs.length > 0){
152		for(let item of passInputs){
153			const passInputsIcon = item.querySelector('.input-icon');
154			const passInputField = item.querySelector('input');
155			passInputsIcon.addEventListener('click', ()=>{
156				if(item.classList.contains('active')){
157					item.classList.remove('active');
158					passInputField.setAttribute('type','password');
159				}else{
160					item.classList.add('active');
161					passInputField.setAttribute('type','text');
162				}
163			})
164		}
165	}
166	const TRANSITION = 1500;
167	var heroSlider = new Swiper(".main-hero-slider", {
168		slidesPerView: 1,
169		speed: TRANSITION,
170		// loop: true,
171		// lazy: true,
172		effect: "fade",
173		allowTouchMove: false, // Disable dragging with mouse or touch
174		on: {
175			slideChangeTransitionStart: function () {
176				var swiperRect = document.querySelector('.swiper-rect');
177				swiperRect.style.display = 'block';
178				if (heroSlider.activeIndex < heroSlider.previousIndex) {
179					swiperRect.style.animation = `slideRectForward ${TRANSITION}ms `;
180				} else {
181					swiperRect.style.animation = `slideRectBackward ${TRANSITION}ms`;
182				}
183				var texts = document.querySelectorAll('.hero-slide__text');
184				texts.forEach(function (text) {
185					text.classList.remove('active');
186				});
187			},
188			slideChangeTransitionEnd: function () {
189				var swiperRect = document.querySelector('.swiper-rect');
190				swiperRect.style.display = 'none';

191				swiperRect.style.animation = 'none';
192				var activeSlide = heroSlider.slides[heroSlider.activeIndex];
193				var activeText = activeSlide.querySelector('.hero-slide__text');
194				if (activeText) {
195					activeText.classList.add('active');
196				}
197			},
198		},
199		pagination: {
200			el: ".main-hero-pagination",
201			clickable: true,
202		},
203		 autoplay: {
204		 	delay: 4500,
205		 	disableOnInteraction: false,
206		 }
207	});
208	const mainSlider = document.querySelector('.main-hero-slider');
209	// Добавить класс active первому слайду при загрузке слайдера
210	if(mainSlider){
211		var initialSlide = heroSlider.slides[heroSlider.activeIndex];
212		var initialText = initialSlide.querySelector('.hero-slide__text');
213		if (initialText) {
214			initialText.classList.add('active');
215		}
216	}
217	/*===single product slider=== */
218	const sliders2 = document.querySelectorAll('.slider2');
219	sliders2.forEach((slider) => {
220		const swiperInstance = new Swiper(slider, {
221			loop: true,
222			speed:1000,
223			pagination: {
224				el: slider.querySelector('.swiper-pagination'),
225				clickable: true,
226			},
227			// autoplay: {
228			// 	delay: 600,
229			// 	disableOnInteraction: false,
230			// },
231		});
232		// Останавливаем автоплей по умолчанию
233		swiperInstance.autoplay.stop();
234		// Запускаем автоплей при наведении
235		slider.addEventListener('mouseenter', () => {
236			//swiperInstance.autoplay.start();
237		});
238		// Останавливаем автоплей, когда курсор покидает область слайдера
239		slider.addEventListener('mouseleave', () => {
240			//swiperInstance.autoplay.stop();
241		});
242	});
243	const sliders = document.querySelectorAll('.slider');
244	sliders.forEach((slider) => {
245		const swiperInstance = new Swiper(slider, {
246			loop: true,
247			speed:1000,
248			pagination: {
249				el: slider.querySelector('.swiper-pagination'),
250				clickable: true,
251			},
252			// autoplay: {
253			// 	delay: 600,
254			// 	disableOnInteraction: false,
255			// },
256		});
257		// Останавливаем автоплей по умолчанию
258		swiperInstance.autoplay.stop();
259		// Запускаем автоплей при наведении
260		slider.addEventListener('mouseenter', () => {
261			//swiperInstance.autoplay.start();
262		});
263		// Останавливаем автоплей, когда курсор покидает область слайдера
264		slider.addEventListener('mouseleave', () => {
265			//swiperInstance.autoplay.stop();
266		});
267	});
268	/********WINDOW SCROLL EVENTS********* */
269	const productPage = document.getElementById('product-page');
270	window.addEventListener('scroll', (e)=>{
271		if(window.scrollY > 0){
272			headerEl.classList.add('active');
273			if(productPage){headerEl.classList.add('header-white-bg');}
274		}else{
275			headerEl.classList.remove('active');
276			if(productPage){headerEl.classList.remove('header-white-bg');}
277		}
278	});
279	//========= fancybox==========
280	$('[data-fancybox]').fancybox({
281		thumbs: {
282			autoStart: true, // автоматически отображать панель с миниатюрами
283			//axis: 'y'  вертикальное расположение
284		},
285	});
286	// Инициализация Fancybox с начальной настройкой axis: 'y'
287	$.fancybox.defaults.thumbs.axis = 'y';
288	// Функция для обновления настройки axis в зависимости от ширины экрана
289	function updateFancyboxAxis() {
290		if (window.innerWidth < 768) {
291			$.fancybox.defaults.thumbs.axis = 'x';
292		} else {
293			$.fancybox.defaults.thumbs.axis = 'y';
294		}
295	}
296	// Вызываем функцию при загрузке страницы
297	updateFancyboxAxis();
298	// Добавляем обработчик события изменения размера окна
299	window.addEventListener('resize', updateFancyboxAxis);
300	//======= modal wrapper ========
301	const modals = document.querySelectorAll('.modal-wrapper');
302	if(modals.length > 0){
303		const modalOpenButtons = document.querySelectorAll('[data-target]');
304		const modalCloseButtons = document.querySelectorAll('[data-role]');
305		for(let item of modalOpenButtons){
306			item.addEventListener('click', (e)=>{
307				const itemDataValue = item.getAttribute('data-target');
308				for(let modalItem of modals ){
309					const modalItemData = modalItem.getAttribute('data-modal');
310					if(modalItemData == itemDataValue){
311						modalItem.classList.add('active');
312						bodyEl.classList.add('lock');
313					}
314				}
315			});
316		}
317		for(let modalClose of modalCloseButtons){
318			modalClose.addEventListener('click', (e)=>{
319				modalClose.closest('.modal-wrapper').classList.remove('active');
320				bodyEl.classList.remove('lock');
321			});
322		}
323		for(let modal of modals){
324			modal.addEventListener('click', (e)=>{
325				if(e.target == e.currentTarget){
326					modal.classList.remove('active');
327					bodyEl.classList.remove('lock');
328				}
329			});
330		}
331	}
332	;(function ($, window, document, undefined) {
333		"use strict";
334		var pluginName = 'simpleAccordion',
335			defaults = {
336				multiple: false,
337				speedOpen: 300,
338				speedClose: 150,
339				easingOpen: null,
340				easingClose: null,
341				headClass: 'accordion-header',
342				bodyClass: 'accordion-body',

343				openClass: 'open',
344				defaultOpenClass: 'default-open',
345				cbClose: null, //function (e, $this) {},
346				cbOpen: null //function (e, $this) {}
347			};
348		function Accordion(element, options) {
349			this.$el = $(element);
350			this.options = $.extend({}, defaults, options);
351			this._defaults = defaults;
352			this._name = pluginName;
353			if (typeof this.$el.data('multiple') !== 'undefined') {
354				this.options.multiple = this.$el.data('multiple');
355			} else {
356				this.options.multiple = this._defaults.multiple;
357			}
358			this.init();
359		}
360		Accordion.prototype = {
361			init: function () {
362				var o = this.options,
363					$headings = this.$el.children('.' + o.headClass);
364				$headings.on('click', {_t:this}, this.headingClick);
365				$headings.filter('.' + o.defaultOpenClass).first().click();
366			},
367			headingClick: function (e) {
368				var $this = $(this),
369					_t = e.data._t,
370					o = _t.options,
371					$headings = _t.$el.children('.' + o.headClass),
372					$currentOpen = $headings.filter('.' + o.openClass);
373				if (!$this.hasClass(o.openClass)) {
374					if ($currentOpen.length && o.multiple === false) {
375						$currentOpen.removeClass(o.openClass).next('.' + o.bodyClass).slideUp(o.speedClose, o.easingClose, function () {
376							if ($.isFunction(o.cbClose)) {
377								o.cbClose(e, $currentOpen);
378							}
379							$this.addClass(o.openClass).next('.' + o.bodyClass).slideDown(o.speedOpen, o.easingOpen, function () {
380								if ($.isFunction(o.cbOpen)) {
381									o.cbOpen(e, $this);
382								}
383							});
384						});
385					} else {
386						$this.addClass(o.openClass).next('.' + o.bodyClass).slideDown(o.speedOpen, o.easingOpen, function () {
387							$this.removeClass(o.defaultOpenClass);
388							if ($.isFunction(o.cbOpen)) {
389								o.cbOpen(e, $this);
390							}
391						});
392					}
393				} else {
394					$this.removeClass(o.openClass).next('.' + o.bodyClass).slideUp(o.speedClose, o.easingClose, function () {
395						if ($.isFunction(o.cbClose)) {
396							o.cbClose(e, $this);
397						}
398					});
399				}
400			}
401		};
402		$.fn[pluginName] = function (options) {
403			return this.each(function () {
404				if (!$.data(this, 'plugin_' + pluginName)) {
405					$.data(this, 'plugin_' + pluginName,
406						new Accordion(this, options));
407				}
408			});
409		};
410	}(jQuery, window, document));
411	$(function() {
412		$('.accordion-group').simpleAccordion({
413			cbClose: function(e, $header) {
414				var video = $header.next('.accordion-body').find('.video')[0];
415				if (video && !video.paused) {
416					video.pause();
417					$(video).parent().removeClass('active');
418				}
419			}
420		});
421	});
422	document.querySelectorAll('.btn-play-wrapper').forEach(button => {
423		button.addEventListener('click', function() {
424			var videoWrapper = this.closest('.video-wrapper');
425			var video = videoWrapper.querySelector('.video');
426			var poster = videoWrapper.querySelector('.video-poster');
427			if (video.paused) {
428				video.play();
429				videoWrapper.classList.add('active');
430				poster.style.display = 'none';
431			} else {
432				video.pause();
433				videoWrapper.classList.remove('active');
434			}
435		});
436	});
437	document.querySelectorAll('.video').forEach(video => {
438		video.addEventListener('click', function() {
439			var poster = this.parentElement.querySelector('.video-poster');
440			if (this.paused) {
441				this.play();
442				this.parentElement.classList.add('active');
443				poster.style.display = 'none';
444			} else {
445				this.pause();
446				this.parentElement.classList.remove('active');
447			}
448		});
449		video.addEventListener('ended', function() {
450			var poster = this.parentElement.querySelector('.video-poster');
451			this.parentElement.classList.remove('active');
452			poster.style.display = 'block';
453		});
454	});
455	// ======custom input type file ====
456	const fileInput = document.getElementById('file-input');
457	const fileLabel = document.querySelector('.file-label');
458	if(fileInput){
459		fileInput.addEventListener('change', function() {
460			const fileName = fileInput.files[0]?.name || 'Прикрепить файл';
461			fileLabel.querySelector('.file-text').textContent = fileName;
462		});
463	}

464	/* toggle active class стр Магазины переключатель отображения */
465	function toggleActiveClass(parentClass, childClass) {
466		const parents = document.querySelectorAll('.' + parentClass);
467		parents.forEach(parent => {
468			parent.addEventListener('click', function(e) {
469				if (e.target.classList.contains(childClass)) {
470					parent.querySelectorAll('.' + childClass).forEach(child => {
471						child.classList.remove('active');
472					});
473					e.target.classList.add('active');
474				}
475			});
476		});
477	}
478	toggleActiveClass('toggle-group', 'toggle-item');
479	/* Отображать карту или таблицы по клику на кнопки переключения */
480	const storiesDisplayToggle = document.querySelectorAll('[data-display]');
481	if(storiesDisplayToggle.length >0){
482		const storiesDisplayContent = document.querySelectorAll('[data-content]');
483		storiesDisplayToggle[0].addEventListener('click',()=>{
484			console.log('444');
485			storiesDisplayContent[0].classList.add('active');
486			storiesDisplayContent[1].classList.remove('active');
487		});
488		storiesDisplayToggle[1].addEventListener('click',()=>{
489			storiesDisplayContent[0].classList.remove('active');
490			storiesDisplayContent[1].classList.add('active');
491		});
492	}
493});