https://insperia.ru/wp-content/themes/twentytwentyfour/js/cart-summer/class/Swiper.js?v=1791249726

1class Swiper {
2  sizeWorkStart = 900;
3  resizeTimeout;
4  startX = 0;
5  currentX = 0;
6  isDragging = false;
7  threshold = 50;
8  container;
9  card;
10  index = 0;
11  traslate = [];
12  baseTranslateX = 0; // текущая базовая позиция
13
14  constructor(popup, arrows) {
15    this.container = popup.querySelector(".popup-tariff__container-cards");
16    this.cards = popup.querySelectorAll(".popup-tariff__container-card:not(.d-none)");
17    this.card = this.cards[0];
18    this.arrows = arrows;
19
20    this.handleStart = this.handleStart.bind(this);
21    this.handleMove = this.handleMove.bind(this);
22    this.handleEnd = this.handleEnd.bind(this);
23    this.handleResize = this.handleResize.bind(this);
24    this.handleArrowLeft = this.swipeRight.bind(this);
25    this.handleArrowRight = this.swipeLeft.bind(this);
26
27    this.setupInitialState();
28    this.setupHandlers();
29  }
30
31  setupInitialState() {
32    this.index = 0;
33    this.container.style.transition = "transform 0.3s ease";
34    this.arrows.left.classList.add("dontwork");
35    this.arrows.right.classList.remove("dontwork");
36    this.onOpen();
37  }
38
39  onOpen() {
40    this.getTraslate();
41    this.updateTransform();
42  }
43
44  setupHandlers() {
45    window.addEventListener("resize", this.handleResize);
46    this.container.addEventListener("touchstart", this.handleStart, { passive: true });
47    this.container.addEventListener("touchmove", this.handleMove, { passive: false });
48    this.container.addEventListener("touchend", this.handleEnd);
49
50    this.container.addEventListener("mousedown", this.handleStart);
51    this.container.addEventListener("mousemove", this.handleMove);
52    this.container.addEventListener("mouseup", this.handleEnd);
53
54    this.arrows.left.addEventListener("click", this.handleArrowLeft);
55    this.arrows.right.addEventListener("click", this.handleArrowRight);
56  }
57
58  handleResize() {
59    clearTimeout(this.resizeTimeout);
60    this.resizeTimeout = setTimeout(() => this.onOpen(), 100);
61  }
62
63  getTraslate() {
64    const styles = window.getComputedStyle(this.container);
65    const gap = parseFloat(styles.gap || styles.rowGap || 0);
66    const cardWidth = this.card.offsetWidth;
67    this.traslate = Array.from(this.cards).map(
68      (_, i) => (cardWidth + gap) * i
69    );
70    this.baseTranslateX = -this.traslate[this.index];
71  }
72
73  updateTransform() {
74    this.container.style.transform = `translateX(${-this.traslate[this.index]}px)`;
75    this.baseTranslateX = -this.traslate[this.index];
76  }
77
78  handleStart(e) {
79    this.isDragging = true;
80    this.container.style.transition = "none";
81    this.startX = e.touches ? e.touches[0].clientX : e.clientX;
82    this.currentX = this.startX;
83  }
84
85  handleMove(e) {
86    if (!this.isDragging) return;
87    e.preventDefault(); // чтобы не скроллилась страница на iOS
88    this.currentX = e.touches ? e.touches[0].clientX : e.clientX;
89
90    const deltaX = this.currentX - this.startX;
91    this.container.style.transform = `translateX(${this.baseTranslateX + deltaX}px)`;
92  }
93
94  handleEnd() {
95    if (!this.isDragging) return;
96    this.isDragging = false;
97    this.container.style.transition = "transform 0.3s ease";
98
99    const deltaX = this.currentX - this.startX;
100
101    if (Math.abs(deltaX) > this.threshold) {
102      deltaX > 0 ? this.swipeRight() : this.swipeLeft();
103    } else {
104      this.updateTransform(); // возвращаем назад, если свайп короткий
105    }
106  }
107
108  swipeRight() {
109    if (this.index > 0) {
110      this.index--;
111      this.updateTransform();
112    } else {
113      this.updateTransform();
114    }
115    this.updateArrows();
116  }
117
118  swipeLeft() {
119    if (this.index < this.cards.length - 1) {
120      this.index++;
121      this.updateTransform();
122    } else {
123      this.updateTransform();
124    }
125    this.updateArrows();
126  }
127
128  updateArrows() {
129    this.arrows.left.classList.toggle("dontwork", this.index === 0);
130    this.arrows.right.classList.toggle(
131      "dontwork",
132      this.index === this.cards.length - 1
133    );
134  }
135
136  destroy() {
137    clearTimeout(this.resizeTimeout);
138    window.removeEventListener("resize", this.handleResize);
139
140    this.container.removeEventListener("touchstart", this.handleStart);
141    this.container.removeEventListener("touchmove", this.handleMove);
142    this.container.removeEventListener("touchend", this.handleEnd);
143    this.container.removeEventListener("mousedown", this.handleStart);
144    this.container.removeEventListener("mousemove", this.handleMove);
145    this.container.removeEventListener("mouseup", this.handleEnd);
146    this.arrows.left.removeEventListener("click", this.handleArrowLeft);
147    this.arrows.right.removeEventListener("click", this.handleArrowRight);
148  }
149}
150
151
152
153
154
155
156
157// class Swiper {
158//   sizeWorkStart = 900;
159//   startTranslateX = 0;

160//   resizeTimeout;
161//   startX = 0;
162//   currentX = 0;
163//   isDragging = false;
164//   threshold = 50;
165//   container;
166//   card;
167//   index;
168//   traslate = [];
169
170//   constructor(popup, arrows, index) {
171//     this.container = popup.querySelector(".popup-tariff__container-cards");
172//     this.card = popup.querySelector(".popup-tariff__container-card");
173//     this.index = index;
174//     this.arrows = arrows;
175//     this.arrows.right.classList.remove("dontwork");
176//     this.arrows.left.classList.remove("dontwork");
177//     if (index === 2) this.arrows.right.classList.add("dontwork");
178//     if (index === 0) this.arrows.left.classList.add("dontwork");
179//     this.onOpen();
180//     this.setupHandler();
181//   }
182//   onOpen() {
183//     this.getTraslate();
184//     const width = window.innerWidth;
185//     if (width > this.sizeWorkStart) {
186//       this.index = 0;
187//     }
188//     this.container.style.transform = `translateX(${-this.traslate[
189//       this.index
190//     ]}px)`;
191//   }
192//   setupHandler() {
193//     window.addEventListener("resize", () => {
194//       clearTimeout(this.resizeTimeout);
195//       this.resizeTimeout = setTimeout(() => {
196//         this.onOpen();
197//       }, 100);
198//     });
199
200//     this.container.addEventListener("touchstart", this.handleStart.bind(this));
201//     this.container.addEventListener("touchmove", this.handleMove.bind(this));
202//     this.container.addEventListener("touchend", this.handleEnd.bind(this));
203
204//     this.container.addEventListener("mousedown", this.handleStart.bind(this));
205//     this.container.addEventListener("mousemove", this.handleMove.bind(this));
206//     this.container.addEventListener("mouseup", this.handleEnd.bind(this));
207
208//     this.arrows.left.addEventListener("click", () => this.swipeRight());
209//     this.arrows.right.addEventListener("click", () => this.swipeLeft());
210//   }
211
212//   getTraslate() {
213//     const styles = window.getComputedStyle(this.container);
214//     let gap = styles.gap || styles.rowGap;
215//     gap = parseFloat(gap);

216//     this.traslate = [
217//       0,
218//       this.card.offsetWidth + gap,
219//       (this.card.offsetWidth + gap) * 2,
220//     ];
221//   }
222
223//   handleStart(event) {
224//     if (event.type === "touchstart") {
225//       this.startX = event.touches[0].clientX;
226//       this.currentX = this.startX;
227//       this.isDragging = true;
228//     } else if (event.type === "mousedown") {
229//       this.startX = event.clientX;
230//       this.isDragging = true;
231//     }
232//   }
233
234//   handleMove(event) {
235//     if (!this.isDragging && event.type !== "touchmove") return;
236//     if (event.type === "touchmove") {
237//       this.currentX = event.touches[0].clientX;
238//     } else if (event.type === "mousemove") {
239//       this.currentX = event.clientX;
240//     }
241//   }
242
243//   swipeRight() {
244//     if (this.index !== 0) {
245//       this.index--;
246//     }
247//     if (this.index === 0) {
248//       this.arrows.left.classList.add("dontwork");
249//     } else {
250//       this.arrows.right.classList.remove("dontwork");
251//       this.arrows.left.classList.remove("dontwork");
252//     }
253//     this.container.style.transform = `translateX(${-this.traslate[
254//       this.index
255//     ]}px)`;
256//   }
257
258//   swipeLeft() {
259//     if (this.index !== 2) {
260//       this.index++;
261//     }
262//     if (this.index === 2) {
263//       this.arrows.right.classList.add("dontwork");
264//     } else {
265//       this.arrows.right.classList.remove("dontwork");
266//       this.arrows.left.classList.remove("dontwork");
267//     }
268//     this.container.style.transform = `translateX(${-this.traslate[
269//       this.index
270//     ]}px)`;
271//   }
272
273//   handleEnd() {
274//     if (window.innerWidth > this.sizeWorkStart) return;
275//     const deltaX = this.currentX - this.startX;
276//     if (Math.abs(deltaX) > this.threshold) {
277//       if (deltaX > 0) {
278//         // Свайп вправо
279//         this.swipeRight();
280//       } else {
281//         // Свайп влево
282//         this.swipeLeft();
283//       }
284//     }
285//     this.isDragging = false;
286//   }
287// }
288