https://1-xbet-official.com/wp-content/themes/1xbet-sitetheme/assets/js/main.js?ver=1791591178

1document.addEventListener("DOMContentLoaded", function () {
2
3    
4  // Кнопки открытия/закрытия моб. меню
5  const menuToggle = document.getElementById("menuToggle");
6  const menuClose = document.getElementById("menuClose");
7  const mobMenu = document.getElementById("mobMenu");
8
9  if (menuToggle && mobMenu) {
10    menuToggle.addEventListener("click", function (e) {
11      e.preventDefault();
12      mobMenu.classList.add("active");
13    });
14  }
15
16  if (menuClose && mobMenu) {
17    menuClose.addEventListener("click", function () {
18      mobMenu.classList.remove("active");
19    });
20  }
21
22  // Мобильное языковое меню
23const langMenuMob = document.getElementById("langMobMenu");
24const langListMob = document.getElementById("langMobList");
25
26if (langMenuMob && langListMob) {
27  langMenuMob.addEventListener("click", function (e) {
28    if (e.target.closest("a")) {
29      return;
30    }
31    e.preventDefault();
32    langListMob.classList.toggle("active");
33    langMenuMob.classList.toggle("active");
34  });
35
36  document.addEventListener("click", function (e) {
37    if (!langMenuMob.contains(e.target)) {
38      langListMob.classList.remove("active");
39      langMenuMob.classList.remove("active");
40    }
41  });
42}
43
44
45  // Выпадающие блоки (jQuery)
46  $(".tocDefault").on("click", function () {
47    let dropSelect = $(this).parents(".drop");
48    let dropContent = $(this).next(".optionsHolder");
49    dropSelect.toggleClass("active");
50
51    if (dropSelect.hasClass("active")) {
52      dropContent.stop().slideDown();
53    } else {
54      dropContent.stop().slideUp();
55    }
56  });
57
58  $(".drop").each(function () {
59    let dropContent = $(this).find(".optionsHolder");
60    if ($(this).hasClass("active")) {
61      dropContent.show();
62    } else {
63      dropContent.hide();
64    }
65  });
66
67  // Десктопное языковое меню
68const langMenuDesk = document.getElementById("langMenu");
69const langListDesk = document.getElementById("langList");
70
71if (langMenuDesk && langListDesk) {
72  langMenuDesk.addEventListener("click", function (e) {
73    if (e.target.closest("a")) {
74      return;
75    }
76    e.preventDefault();
77    langListDesk.classList.toggle("active");
78    langMenuDesk.classList.toggle("active");
79  });
80
81  document.addEventListener("click", function (e) {
82    if (!langMenuDesk.contains(e.target)) {
83      langListDesk.classList.remove("active");
84      langMenuDesk.classList.remove("active");
85    }
86  });
87}
88
89  const toggles = document.querySelectorAll(".submenu-toggle");
90
91  toggles.forEach((toggle) => {
92    toggle.addEventListener("click", function (e) {
93      e.preventDefault();
94      const parent = this.closest(".has-submenu");
95      const submenu = parent.querySelector(".sub-menu");
96
97      this.classList.toggle("active");
98      submenu.classList.toggle("open");
99    });
100  });
101
102  document.querySelectorAll(".tabs-block").forEach((block) => {
103    const tabs = block.querySelectorAll(".tab");
104    const contents = block.querySelectorAll(".tab-content");
105    const tabClose = block.querySelector(".tabClose");
106

107    tabs.forEach((tab) => {
108      tab.addEventListener("click", function () {
109        tabs.forEach((t) => t.classList.remove("active"));
110        contents.forEach((c) => c.classList.remove("active"));
111
112        this.classList.add("active");
113        const content = block.querySelector("#" + this.dataset.tab);
114        if (content) content.classList.add("active");
115      });
116    });
117
118    if (tabClose) {
119      tabClose.addEventListener("click", function () {
120        tabs.forEach((t) => t.classList.remove("active"));
121        contents.forEach((c) => c.classList.remove("active"));
122      });
123    }
124
125    const initial =
126      block.querySelector(".tab.active") || block.querySelector(".tab");
127    if (initial) initial.click();
128  });
129
130  // Running Line  START
131  $(document).ready(function () {
132    var $marquee = $("#textBlock");
133    var $textLine = $marquee.find(".textLine");
134    var text = $textLine.html();
135
136    // Створюємо кілька копій тексту для безперервної прокрутки
137    for (var i = 0; i < 3; i++) {
138      var $duplicate = $('<div class="textLine">

138' + text + "</div>");
139      $marquee.append($duplicate);
140    }
141
142    // Запускаємо анімацію
143    $marquee.addClass("scrolling");
144  });
145  // Running Line  END
146
147  //Pin and Favorite buttons START
148  $(document).ready(function () {
149    // Функція для зміни зображення кнопки
150    function toggleImage(button, defaultSrc, activeSrc) {
151      let img = button.find("img");
152      let currentSrc = img.attr("src");
153
154      if (currentSrc.includes(defaultSrc)) {
155        img.attr("src", currentSrc.replace(defaultSrc, activeSrc));
156      } else {
157        img.attr("src", currentSrc.replace(activeSrc, defaultSrc));
158      }
159    }
160
161    // Обробник натискання для кнопки "pin"
162    $(".pin-button").on("click", function () {
163      toggleImage($(this), "ico-pin.svg", "ico-pin-active.svg");
164    });
165
166    // Обробник натискання для кнопки "favorite"
167    $(".favorite-button").on("click", function () {
168      toggleImage($(this), "ico-favorite.svg", "ico-favorite-active.svg");
169    });
170  });
171
172  //Pin and Favorite buttons END
173
174  const blocks = document.querySelectorAll(".recommended");
175  blocks.forEach((block) => {
176    const arrow = block.querySelector(".viewArrow");
177    arrow.addEventListener("click", function () {
178      block.classList.toggle("open");
179    });
180  });
181
182  //Betting options START
183
184  //Betting options END
185
186  //Main Slider version 1 START
187  new Swiper("#main-slider", {
188    loop: true,
189    speed: 400,
190    slidesPerView: 1,
191    spaceBetween: 0,
192    autoplay: {
193      delay: 5000,
194      disableOnInteraction: false,
195    },
196    watchOverflow: true,
197    autoHeight: false,
198    pagination: {
199      el: ".swiper-pagination",
200      type: "bullets",
201      clickable: true,
202    },
203    navigation: {
204      nextEl: ".swiper-button-next",
205      prevEl: ".swiper-button-prev",
206    },
207  });
208  //Main Slider END
209
210  //Main Slider version 2 START
211  new Swiper("#main-slider-v2", {
212    loop: true,
213    speed: 400,
214    slidesPerView: 1,
215    spaceBetween: 0,
216    autoplay: {
217      delay: 5000,
218      disableOnInteraction: false,
219    },
220    watchOverflow: true,
221    autoHeight: false,
222    pagination: {
223      el: ".swiper-pagination",
224      type: "bullets",
225      clickable: true,
226    },
227    navigation: {
228      nextEl: ".swiper-button-next",
229      prevEl: ".swiper-button-prev",
230    },
231  });
232  //Main Slider END
233
234  //Main Slider version 3 START
235  new Swiper("#main-slider-v3", {
236    loop: true,
237    speed: 400,
238    slidesPerView: 3,
239    spaceBetween: 10,
240    autoplay: {
241      delay: 5000,
242      disableOnInteraction: false,
243    },
244    watchOverflow: true,
245    autoHeight: false,
246    navigation: {
247      nextEl: ".swiper-button-next",
248      prevEl: ".swiper-button-prev",
249    },
250    breakpoints: {
251      568: {
252        slidesPerView: 4,
253      },
254      768: {
255        slidesPerView: 1,
256        spaceBetween: 0,
257      },
258    },
259  });
260  //Main Slider END
261
262  //betsSlider START
263  new Swiper("#betsSlider", {
264    loop: true,
265    speed: 400,
266    slidesPerView: 1,
267    spaceBetween: 0,
268    watchOverflow: true,
269    autoHeight: false,
270    navigation: {
271      nextEl: ".swiper-button-next",
272      prevEl: ".swiper-button-prev",
273    },
274  });
275  //betsSlider END
276
277  //Games Slider START
278
279  new Swiper("#games-slider", {
280    loop: true,
281    speed: 400,
282    slidesPerView: 3,
283    spaceBetween: 5,
284    autoplay: {
285      delay: 3000,
286      disableOnInteraction: false,
287    },
288    watchOverflow: true,
289    autoHeight: false,
290    navigation: {
291      nextEl: "#games-slider .games-next",
292      prevEl: "#games-slider .games-prev",
293    },
294    breakpoints: {
295      0: {
296        slidesPerView: 1,
297      },
298      360: {
299        slidesPerView: 1,
300      },
301      550: {
302        slidesPerView: 2,
303      },
304      790: {
305        slidesPerView: 3,
306      },
307    },
308  });
309
310  //Games Slider END
311
312  //Event Slider START
313
314  // new Swiper("#events-slider", {
315  //   loop: true,
316  //   speed: 400,
317  //   slidesPerView: 5,
318  //   spaceBetween: 5,
319  //   autoplay: {
320  //     delay: 3000,
321  //     disableOnInteraction: false,
322  //   },
323  //   watchOverflow: true,
324  //   autoHeight: false,
325  //   navigation: {
326  //     nextEl: "#events-slider .event-next",
327  //     prevEl: "#events-slider .event-prev",
328  //   },
329  //   breakpoints: {
330  //     0: {
331  //       slidesPerView: 2,
332  //     },
333  //     360: {
334  //       slidesPerView: 2,
335  //     },
336  //     550: {
337  //       slidesPerView: 3,
338  //     },
339  //     790: {
340  //       slidesPerView: 5,
341  //     },
342  //   },
343  // });
344
345  new Swiper("#events-slider", {
346    loop: true,
347    speed: 400,
348    slidesPerView: 5,
349    spaceBetween: 5,
350    autoplay: {
351      delay: 3000,
352      disableOnInteraction: false,
353    },
354    watchOverflow: true,
355    autoHeight: false,
356    navigation: {
357      nextEl: "#events-slider .event-next",
358      prevEl: "#events-slider .event-prev",
359    },
360    breakpoints: {
361      0: {
362        slidesPerView: 5,
363      },
364      360: {
365        slidesPerView: 5,
366      },
367      550: {
368        slidesPerView: 3,
369      },
370      790: {
371        slidesPerView: 5,
372      },
373    },
374  });
375
376  //Event Slider END
377
378  //Leagues Slider START
379
380  new Swiper("#leagues-slider", {
381    loop: true,
382    speed: 400,
383    slidesPerView: 5,
384    spaceBetween: 5,
385    autoplay: {
386      delay: 3000,
387      disableOnInteraction: false,
388    },
389    watchOverflow: true,
390    autoHeight: false,
391    navigation: {
392      nextEl: "#leagues-slider .leagues-next",
393      prevEl: "#leagues-slider .leagues-prev",
394    },
395    breakpoints: {
396      0: {
397        slidesPerView: 5,
398      },
399      360: {
400        slidesPerView: 5,
401      },
402      550: {
403        slidesPerView: 6,
404      },
405      790: {
406        slidesPerView: 8,
407      },
408    },
409  });
410
411  //Leagues Slider END
412
413   //Stats Slider START
414
415  new Swiper("#stats-slider", {
416    loop: true,
417    speed: 400,
418    slidesPerView: 1,
419    watchOverflow: true,
420    autoHeight: false,
421	 autoplay: {
422      delay: 3000,
423      disableOnInteraction: false,
424    },
425    navigation: {
426      nextEl: ".stats-next",
427      prevEl: ".stats-prev",
428    },
429  });
430
431  //Stats Slider END
432
433  document.querySelectorAll(".drop").forEach((drop) => {
434    const dropContent = drop.querySelector(".options-holder");
435
436    if (dropContent) {
437      drop.addEventListener("click", () => {
438        drop.classList.toggle("active");
439
440        if (drop.classList.contains("active")) {
441          dropContent.style.display = "block";
442          dropContent.style.height = dropContent.scrollHeight + "px";
443        } else {
444          dropContent.style.height = "0";
445          setTimeout(() => (dropContent.style.display = "none"), 200);
446        }
447      });
448    }
449  });
450
451  // iframe
452
453var btn = document.getElementById("btnPlay");
454var boxGame = document.getElementById("boxGames");
455var iframe = document.getElementById("gameIframe");
456var blockReviewHead = document.getElementById("blockReviewHead");
457var infoStat = document.querySelector(".info-stat");
458var slotGamesC = document.getElementById("slotGame");
459
460if (btn) {
461  btn.addEventListener("click", function (event) {
462    event.preventDefault();
463    event.stopPropagation();
464
465    var windowWidth = window.innerWidth;
466
467    if (blockReviewHead) {

468      Array.from(blockReviewHead.children).forEach(function (child) {
469        if (child !== boxGame && child !== infoStat) {
470          child.style.display = "none";
471        }
472      });
473    }
474
475    if (windowWidth >= 650 && infoStat) {
476      infoStat.style.display = "none";
477    }
478
479    if (boxGame) {
480      boxGame.style.display = "block";
481    }
482  });
483}
484
485if (boxGame) {
486  window.addEventListener("scroll", function () {
487    var rect = boxGame.getBoundingClientRect();
488    var boxGameBottom = rect.top + window.scrollY + boxGame.offsetHeight;
489    var windowTop = window.scrollY;
490
491    if (boxGameBottom <= windowTop) {
492      hideGame();
493    } else {
494      boxGame.classList.remove("hidden");
495    }
496  });
497
498  if (slotGamesC) {
499    slotGamesC.addEventListener("click", function () {
500      hideGame();
501    });
502  }
503}
504
505function hideGame() {
506  if (boxGame) {
507    boxGame.classList.add("hidden");
508    boxGame.style.display = "none";
509  }
510
511  if (infoStat) {
512    infoStat.style.display = "";
513  }
514
515  if (blockReviewHead) {
516    Array.from(blockReviewHead.children).forEach(function (child) {
517      if (child !== boxGame && child !== infoStat) {
518        child.style.display = "";
519      }
520    });
521  }
522}
523
524
525  //slotGames Slider START
526
527  new Swiper("#slotGame", {
528    loop: true,
529    slidesPerView: 5,
530    spaceBetween: 10,
531    navigation: {
532      nextEl: ".slotG-next",
533      prevEl: ".slotG-prev",
534    },
535    breakpoints: {
536      0: {
537        direction: "horizontal",
538        slidesPerView: 4,
539        spaceBetween: 4,
540      },
541      728: {
542        direction: "vertical",
543        slidesPerView: 5,
544        spaceBetween: 10,
545      },
546    },
547  });
548
549  //Stats Slider END
550
551  const swiperSlides = document.querySelectorAll("#slotGame .swiper-slide img");
552  const previewImg = document.querySelector("#blockReviewHead #wrapImg img");
553  const buttonsBlock = document.querySelector("#wrapImg .buttons");
554
555  swiperSlides.forEach((slide, index) => {
556    slide.addEventListener("click", function () {
557      // Меняем картинку в превью
558      previewImg.src = slide.src;
559
560      // Управляем блоком кнопок
561      if (index === 0) {
562        buttonsBlock.style.display = "flex"; 
563      } else {
564        buttonsBlock.style.display = "none";
565      }
566    });
567  });
568  //Matches dropdown START
569  const dropDownButtons = document.querySelectorAll(".dropDownButton");
570
571  dropDownButtons.forEach((button) => {
572    button.addEventListener("click", function (e) {
573      e.preventDefault();
574      e.stopPropagation();
575      const dropDownContent = this.parentElement.nextElementSibling;
576
577      if (
578        dropDownContent &&
579        dropDownContent.classList.contains("dropDownContent")
580      ) {
581        this.classList.toggle("active");
582        dropDownContent.classList.toggle("expanded");
583      }
584    });
585  });
586
587  // Автоматично відкриваємо перший dropdown при завантаженні сторінки
588  if (dropDownButtons.length > 0) {
589    const firstButton = dropDownButtons[0];
590    const firstDropDownContent = firstButton.parentElement.nextElementSibling;
591    
592    if (firstDropDownContent && firstDropDownContent.classList.contains("dropDownContent")) {
593      firstButton.classList.add("active");
594      firstDropDownContent.classList.add("expanded");
595    }
596  }
597
598  //Matches dropdown END
599
600  document.querySelectorAll(".more-info").forEach((block) => {
601    block.addEventListener("click", () => {
602      block.classList.toggle("open");
603    });
604
605    // Скролл к якорям с учётом динамического хедера
606    document.querySelectorAll(".options-holder a.ancor").forEach((link) => {
607      link.addEventListener("click", (e) => {
608        e.preventDefault();
609        const targetId = link.getAttribute("href").substring(1);
610        const targetElement = document.getElementById(targetId);
611        if (!targetElement) return;
612        const header = document.querySelector("header");
613        const headerHeight = header ? header.offsetHeight : 0;
614        setTimeout(() => {
615          const elementPosition =
616            targetElement.getBoundingClientRect().top + window.scrollY;
617          const offsetPosition = elementPosition - headerHeight;
618          window.scrollTo({
619            top: offsetPosition,
620            behavior: "smooth",
621          });
622        }, 220);
623      });
624    });
625  });
626   // Sports Filter Functionality START
627  const sportsNavItems = document.querySelectorAll('.sportsNavItem');
628  const leagueWrappers = document.querySelectorAll('.leagueWrapper');
629
630  // Filter matches by sport
631  function filterMatches(sport) {
632    // Remove active class from all league wrappers

633    leagueWrappers.forEach(wrapper => {
634      wrapper.classList.remove('active');
635    });
636
637    // Add active class to the selected sport's wrapper
638    const selectedWrapper = document.querySelector(`.leagueWrapper[data-sport="${sport}"]`);
639    if (selectedWrapper) {
640      selectedWrapper.classList.add('active');
641    }
642  }
643
644  // Initialize sports filter
645  function initSportsFilter() {
646    // Add click listeners to sport navigation items
647    sportsNavItems.forEach(item => {
648      item.addEventListener('click', function() {
649        // Remove active class from all items
650        sportsNavItems.forEach(navItem => navItem.classList.remove('active'));
651        
652        // Add active class to clicked item
653        this.classList.add('active');
654        
655        // Get sport type from data attribute
656        const sport = this.getAttribute('data-sport');
657        
658        // Filter matches
659        filterMatches(sport);
660      });
661    });
662    
663    // Initialize with the first active sport (whatever it is)
664    const activeSport = document.querySelector('.sportsNavItem.active');
665    if (activeSport) {
666      const sport = activeSport.getAttribute('data-sport');
667      filterMatches(sport);
668    } else {
669      // If no active sport is found, activate the first one
670      const firstSport = sportsNavItems[0];
671      if (firstSport) {
672        firstSport.classList.add('active');
673        const sport = firstSport.getAttribute('data-sport');
674        filterMatches(sport);
675      }
676    }
677  }
678
679  // Initialize the sports filter when DOM is loaded
680  initSportsFilter();
681  // Sports Filter Functionality END
682   
683    document.addEventListener("scroll", () => {
684  const content = document.querySelector(".content");
685  const sidebarLeft = document.querySelector(".sidebar-left");
686  const sidebarRight = document.querySelector(".sidebar-right");
687
688  if (!content || !sidebarLeft || !sidebarRight) return;
689
690  const scrollY = window.scrollY;
691  const main = document.querySelector("main");
692  const mainHeight = main.scrollHeight;
693  const viewportHeight = window.innerHeight;
694

695  // высота всей страницы - высота окна = макс. прокрутка
696  const maxScroll = mainHeight - viewportHeight;
697
698  // прогресс скролла основной страницы (от 0 до 1)
699  const scrollProgress = Math.min(scrollY / maxScroll, 1);
700
701  // пределы прокрутки сайдбаров
702  const maxSidebarScrollLeft = sidebarLeft.scrollHeight - sidebarLeft.clientHeight;
703  const maxSidebarScrollRight = sidebarRight.scrollHeight - sidebarRight.clientHeight;
704
705  // вычисляем текущую позицию скролла для сайдбаров
706  sidebarLeft.scrollTop = scrollProgress * maxSidebarScrollLeft;
707  sidebarRight.scrollTop = scrollProgress * maxSidebarScrollRight;
708});
709});