https://profplus.info/profsoyuz/js/cabinet.js?v=1.0.39

1import { Slider } from "./slider.js";
2import { PanZoom } from "./panzoom.js";
3
4const tabButtons = document.querySelectorAll(".tab");
5const contentImage = document.getElementById("content-image");
6const headerTitle = document.querySelector(".header-right.desktop h3");
7const headerDescription = document.querySelector(".header-right.desktop .description");
8const sliderContainer = document.querySelector("[data-slider='cabinet']");
9
10const tabs = {
11  main: {
12    title: "ГЛАВНАЯ",
13    image: "./assets/images/cab-1.png",
14    headerTitle:
15      "Профиль организации, материалы для инфостендов, поздравления, напоминания",
16    headerDescription:
17      "Полноценный личный кабинет системы привилегий.",
18  },
19  lists: {
20    title: "УПРАВЛЕНИЕ СПИСКАМИ",
21    image: "./assets/images/cab-2.png",
22    headerTitle: "Реестр зарегистрированных членов профсоюза",
23    headerDescription: "Управление доступом ответственным лицом за пару кликов",
24  },
25  notifications: {
26    title: "ИНФОРМИРОВАНИЕ",
27    image: "./assets/images/cab-3.png",
28    headerTitle: "Отправляйте новости,<br> объявления, поздравления",
29    headerDescription:
30      "С помощью Push-уведомлений в мобильные приложения членов профсоюза.",
31  },
32  knowledge: {
33    title: "СТАТИСТИКА",
34    image: "./assets/images/cab-4.png",
35    headerTitle: "Просматривайте статистику применений",
36    headerDescription:
37      "Распределение применений по категориям партнёров среди пользователей организации.",
38  },
39  calendar: {
40    title: "КАЛЕНДАРЬ СОБЫТИЙ",
41    image: "./assets/images/cab-5.png",
42    headerTitle: "Единый календарь для всей организации",
43    headerDescription:
44      "Председатель и члены профкома, создают события в личном кабинете, а они автоматически отображаются 
у всех членов в приложении.",
45  },
46};
47
48tabButtons.forEach((button) => {
49  button.addEventListener("click", () => {
50    const tabId = button.getAttribute("data-tab");
51    const tabData = tabs[tabId];
52
53    tabButtons.forEach((btn) => btn.classList.remove("active"));
54    button.classList.add("active");
55
56    contentImage.src = tabData.image;
57    contentImage.alt = tabData.title;
58
59    headerTitle.innerHTML = tabData.headerTitle;
60    headerDescription.innerHTML = tabData.headerDescription;
61  });
62});
63
64function createSlide(tabKey) {
65  const tab = tabs[tabKey];
66
67  const slide = document.createElement("div");
68  slide.classList.add("content-card", "slide");
69
70  slide.innerHTML = `
71    <div class="block__header cabinet__header">
72        <div class="header-right">
73            <h3 class="text-underline">${tab.headerTitle}</h3>
74            <p class="description">${tab.headerDescription}</p>
75        </div>
76    </div>
77    <div class="content-grid">
78      <div class="image-section">
79        <img src="${tab.image}" alt="${tab.title}" id="panzoom-image" loading="lazy">
80      </div>
81     
82    </div>
83  `;
84
85  return slide;
86}
87
88Object.keys(tabs).forEach((tabKey) => {
89  const slideElement = createSlide(tabKey);
90  sliderContainer.appendChild(slideElement);
91});
92
93new Slider({
94    sliderSelector: "[data-slider='cabinet']",
95    btnPrevSelector: "[data-btn-prev='cabinet']",
96    btnNextSelector: "[data-btn-next='cabinet']",
97    dotsContainerSelector: "[data-dots-container='cabinet']",
98    tabsContainerSelector: ".container-mobile",
99    autoStart: false,
100    config: {
101      transitionDuration: 500,
102      showDots: true,
103    },
104  });
105  
106const imgs = document.querySelectorAll("#panzoom-image");

107imgs.forEach((img) => new PanZoom(img, { minScale: 1, maxScale: 4 }));