https://spbopera.ru/local/templates/opera/html/js/new-script.js?179028838918505

1$(function() {
2    let header = $('.topline-block--new'),
3        newMenu = $('.topmenu--new'),
4        searchWindow = $('.new-search-window');
5
6    function focusSearchInput() {
7        let input = document.getElementById('new-search-input');
8
9        if (!input) return;
10
11        try {
12            input.focus({preventScroll: true});
13        } catch (e) {
14            input.focus();
15        }
16
17        // Put the caret after an existing query when the window is reopened.
18        if (typeof input.setSelectionRange === 'function') {
19            let valueLength = input.value.length;
20            input.setSelectionRange(valueLength, valueLength);
21        }
22    }
23
24    if (newMenu.length) {
25        let firstLevelLink = newMenu.find('.root_menu > a'),
26            activeLink = false,
27            activeSubMenu = false;
28
29        firstLevelLink.on('mouseenter', function() {
30            activeLink = $(this);
31
32            header.addClass('topline-block--open-menu');
33            activeLink.addClass('active');
34
35            if ($(this).parent().children('.topmenu__submenu').length) {
36                activeSubMenu = $(this).parent().children('.topmenu__submenu');
37
38                activeSubMenu.on('mouseleave', function(e) {
39                    let newElementHovered =  e.toElement || e.relatedTarget;
40
41                    if (!$(newElementHovered).is(activeLink)) {
42                        header.removeClass('topline-block--open-menu');
43                        activeLink.removeClass('active');
44                    }
45                });
46            }
47        });
48
49        firstLevelLink.on('mouseleave', function(e) {
50            activeLink = $(this);
51
52            if ($(this).parent().children('.topmenu__submenu').length) {
53                let newElementHovered =  e.toElement || e.relatedTarget;
54
55                if (!$(newElementHovered).is(activeSubMenu)) {
56                    header.removeClass('topline-block--open-menu');
57                    activeLink.removeClass('active');
58                }
59            } else {
60                header.removeClass('topline-block--open-menu');
61                activeLink.removeClass('active');
62            }
63        });
64    }
65
66    //
67
68    $('.topline-block--new .top-search-btn-new').on('click', function() {
69        if (header.hasClass('topline-block--open-search')) {
70            searchWindow.removeClass('new-search-window--animated');
71            header.removeClass('topline-block--open-search');
72            setTimeout(function() {
73                $('body').css({
74                    'overflow': 'unset',
75                    'paddingRight': '0',
76                });
77                searchWindow.removeClass('new-search-window--open');
78            }, 400);
79        } else {
80            let headerHeight = header.outerHeight();
81
82            if ($('#bx-panel').length) {
83                headerHeight += $('#bx-panel').outerHeight();
84            }
85
86            $('body').css({
87                'overflow': 'hidden',
88                'paddingRight': '17px',
89            });
90            header.addClass('topline-block--open-search');
91            searchWindow.addClass('new-search-window--open').css('height', $(window).innerHeight()-headerHeight);
92
93            // The input is focusable as soon as the display:block class is set.
94            focusSearchInput();
95
96            setTimeout(function() {
97                searchWindow.addClass('new-search-window--animated');
98            }, 1);
99
100            // Some browsers can drop focus while a fixed overlay is animating.
101            setTimeout(focusSearchInput, 450);
102        }
103    });
104
105    $('.new-search-window__form-close').on('click', function() {
106        searchWindow.removeClass('new-search-window--animated');
107        header.removeClass('topline-block--open-search');
108        setTimeout(function() {
109            $('body').css({
110                'overflow': 'unset',
111                'paddingRight': '0',
112            });
113            searchWindow.removeClass('new-search-window--open');
114        }, 400);
115    });

116
117    $(window).on('resize', function() {
118        if ($(window).innerWidth() < 768) {
119            $('body').css({
120                'overflow': 'unset',
121                'paddingRight': '0',
122            });
123            searchWindow.removeClass('new-search-window--animated');
124            header.removeClass('topline-block--open-search');
125            searchWindow.removeClass('new-search-window--open');
126        }
127    });
128
129    //
130
131    if ($('.new-index-links-slider').length) {
132        $('.new-index-links-slider__slider').slick({
133            slidesToScroll: 1,
134            infinite: true,
135            arrows: true,
136            dots: true,
137            adaptiveHeight: false,
138            variableWidth: true,
139            prevArrow: '<button type="button" class="new-index-links-slider__arrow new-index-links-slider__arrow--prev slick-prev"><svg width="17" height="31" viewBox="0 0 17 31" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.625 29.75L1.375 15.5L15.625 1.25" stroke="#0D0D0D" stroke-linecap="round" stroke-linejoin="round"/></svg>\n</button>',
140            nextArrow: '<button type="button" class="new-index-links-slider__arrow new-index-links-slider__arrow--next slick-next"><svg width="17" height="31" viewBox="0 0 17 31" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.375 29.75L15.625 15.5L1.375 1.25" stroke="#0D0D0D" stroke-linecap="round" stroke-linejoin="round"/></svg></button>',
141            responsive: [
142                {
143                    breakpoint: 992,
144                    settings: {
145                        arrows: false,
146                    }
147                },
148                {
149                    breakpoint: 768,
150                    settings: {
151                        dots: false,
152                    }
153                },
154            ]
155        });
156    }
157
158    //
159
160    let newFilterSelects = $('.new-filters__select');
161    if (newFilterSelects.length) {
162        newFilterSelects.each(function() {
163            let select = $(this);
164
165            select.select2({
166                // 'placeholder': placeholder,
167                'minimumResultsForSearch': -1,
168                'dropdownPosition': 'below',
169                'width': '100%',
170                'dropdownParent': select.parent().children('.new-filters__select-dropdown'),
171            });
172        });
173    }
174
175    //
176
177    let mobileAfficheDescToggles = $('.new-affiche-item__desc-toggle');
178    if (mobileAfficheDescToggles.length) {
179        const toggleDesc = function() {
180            if ($(window).width() >= 768) {
181                $('.new-affiche-item__desc').removeAttr('style');
182            } else {
183                $('.new-affiche-item__desc').hide();
184            }
185        }
186
187        mobileAfficheDescToggles.on('click', function () {
188            let toggle = $(this),
189                desc = toggle.parent().children('.new-affiche-item__desc');
190
191            toggle.toggleClass('new-affiche-item__desc-toggle--open');
192            desc.slideToggle(400);
193        });
194
195        toggleDesc();
196
197        $(window).on('resize', function() {
198            toggleDesc();
199        })
200    }
201
202    //
203
204    if ($('.date-slider__container').length) {
205        const shuffleMonths = function() {
206            const isDateVisible = function (el) {
207                let sliderContainer = $('.date-slider__container'),
208                    sliderContainerLeft = sliderContainer.offset().left,
209                    sliderContainerRight = sliderContainer.offset().left + sliderContainer.outerWidth(),
210                    slideLeftSide = el.offset().left,
211                    slideRightSide = el.offset().left + el.outerWidth();
212
213                if (slideRightSide > sliderContainerLeft && slideLeftSide < sliderContainerRight) {
214                    return true;
215                }
216
217                return false;
218            }
219            let monthsBlock = $('.date-slider__month-labels-block'),
220                monthsVisible = [];
221
222            $('.date-slider__date').each(function() {
223                let date = $(this),
224                    dateMonth = date.data('month');
225
226                if (isDateVisible(date)) {
227                    if ($.inArray(dateMonth, monthsVisible) === -1) {
228                        monthsVisible.push(dateMonth);
229                    }
230                }
231            });
232
233            if (monthsVisible.length) {
234                monthsBlock.html('');
235
236                for (let i = 0; i < monthsVisible.length; ++i) {
237                    let month = monthsVisible[i],
238                        span = $('<span>'+month+'</span>'),
239                        visibleDatesOfMonth = $();
240

241                    $('.date-slider__date[data-month="'+month+'"]').each(function() {
242                        if (isDateVisible($(this))) {
243                            visibleDatesOfMonth.push($(this));
244                        }
245                    });
246
247                    if (visibleDatesOfMonth.length) {
248                        let spanWidth = 0,
249                            monthLeft = visibleDatesOfMonth[0].offset().left,
250                            monthRight = visibleDatesOfMonth[visibleDatesOfMonth.length - 1].offset().left + visibleDatesOfMonth[visibleDatesOfMonth.length - 1].outerWidth();
251
252                        spanWidth = monthRight - monthLeft;
253
254                        span.css('width', spanWidth+'px');
255                        monthsBlock.append(span);
256                    }
257                }
258            }
259        }
260        $('.date-slider__container').on('init', function() {
261            shuffleMonths();
262        });
263        $('.date-slider__container').on('setPosition', function() {
264            shuffleMonths();
265        });
266
267        $('.date-slider__container').slick({
268            infinite: false,
269            arrows: true,
270            dots: false,
271            adaptiveHeight: false,
272            variableWidth: true,
273            swipeToSlide: true,
274            prevArrow: $('.date-slider__container').parent().children('.date-slider__arrow--prev'),
275            nextArrow: $('.date-slider__container').parent().children('.date-slider__arrow--next'),
276            responsive: [
277                {
278                    breakpoint: 992,
279                    settings: {
280                        arrows: false,
281                    }
282                },
283            ]
284        });
285
286        if ($('.date-slider').hasClass('date-slider--tickets')) {
287            let allDateBtns = $('.date-slider').find('.date-slider__date'),
288                buyBtn = $('.date-slider').find('.new-excursion-tickets__slider-buy')
289
290            allDateBtns.each(function () {
291                if ($(this).hasClass('date-slider__date--active')) {
292                    let date = $(this).data('date');
293
294                    buyBtn.attr('data-date', date);
295                }
296            });
297
298            $('.date-slider__date').on('click', function(e) {
299                if ($(this).data('date') != undefined) {
300                    e.preventDefault();
301
302                    let dateBtn = $(this),
303                        date = dateBtn.data('date');
304
305                    allDateBtns.removeClass('date-slider__date--active');
306                    dateBtn.addClass('date-slider__date--active');
307
308                    if (buyBtn.length) {
309                        buyBtn.attr('data-date', date);
310                    }
311                }
312            });
313        }
314    }
315
316    //
317    /*if ($('.new-affiche__container--infinite').length) {
318        let infiniteAffiche = $('.new-affiche__container--infinite'),
319            skipBtn = $('.new-affiche__infinite-pass-btn'),
320            infiniteAfficheTop = infiniteAffiche.offset().top,
321            infiniteAfficheBottom = infiniteAfficheTop + infiniteAffiche.outerHeight();
322
323        skipBtn.on('click', function() {
324            infiniteAffiche.addClass('new-affiche__container--infinite-blocked');
325            $('html, body').scrollTop(infiniteAfficheBottom + 100);
326        });
327
328        $(window).on('scroll', function() {
329            let windowTop = $(window).scrollTop(),
330                windowBottom = windowTop + $(window).innerHeight();
331
332            infiniteAfficheTop = infiniteAffiche.offset().top;
333            infiniteAfficheBottom = infiniteAfficheTop + infiniteAffiche.outerHeight();
334

335            if (infiniteAfficheBottom > windowBottom) {
336                if (!infiniteAffiche.hasClass('new-affiche__container--infinite-blocked') && (infiniteAfficheBottom - windowBottom <= 50)) {
337                    //TODO: заменить имитацию на реальную подгрузку
338                    let blockToCopy = infiniteAffiche.find('.new-affiche-item').last().clone().addClass('new-affiche-item--loading');
339
340                    infiniteAffiche.find('.new-affiche__list').append(blockToCopy);
341                    setTimeout(function() {
342                        blockToCopy.removeClass('new-affiche-item--loading');
343                    }, 100);
344                }
345            }
346
347            if (infiniteAfficheBottom + 200 < windowTop) {
348                infiniteAffiche.removeClass('new-affiche__container--infinite-blocked')
349            }
350
351            if (infiniteAfficheTop - 100 < windowTop && infiniteAfficheBottom > windowBottom) {
352                if (skipBtn.offset().top + 20 < windowTop) {
353                    let skipBtnRight = skipBtn.offset().left;
354                    skipBtn.css({
355                        'position': 'fixed',
356                        'top': '100px',
357                        // 'right':  '40px',
358                        // 'left':  skipBtnRight+'px',
359                        'zIndex': 3,
360                    });
361                }
362            } else {
363                skipBtn.removeAttr('style');
364            }
365        });
366    }*/
367    if ($('.new-affiche__container--infinite').length) {
368        let infiniteAffiche = $('.new-affiche__container--infinite'),
369            skipBtn = $('.new-affiche__infinite-pass-btn'),
370            infiniteAfficheTop = infiniteAffiche.offset().top,
371            infiniteAfficheBottom = infiniteAfficheTop + infiniteAffiche.outerHeight();
372
373        skipBtn.on('click', function() {
374            infiniteAffiche.addClass('new-affiche__container--infinite-blocked');
375
376            // Найти секцию с новостями и её заголовок
377            let newsSection = $('.section-mp-news').first();
378            let newsHeading = newsSection.find('h2').first();
379
380            let headerHeight = 0;
381
382            if (newsSection.length) {
383                // Прокрутить так, чтоб заголовок был немного ниже верха окна
384                let targetTop = Math.max(0, newsSection.offset().top - headerHeight - 20);
385                $('html, body').animate({ scrollTop: targetTop }, 400);
386            } else {
387                // Фоллбек — поведение как прежде
388                $('html, body').animate({ scrollTop: infiniteAfficheBottom + 100 }, 400);
389            }
390        });
391
392        $(window).on('scroll', function() {
393            let windowTop = $(window).scrollTop(),
394                windowBottom = windowTop + $(window).innerHeight();
395
396            infiniteAfficheTop = infiniteAffiche.offset().top;
397            infiniteAfficheBottom = infiniteAfficheTop + infiniteAffiche.outerHeight();
398

399            if (infiniteAfficheBottom > windowBottom) {
400                if (!infiniteAffiche.hasClass('new-affiche__container--infinite-blocked') && (infiniteAfficheBottom - windowBottom <= 50)) {
401                    //TODO: заменить имитацию на реальную подгрузку
402                    let blockToCopy = infiniteAffiche.find('.new-affiche-item').last().clone().addClass('new-affiche-item--loading');
403
404                    infiniteAffiche.find('.new-affiche__list').append(blockToCopy);
405                    setTimeout(function() {
406                        blockToCopy.removeClass('new-affiche-item--loading');
407                    }, 100);
408                }
409            }
410
411            if (infiniteAfficheBottom + 200 < windowTop) {
412                infiniteAffiche.removeClass('new-affiche__container--infinite-blocked')
413            }
414
415            if (infiniteAfficheTop - 100 < windowTop && infiniteAfficheBottom > windowBottom) {
416                if (skipBtn.offset().top + 20 < windowTop + 150) {
417                    let skipBtnRight = skipBtn.offset().left;
418                    skipBtn.css({
419                        'position': 'fixed',
420                        'top': '100px',
421                        // 'right':  '40px',
422                        // 'left':  skipBtnRight+'px',
423                        'zIndex': 3,
424                    });
425                }
426            } else {
427                skipBtn.removeAttr('style');
428            }
429        });
430    }
431
432    //
433
434    if ($('.new-video-block').length) {
435        $('.new-video-block').each(function() {
436            let videoBlock = $(this),
437                preview = videoBlock.find('.new-video-block__preview'),
438                videoContainer = videoBlock.find('.new-video-block__video'),
439                video = videoContainer.find('iframe')[0];
440
441            preview.on('click', function() {
442                let src = video.src;
443
444                preview.hide();
445
446                if (src.indexOf('autoplay=1') === -1) {
447                    if (src.indexOf('?') !== -1) {
448                        video.src = src + '&autoplay=1';
449                    } else {
450                        video.src = src + '?autoplay=1';
451                    }
452                }
453            })
454        });
455    }
456
457    //
458
459    if ($('.new-cast__block--accordion').length) {
460        $('.new-cast__block--accordion').each(function() {
461            let castAccordion = $(this),
462                castToggle = castAccordion.find('.new-cast__block-head'),
463                castBody = castAccordion.find('.new-cast__block-body');
464
465            castToggle.on('click', function() {
466                castAccordion.toggleClass('new-cast__block--accordion-open');
467                castBody.slideToggle(400);
468            });
469        });
470    }
471});