https://slidy.ai/blog/assets/js/index.js?v=10130fec

1document.addEventListener("gesturestart", function (e) {
2  e.preventDefault();
3});
4
5document.addEventListener("gesturechange", function (e) {
6  e.preventDefault();
7});
8
9document.addEventListener("gestureend", function (e) {
10  e.preventDefault();
11});
12
13$(".close-preserve").on("click", function (e) {
14  $(".preserve-show-page").addClass("close-banner");
15});
16
17const reviewsItemsBlock = document.querySelector(".reviews-items");
18
19if (reviewsItemsBlock) {
20  const macyReviewsGrid = Macy({
21    container: ".reviews-items",
22    margin: 10,
23    columns: 3,
24    breakAt: {
25      1100: 2,
26      768: 1,
27    },
28  });
29}
30
31const header = document.querySelector("header");
32window.addEventListener("scroll", function () {
33  const headerTop = document.querySelector("header");
34  if (window.scrollY > 0) {
35    headerTop.classList.add("moved");
36  } else {
37    headerTop.classList.remove("moved");
38  }
39});
40
41function updateImages(theme) {
42  const images = document.querySelectorAll("img[data-light][data-dark]");
43  images.forEach((img) => {
44    const source = theme === "dark" ? img.dataset.dark : img.dataset.light;
45    if (source && img.getAttribute("src") !== source) {
46      img.setAttribute("src", source);
47    }
48    img.setAttribute("data-theme-ready", "");
49  });
50}
51
52(function initThemeControls() {
53  const root = document.documentElement;
54
55  function currentTheme() {
56    return root.dataset.theme === "dark" ? "dark" : "light";
57  }
58
59  function syncControls(theme) {
60    document.querySelectorAll("[data-theme-toggle]").forEach((control) => {
61      control.setAttribute("aria-pressed", String(theme === "dark"));
62    });
63  }
64
65  function setTheme(theme) {
66    if (theme !== "dark" && theme !== "light") return false;
67    const themeChanged = theme !== currentTheme();
68
69    if (themeChanged) {
70      root.dataset.theme = theme;
71      root.style.colorScheme = theme;
72      updateImages(theme);
73    }
74
75    try {
76      localStorage.setItem("theme", theme);
77    } catch (_error) {
78      // Theme switching still works when storage is unavailable.
79    }
80
81    syncControls(theme);
82    return true;
83  }
84
85  function toggleTheme() {
86    return setTheme(currentTheme() === "dark" ? "light" : "dark");
87  }
88
89  window.slidyTheme = {
90    get: currentTheme,
91    set: setTheme,
92    toggle: toggleTheme,
93  };
94
95  document.addEventListener("click", (event) => {
96    const control = event.target.closest("[data-theme-toggle]");
97    if (!control) return;
98    const requestedTheme = control.dataset.themeValue;
99    setTheme(
100      requestedTheme === "dark" || requestedTheme === "light"
101        ? requestedTheme
102        : currentTheme() === "dark"
103          ? "light"
104          : "dark",
105    );
106  });
107
108  syncControls(currentTheme());
109})();
110
111document.addEventListener("DOMContentLoaded", () => {
112  const items = document.querySelectorAll(".animate-item");
113  if (!items.length) return;
114
115  const observer = new IntersectionObserver(
116    (entries) =>
117      entries.forEach((entry) => {
118        if (!entry.isIntersecting) return;
119
120        const index = [...items].indexOf(entry.target);
121        entry.target.style.transitionDelay = `${0.15}s`;
122        entry.target.classList.add("visible");
123
124        observer.unobserve(entry.target);
125      }),
126    { threshold: 0.1 },
127  );
128
129  items.forEach((item) => observer.observe(item));
130});
131
132document.addEventListener("DOMContentLoaded", () => {
133  const animatedItems = document.querySelectorAll(
134    ".fade-left, .fade-right, .fade-top, .fade-bottom",
135  );
136
137  const observer = new IntersectionObserver(
138    (entries) => {
139      entries.forEach((entry) => {
140        if (entry.isIntersecting) {
141          entry.target.classList.add("show");
142        } else {
143        }
144      });
145    },
146    {
147      threshold: 0.15,
148    },
149  );
150
151  animatedItems.forEach((item) => observer.observe(item));
152});
153
154$(function () {
155  let Accordion = function (el, multiple) {
156    this.el = el || {};
157    this.multiple = multiple || false;
158    let links = this.el.find(".link");
159    links.on("click", { el: this.el, multiple: this.multiple }, this.dropdown);
160  };
161
162  Accordion.prototype.dropdown = function (e) {
163    let $el = e.data.el;

164    let $this = $(this),
165      $next = $this.next();
166
167    $next.slideToggle();
168
169    if (!e.data.multiple) {
170      $el.find(".submenu").not($next).slideUp();
171    }
172
173    if (!$this.hasClass("open")) {
174      $(".link").removeClass("open");
175      $this.addClass("open");
176    } else {
177      $this.removeClass("open");
178    }
179  };
180  let accordion = new Accordion($("#accordion"), false);
181});
182
183document.addEventListener("DOMContentLoaded", function () {
184  const catalog = document.querySelector("[data-catalog]");
185  if (!catalog) return;
186
187  const tabButtons = catalog.querySelectorAll("[data-tab-btn]");
188  const tabPanels = catalog.querySelectorAll("[data-tab-content]");
189
190  const subtabButtons = catalog.querySelectorAll("[data-subtab-btn]");
191  const subtabPanels = catalog.querySelectorAll("[data-subtab-content]");
192
193  tabButtons.forEach((button) => {
194    button.addEventListener("click", function () {
195      const target = this.getAttribute("data-tab-btn");
196
197      tabButtons.forEach((btn) => btn.classList.remove("is-active"));
198      this.classList.add("is-active");
199
200      tabPanels.forEach((panel) => {
201        panel.classList.toggle(
202          "is-active",
203          panel.getAttribute("data-tab-content") === target,
204        );
205      });
206    });
207  });
208
209  subtabButtons.forEach((button) => {
210    button.addEventListener("click", function () {
211      const target = this.getAttribute("data-subtab-btn");
212
213      subtabButtons.forEach((btn) => btn.classList.remove("is-active"));
214      this.classList.add("is-active");
215
216      subtabPanels.forEach((panel) => {
217        panel.classList.toggle(
218          "is-active",
219          panel.getAttribute("data-subtab-content") === target,
220        );
221      });
222    });
223  });
224});
225
226document.addEventListener("DOMContentLoaded", () => {
227  const tabsWrapper = document.querySelector(".hero-task");
228  const buttons = document.querySelectorAll(".hero-task-click");
229  const columns = document.querySelectorAll(".hero-task-colum");
230
231  if (!tabsWrapper || !buttons.length || !columns.length) return;
232
233  function showTab(value) {
234    buttons.forEach((button) => {
235      button.classList.toggle("active", button.dataset.val === value);
236    });
237
238    columns.forEach((column) => {
239      column.style.display = "none";
240    });
241
242    columns.forEach((column) => {
243      if (column.dataset.val === value) {
244        column.style.display = "flex";
245      }
246    });
247  }
248
249  const firstButton = buttons[0];
250  const firstValue = firstButton.dataset.val;
251
252  if (firstValue) {
253    showTab(firstValue);
254  }
255
256  buttons.forEach((button) => {
257    button.addEventListener("click", () => {
258      const value = button.dataset.val;
259      if (!value) return;
260
261      showTab(value);
262    });
263  });
264});
265
266// =====-gallery-js-======
267
268document.addEventListener("DOMContentLoaded", () => {
269  const galleryWrapper = document.querySelector(".gallery-menu");
270  const galleryButtons = document.querySelectorAll(".gallery-click");
271  const galleryColumns = document.querySelectorAll(".gallery-js");
272
273  if (!galleryWrapper || !galleryButtons.length || !galleryColumns.length)
274    return;
275
276  function showTab(value) {
277    galleryButtons.forEach((button) => {
278      button.classList.toggle("active", button.dataset.val === value);
279    });
280
281    galleryColumns.forEach((column) => {
282      column.style.display = "none";
283    });
284
285    galleryColumns.forEach((column) => {
286      if (column.dataset.val === value) {
287        column.style.display = "flex";
288      }
289    });
290  }
291
292  const galleryFirstButton = galleryButtons[0];
293  const galleryFirstValue = galleryFirstButton.dataset.val;
294
295  if (galleryFirstValue) {
296    showTab(galleryFirstValue);
297  }
298
299  galleryButtons.forEach((button) => {
300    button.addEventListener("click", () => {
301      const galleryValue = button.dataset.val;
302      if (!galleryValue) return;
303
304      showTab(galleryValue);
305    });
306  });
307});
308
309// =====-gallery-js-======
310
311// =====-tools-menu-js-======
312
313document.addEventListener("DOMContentLoaded", () => {
314  const toolsWrapper = document.querySelector(".tools-menu");
315  const toolsButtons = document.querySelectorAll(".tools-click");
316  const toolsColumns = document.querySelectorAll(".tools-js");
317
318  if (!toolsWrapper || !toolsButtons.length || !toolsColumns.length) return;
319
320  function showTab(value) {
321    toolsButtons.forEach((button) => {
322      button.classList.toggle("active", button.dataset.val === value);
323    });
324
325    toolsColumns.forEach((column) => {
326      column.style.display = "none";
327    });
328
329    toolsColumns.forEach((column) => {
330      if (column.dataset.val === value) {
331        column.style.display = "flex";
332      }
333    });
334  }
335
336  const toolsFirstButton = toolsButtons[0];
337  const toolsFirstValue = toolsFirstButton.dataset.val;
338
339  if (toolsFirstValue) {
340    showTab(toolsFirstValue);
341  }
342
343  toolsButtons.forEach((button) => {
344    button.addEventListener("click", () => {
345      const toolsValue = button.dataset.val;
346      if (!toolsValue) return;
347
348      showTab(toolsValue);
349    });
350  });
351});
352
353// =====-tools-menu-js-======
354
355// =====-efficiency-tab--js-======
356

357document.querySelectorAll(".efficiency-tab").forEach(function (tab) {
358  tab.addEventListener("click", function () {
359    var efficiency = document.querySelector(".efficiency");
360    var target = tab.getAttribute("data-target");
361
362    document.querySelectorAll(".efficiency-tab").forEach(function (t) {
363      t.classList.remove("is-active");
364    });
365    tab.classList.add("is-active");
366
367    efficiency.classList.toggle("is-right", target === "right");
368  });
369});
370// =====-efficiency-tab--js-======
371
372document.addEventListener("DOMContentLoaded", () => {
373  const compareMobileTabsButtons = document.querySelectorAll(
374    ".compare-tabs-mobile button",
375  );
376  const compareTableBlock = document.querySelector(".compare-table");
377
378  if (!compareMobileTabsButtons.length || !compareTableBlock) return;
379
380  const compareFeatureColumn = compareTableBlock.querySelector(
381    ".compare-col--feature",
382  );
383  const compareAccentColumn = compareTableBlock.querySelector(
384    ".compare-col--accent",
385  );
386  const compareOtherColumn = compareTableBlock.querySelector(
387    ".compare-col--other",
388  );
389
390  if (!compareFeatureColumn || !compareAccentColumn || !compareOtherColumn)
391    return;
392
393  const setCompareMobileActiveTab = (targetSelector) => {
394    compareMobileTabsButtons.forEach((compareTabButton) => {
395      compareTabButton.classList.toggle(
396        "active",
397        compareTabButton.dataset.target === targetSelector,
398      );
399    });
400  };
401
402  const scrollCompareTableToColumn = (compareTargetColumn) => {
403    if (!compareTargetColumn) return;
404
405    compareTableBlock.scrollTo({
406      left: compareTargetColumn.offsetLeft,
407      behavior: "smooth",
408    });
409  };
410
411  const switchCompareMobileColumns = (targetSelector) => {
412    setCompareMobileActiveTab(targetSelector);
413
414    if (targetSelector === ".compare-col--other") {
415      compareTableBlock.classList.add("show-other");
416
417      requestAnimationFrame(() => {
418        requestAnimationFrame(() => {
419          scrollCompareTableToColumn(compareOtherColumn);
420        });
421      });
422
423      return;
424    }
425
426    compareTableBlock.classList.remove("show-other");
427
428    compareTableBlock.scrollTo({
429      left: 0,
430      behavior: "smooth",
431    });
432  };
433
434  const compareDefaultActiveButton =
435    document.querySelector(".compare-tabs-mobile button.active") ||
436    compareMobileTabsButtons[0];
437
438  if (compareDefaultActiveButton) {
439    switchCompareMobileColumns(compareDefaultActiveButton.dataset.target);
440  }
441
442  compareMobileTabsButtons.forEach((compareTabButton) => {
443    compareTabButton.addEventListener("click", () => {
444      const compareTargetSelector = compareTabButton.dataset.target;
445      if (!compareTargetSelector) return;
446
447      switchCompareMobileColumns(compareTargetSelector);
448    });
449  });
450});
451
452// =====-sideNav-tab--js-======
453
454document.addEventListener("DOMContentLoaded", function () {
455  const HEADER_HEIGHT = 100;
456
457  const sideNavElement = document.getElementById("sideNav");
458  const templatesSectionElement = document.getElementById("possibilities");
459  const navItemElements = document.querySelectorAll(".side-nav__item");
460  const sectionElements = document.querySelectorAll(
461    "#possibilities, #gallery, #tools, #cases, #statistics, #efficiency, #compare,  #faq, #join",
462  );
463
464  if (!sideNavElement || !templatesSectionElement || !navItemElements.length)
465    return;
466
467  function toggleSideNavVisibility() {
468    const templatesTop = templatesSectionElement.offsetTop;
469
470    if (window.scrollY >= templatesTop - HEADER_HEIGHT) {
471      sideNavElement.classList.add("show");
472    } else {
473      sideNavElement.classList.remove("show");
474    }
475  }
476
477  function setActiveNavItem() {

478    let currentSectionId = "";
479
480    sectionElements.forEach((sectionElement) => {
481      const sectionTop = sectionElement.offsetTop - HEADER_HEIGHT - 40;
482      const sectionBottom = sectionTop + sectionElement.offsetHeight;
483
484      if (window.scrollY >= sectionTop && window.scrollY < sectionBottom) {
485        currentSectionId = sectionElement.id;
486      }
487    });
488
489    navItemElements.forEach((navItemElement) => {
490      navItemElement.classList.toggle(
491        "active",
492        navItemElement.dataset.target === currentSectionId,
493      );
494    });
495  }
496
497  navItemElements.forEach((navItemElement) => {
498    navItemElement.addEventListener("click", function (event) {
499      event.preventDefault();
500
501      const targetId = this.dataset.target;
502      const targetElement = document.getElementById(targetId);
503
504      if (!targetElement) return;
505
506      const targetTop = targetElement.offsetTop - HEADER_HEIGHT;
507
508      window.scrollTo({
509        top: targetTop,
510        behavior: "smooth",
511      });
512    });
513  });
514
515  toggleSideNavVisibility();
516  setActiveNavItem();
517
518  window.addEventListener("scroll", function () {
519    toggleSideNavVisibility();
520    setActiveNavItem();
521  });
522
523  window.addEventListener("resize", function () {
524    toggleSideNavVisibility();
525    setActiveNavItem();
526  });
527});
528
529// =====-sideNav-tab--js-======
530
531// =====-Modal-tab--js-======
532
533$(".open_modal").on("click", function () {
534  let attr = $(this).attr("data-val");
535  let modal = $("#" + attr);
536  modal.removeClass("out");
537  modal.fadeIn();
538  $("body").addClass("body_fix");
539});
540
541$(".close").on("click", function () {
542  $("body").removeClass("body_fix");
543  let prt = $(this).parents(".modal");
544
545  prt.addClass("out");
546  setTimeout(function () {
547    prt.fadeOut();
548  }, 100);
549});
550
551$(window).on("click", function (event) {
552  $(".modal").each(function () {
553    let gtattr = $(this).attr("id");
554    let new_mod = $("#" + gtattr);
555    let md_cnt = $(new_mod).find(".modal-content");
556    if (event.target === $(md_cnt)[0]) {
557      setTimeout(function () {
558        $(new_mod).addClass("out");
559        $(new_mod).fadeOut();
560      }, 100);
561      $("body").removeClass("body_fix");
562    }
563    if (event.target === this) {
564      setTimeout(function () {
565        $(new_mod).addClass("out");
566        $(new_mod).fadeOut();
567      }, 100);
568    }
569  });
570});
571
572// =====-Modal-tab--js-======
573
574// =====-sidenav-tab--js-======
575
576document.addEventListener("DOMContentLoaded", () => {
577  const mobileSideNavBlock = document.querySelector(".side-nav-mobile");
578  const mobileSideNavScrollContainer = document.querySelector(
579    ".side-nav-mobile-wrapper ul",
580  );
581
582  if (!mobileSideNavBlock || !mobileSideNavScrollContainer) return;
583
584  const mobileSideNavLinks = mobileSideNavScrollContainer.querySelectorAll("a");
585  const mobileHeaderOffsetValue = 100;
586
587  if (!mobileSideNavLinks.length) return;
588
589  const mobileSectionsData = [];
590
591  mobileSideNavLinks.forEach((mobileLinkElement) => {
592    const mobileSectionId =
593      mobileLinkElement.getAttribute("data-target") ||
594      mobileLinkElement.getAttribute("href")?.replace("#", "");
595    if (!mobileSectionId) return;
596    const mobileTargetSectionElement = document.getElementById(mobileSectionId);
597    if (!mobileTargetSectionElement) return;
598    mobileSectionsData.push({
599      link: mobileLinkElement,
600      section: mobileTargetSectionElement,
601    });
602
603    mobileLinkElement.addEventListener("click", (event) => {
604      event.preventDefault();
605
606      const mobileTargetTopPosition =
607        mobileTargetSectionElement.getBoundingClientRect().top +
608        window.pageYOffset -
609        mobileHeaderOffsetValue;
610
611      window.scrollTo({
612        top: mobileTargetTopPosition,
613        behavior: "smooth",
614      });
615
616      setTimeout(() => {
617        scrollMobileActiveLinkIntoView(mobileLinkElement);
618      }, 200);
619    });
620  });
621
622  if (!mobileSectionsData.length) return;
623
624  const mobileVisibilityTriggerSection = mobileSectionsData[0].section;
625
626  const removeMobileActiveClasses = () => {
627    mobileSectionsData.forEach((mobileItem) => {
628      mobileItem.link.classList.remove("active");
629    });
630  };
631
632  const scrollMobileActiveLinkIntoView = (mobileActiveLinkElement) => {
633    if (!mobileActiveLinkElement) return;
634
635    mobileActiveLinkElement.scrollIntoView({
636      behavior: "smooth",
637      inline: "center",
638      block: "nearest",
639    });
640  };
641
642  const updateMobileSideNavVisibility = () => {
643    const mobileTriggerStartPoint =
644      mobileVisibilityTriggerSection.offsetTop - mobileHeaderOffsetValue;
645
646    if (window.scrollY >= mobileTriggerStartPoint) {
647      mobileSideNavBlock.classList.add("active");
648    } else {
649      mobileSideNavBlock.classList.remove("active");
650    }
651  };
652
653  const updateMobileHorizontalEdgeClasses = () => {

654    const mobileCurrentScrollLeft = mobileSideNavScrollContainer.scrollLeft;
655    const mobileVisibleWidth = mobileSideNavScrollContainer.clientWidth;
656    const mobileFullScrollWidth = mobileSideNavScrollContainer.scrollWidth;
657
658    mobileSideNavBlock.classList.remove("first", "last");
659
660    if (mobileCurrentScrollLeft <= 2) {
661      mobileSideNavBlock.classList.add("first");
662    }
663
664    if (
665      mobileCurrentScrollLeft + mobileVisibleWidth >=
666      mobileFullScrollWidth - 2
667    ) {
668      mobileSideNavBlock.classList.add("last");
669    }
670  };
671
672  let mobileLastActiveLinkElement = null;
673
674  const updateMobileActiveLinkByScroll = () => {
675    const mobileCurrentScrollPoint =
676      window.scrollY + mobileHeaderOffsetValue + 20;
677    let mobileNewActiveLinkElement = null;
678
679    mobileSectionsData.forEach((mobileItem) => {
680      const mobileSectionTopPoint = mobileItem.section.offsetTop;
681      const mobileSectionBottomPoint =
682        mobileSectionTopPoint + mobileItem.section.offsetHeight;
683      if (
684        mobileCurrentScrollPoint >= mobileSectionTopPoint &&
685        mobileCurrentScrollPoint < mobileSectionBottomPoint
686      ) {
687        mobileNewActiveLinkElement = mobileItem.link;
688      }
689    });
690
691    removeMobileActiveClasses();
692
693    if (mobileNewActiveLinkElement) {
694      mobileNewActiveLinkElement.classList.add("active");
695
696      if (mobileLastActiveLinkElement !== mobileNewActiveLinkElement) {
697        mobileLastActiveLinkElement = mobileNewActiveLinkElement;
698        scrollMobileActiveLinkIntoView(mobileNewActiveLinkElement);
699      }
700    } else {
701      mobileLastActiveLinkElement = null;
702    }
703  };
704
705  const updateMobileSideNavAllStates = () => {
706    updateMobileSideNavVisibility();
707    updateMobileActiveLinkByScroll();
708    updateMobileHorizontalEdgeClasses();
709  };
710
711  updateMobileSideNavAllStates();
712  window.addEventListener("scroll", updateMobileSideNavAllStates);
713  window.addEventListener("resize", updateMobileSideNavAllStates);
714  mobileSideNavScrollContainer.addEventListener(
715    "scroll",
716    updateMobileHorizontalEdgeClasses,
717  );
718});
719
720(function () {
721  function updateScrollFades(menu) {
722    const ul = menu.querySelector("ul");
723    if (!ul) return;
724
725    const maxScroll = ul.scrollWidth - ul.clientWidth;
726
727    menu.classList.toggle("has-scroll-left", ul.scrollLeft > 2);
728    menu.classList.toggle("has-scroll-right", ul.scrollLeft < maxScroll - 2);
729  }
730
731  function initMenu(menu) {
732    // чтобы не навешивать обработчики повторно на один и тот же блок
733    if (menu.dataset.scrollFadeInit) return;
734    menu.dataset.scrollFadeInit = "true";
735
736    const ul = menu.querySelector("ul");
737    if (!ul) return;
738
739    updateScrollFades(menu);
740    ul.addEventListener("scroll", () => updateScrollFades(menu));
741    window.addEventListener("resize", () => updateScrollFades(menu));
742  }
743
744  function initAllMenus() {
745    document.querySelectorAll(".task-menu").forEach(initMenu);
746  }
747
748  // блок уже есть на странице при загрузке
749  if (document.readyState === "loading") {
750    document.addEventListener("DOMContentLoaded", initAllMenus);
751  } else {
752    initAllMenus();
753  }
754
755  // на случай если .task-menu появится динамически позже
756  const observer = new MutationObserver(() => {
757    initAllMenus();
758  });
759
760  observer.observe(document.body, {
761    childList: true,
762    subtree: true,
763  });
764})();
765
766// =======================
767
768document.addEventListener("DOMContentLoaded", function () {
769  const customCategorySelect = document.querySelector(".c-categories-select");
770  if (!customCategorySelect) return;
771  const customCategoryHeader =
772    customCategorySelect.querySelector(".c-select-header");
773  const customCategoryHeaderText =
774    customCategorySelect.querySelector(".c-select-header p");
775  const customCategoryOptions = customCategorySelect.querySelectorAll(
776    ".c-select-options li",
777  );
778  if (customCategoryHeader) {
779    customCategoryHeader.addEventListener("click", function (e) {
780      e.stopPropagation();
781      customCategorySelect.classList.toggle("active");
782    });
783  }
784  customCategoryOptions.forEach(function (customCategoryOption) {
785    customCategoryOption.addEventListener("click", function (e) {
786      e.stopPropagation();
787      customCategoryOptions.forEach(function (item) {
788        item.classList.remove("active");
789      });
790      customCategoryOption.classList.add("active");
791      if (customCategoryHeaderText) {
792        customCategoryHeaderText.textContent =
793          customCategoryOption.querySelector("span").textContent;
794      }
795      customCategorySelect.classList.remove("active");
796    });
797  });
798  document.addEventListener("click", function (e) {
799    if (!customCategorySelect.contains(e.target)) {
800      customCategorySelect.classList.remove("active");
801    }
802  });
803});
804
805document.addEventListener("DOMContentLoaded", function () {
806  const customSelectedCategoryButtons = document.querySelectorAll(
807    ".c-selected-categories button",
808  );
809
810  if (!customSelectedCategoryButtons.length) return;
811
812  customSelectedCategoryButtons.forEach(
813    function (customSelectedCategoryButton) {
814      customSelectedCategoryButton.addEventListener("click", function () {
815        customSelectedCategoryButton.remove();
816      });
817    },
818  );
819});
820
821document.addEventListener("DOMContentLoaded", function () {
822  const tabsWrapper = document.querySelector(".slidy-catalog__tabs");
823  const toggleButton = document.querySelector(".c-show-all");
824
825  if (!tabsWrapper || !toggleButton) return;
826
827  const hiddenTabs = tabsWrapper.querySelectorAll(".show-after-click");
828  const buttonText = toggleButton.querySelector("span");
829
830  if (!hiddenTabs.length) return;
831

832  hiddenTabs.forEach(function (item) {
833    item.style.display = "none";
834  });
835
836  toggleButton.addEventListener("click", function () {
837    const isOpened = toggleButton.classList.contains("is-open");
838
839    if (isOpened) {
840      hiddenTabs.forEach(function (item) {
841        item.style.display = "none";
842      });
843
844      toggleButton.classList.remove("is-open");
845
846      if (buttonText) {
847        buttonText.textContent = "Показать все";
848      }
849    } else {
850      hiddenTabs.forEach(function (item) {
851        item.style.display = "";
852      });
853
854      toggleButton.classList.add("is-open");
855
856      if (buttonText) {
857        buttonText.textContent = "Показать меньше";
858      }
859    }
860  });
861});
862document.addEventListener("DOMContentLoaded", function () {
863  const catalog = document.querySelector("[data-catalog]");
864  if (!catalog) return;
865
866  const pagination = document.querySelector(".catalog-panel-pagination");
867  if (!pagination) return;
868
869  const paginationList = pagination.querySelector("ul");
870  const prevBtn = pagination.querySelector(".panel-pagination-prev");
871  const nextBtn = pagination.querySelector(".panel-pagination-next");
872
873  if (!paginationList || !prevBtn || !nextBtn) return;
874
875  let currentPage = 1;
876  function getItemsPerPage() {
877    if (window.innerWidth <= 767) return 1;
878    if (window.innerWidth <= 991) return 2;
879    return 999;
880  }
881  function getActivePanel() {
882    return catalog.querySelector(".slidy-catalog__panel.is-active");
883  }
884  function getActiveCols() {
885    const activePanel = getActivePanel();
886    if (!activePanel) return [];
887    return Array.from(activePanel.querySelectorAll(".slidy-catalog__col"));
888  }
889  function resetColsVisibility() {
890    const allCols = catalog.querySelectorAll(".slidy-catalog__col");
891    allCols.forEach((col) => {
892      col.style.display = "";
893    });
894  }
895  function renderPagination(totalPages) {
896    paginationList.innerHTML = "";
897
898    for (let i = 1; i <= totalPages; i++) {
899      const li = document.createElement("li");
900      const a = document.createElement("a");
901
902      a.href = "#";
903      a.textContent = i;
904
905      if (i === currentPage) {
906        a.classList.add("active");
907      }
908
909      a.addEventListener("click", function (e) {
910        e.preventDefault();
911        currentPage = i;
912        updateCatalogPagination();
913      });
914
915      li.appendChild(a);
916      paginationList.appendChild(li);
917    }
918  }
919  function updateArrows(totalPages) {
920    prevBtn.classList.toggle("disabled", currentPage <= 1);
921    nextBtn.classList.toggle("disabled", currentPage >= totalPages);
922  }
923
924  function updateCatalogPagination() {
925    const cols = getActiveCols();
926    const itemsPerPage = getItemsPerPage();
927
928    resetColsVisibility();
929
930    if (!cols.length) {
931      pagination.style.display = "none";
932      return;
933    }
934
935    const totalPages = Math.ceil(cols.length / itemsPerPage);
936
937    if (itemsPerPage >= cols.length) {
938      pagination.style.display = "none";
939      return;
940    }
941
942    if (currentPage > totalPages) currentPage = totalPages;
943    if (currentPage < 1) currentPage = 1;
944
945    const start = (currentPage - 1) * itemsPerPage;
946    const end = start + itemsPerPage;
947
948    cols.forEach((col, index) => {
949      col.style.display = index >= start && index < end ? "" : "none";
950    });
951
952    pagination.style.display = "flex";
953    renderPagination(totalPages);
954    updateArrows(totalPages);
955  }
956  prevBtn.addEventListener("click", function (e) {
957    e.preventDefault();
958    if (currentPage > 1) {
959      currentPage--;
960      updateCatalogPagination();
961    }
962  });
963  nextBtn.addEventListener("click", function (e) {
964    e.preventDefault();
965
966    const cols = getActiveCols();
967    const totalPages = Math.ceil(cols.length / getItemsPerPage());
968    if (currentPage < totalPages) {
969      currentPage++;
970      updateCatalogPagination();
971    }
972  });
973  window.addEventListener("resize", function () {
974    currentPage = 1;
975    updateCatalogPagination();
976  });
977  const observer = new MutationObserver(function () {
978    currentPage = 1;
979    updateCatalogPagination();
980  });
981  const panels = catalog.querySelectorAll(".slidy-catalog__panel");

982  panels.forEach((panel) => {
983    observer.observe(panel, {
984      attributes: true,
985      attributeFilter: ["class"],
986    });
987  });
988
989  updateCatalogPagination();
990});
991
992const fileInput = document.getElementById("fileInput");
993const fileName = document.getElementById("fileName");
994
995if (fileInput && fileName) {
996  fileInput.addEventListener("change", function () {
997    if (this.files.length > 0) {
998      fileName.textContent = `Вы выбрали: ${this.files[0].name}`;
999    } else {
1000      fileName.textContent = "";
1001    }
1002  });
1003}
1004
1005const starList = document.getElementById("star-list");
1006
1007if (starList) {
1008  const stars = starList.querySelectorAll("li");
1009  const ratingValue = document.getElementById("rating-value");
1010
1011  let currentRating = 0;
1012
1013  stars.forEach((star) => {
1014    star.addEventListener("mouseenter", () => {
1015      const rating = parseInt(star.getAttribute("data-value"));
1016      updateStars(rating);
1017    });
1018
1019    star.addEventListener("click", () => {
1020      currentRating = parseInt(star.getAttribute("data-value"));
1021      updateStars(currentRating);
1022    });
1023  });
1024
1025  starList.addEventListener("mouseleave", () => {
1026    updateStars(currentRating);
1027  });
1028
1029  function updateStars(rating) {
1030    if (ratingValue) {
1031      ratingValue.textContent = rating;
1032    }
1033
1034    stars.forEach((star) => {
1035      const val = parseInt(star.getAttribute("data-value"));
1036      const icon = star.querySelector("i");
1037
1038      if (val <= rating) {
1039        icon.classList.remove("star-rating-unset");
1040      } else {
1041        icon.classList.add("star-rating-unset");
1042      }
1043    });
1044  }
1045
1046  // Изначально ничего не выбрано
1047  updateStars(0);
1048}