https://krolikclub.online/local/templates/krolikclub/assets/js/events.js

1document.addEventListener('DOMContentLoaded', function() {
2    if (!document.querySelector('#events_section')) return;
3    // Находим все элементы списка событий
4    const eventItems = document.querySelectorAll('.item_list_block_events_block');
5
6    // Находим основной блок, который будем обновлять
7    const bigBlock = document.querySelector('.big_block_events_block');
8    const bigDate = bigBlock.querySelector('.big_date');
9    const bigTitle = bigBlock.querySelector('.big_title');
10    const bigDescriptions = bigBlock.querySelector('.big_descriptions');
11    const bigTimer = bigBlock.querySelector('.big_timer');
12    const bigImage = bigBlock.querySelector('.big_block_events_block_image');
13
14    // ID интервала для обновления таймера
15    let timerInterval;
16
17    // Функция для форматирования даты (из формата DD.MM.YYYY в DD месяца)
18    function formatDate(dateStr) {
19        // Проверяем формат даты
20        if (dateStr.includes('.')) {
21            // Формат DD.MM.YYYY
22            const parts = dateStr.split('.');
23            if (parts.length === 3) {
24                const day = parts[0];

25                const month = parseInt(parts[1], 10);
26
27                // Массив с названиями месяцев в родительном падеже
28                const monthNames = [
29                    'января', 'февраля', 'марта', 'апреля', 'мая', 'июня',
30                    'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря'
31                ];
32
33                return day + ' ' + monthNames[month - 1];
34            }
35        }
36
37        // Если формат не соответствует DD.MM.YYYY или не удалось преобразовать,
38        // возвращаем исходную строку
39        return dateStr;
40    }
41
42    // Функция для парсинга даты в JavaScript Date объект
43    function parseDate(dateStr) {
44        // Проверяем два формата даты: DD.MM.YYYY и "DD Месяца"
45        if (dateStr.includes('.')) {
46            // Формат DD.MM.YYYY
47            const parts = dateStr.split('.');
48            if (parts.length === 3) {
49                const day = parseInt(parts[0], 10);

50                const month = parseInt(parts[1], 10) - 1; // месяцы в JS начинаются с 0
51                const year = parseInt(parts[2], 10);
52
53                return new Date(year, month, day, 0, 0, 0); // 00:00:00
54                //return new Date(year, month, day, 12, 0, 0); // 12:00:00
55            }
56        } else {
57            // Формат "DD Месяца" (например, "05 апреля")
58            const parts = dateStr.trim().split(' ');
59            if (parts.length === 2) {
60                const day = parseInt(parts[0], 10);
61
62                // Массив с названиями месяцев в родительном падеже
63                const monthNames = [
64                    'января', 'февраля', 'марта', 'апреля', 'мая', 'июня',
65                    'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря'
66                ];
67
68                const month = monthNames.indexOf(parts[1]);
69                if (month !== -1) {
70                    const currentYear = new Date().getFullYear();
71                    return new Date(currentYear, month, day, 12, 0, 0); // 12:00:00
72                }
73            }
74        }
75
76        // Если не удалось распознать дату, возвращаем текущую дату
77        return new Date();
78    }
79
80    // Функция для обновления таймера
81    function updateTimer(targetDate) {
82        // Очищаем предыдущий интервал, если он был
83        if (timerInterval) {
84            clearInterval(timerInterval);
85        }
86
87        // Функция для расчета оставшегося времени
88        function calculateTimeLeft() {
89            const now = new Date();
90            const targetTime = new Date(targetDate);
91
92            // Если дата уже прошла, то устанавливаем время на полдень следующего дня
93            if (targetTime < now) {
94                targetTime.setDate(targetTime.getDate() + 1);
95            }
96
97            const difference = targetTime - now;
98
99            // Если разница отрицательная (дата уже прошла), возвращаем нули
100            if (difference <= 0) {
101                return {
102                    days: 0,
103                    hours: 0,
104                    minutes: 0
105                };
106            }
107
108            // Рассчитываем оставшееся время
109            const days = Math.floor(difference / (1000 * 60 * 60 * 24));
110            const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
111            const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
112
113            return {
114                days,
115                hours,
116                minutes
117            };
118        }
119
120        // Функция для отображения таймера
121        function displayTimer() {
122            const timeLeft = calculateTimeLeft();
123
124            // Форматируем вывод с правильными окончаниями
125            const daysText = formatDeclension(timeLeft.days, ['день', 'дня', 'дней']);
126            const hoursText = formatDeclension(timeLeft.hours, ['час', 'часа', 'часов']);
127            const minutesText = formatDeclension(timeLeft.minutes, ['минута', 'минуты', 'минут']);
128
129            // Преобразуем числа в двузначный формат
130            const daysFormatted = String(timeLeft.days).padStart(2, '0');
131            const hoursFormatted = String(timeLeft.hours).padStart(2, '0');
132            const minutesFormatted = String(timeLeft.minutes).padStart(2, '0');
133
134            // Создаем HTML-структуру
135            bigTimer.innerHTML = `
136                <div class="_day">
137                    <span class="num">
138                    ${daysFormatted}
139                    </span>
140                    <span class="text">${daysText}</span>
141                </div>
142                <div class="_hour">

143                    <span class="num">
144                    ${hoursFormatted}
145                    </span>
146                    <span class="text">${hoursText}</span>
147                </div>
148                <div class="_minut">
149                    <span class="num">
150                    ${minutesFormatted}
151                    </span>
152                    <span class="text">${minutesText}</span>
153                </div>
154            `;
155        }
156
157        // Функция для выбора правильного склонения слова в зависимости от числа
158        function formatDeclension(number, titles) {
159            const cases = [2, 0, 1, 1, 1, 2];
160            return titles[
161                (number % 100 > 4 && number % 100 < 20)
162                    ? 2
163                    : cases[(number % 10 < 5) ? number % 10 : 5]
164                ];
165        }
166
167        // Отображаем таймер сразу
168        displayTimer();
169
170        // Обновляем таймер каждую минуту
171        timerInterval = setInterval(displayTimer, 60000);
172    }
173
174    // Функция для обновления большого блока данными из маленького
175    function updateBigBlock(item) {
176        // Получаем данные из кликнутого элемента
177        const smallDate = item.querySelector('.bl_date').textContent.trim();
178        const smallTitle = item.querySelector('.bl_description').textContent.trim().replace('Забронировать', '').trim();
179        const smallDescription = item.querySelector('.hide_description')
180            ? item.querySelector('.hide_description').textContent.trim()
181            : '';
182        const smallImage = item.querySelector('.bl_img img').getAttribute('src');
183
184        // Форматируем дату для отображения
185        const formattedDate = formatDate(smallDate);
186
187        // Обновляем данные в большом блоке
188        bigDate.textContent = formattedDate;
189        bigTitle.textContent = smallTitle;
190        bigDescriptions.textContent = smallDescription;
191
192        // Обновляем изображение, если есть
193        if (smallImage && smallImage !== '') {
194            bigImage.setAttribute('src', smallImage);
195        }
196
197        // Парсим дату для таймера
198        const targetDate = parseDate(smallDate);
199
200        // Обновляем таймер
201        updateTimer(targetDate);
202    }
203
204    // Добавляем обработчик клика для каждого элемента списка
205    eventItems.forEach(function(item) {
206        item.addEventListener('click', function() {
207            updateBigBlock(this);
208        });
209    });
210
211    // Инициализируем таймер для первого события при загрузке страницы
212    if (eventItems.length > 0) {
213        updateBigBlock(eventItems[0]);
214    }
215
216});
217
218
219