https://niagara-drinks.ru/local/templates/niagara/scripts/main.js?=v6

1
2$(document).ready(function(){
3  window.onbeforeunload = function () {
4    window.scrollTo(0,0);
5    const pecWrap = document.querySelector('.header-top__bg').scr = "";
6};
7  setTimeout(function(){
8      window.scrollTo(0, 0);
9      document.body.scrollTop = 0;
10      gsap.to(window, {
11        duration: 1,
12        scrollTo: {
13            y: "body"
14        }
15    })
16  }, 1);
17});
18
19function observeScandiBtnVisibility() {
20  const target = document.querySelector('.ozon_btn');
21
22  if (!target) return; // Кнопки пока нет
23
24  const observer = new IntersectionObserver((entries, observer) => {
25    entries.forEach(entry => {
26      if (entry.isIntersecting) {
27        console.log('Кнопка OZON появилась на экране');
28        ym(100462961, 'reachGoal', 'scandi_btns');
29        observer.unobserve(target); // Отписываемся, чтобы сработало один раз
30      }
31    });
32  }, {
33    root: null,           // viewport
34    threshold: 0.5        // 50% кнопки должно быть видно
35  });
36
37  observer.observe(target);
38}
39
40
41
42
43
44
45class News {
46  constructor(news, modal, id) {
47    this.newsData = document.getElementById(news);
48    this.modal = document.getElementById(modal);
49    this.imagesWrap = this.modal.querySelector('.modal__images');
50    this.imagesWrap.innerHTML = "";
51    this.imagesWrap.classList.add('hidden');
52    this.textWrap = this.modal.querySelector('.modal__text');
53    this.textWrap.innerHTML = "";
54    this.currentNews = id;
55    this.mainWrap = this.modal.querySelector('.modal__main');
56    this.mainWrap.innerHTML = "";
57    this.init();
58  }
59
60  getNewsInfo(id) {
61    this.newsId = id;
62    // this.newsList = JSON.parse(this.newsData.innerHTML).news;
63    const newsListObj = JSON.parse(this.newsData.innerHTML).news;
64    this.newsList = Object.keys(newsListObj).map((key) => [key, newsListObj[key]]);
65    for (let i = 0; i < this.newsList.length; i++) {
66      const news = this.newsList[i][1];
67
68      if (news.id == this.newsId) {
69        this.news = news;
70        window.curNews = news;
71      }
72    }
73  }
74
75  constructNewsWindow() {
76    this.constructMainImage();
77    this.constructImages();
78    this.constructText();
79  }
80
81  constructMainImage() {
82    if(this.news.video) {
83      const video = document.createElement('video');
84      video.classList.add('modal__video');
85      video.setAttribute('controls', '');
86      const source = document.createElement('source');
87      source.src = this.news.video;
88      source.setAttribute('type', 'video/mp4');
89      video.appendChild(source);
90      this.mainWrap.appendChild(video);
91    } else {
92      const mainImage = document.createElement('img');
93      mainImage.classList.add('modal__main-image');
94      mainImage.src = this.news.cover;
95      this.mainWrap.appendChild(mainImage);
96    }
97  }
98
99  constructImages() {
100    if(this.news.images) {
101      this.news.images.forEach(image => {
102        const newsImageWrap = document.createElement('a');
103        newsImageWrap.classList.add('modal__image');
104        newsImageWrap.dataset.fslightbox = "gallery";
105        newsImageWrap.setAttribute('href', image);
106
107        const newsImage = document.createElement('img');
108        newsImage.setAttribute('src', image);
109        newsImageWrap.appendChild(newsImage);
110
111        this.imagesWrap.appendChild(newsImageWrap);
112        this.imagesWrap.classList.remove('hidden');
113
114      })
115
116      refreshFsLightbox();
117    }
118
119
120  }
121
122  constructText() {
123    const newsText = document.createElement('div');
124    newsText.innerHTML = this.news.text;
125    this.textWrap.appendChild(newsText);
126  }
127
128  init() {
129    this.getNewsInfo(this.currentNews);
130    this.constructNewsWindow();
131  }
132
133}
134
135
136const newsList = document.querySelectorAll(".news-item");
137
138
139newsList.forEach((item) => {
140  item.addEventListener('click', (e) => {
141    const id = item.dataset.id;
142    const news = new News("news", "modal-news", id);
143  });
144})
145
146
147function preInitImages() {
148  const imgWrapper = document.querySelector('.prodImagesWrapper');
149  const productsJson = document.getElementById('products');

150  const products = JSON.parse(productsJson.innerHTML).products;
151
152  products.forEach(product => {
153    if(product.volumes) {
154      product.volumes.forEach(volume => {
155        if(volume.flavors) {
156
157
158          volume.flavors.forEach(flavor => {
159            if(flavor) {
160            const img = document.createElement("img");
161            const imgSrc = flavor.image;
162            img.src = imgSrc;
163            imgWrapper.appendChild(img);
164
165            const imgFlav = document.createElement("img");
166            const imgFlavSrc = flavor.icon;
167            imgFlav.src = imgFlavSrc;
168            imgWrapper.appendChild(imgFlav);
169
170            }
171          });
172        }
173      });
174    }
175  });
176}
177
178if(!getQueryParam('id')) {
179  console.log('3500 preinit images')
180  // setTimeout(preInitImages, 12000);
181} else {
182  console.log('12000 preinit images')
183  // setTimeout(preInitImages, 22000);
184}
185
186// setTimeout(preInitImages, 2500);
187
188function calculateProductImageSize() {
189  const imgWrapper = document.querySelector('.prodImagesWrapper');
190  const images = imgWrapper.querySelectorAll('img');
191
192  let totalSize = 0; // Variable to store the total size
193
194  // Fetch the image files
195  const fetchPromises = Array.from(images).map(img => {
196    return fetch(img.src)
197        .then(response => {
198          // Get the Content-Length header from the response
199          const size = Number(response.headers.get('Content-Length'));
200          if (!isNaN(size)) {
201            totalSize += size;
202          }
203        })
204        .catch(error => {
205          console.error('Error fetching image:', error);
206        });
207  });
208
209  // Wait for all fetch requests to finish
210  Promise.all(fetchPromises)
211      .then(() => {
212        console.log('Total size of product images: ' + (totalSize / (1024 * 1024)).toFixed(2) + ' Mb');
213      })
214      .catch(error => {
215        console.error('Error calculating total image size:', error);
216      });
217}
218
219if(getQueryParam('calc')) {
220  setTimeout(calculateProductImageSize, 15000);
221}
222
223
224function calculateTotalImageSize() {
225  const images = document.querySelectorAll('img');
226  let totalSize = 0; // Variable to store the total size in bytes
227
228  // Fetch the image files
229  const fetchPromises = Array.from(images).map(img => {
230    return fetch(img.src)
231        .then(response => {
232          // Get the Content-Length header from the response
233          const size = Number(response.headers.get('Content-Length'));
234          if (!isNaN(size)) {
235            totalSize += size;
236          }
237        })
238        .catch(error => {
239          console.error('Error fetching image:', error);
240        });
241  });
242
243  // Wait for all fetch requests to finish
244  Promise.all(fetchPromises)
245      .then(() => {
246        const totalSizeInMB = (totalSize / (1024 * 1024)).toFixed(2); // Convert to MB
247        console.log('Total size of images on the page: ' + totalSizeInMB + ' MB');
248      })
249      .catch(error => {
250        console.error('Error calculating total image size:', error);
251      });
252}
253
254if(getQueryParam('calc')) {
255  setTimeout(calculateTotalImageSize, 15000);
256}
257
258
259
260
261class MapInit {
262  constructor(map, countries) {
263    this.map = document.querySelector(map);
264    this.countries = document.querySelector(countries);
265    this.mapList = document.querySelectorAll('[data-map]');
266    this.countriesList = document.querySelectorAll('[data-country]');
267    this.init()
268  }
269
270  addMapListener() {
271    this.mapList.forEach(el => {
272      el.addEventListener('mouseover', (e) => {
273        e = e.target;
274        this.currentCountry = e.getAttribute('data-map');
275        
276        this.countriesList.forEach(country => {
277          let countryName = country.getAttribute('data-country');
278          if(this.currentCountry == countryName) {
279            country.classList.add('underline');
280
281          }
282        })
283
284      })
285
286      el.addEventListener('mouseleave', (e) => {
287        this.countriesList.forEach(country => {
288            country.classList.remove('underline');
289
290        })
291      })
292
293    })
294  }
295
296  addCountriesListener() {
297    this.countriesList.forEach(el => {
298      el.addEventListener('mouseover', (e) => {
299        e = e.target;
300        this.currentCountryName = e.getAttribute('data-country');
301
302        this.mapList.forEach(country => {
303          let countryMapName = country.getAttribute('data-map');
304          if(this.currentCountryName == countryMapName) {
305            country.classList.add('countryStroke');
306
307          }
308        })
309      })
310
311      el.addEventListener('mouseleave', (e) => {
312        this.mapList.forEach(country => {
313            country.classList.remove('countryStroke');
314
315        })
316      })
317    })
318
319
320  }
321
322
323  init() {
324    this.addCountriesListener();
325    this.addMapListener();
326  }
327}
328
329const mapInstance = new MapInit('#map', '.countries__list');
330
331
332
333
334
335class Products {
336  constructor(products, modal, id) {
337    this.productsData = document.getElementById(products);
338    this.modal = document.getElementById(modal);
339    this.bg = document.querySelector('.product-modal__header');
340    this.productImageWrap = document.querySelector('.prod-display__img');
341    this.productImageWrap.classList.remove('animMain');
342    this.productImage = document.querySelector('.prod-display__img img');
343    this.switchWrap = document.querySelector('.switch-wrap');
344    this.switchWrap.innerHTML = "";
345    this.flavoursChooseDiv = document.querySelector('.flavours__choose');
346    this.flavoursChooseDiv.classList.remove('shortFlavList-4');
347    this.flavoursChooseDiv.classList.remove('shortFlavList-2');
348    this.thirdWindow = document.querySelector('.prod-tiger');
349    this.currentVol = '0';
350    this.currentProd = id;
351    this.subtitleText = document.querySelector('.pm-header__title-sub');
352    this.logoImage = document.querySelector('.pm-header__title-main img');
353    this.pmStarBlock = document.querySelector('.prod-display__star');
354    this.pmStarBlock.classList.add('hidden');
355    this.pmTextWrap = document.querySelector('.pm-star__text');
356    this.pmAdvSection = document.querySelector('.pm-adv');
357    this.advWrap = document.querySelector('.pm-adv__wrapper');
358    this.secondWindow = document.querySelector('.prod-info');
359    this.secondWindow.classList.add('hidden');
360    this.secWindowImgElement = document.querySelector('.prod-info__bg');
361    this.secWindowTextWrap = document.querySelector('.prod-info__text');
362    this.pmDecorBgWrap = document.querySelector('.pm-header__decorbg');
363    this.pmDecorBgWrap.classList.add('hidden');
364    this.pmDecorBg = document.querySelector('.pm-header__decorbg img');
365    this.pmDecorBg.src = '';
366    this.pmPlashkaWrap = document.querySelector('.pm-header__plashka');
367    this.pmPlashkaWrap.classList.add('hidden');
368    this.pmPlashka = document.querySelector('.pm-header__plashka img');
369    this.pmPlashka.src = '';
370    this.templateWrap = document.querySelector('.prod-template');
371    this.templateWrap.innerHTML = "";
372    this.templateWrap.classList.add('hidden');
373    this.socWindow = document.querySelector('.prod-soc');
374    this.socWindow.classList.add('hidden');
375
376    this.bg.classList.remove('pm-sticky');
377    this.pmAdvSection.classList.remove('pm-sticky');
378    this.secondWindow.classList.remove('pm-sticky');
379    this.thirdWindow.classList.remove('pm-sticky');
380    this.templateWrap.classList.remove('pm-sticky');
381    this.init();
382  }
383
384  createProductLine() {
385
386
387    const imgLineWrapper = document.querySelector('.pm-adv__line');
388    imgLineWrapper.innerHTML = "";
389    const imgLineInner = document.createElement('div');
390    imgLineInner.classList.add('pm-adv__inner');
391    imgLineWrapper.appendChild(imgLineInner);
392    imgLineInner.innerHTML = "";
393    const imgLineArr = [];
394    imgLineWrapper.dataset.length = "";
395    imgLineWrapper.classList.remove('hidden');
396
397    if(this.product.noline) {
398      imgLineWrapper.classList.add('hidden');
399    }

400    this.product.volumes.forEach(volume => {
401
402      volume.flavors.forEach(flavor => {
403        flavor.size = volume.size;
404        imgLineArr.push(flavor);
405      });
406    });
407
408
409    imgLineArr.sort(function(a, b) {
410      var nameA = a.name.toLowerCase();
411      var nameB = b.name.toLowerCase();
412
413      if (nameA < nameB) {
414        return -1;
415      } else if (nameA > nameB) {
416        return 1;
417      } else {
418        return 0;
419      }
420    });
421
422    const dividedArrays = {};
423
424    for (const product of imgLineArr) {
425      const name = product.name;
426
427      if (dividedArrays.hasOwnProperty(name)) {
428        dividedArrays[name].push(product);
429      } else {
430        dividedArrays[name] = [product];
431      }
432    }
433
434    const result = Object.values(dividedArrays);
435
436    const preSortArr = [];
437
438
439    result.forEach((arr) =>{
440      const flavGroup = document.createElement('div');
441      flavGroup.classList.add('flavgroup');
442      arr.forEach((flavor) =>{
443        const img = document.createElement("img");
444        const imgSrc = flavor.image;
445        img.src = imgSrc;
446        img.setAttribute("alt", flavor.title);
447        img.setAttribute("title", flavor.title);
448        const size = flavor.size;
449        const floatValueStr = size.replace(/[^0-9,.]/g, "").replace(",", ".");
450        const flavSize = parseFloat(floatValueStr);
451
452
453        if(flavSize < 0.455) {
454          img.classList.add('small');
455        } else if(flavSize < 0.7) {
456          img.classList.add('medium');
457        } else if(flavSize < 1.6) {
458          img.classList.add('big');
459        } else if(flavSize >= 1.6) {
460          img.classList.add('huge');
461        }
462
463        flavGroup.classList.add(flavor.name);
464
465        flavGroup.appendChild(img);
466      });
467      preSortArr.push(flavGroup);
468
469    });
470    // console.log(preSortArr);
471    // console.log(this.product.order);
472    if(this.product.order) {
473      const order = this.product.order;
474
475      const sortedDivs = [];
476      for (var i = 0; i < order.length; i++) {
477        for (var j = 0; j < preSortArr.length; j++) {
478          if (preSortArr[j].classList.contains(order[i])) {
479            sortedDivs.push(preSortArr[j]);
480            break;
481          }
482        }
483      }
484
485      sortedDivs.forEach(div => imgLineInner.appendChild(div));
486    } else {
487      preSortArr.reverse();
488      preSortArr.forEach(div => imgLineInner.appendChild(div));
489    }
490
491    imgLineWrapper.dataset.length = preSortArr.length;
492    imgLineWrapper.dataset.brand = this.product.name;
493    imgLineInner.style.width = imgLineWrapper.dataset.length * 10 + "%";
494
495  }
496
497
498  createSoc() {
499
500    const socText = document.querySelector('.prod-soc__text');
501    const socLinks = document.querySelectorAll('.prod-links__link');
502    socLinks.forEach(socLink => {socLink.classList.add('hidden')});
503    const socImages = document.querySelector('.prod-soc__images');
504    socImages.innerHTML = "";
505    if(this.product.soc) {
506
507      this.socWindow.classList.remove('hidden');
508
509      // icons init
510      if(this.product.soc.links) {
511        this.product.soc.links.forEach(link => {
512          socLinks.forEach(image => {
513            if(link.site == image.dataset.soc) {
514              image.classList.remove('hidden');
515              image.setAttribute('href', link.link);
516            }
517          })
518        });
519      }
520
521      if(this.product.soc.text) {
522        socText.innerHTML = this.product.soc.text;
523      }
524
525      if(this.product.soc.images) {
526        this.product.soc.images.forEach(image=>{
527          const socImage = document.createElement('img');
528          socImage.src = image;
529          socImages.appendChild(socImage);
530        })
531      }
532
533    }
534  }
535
536  hidePanels() {
537    var id = '.pm-adv,.prod-info,.prod-template';
538    var elements = document.querySelectorAll(id);
539
540    elements.forEach(el=>{
541      el.classList.add('inv');
542
543      setTimeout(()=>{el.classList.remove('inv')}, 500);
544    })
545  }
546
547
548  getCurrentVol() {
549    if(this.product.initVol) {
550      let currentVol = this.product.initVol;
551      if(currentVol == "2") {
552        this.currentVol = '1';
553
554      } else if(currentVol == "1") {
555        this.currentVol = '0';
556      } else if(currentVol == "3") {
557        this.currentVol = '2';
558
559      }
560    }
561  }
562
563
564  onePunchProd() {
565
566    window.removeEventListener('scroll', scrollListenerHalfAdv);
567    window.removeEventListener('scroll', scrollListenerHalfSecondWindow);
568    window.removeEventListener('scroll', scrollListenerHalfTemplate);
569    window.removeEventListener('scroll', scrollListenerHalfTiger);
570
571    setTimeout(function() {
572      window.addEventListener('scroll', scrollListenerHalfAdv);
573      window.addEventListener('scroll', scrollListenerHalfSecondWindow);
574      window.addEventListener('scroll', scrollListenerHalfTemplate);
575      window.addEventListener('scroll', scrollListenerHalfTiger);
576    }, 500)
577
578
579
580    function scrollListenerHalfAdv() {
581      const pmAdv = document.querySelector('.pm-adv');
582      const rect = document.querySelector('.pm-adv').getBoundingClientRect();
583      if(rect.top < (window.innerHeight || document.documentElement.clientHeight) / 1.5) {
584        const topPos = document.documentElement.scrollTop + window.innerHeight/1;
585        if(!pmAdv.classList.contains('scrolled')) {
586
587          gsap.to(window, {
588            duration: 1,
589            scrollTo: topPos
590          })
591
592
593          pmAdv.classList.add('scrolled');
594        }
595      } else {
596        pmAdv.classList.remove('scrolled');
597      }
598    }
599
600
601    function scrollListenerHalfSecondWindow() {
602      const pmInfo = document.querySelector('.prod-info');
603      const rect = document.querySelector('.prod-info').getBoundingClientRect();
604      if(rect.top < (window.innerHeight || document.documentElement.clientHeight) / 3) {
605        const topPos = document.documentElement.scrollTop + window.innerHeight/1;
606        if(!pmInfo.classList.contains('scrolled')) {
607
608          gsap.to(window, {
609            duration: 1,
610            scrollTo: topPos
611          })
612
613
614          pmInfo.classList.add('scrolled');
615        }
616      } else {
617        pmInfo.classList.remove('scrolled');
618      }
619    }
620
621    function scrollListenerHalfTemplate() {
622      const pmTemplate = document.querySelector('.prod-template');
623      const rect = document.querySelector('.prod-template').getBoundingClientRect();
624      if(rect.top < (window.innerHeight || document.documentElement.clientHeight) / 2) {
625        const topPos = document.documentElement.scrollTop + window.innerHeight/1;
626        if(!pmTemplate.classList.contains('scrolled')) {
627
628          gsap.to(window, {
629            duration: 1,
630            scrollTo: topPos
631          })
632
633
634          pmTemplate.classList.add('scrolled');
635        }
636      } else {
637        pmTemplate.classList.remove('scrolled');
638      }
639    }
640
641    function scrollListenerHalfTiger() {
642      const pmTiger = document.querySelector('.prod-tiger');
643      const rect = document.querySelector('.prod-tiger').getBoundingClientRect();
644      if(rect.top < (window.innerHeight || document.documentElement.clientHeight) / 2.2) {
645        const topPos = document.documentElement.scrollTop + window.innerHeight/1;
646        if(!pmTiger.classList.contains('scrolled')) {
647
648          gsap.to(window, {
649            duration: 1,
650            scrollTo: topPos
651          })
652
653
654          pmTiger.classList.add('scrolled');
655        }
656      } else {
657        pmTiger.classList.remove('scrolled');
658      }
659    }
660  }
661
662
663  scrollFix() {
664    var id = '.product-modal__header,.pm-adv,.prod-info,.prod-template,.prod-soc';
665    var elements = document.querySelectorAll(id);
666    var windowHeight = window.innerHeight;
667    const visElements = [];
668

669    elements.forEach(el=>{
670      if(!el.classList.contains('hidden')) {
671        visElements.push(el);
672      }
673    })
674    const lastVisEl = visElements[visElements.length - 1];
675    setTimeout(() => {
676      const lastVisElHeight = lastVisEl.getBoundingClientRect().height
677      const paddingBottomModal = windowHeight - lastVisElHeight;
678
679      if(paddingBottomModal > 0) {
680        this.modal.style.paddingBottom = paddingBottomModal + 'px';
681      }
682    }, 700)
683
684
685    window.addEventListener('resize', function() {
686      const prodModalResized = document.getElementById('modal-prod');
687      var windowHeight = window.innerHeight;
688      const visElements = [];
689
690      elements.forEach(el=>{
691        if(!el.classList.contains('hidden')) {
692          visElements.push(el);
693        }
694      })
695      const lastVisEl = visElements[visElements.length - 1];
696      const lastVisElHeight = lastVisEl.getBoundingClientRect().height
697      const paddingBottomModal = windowHeight - lastVisElHeight;
698
699      if(paddingBottomModal > 0) {
700        prodModalResized.style.paddingBottom = paddingBottomModal + 'px';
701      }
702    });
703
704    elements.forEach(function(element) {
705      var elementHeight = element.offsetHeight;
706      var topPosition = windowHeight - elementHeight;
707
708    // Не помню зачем это нужно было, но из за этого первый экран модалки при открытии окна по ссылке прилипал к верху, пока закомментил
709      if (topPosition < 0) {
710        // element.style.top = topPosition + 'px';
711      } else {
712        element.style.top = '0';
713      }
714    });
715
716    window.addEventListener('resize', function() {
717      var elements = document.querySelectorAll(id);
718      var windowHeight = window.innerHeight;
719
720      elements.forEach(function(element) {
721        var elementHeight = element.offsetHeight;
722        var topPosition = windowHeight - elementHeight;
723
724        // if (element.classList.contains('history')) {
725        //   topPosition = (windowHeight / 2) - elementHeight;
726        // }
727
728        if (topPosition < 0) {
729          element.style.top = topPosition + 'px';
730        } else {
731          element.style.top = '0';
732        }
733      });
734    });
735  }
736
737  initSticky() {
738    window.addEventListener('scroll', ()=>{
739      if(this.modal.classList.contains('opened-modal')) {
740        setTimeout(()=>{
741          this.bg.classList.add('pm-sticky');
742          this.pmAdvSection.classList.add('pm-sticky');
743          this.secondWindow.classList.add('pm-sticky');
744          this.thirdWindow.classList.add('pm-sticky');
745          this.templateWrap.classList.add('pm-sticky');
746          window.dispatchEvent(new Event('resize'));
747        }, 0  );
748      }
749    });
750
751
752  }
753
754  posWindow() {
755    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
756    const topDistance = scrollTop - (document.documentElement.clientTop || 0);
757    this.modal.style.top = topDistance + 100 + 'px';
758    this.initSticky();
759  }
760
761  getProductInfo(productName) {
762    this.productName = productName;
763    this.products = JSON.parse(this.productsData.innerHTML).products;
764    for (let i = 0; i < this.products.length; i++) {
765      const product = this.products[i];
766      if (product.name === this.productName) {
767        this.product = product;
768      }
769    }
770  }
771
772  createSecondWindow() {
773    const srcSet = this.secWindowImgElement.querySelector('source');
774    const imgSrc = this.secWindowImgElement.querySelector('.prod-info__img');
775
776    if(this.product.secondWindow) {
777      window.curProduct = this.product;
778      this.secondWindow.classList.remove('hidden');
779      this.secWindowTextWrap.classList.remove('right-aligned');
780      this.secWindowTextWrap.classList.remove('bottom-aligned');
781      if(this.product.secondWindow.align == 'right') {
782        this.secWindowTextWrap.classList.add('right-aligned');
783      }
784      if(this.product.secondWindow.align == 'bottom') {
785        this.secWindowTextWrap.classList.add('bottom-aligned');
786      }
787
788      if(this.product.secondWindow.width == 'wider') {
789        this.secWindowTextWrap.classList.add('wider');
790      }
791
792      // На окне Ягода сок делаем кнопочки Озон и Яндекс Лавка
793      if(this.currentProd == 'Yagod sok'){
794        if(!document.querySelector('.mp_btn_wrap')) {
795
796          const secondWindowWrap = document.querySelector('.prod-info');

797          const mpBtnWrap = document.createElement('div');
798          mpBtnWrap.classList.add('mp_btn_wrap');
799
800          const btnHTML = `
801                        <a target="_blank" href="https://niagara74.ru/catalog/napitki/yagod_sok_mors_klyukvennyy_0_46_l/">
802                            <img class="ya_btn" src="/local/templates/niagara/images/niagara_link.png" alt="">
803                        </a>
804                        <a target="_blank" href="https://www.ozon.ru/product/mors-klyukvennyy-yagod-sok-bezalkogolnyy-negazirovannyy-napitok-so-vkusom-klyukvy-12sht-h-0-46-l-1770343946/?__rr=1&abt_att=1&oos_search=false&prev_collection=61624311">
805                            <img class="ozon_btn" src="/local/templates/niagara/images/ozon_btn.png" alt="">
806                        </a>
807                        <a target="_blank" href="https://lavka.yandex.ru/good/mors-klyukvennyj-yagod-sok-pasterizovannyj-460-millilitre">
808                            <img class="ya_btn" src="/local/templates/niagara/images/ya_btn.png" alt="">
809                        </a> `
810          mpBtnWrap.innerHTML = btnHTML;
811
812          secondWindowWrap.appendChild(mpBtnWrap);
813
814        }
815      } else {
816        if(document.querySelector('.mp_btn_wrap')) {
817          document.querySelector('.mp_btn_wrap').remove();
818        }
819      }
820
821      // На окне Сканди сок делаем кнопочки Озон и Яндекс Лавка
822      if(this.currentProd == 'skandi'){
823        if(!document.querySelector('.mp_btn_wrap')) {
824          const secondWindowWrap = document.querySelector('.prod-info');
825          const mpBtnWrap = document.createElement('div')
826          mpBtnWrap.classList.add('mp_btn_wrap');
827
828          const btnHTML = `<a target="_blank" href="https://www.ozon.ru/product/voda-negazirovannaya-vitaminizirovannaya-skandi-no-stress-so-vkusom-kaktus-kivi-12-sht-h-0-5-2161985948/?at=J8tgkJ161hEkNDR6SkD4z7ZHm66NlXtVWXnKXfgr5ZON ">
829                            <img class="ozon_btn ym_target1" src="/local/templates/niagara/images/ozon_btn.png" alt="">
830                        </a>
831                        <a target="_blank" href="https://www.wildberries.ru/catalog/421542147/detail.aspx">
832                            <img class="wb_btn" src="/local/templates/niagara/images/wb3.png" alt="">
833                        </a>`
834          mpBtnWrap.innerHTML = btnHTML;
835
836          secondWindowWrap.appendChild(mpBtnWrap);
837
838          // Долистывание до копок озон и вб
839          observeScandiBtnVisibility();
840        }
841      } else if(!this.currentProd == 'Yagod sok') {
842        if(document.querySelector('.mp_btn_wrap')) {
843          document.querySelector('.mp_btn_wrap').remove();
844        }
845      }
846
847
848
849
850        if(this.product.secondWindow.imageMob) {
851            srcSet.srcset = this.product.secondWindow.imageMob;
852        } else {
853            srcSet.srcset = this.product.secondWindow.image;
854        }
855      imgSrc.src = this.product.secondWindow.image;
856      if(this.product.secondWindow.content) {
857        this.secWindowTextWrap.innerHTML = this.product.secondWindow.content;
858      } else {
859        this.secWindowTextWrap.innerHTML = '';
860      }
861    }
862
863  }
864
865  createTemplateWindow() {
866    if(this.product.templates) {
867
868      this.templateWrap.classList.remove('hidden');
869      const templateHtml = document.querySelector(this.product.templates.template[0]).innerHTML;
870      this.templateWrap.innerHTML = templateHtml;
871    }
872  }
873
874
875
876  createAdvantages() {
877    this.advWrap.innerHTML = "";
878    if (this.product.adv) {
879      const advData = this.product.adv;
880
881      advData.forEach(itemData => {
882        // Create the elements for the item
883        const itemContainer = document.createElement('div');
884        itemContainer.classList.add('pm-adv__item');
885
886        const imgContainer = document.createElement('div');
887        imgContainer.classList.add('pm-adv__img');
888        const img = document.createElement('img');
889        img.src = itemData.icon;
890        img.alt = '';
891        imgContainer.appendChild(img);
892
893        const title = document.createElement('h3');
894        title.classList.add('pm-adv__title');
895        title.textContent = itemData.title;
896
897        const text = document.createElement('p');
898        text.classList.add('pm-adv__text');
899        text.innerHTML = itemData.text;
900
901        // Append the elements to the item container
902        itemContainer.appendChild(imgContainer);
903        itemContainer.appendChild(title);
904        itemContainer.appendChild(text);
905
906        // Append the item container to the parent container
907        this.advWrap.appendChild(itemContainer);
908      });
909    }
910
911  }
912
913
914
915  initMainWindow() {
916    if(this.product.decorbg) {
917      this.pmDecorBgWrap.classList.remove('hidden');
918      this.pmDecorBg.src = this.product.decorbg;
919    }
920
921    setTimeout(function() {
922      this.productImageWrap.classList.add('animMain');
923    }.bind(this), 30);
924    this.subtitleText.innerHTML = this.product.subtitle;
925    this.logoImage.src = this.product.logo;
926    this.showNote();
927  }
928
929  showNote() {
930    if(this.product.note) {
931      this.pmStarBlock.classList.remove('hidden');
932      this.pmTextWrap.textContent = this.product.note;
933    }
934  }
935
936  initFlavorsList() {
937    this.flavoursChooseDiv.classList.remove('shortFlavList-4');
938    this.flavoursChooseDiv.classList.remove('shortFlavList-2');
939    this.flavoursChooseDiv.innerHTML = "";
940    const flavorQuantSpan = document.querySelector('.flavours__quant');
941    this.flavorList = [];

942    this.product.volumes[this.currentVol].flavors.forEach((flavor) => {
943      this.flavorList.push(flavor);
944    });
945
946    const flavQuant = this.flavorList.length;
947
948      if(flavQuant < 5) {
949          this.flavoursChooseDiv.classList.add('shortFlavList-4');
950      } else if(flavQuant < 3) {
951          this.flavoursChooseDiv.classList.add('shortFlavList-2');
952      }
953
954
955    if(flavQuant == 1) {
956      if(en) {
957        flavorQuantSpan.innerHTML = flavQuant + ' flavour:';
958      } else {
959        flavorQuantSpan.innerHTML = flavQuant + ' вкус:';
960      }
961
962    } else
963    if(flavQuant > 1 && flavQuant < 5) {
964      if(en) {
965        flavorQuantSpan.innerHTML = flavQuant + ' flavours:';
966      } else {
967        flavorQuantSpan.innerHTML = flavQuant + ' вкуса:';
968      }
969    } else {
970      if(en) {
971        flavorQuantSpan.innerHTML = flavQuant + ' flavours:';
972      } else {
973        flavorQuantSpan.innerHTML = flavQuant + ' вкусов:';
974      }
975    }
976
977
978    for (let i = 0; i < this.flavorList.length; i++) {
979      const flavor = this.flavorList[i];
980
981      const flavoursItemDiv = document.createElement('div');
982      flavoursItemDiv.classList.add('flavours__item');
983      flavoursItemDiv.dataset.name = flavor.name;
984
985      if(i==0) {
986        flavoursItemDiv.classList.add('flavours--active');
987      }
988
989      const imgWrap = document.createElement('div');
990      imgWrap.classList.add('flavours__img-wrap');
991
992      const imgElem = document.createElement('img');
993      imgElem.classList.add('flavours__img');
994      imgElem.src = flavor.icon;
995      imgElem.alt = flavor.title;
996
997      imgWrap.appendChild(imgElem);
998
999      const spanElem = document.createElement('span');
1000      spanElem.classList.add('flavours__name');
1001      spanElem.textContent = flavor.title;
1002
1003      flavoursItemDiv.appendChild(imgWrap);
1004      flavoursItemDiv.appendChild(spanElem);
1005
1006      this.flavoursChooseDiv.appendChild(flavoursItemDiv);
1007
1008    }
1009
1010    this.flavours = document.querySelectorAll('.flavours__item');
1011    this.listenFlavors();
1012
1013
1014  }
1015
1016  createSwitch() {
1017
1018    const prodDisplaySwitch = document.createElement('div');
1019    prodDisplaySwitch.classList.add('prod-display__switch', 'prod-switch', `vol-quant-${this.volQuantity}`);
1020    this.switchWrap.appendChild(prodDisplaySwitch);
1021
1022    const prodSwitchWrap = document.createElement('div');
1023    prodSwitchWrap.classList.add('prod-switch__wrap');
1024    prodDisplaySwitch.appendChild(prodSwitchWrap);
1025
1026    const prodSwitch = document.createElement('span');
1027    prodSwitch.classList.add('prod-switch__switch');
1028    prodSwitchWrap.appendChild(prodSwitch);
1029
1030
1031
1032    const vol1 = document.createElement('div');
1033    vol1.classList.add('prod-switch__vol');
1034    vol1.classList.add('vol');
1035    vol1.classList.add('vol-1');
1036    prodSwitchWrap.appendChild(vol1);
1037
1038    const span1 = document.createElement('span');
1039
1040    span1.textContent = this.sizes[0];
1041    vol1.appendChild(span1);
1042
1043    if(this.volQuantity == 2 || this.volQuantity == 3) {
1044      const vol2 = document.createElement('div');
1045      vol2.classList.add('prod-switch__vol');
1046      prodSwitchWrap.appendChild(vol2);
1047      vol2.classList.add('vol');
1048      vol2.classList.add('vol-2');
1049
1050      const span2 = document.createElement('span');
1051      span2.textContent = this.sizes[1];
1052      vol2.appendChild(span2);
1053    }
1054
1055    if(this.volQuantity == 3) {
1056      const vol3 = document.createElement('div');
1057      vol3.classList.add('prod-switch__vol');
1058      prodSwitchWrap.appendChild(vol3);
1059      vol3.classList.add('vol');
1060      vol3.classList.add('vol-3');
1061
1062      const span3 = document.createElement('span');
1063      span3.textContent = this.sizes[2];
1064      vol3.appendChild(span3);
1065    }
1066
1067    this.chooseVolIcon = prodDisplaySwitch;
1068    this.chooseVolSwitch = prodSwitch;
1069    if(this.product.initVol) {
1070      let currentVol = this.product.initVol;
1071      if(currentVol == "2") {
1072        this.currentVol = '1';
1073        this.chooseVolSwitch.classList.add('switched');
1074        this.chooseVolIcon.setAttribute('data-curr-vol','1');
1075      } else if(currentVol == "1") {
1076        this.currentVol = '0';
1077        this.chooseVolIcon.setAttribute('data-curr-vol','0');
1078      } else if(currentVol == "3") {
1079        this.currentVol = '2';
1080        this.chooseVolIcon.setAttribute('data-curr-vol','2');
1081        this.chooseVolSwitch.classList.add('switched2');
1082
1083      }
1084    }
1085
1086
1087  }
1088
1089  getVolQuantity() {
1090    this.sizes = [];

1091    this.product.volumes.forEach(el=>{
1092      this.sizes.push(el.size);
1093    });
1094    this.volQuantity = this.sizes.length;
1095  }
1096
1097  getCurrentFlavor() {
1098
1099    this.product.volumes[this.currentVol].flavors.forEach((flavor) => {
1100      if(flavor.name == this.activeFlavour) {
1101        if(flavor.logo){
1102          this.logoImage.src = flavor.logo;
1103        }
1104
1105          if(flavor.plashka) {
1106              this.pmPlashkaWrap.classList.remove('hidden');
1107              this.pmPlashka.src = flavor.plashka;
1108          }
1109        this.pmStarBlock.classList.add('hidden');
1110        if(flavor.note) {
1111          this.pmStarBlock.classList.remove('hidden');
1112          this.pmTextWrap.textContent = flavor.note;
1113        }
1114        this.bg.style.background = flavor.bgcolor;
1115        this.productImage.src = flavor.image;
1116
1117
1118      }
1119    });
1120
1121  }
1122
1123
1124
1125
1126  // addListenerVolume() {
1127
1128  //   this.chooseVolIcon.addEventListener('click', this.getVolume.bind(this));
1129  // }
1130
1131  getVolume() {
1132    const volumesSpans = document.querySelectorAll('.vol');
1133
1134    if(this.volQuantity ==2) {
1135
1136      this.chooseVolIcon.addEventListener('click', (e)=>{
1137
1138        if(this.chooseVolIcon.classList.contains('vol-quant-2')) {
1139          this.productImageWrap.classList.remove('animMain');
1140          if(this.chooseVolSwitch.classList.contains('switched')) {
1141            this.chooseVolIcon.setAttribute('data-curr-vol','0');
1142            this.chooseVolSwitch.classList.remove('switched');
1143            this.currentVol = '0';
1144
1145          } else {
1146            this.chooseVolIcon.setAttribute('data-curr-vol','1');
1147            this.chooseVolSwitch.classList.add('switched');
1148            this.currentVol = '1';
1149          }
1150
1151
1152
1153
1154          this.initMainWindow();
1155          this.initFlavorsList();
1156        }
1157
1158      });
1159    } else if(this.volQuantity ==3) {
1160
1161      volumesSpans.forEach((span)=>{
1162        span.addEventListener('click',(e)=>{
1163          this.productImageWrap.classList.remove('animMain');
1164          e = e.target.closest('.vol');
1165          if(e.classList.contains('vol-1')){
1166            this.currentVol = '0';
1167            this.chooseVolSwitch.classList.remove('switched');
1168            this.chooseVolSwitch.classList.remove('switched2');
1169            this.chooseVolIcon.setAttribute('data-curr-vol','0');
1170          } else if(e.classList.contains('vol-2')) {
1171            this.chooseVolIcon.setAttribute('data-curr-vol','1');
1172            this.chooseVolSwitch.classList.remove('switched2');
1173            this.chooseVolSwitch.classList.add('switched');
1174            this.currentVol = '1';
1175          } else if(e.classList.contains('vol-3')) {
1176            this.chooseVolSwitch.classList.remove('switched');
1177            this.chooseVolSwitch.classList.add('switched2');
1178            this.chooseVolIcon.setAttribute('data-curr-vol','2');
1179            this.currentVol = '2';
1180          }
1181
1182          this.initMainWindow();
1183          this.initFlavorsList();
1184        })
1185      })
1186    }
1187  }
1188
1189
1190
1191
1192  listenFlavors() {
1193    const lastActiveFlavour = this.activeFlavour;
1194
1195    this.activeFlavour = this.flavours[0].getAttribute('data-name');
1196    this.flavours[0].classList.add('flavours--active');
1197
1198    for(let i = 0; i < this.flavours.length; i++) {
1199
1200      if(this.flavours[i].getAttribute('data-name') === lastActiveFlavour) {
1201        this.flavours.forEach((item) => {
1202          item.classList.remove('flavours--active');
1203        });
1204        this.activeFlavour = this.flavours[i].getAttribute('data-name');
1205        this.flavours[i].classList.add('flavours--active');
1206      }
1207    }
1208    this.getCurrentFlavor();
1209
1210    this.flavours.forEach((item) => {
1211
1212      item.addEventListener('click', (e)=>{
1213        this.flavours.forEach((item) => {
1214          item.classList.remove('flavours--active');
1215        });
1216
1217        this.activeFlavour = e.target.closest('.flavours__item').getAttribute('data-name');
1218        this.activeFlavorIcon =  e.target.closest('.flavours__item');
1219        this.activeFlavorIcon.classList.add('flavours--active');
1220
1221        this.getCurrentFlavor();
1222
1223      })
1224    })
1225  }
1226
1227
1228
1229
1230  changeWindow(id) {
1231    this.getProductInfo(id);
1232    this.posWindow();
1233    // this.hidePanels();
1234    this.getCurrentVol();
1235    this.initMainWindow();
1236    this.createAdvantages();
1237    this.createSecondWindow();
1238    this.createTemplateWindow();
1239    this.createSoc();
1240    this.createProductLine();
1241    this.getVolQuantity();

1242    this.createSwitch();
1243    this.getVolume();
1244    // this.addListenerVolume();
1245    this.initFlavorsList();
1246    this.scrollFix();
1247    // this.onePunchProd();
1248
1249  }
1250
1251  init() {
1252
1253    this.changeWindow(this.currentProd);
1254  }
1255}
1256
1257function closePopup() {
1258  document.getElementById("popup").style.display = "none";
1259  document.getElementById("popupBackground").style.display = "none";
1260}
1261
1262
1263
1264function productTextAppear() {
1265  const pmStar = document.querySelector(".pm-star__wrap");
1266  const pmText = document.querySelector(".pm-star__text");
1267
1268  pmStar.addEventListener("click", function(e) {
1269    if(e.target.classList.contains('pm-text--showed')) {
1270      pmText.classList.remove("pm-text--showed");
1271    } else {
1272      pmText.classList.add("pm-text--showed");
1273    }
1274
1275
1276  })
1277
1278  window.addEventListener("click", (e)=> {
1279    // console.log(e.target);
1280    if(!e.target.parentNode.classList.contains('pm-star__wrap')) {
1281      pmText.classList.remove("pm-text--showed");
1282    }
1283
1284
1285  })
1286}
1287
1288productTextAppear()
1289
1290
1291function smoothScroll() {
1292
1293const nBlocks = document.querySelectorAll('.n-block');
1294
1295window.addEventListener('scroll', () => {
1296  for (let i = 0; i < nBlocks.length; i++) {
1297
1298      const rect = nBlocks[i].getBoundingClientRect();
1299
1300
1301      if (rect.top >= 0) {
1302
1303        const scrollPos = rect.top - window.innerHeight + rect.height;
1304
1305        window.scrollTo({
1306          top: scrollPos,
1307          behavior: 'smooth'
1308        });
1309      }
1310    }
1311  });
1312}
1313
1314// smoothScroll()
1315
1316
1317function isElementInViewport(el) {
1318  var rect = el.getBoundingClientRect();
1319
1320  return rect.bottom > 0 &&
1321      rect.right > 0 &&
1322      rect.left < (window.innerWidth || document.documentElement.clientWidth) /* or $(window).width() */ &&
1323      rect.top < (window.innerHeight || document.documentElement.clientHeight) /* or $(window).height() */;
1324}
1325
1326let onePunchAllow = true;
1327function onePunch() {
1328  const sectionMission = document.querySelector('.mission');
1329  const sectionProduct = document.querySelector('.product');
1330  const sectionGeography = document.querySelector('.geography');
1331  const sectionNews = document.querySelector('.news');
1332  const sectionWork = document.querySelector('.work');
1333  const sectionHistory = document.querySelector('.history');
1334  const sectionFooter = document.querySelector('.footer');
1335
1336  const sections = [];
1337  sections.push(sectionMission);
1338  sections.push(sectionWork);
1339
1340  const sections_half = [];
1341  sections_half.push(sectionNews);
1342  sections_half.push(sectionProduct);
1343  sections_half.push(sectionGeography);
1344  // sections_half.push(sectionHistory);
1345  sections_half.push(sectionFooter);
1346
1347  const newsModal = document.getElementById('modal-news');
1348
1349  function addHistoryScroll() {
1350    const navBar = document.querySelector('.n-menu');
1351
1352    let divider = 1.7;
1353
1354
1355    const rect = sectionHistory.getBoundingClientRect();
1356    if(rect.top < (window.innerHeight || document.documentElement.clientHeight) / divider) {
1357      const topPos = document.documentElement.scrollTop + window.innerHeight/divider;
1358      if(!sectionHistory.classList.contains('scrolled')) {
1359
1360        if(!navBar.classList.contains('nav-clicked') && !newsModal.classList.contains('opened-modal') && onePunchAllow) {
1361          gsap.to(window, {
1362            duration: 1,
1363            scrollTo: topPos
1364          })
1365        }
1366
1367
1368        sectionHistory.classList.add('scrolled');
1369      }
1370    } else {
1371      sectionHistory.classList.remove('scrolled');
1372    }
1373  }
1374
1375  function addScrollHalf(section) {
1376    const navBar = document.querySelector('.n-menu');
1377
1378    let divider;
1379    let dur;
1380
1381    if(window.innerWidth > 750) {
1382      divider = 1.1;
1383      dur = 1;
1384    } else {
1385      divider = 1.8;
1386      dur = 0.5;
1387    }
1388
1389
1390    const rect = section.getBoundingClientRect();
1391    if(rect.top < (window.innerHeight || document.documentElement.clientHeight) / divider) {
1392      const topPos = document.documentElement.scrollTop + window.innerHeight/divider;
1393      if(!section.classList.contains('scrolled')) {
1394
1395        if(!navBar.classList.contains('nav-clicked') && !newsModal.classList.contains('opened-modal') && onePunchAllow) {
1396          gsap.to(window, {
1397            duration: dur,
1398            scrollTo: topPos
1399          })
1400        }
1401
1402
1403        section.classList.add('scrolled');
1404      }
1405    } else {
1406      section.classList.remove('scrolled');
1407    }
1408  }
1409
1410  function addScroll(section) {
1411    const navBar = document.querySelector('.n-menu');
1412
1413    let divider;
1414    let dur;
1415
1416    if(window.innerWidth > 750) {
1417      divider = 1.1;
1418      dur = 1;
1419    } else {
1420      divider = 1.8;
1421      dur = 0.5;
1422    }
1423
1424    const rect = section.getBoundingClientRect();
1425    if(rect.top < (window.innerHeight || document.documentElement.clientHeight) / divider) {
1426      const topPos = document.documentElement.scrollTop + window.innerHeight / divider;
1427      if(!section.classList.contains('scrolled')) {
1428        if(!navBar.classList.contains('nav-clicked') && !newsModal.classList.contains('opened-modal') && onePunchAllow) {
1429          gsap.to(window, {
1430            duration: dur,
1431            scrollTo: topPos
1432          })
1433        }
1434
1435        section.classList.add('scrolled');
1436      }
1437
1438    } else {
1439      section.classList.remove('scrolled');
1440    }
1441  }
1442
1443
1444
1445  let scrollListenerHalf;
1446  let scrollListener;
1447
1448  sections_half.forEach(function(section) {
1449    scrollListenerHalf = function() {
1450      addScrollHalf(section);
1451    };
1452    window.addEventListener('scroll', scrollListenerHalf);
1453  });
1454
1455  sections.forEach(function(section) {
1456    scrollListener = function() {
1457      addScroll(section);
1458    };
1459    window.addEventListener('scroll', scrollListener);
1460  });
1461
1462
1463
1464  window.addEventListener('scroll', addHistoryScroll);
1465
1466
1467
1468}
1469
1470
1471
1472onePunch()
1473
1474function scrollUpAppear() {
1475  window.addEventListener('scroll', function() {

1476    const prodModal = document.querySelector('#modal-prod');
1477    if(!prodModal.classList.contains('opened-modal')) {
1478      var element = document.getElementById('scroll-up');
1479      if (window.scrollY > 500) {
1480        element.classList.add('scroll-up__appear');
1481      } else {
1482        element.classList.remove('scroll-up__appear');
1483      }
1484    }
1485  });
1486
1487}
1488
1489scrollUpAppear();
1490
1491
1492function orderDisappear() {
1493  const order = document.querySelector('.order');
1494  window.addEventListener('scroll', () => {
1495    if(order.getBoundingClientRect().top < 100) {
1496      order.classList.add('unvisOrder');
1497    } else {
1498      order.classList.remove('unvisOrder');
1499    }
1500  })
1501}
1502orderDisappear()
1503
1504
1505function parallex() {
1506  const ypos = window.pageYOffset;
1507  // console.log(ypos);
1508  const header = $('.header').height();
1509  if(ypos-header>50) {
1510      $('.header').css({'opacity':0})
1511  }else{
1512      $('.header').css({'opacity':1})
1513  }
1514  }
1515  window.addEventListener('scroll', parallex), false;
1516
1517
1518
1519
1520
1521
1522
1523function counters() {
1524  const counters = document.querySelectorAll( '.counter' );
1525	
1526    jQuery(function ($) {
1527        "use strict";
1528      
1529        var counterUp = window.counterUp["default"];
1530      
1531      
1532        counters.forEach((counter=>{
1533          counterUp( counter, {
1534            duration: 1000,
1535            delay: 5,
1536        } )
1537        }))
1538       
1539  
1540    });
1541
1542}
1543
1544
1545
1546function pecsChange() {
1547  var visitCount = parseInt(localStorage.getItem('visitCount')) || 0;
1548  visitCount++;
1549  localStorage.setItem('visitCount', visitCount);
1550  let pecNum = visitCount % 8;
1551  
1552  const pecs = document.querySelectorAll('.header-top__bg');
1553  
1554  for (let i = 0; i < pecs.length; i++) {
1555    pecs[i].classList.add('hidden');	
1556    if(i == pecNum) {
1557      pecs[i].classList.remove('hidden');
1558    }
1559  }
1560
1561}
1562
1563// pecsChange();
1564
1565
1566
1567function videoAppear() {
1568  const videoBg = document.querySelector('.header-top__bg-vid');
1569  const pecs = document.querySelector('.pecs');
1570
1571  if(videoBg) {
1572    setTimeout(function() {
1573      pecs.classList.add('pecs_disappear');
1574    }, 7000)
1575
1576    setTimeout(function() {
1577      videoBg.play();
1578    }, 6800)
1579  }
1580
1581
1582}
1583
1584// videoAppear();
1585
1586
1587
1588
1589function lang() {
1590  const switchLang = document.querySelector('.n-lang');
1591  switchLang.addEventListener('click', () => {
1592    console.log(11);
1593    if(switchLang.classList.contains('en')) {
1594      switchLang.classList.remove('en');
1595      setTimeout(()=>{window.location.href = 'https://niagara-drinks.ru/';}, 800)
1596
1597    } else {
1598      switchLang.classList.add('en');
1599      setTimeout(()=>{window.location.href = 'https://en.niagara-drinks.ru/';}, 800)
1600    }
1601
1602
1603  })
1604}
1605
1606lang();
1607
1608
1609function prodMenu() {
1610  const menuItems = document.querySelectorAll('.products-menu__item');
1611  const prodList = document.querySelectorAll('.products-list__item');
1612
1613  menuItems.forEach((item)=>{
1614    
1615    item.addEventListener('click', (e)=>{
1616      e = e.target;
1617      let type = e.getAttribute('data-menu');
1618      menuItems.forEach((item)=>item.classList.remove('products-menu__item--active'));
1619      e.classList.add('products-menu__item--active');
1620
1621      prodList.forEach((item)=> {
1622        item.classList.add('hidden');
1623        if(item.getAttribute('data-type') === type){
1624          item.classList.remove('hidden');
1625
1626      }
1627      
1628
1629    })
1630  })
1631
1632})}
1633
1634prodMenu();
1635
1636
1637function worksCat() {
1638  const catItems = document.querySelectorAll('.work-form__cat');
1639  const listItems = document.querySelectorAll('.work-form__list')
1640
1641  catItems.forEach((item)=>{
1642    item.addEventListener('click', (e)=>{
1643
1644      catItems.forEach((item)=>item.classList.remove('work-form__cat--active'));
1645      e = e.target;
1646      e.classList.add('work-form__cat--active');
1647
1648      const workType = e.getAttribute('data-work-cat');
1649
1650      listItems.forEach((item)=> {
1651        item.classList.add('hidden');
1652        if(item.getAttribute('data-work-list')== workType){
1653          item.classList.remove('hidden');
1654
1655        }
1656
1657      })
1658
1659    })
1660  })
1661}
1662
1663worksCat();
1664
1665
1666
1667let navLinks = document.querySelectorAll('.n-menu__item');
1668
1669navLinks.forEach(element => element.addEventListener('click', (e) => {
1670    e.preventDefault();
1671
1672}))
1673
1674
1675document.getElementById("menu-production").addEventListener("click", () => {
1676    gsap.to(window, {
1677        duration: 1,
1678        scrollTo: {
1679            y: ".product"
1680        }
1681    })
1682})
1683
1684document.getElementById("menu-about").addEventListener("click", () => {
1685    gsap.to(window, {
1686        duration: .5,
1687        scrollTo: {
1688            y: ".mission"
1689        }
1690    })
1691})
1692
1693document.getElementById("menu-work").addEventListener("click", () => {
1694    gsap.to(window, {
1695        duration: 1,
1696        scrollTo: {
1697            y: ".work"
1698        }
1699    })
1700})
1701
1702document.getElementById("menu-contacts").addEventListener("click", () => {
1703    gsap.to(window, {
1704        duration: 1,
1705        scrollTo: {
1706            y: ".footer"
1707        }
1708    })
1709
1710    // const el = document.querySelector('.footer');
1711    // el.scrollIntoView({behavior: "smooth"});

1712})
1713
1714document.getElementById("scroll-up").addEventListener("click", () => {
1715  gsap.to(window, {
1716      duration: 1,
1717      scrollTo: {
1718          y: "body"
1719      }
1720  })
1721})
1722
1723document.querySelector(".pm-header__low").addEventListener("click", () => {
1724  gsap.to(window, {
1725      duration: 1,
1726      scrollTo: {
1727          y: ".pm-adv"
1728      }
1729  })
1730})
1731
1732
1733gsap.from(".order",  {
1734  scrollTrigger: ".order",
1735  y: '50px',
1736  opacity: 0
1737});
1738
1739gsap.to(".order", {
1740  scrollTrigger: ".order",
1741  y: '0',
1742  opacity: '1'
1743});
1744
1745
1746const navLinkList = document.querySelectorAll(".n-menu__item");
1747const navMenuBlock = document.querySelector(".n-menu");
1748navLinkList.forEach((link) => {
1749  link.addEventListener('click', () => {
1750    navMenuBlock.classList.add('nav-clicked');
1751    setTimeout(()=>{
1752      navMenuBlock.classList.remove('nav-clicked');
1753    }, 1100);
1754  })
1755})
1756
1757
1758
1759
1760
1761
1762
1763
1764
1765
1766
1767class Modal {
1768  constructor(modalId, trigger, overlay, closeButton) {
1769    this.modalId = modalId;
1770    this.modal = document.getElementById(modalId);
1771    this.closeButton = document.querySelector(closeButton);
1772    // this.closeButtonNews = document.querySelector('.modal__close');
1773    this.modalTrigger = document.querySelectorAll(trigger);
1774    this.overlay = document.querySelector(overlay);
1775    this.isOpen = false;
1776    this.scrollUp = document.getElementById('scroll-up');
1777    this.mainSection = document.querySelector('main');
1778    this.closeButton.addEventListener('click', () => this.close());
1779    this.overlay.addEventListener('click', () => this.close());
1780    this.productSection = document.querySelector('.product');
1781    this.newsSection = document.querySelector('.news');
1782    this.docHeader = document.querySelector('.header');
1783    document.addEventListener('keydown', (event) => {
1784      if (event.key === 'Escape' && this.isOpen) {
1785        this.close();
1786      }
1787    });
1788  }
1789
1790  open() {
1791    this.modal.style.display = 'block';
1792    this.modal.classList.add('opened-modal');
1793    this.overlay.classList.add('overlay--shown');
1794    this.isOpen = true;
1795    this.docHeader.classList.add('inv-force');
1796
1797
1798
1799
1800    this.modal.style.top = '20px';
1801    this.scrollUp.classList.add('scroll-up__appear');
1802
1803
1804    if(this.modalId == 'modal-prod') {
1805      const topScrollProd = this.productSection.getBoundingClientRect().top;
1806      this.closeButton.classList.add('close-vis');
1807      const topScroll = document.documentElement.scrollTop;
1808      this.topScroll = document.documentElement.scrollTop;
1809
1810      this.productPreloader = document.querySelector('#preloader-product');
1811
1812      this.productPreloader.style.display = 'block';
1813
1814
1815      const productImage = document.querySelector('.prod-display__img img');
1816      const flavors = document.querySelectorAll('.flavours__choose .flavours__img');
1817      productImage.onload = () => {
1818        this.productPreloader.style.display = 'none';
1819      };
1820
1821      // document.querySelector('.prod-display__img img').onload()
1822      //
1823      // setTimeout(()=>{
1824      //   this.productPreloader.style.display = 'none';
1825      // }, 1500)
1826
1827      this.mainSection.classList.add('fixed_main');
1828      this.mainSection.style.top = '-'+topScroll +'px';
1829      this.modal.style.top = '20px';
1830      setTimeout(()=> {
1831        let bounceUp = setInterval(()=>{
1832          if(document.documentElement.scrollTop > 0 && this.isOpen) {
1833            gsap.to(window, {
1834              duration: 0,
1835              scrollTo: {
1836                y: "0"
1837              }
1838            });
1839            console.log('gsaped 1');
1840          } else {
1841            this.modal.style.opacity = 1;
1842            bounceUp = clearInterval(bounceUp);
1843
1844          }
1845        }, 10);
1846
1847      }, 250);
1848
1849      setTimeout(()=> {
1850        let bounceUp2 = setInterval(()=>{
1851          if(document.documentElement.scrollTop > 0 && this.isOpen) {
1852            gsap.to(window, {
1853              duration: 0,
1854              scrollTo: {
1855                y: "0"
1856              }
1857
1858            });
1859            console.log('gsaped 2');
1860          } else {
1861            this.modal.style.opacity = 1;
1862            bounceUp2 = clearInterval(bounceUp2);
1863
1864          }
1865        }, 10);
1866
1867      }, 500);
1868
1869      setTimeout(()=> {
1870        let bounceUp3 = setInterval(()=>{
1871          if(document.documentElement.scrollTop > 0 && this.isOpen) {
1872            gsap.to(window, {
1873              duration: 0,
1874              scrollTo: {
1875                y: "0"
1876              }
1877
1878            });
1879            console.log('gsaped 3');
1880          } else {
1881            this.modal.style.opacity = 1;
1882            bounceUp3 = clearInterval(bounceUp3);
1883
1884          }
1885        }, 10);
1886
1887      }, 900);
1888
1889
1890
1891      setTimeout(()=> {
1892        if(!typeof bounceUp === 'undefined' || !typeof bounceUp2 === 'undefined' || !typeof bounceUp3 === 'undefined'){
1893          clearInterval(bounceUp)
1894          clearInterval(bounceUp2)
1895          clearInterval(bounceUp3)
1896          console.log('çleared 2');
1897        }
1898
1899      }, 3000);
1900
1901    } else

1902    if(this.modalId == 'modal-news') {
1903      this.modal.style.opacity = 1;
1904      const topScroll = document.documentElement.scrollTop;
1905      this.modal.style.top = topScroll + 50 +'px';
1906    }
1907
1908
1909
1910
1911  }
1912
1913  close() {
1914    this.modal.style.display = 'none';
1915    this.modal.style.opacity = 0;
1916    this.modal.classList.remove('opened-modal');
1917    this.modal.style.top = '50px';
1918
1919    this.overlay.classList.remove('overlay--shown');
1920    this.isOpen = false;
1921    this.scrollUp.classList.remove('hidden');
1922    this.mainSection.classList.remove('fixed_main');
1923    this.docHeader.classList.remove('inv-force');
1924
1925    document.querySelector('.prod-display__img img').setAttribute('src', '');
1926    console.log('Modal close');
1927
1928
1929    this.mainSection.style.top = '';
1930
1931    if(this.modalId == 'modal-prod') {
1932      this.closeButton.classList.remove('close-vis');
1933      gsap.to(window, {
1934        duration: 0,
1935        scrollTo: {
1936          y: this.topScroll
1937        }
1938      })
1939
1940      const id = '.product-modal__header,.pm-adv,.prod-info,.prod-tiger,.prod-template';
1941      const elements = document.querySelectorAll(id);
1942
1943      elements.forEach(el=>{
1944        el.classList.remove('pm-sticky');
1945      })
1946    } else if(this.modalId == 'modal-news') {
1947      this.modal.querySelectorAll('video').forEach(el=>{
1948        el.pause();
1949        el.currentTime = 0;
1950      });
1951    }
1952
1953
1954  }
1955
1956  init() {
1957    this.modalTrigger.forEach((el) => el.addEventListener('click',() => {
1958      this.open();
1959    }))
1960  }
1961}
1962
1963const modalNews = new Modal('modal-news', '.modal-trigger', '.overlay-dark', '.modal__close');
1964
1965modalNews.init();
1966
1967const modalProd = new Modal('modal-prod', '.modal-trigger-prod', '.overlay-dark-news', '.modal-prod__close');
1968
1969modalProd.init();
1970
1971function gsapAnimation() {
1972
1973  document.addEventListener("DOMContentLoaded", function(event) {
1974
1975
1976
1977        if(window.innerWidth < 600) {
1978
1979
1980          gsap.to(".header-main__title", {
1981            scrollTrigger: ".header-main__title",
1982            y: '0',
1983            opacity: 1,
1984            ease: "Expo.easeInOut",
1985            delay: 1.9,
1986          });
1987
1988        } else {
1989          gsap.from(".header-main__title", {
1990            scrollTrigger: ".header-main__title",
1991            y: '200',
1992            opacity: 0
1993          });
1994
1995          gsap.to(".header-main__title", {
1996            scrollTrigger: ".header-main__title",
1997            y: '0',
1998            opacity: 1,
1999            ease: "Expo.easeInOut",
2000            delay: 1.9,
2001          });
2002
2003        }
2004
2005
2006
2007      
2008      gsap.from(".header-main__subtitle", {
2009        scrollTrigger: ".header-main__subtitle",
2010        x: '200',
2011        opacity: 0
2012    });
2013
2014      gsap.to(".header-main__subtitle", {
2015        scrollTrigger: ".header-main__subtitle",
2016        x: '0',
2017        opacity: 1,
2018        ease: "Expo.easeInOut",
2019        delay: 1.7,
2020    });
2021
2022    gsap.from(".products-list__item", {
2023      scrollTrigger: ".products-list__item",
2024      y: '50',
2025      opacity: 0
2026  });
2027
2028    gsap.to(".products-list__item", {
2029      scrollTrigger: ".products-list__item",
2030      x: '0',
2031      opacity: 1,
2032      ease: "Expo.easeInOut",
2033      delay: 0,
2034  });
2035
2036  gsap.from(".mission__main", {
2037    scrollTrigger: ".mission__main",
2038    x: '-200',
2039    opacity: 0,
2040    delay: 0.5
2041
2042});
2043
2044  gsap.to(".mission__main", {
2045    scrollTrigger: ".mission__main",
2046    x: '0',
2047    opacity: 1,
2048    ease: "Expo.easeInOut",
2049    delay: 0.5
2050});
2051
2052  })
2053
2054}
2055
2056gsapAnimation()
2057
2058class Mobile {
2059  constructor(burger, float, menu, close) {
2060    this.menu = document.querySelector(menu);
2061    this.burger = document.querySelector(burger);
2062    this.burgerFloat = document.querySelector(float);
2063    this.closeButton = document.querySelector(close);
2064    this.links = document.querySelectorAll('.mob-menu__item');
2065    this.isOpen = false;
2066    this.closeButton.addEventListener('click', () => this.close());
2067
2068
2069    document.addEventListener('keydown', (event) => {
2070      if (event.key === 'Escape' && this.isOpen) {
2071        this.close();
2072      }
2073    });

2074  }
2075
2076  open() {
2077    document.body.classList.add('locked');
2078
2079    this.links.forEach((el) => {
2080      el.addEventListener('click', () => {
2081        this.close();
2082      });
2083    });
2084
2085    this.menu.classList.add('mob-menu--active');
2086    this.isOpen = true;
2087
2088  }
2089
2090  close() {
2091    document.body.classList.remove('locked');
2092    this.menu.classList.remove('mob-menu--active');
2093
2094    this.isOpen = false;
2095
2096
2097  }
2098
2099  init() {
2100    this.burger.addEventListener('click',() => {
2101      this.open();
2102    })
2103    this.burgerFloat.addEventListener('click',() => {
2104      this.open();
2105    })
2106  }
2107}
2108
2109const mobileMenu = new Mobile('.burger_menu', '.burger_menu--float','.mob-menu', '.mob-menu__close');
2110
2111mobileMenu.init();
2112
2113
2114let mobLinks = document.querySelectorAll('.mob-menu__item');
2115
2116mobLinks.forEach(element => element.addEventListener('click', (e) => {
2117  e.preventDefault();
2118
2119  onePunchAllow = false;
2120  setTimeout(() => {
2121    onePunchAllow = true;
2122  }, 1100)
2123
2124}))
2125
2126
2127function preloadImage(src) {
2128  return new Promise((resolve, reject) => {
2129    const img = new Image();
2130    img.onload = () => resolve(img);
2131    img.onerror = () => reject(new Error(`Не удалось загрузить изображение: ${src}`));
2132    img.src = src;
2133  });
2134}
2135
2136
2137document.getElementById("mob-menu-production").addEventListener("click", () => {
2138  gsap.to(window, {
2139    duration: 1,
2140    scrollTo: {
2141      y: ".product"
2142    }
2143  })
2144})
2145
2146document.getElementById("mob-menu-about").addEventListener("click", () => {
2147  gsap.to(window, {
2148    duration: .5,
2149    scrollTo: {
2150      y: ".mission"
2151    }
2152  })
2153})
2154
2155
2156
2157
2158document.getElementById("mob-menu-work").addEventListener("click", () => {
2159  gsap.to(window, {
2160    duration: 1,
2161    scrollTo: {
2162      y: ".work"
2163    }
2164  })
2165})
2166
2167
2168document.getElementById("mob-menu-news").addEventListener("click", () => {
2169  gsap.to(window, {
2170    duration: 1,
2171    scrollTo: {
2172      y: ".news"
2173    }
2174  })
2175})
2176
2177document.getElementById("mob-menu-contacts").addEventListener("click", () => {
2178  gsap.to(window, {
2179    duration: 1,
2180    scrollTo: {
2181      y: ".footer"
2182    }
2183  })
2184
2185})
2186
2187function floatBurger() {
2188  const floatBurger = document.querySelector(".burger_menu--float");
2189
2190
2191  document.addEventListener("scroll", () => {
2192    if(document.documentElement.scrollTop > 830 && window.innerWidth <= 900) {
2193      floatBurger.classList.add('show');
2194    } else {
2195      floatBurger.classList.remove('show');
2196    }
2197  });
2198}
2199
2200floatBurger()