https://www.alibra.ru/local/templates/alibra_v3/js/common.js

1$(document).ready(function () {
2    var select = $(".select select");
3    console.log('common');
4    if (select.length) {
5        select.styler({
6            selectSmartPositioning: false,
7            selectSearch: false,
8            singleSelectzIndex: "3",
9        });
10
11        // $(document).on("click", ".select", function () {
12        //   var dropdown = $(this).find("ul");
13        //   if (!dropdown.hasClass("ps")) {
14        //     var customScrollBar = new CustomScrollbar(dropdown);
15        //   }
16        // });
17    }
18
19    // Маска для телефона
20    $('input[type="tel"]').on('focusout', function () {
21        let value = $(this).val().replace(/\D/g, '');
22        console.log('focusout',value.length);
23        if (value.length != 11) $(this).val('');
24    });
25    $('input[type="tel"]').on('input', function () {
26        let value = $(this).val().replace(/\D/g, '');
27
28        if (value.length > 0) {
29            if (value.length <= 1) {
30                $(this).val('+' + value);
31            } else if (value.length <= 4) {
32                $(this).val('+' + value.substring(0, 1) + ' (' + value.substring(1));
33            } else if (value.length <= 7) {
34                $(this).val('+' + value.substring(0, 1) + ' (' + value.substring(1, 4) + ') ' + value.substring(4));
35            } else if (value.length <= 11) {
36                $(this).val('+' + value.substring(0, 1) + ' (' + value.substring(1, 4) + ') ' + value.substring(4, 7) + '-' + value.substring(7));
37            } else {
38                $(this).val('+' + value.substring(0, 1) + ' (' + value.substring(1, 4) + ') ' + value.substring(4, 7) + '-' + value.substring(7, 9) + '-' + value.substring(9, 11));
39            }
40        }
41        //console.log(value);
42        if (value.length == 1 && value !== '7' && value !== '8' && value !== '9') {
43            $(this).val('');
44        }
45
46        if (value == '70') $(this).val('+7')
47        if (value == '71') $(this).val('+7')
48        if (value == '72') $(this).val('+7')
49        if (value == '73') $(this).val('+7')
50        if (value == '74') $(this).val('+7')
51        if (value == '75') $(this).val('+7')
52        if (value == '76') $(this).val('+7')
53        if (value == '77') $(this).val('+7')
54        if (value == '78') $(this).val('+7')
55
56        if (value == '8') $(this).val('+7')
57        if (value == '9') $(this).val('+7(9')    
58    });
59
60    // слайдер отзывов от партнеров
61    $('.partner-about-slider').slick({
62        slidesToShow: 1,
63        dots: true, // включаем стандартные точки
64        appendDots: $('.slider-pagination'), // вставляем точки в нужный контейнер
65        customPaging: function (slider, index) {
66            // Кастомизируем внешний вид каждой точки (возвращаем цифры вместо точек)
67            return '<a class="pagination-dot">' + (index + 1) + '</a>';
68        }
69    });
70
71    // Мобильное меню
72    $('.burger').on('click', function () {
73        $('.mobile-menu, .header').addClass('active');
74    });
75
76    $('.close-menu').on('click', function () {
77        $('.mobile-menu, .header').removeClass('active');
78    });
79
80    // Модальное окно обратной связи
81    $('.js--feedback').on('click', function (e) {
82        e.preventDefault();
83        $('#overlay').show();
84        let ref = '';
85        if ($(this).data('ref')) {
86            //console.log($(this).data('ref'));
87            ref = "-" + $(this).data('ref');
88            $('.feedback-modal' + ref).addClass('active');
89        }
90        else
91            $('.feedback-modal').not(".skip").addClass('active');
92    });
93
94    $('#overlay, .close').on('click', function (e) {
95        e.preventDefault();
96        e.stopPropagation();
97
98        $('#overlay').hide();
99        $('.feedback-modal, .thanks-modal').removeClass('active');
100    });
101
102    // Главный слайдер
103    $('.main-slider').on('init', function () {
104        // Можно добавить fade-in, если нужно плавно показать
105        $(this).css('opacity', 1);
106    }).slick({
107        fade: true,
108        autoplaySpeed: 3000,
109        prevArrow: '<span class="prev-arrow">

109<svg width="19" height="37" viewBox="0 0 19 37" fill="none" xmlns="http://www.w3.org/2000/svg"><line y1="-0.5" x2="24.7588" y2="-0.5" transform="matrix(-0.686624 0.727013 0.439726 0.898132 18 1)" stroke="#EB1E32"/><line y1="-0.5" x2="24.7588" y2="-0.5" transform="matrix(0.686624 0.727013 -0.439726 0.898132 1 19)" stroke="#EB1E32"/></svg></span>',
110        nextArrow: '<span class="next-arrow"><svg width="19" height="37" viewBox="0 0 19 37" fill="none" xmlns="http://www.w3.org/2000/svg"><line y1="-0.5" x2="24.7588" y2="-0.5" transform="matrix(0.686624 0.727013 -0.439726 0.898132 1 1)" stroke="#EB1E32"/><line y1="-0.5" x2="24.7588" y2="-0.5" transform="matrix(-0.686624 0.727013 0.439726 0.898132 18 19)" stroke="#EB1E32"/></svg></span>',
111    });
112
113    // Слайдер годов
114    $('.years-slider').slick({
115        slidesToShow: 6,
116        arrows: true,
117        prevArrow: '<span class="prev-arrow"><svg width="19" height="37" viewBox="0 0 19 37" fill="none" xmlns="http://www.w3.org/2000/svg"><line y1="-0.5" x2="24.7588" y2="-0.5" transform="matrix(-0.686624 0.727013 0.439726 0.898132 18 1)" stroke="#908D8D"/><line y1="-0.5" x2="24.7588" y2="-0.5" transform="matrix(0.686624 0.727013 -0.439726 0.898132 1 19)" stroke="#908D8D"/></svg></span>',
118        nextArrow: '<span class="next-arrow">

118<svg width="19" height="37" viewBox="0 0 19 37" fill="none" xmlns="http://www.w3.org/2000/svg"><line y1="-0.5" x2="24.7588" y2="-0.5" transform="matrix(0.686624 0.727013 -0.439726 0.898132 1 1)" stroke="#908D8D"/><line y1="-0.5" x2="24.7588" y2="-0.5" transform="matrix(-0.686624 0.727013 0.439726 0.898132 18 19)" stroke="#908D8D"/></svg></span>',
119        dots: false,
120        infinite: false,
121        focusOnSelect: false,
122        responsive: [
123            {
124                breakpoint: 768,
125                settings: {
126                    slidesToShow: 4
127                }
128            },
129            {
130                breakpoint: 480,
131                settings: {
132                    slidesToShow: 3,
133                    swipeToSlide: true,
134                }
135            }
136        ]
137    });
138
139    // Слайдер контента
140    $('.content-slider').slick({
141        slidesToShow: 1,
142        slidesToScroll: 1,
143        arrows: false,
144        dots: false,
145        infinite: false,
146        fade: true,
147        speed: 300,
148        adaptiveHeight: true
149    });
150
151    // Обработчик клика по году
152    $('.year-item').on('click', function () {
153        var slideIndex = $(this).data('slide');
154
155        $('.year-item').removeClass('active');
156        $(this).addClass('active');
157
158        $('.content-slider').slick('slickGoTo', slideIndex);
159    });
160
161    // Синхронизация при использовании стрелок в слайдере годов
162    $('.years-slider').on('afterChange', function (event, slick, currentSlide) {
163        $('.year-item').removeClass('active');
164        $('.year-item').eq(currentSlide).addClass('active');
165
166        $('.content-slider').slick('slickGoTo', currentSlide);
167    });
168
169    // Табы в Горящих курсах
170    $('.tab-group__item').on('click', function () {
171        $('.tab-group__item').removeClass('active');
172        $(this).addClass('active');
173
174        const tabId = $(this).data('id');
175
176        $('.courses-table').removeClass('active');
177        $('#' + tabId).addClass('active');
178    });
179
180    // Слайдер курсов
181    $('.our-courses .sale-wrapper').slick({
182        slidesToShow: 3,
183        slidesToScroll: 1,
184        fade: false,
185        arrows: true,
186        dots: false,
187        autoplay: true,
188        pauseOnFocus: true,
189        prevArrow: '<span class="prev-arrow">

189<svg width="19" height="37" viewBox="0 0 19 37" fill="none" xmlns="http://www.w3.org/2000/svg"><line y1="-0.5" x2="24.7588" y2="-0.5" transform="matrix(-0.686624 0.727013 0.439726 0.898132 18 1)" stroke="#EB1E32"/><line y1="-0.5" x2="24.7588" y2="-0.5" transform="matrix(0.686624 0.727013 -0.439726 0.898132 1 19)" stroke="#EB1E32"/></svg></span>',
190        nextArrow: '<span class="next-arrow"><svg width="19" height="37" viewBox="0 0 19 37" fill="none" xmlns="http://www.w3.org/2000/svg"><line y1="-0.5" x2="24.7588" y2="-0.5" transform="matrix(0.686624 0.727013 -0.439726 0.898132 1 1)" stroke="#EB1E32"/><line y1="-0.5" x2="24.7588" y2="-0.5" transform="matrix(-0.686624 0.727013 0.439726 0.898132 18 19)" stroke="#EB1E32"/></svg></span>',
191        responsive: [
192            {
193                breakpoint: 1701,
194                settings: {
195                    slidesToShow: 2,
196                    slidesToScroll: 1,
197                }
198            },
199            {
200                breakpoint: 767,
201                settings: {
202                    slidesToShow: 1,
203                    slidesToScroll: 1,
204                }
205            }
206        ]
207    });
208
209    // Фиксированный хедер
210    var headerHeight = $('header').outerHeight();
211
212    $('.header-placeholder').css('height', headerHeight + 'px').show();
213    $('body').css('padding-top', headerHeight + 20 + 'px');
214
215    var scrollThreshold = 300;
216    var tempScrollTop, currentScrollTop = $(window).scrollTop();
217
218    $('<style>')
219        .prop('type', 'text/css')
220        .html('\
221            .fixed-header header { \
222                top: -' + headerHeight + 'px; \
223            } \
224            .fixed-header header.show { \
225                top: 0; \
226            }')
227        .appendTo('head');
228
229    $(window).scroll(function () {
230        currentScrollTop = $(window).scrollTop();
231
232        if (currentScrollTop > scrollThreshold) {
233            $('body').addClass('fixed-header');
234
235            if (tempScrollTop > currentScrollTop) {
236                $('header').addClass('show');
237            } else {
238                $('header').removeClass('show');
239            }
240        } else {
241            $('body').removeClass('fixed-header');
242            $('header').removeClass('show');
243        }
244
245        tempScrollTop = currentScrollTop;
246    });
247
248    // $(window).resize(function () {
249    //     headerHeight = $('header').outerHeight();
250    //     $('.header-placeholder').css('height', headerHeight + 'px');
251
252    //     $('style').last().html('\
253    //         .fixed-header header { \
254    //             top: -' + headerHeight + 'px; \
255    //         } \
256    //         .fixed-header header.show { \
257    //             top: 0; \
258    //         }');
259
260    // });
261
262    // Универсальные табы
263    $('.tab').on('click', function () {
264        $('.tab').removeClass('active');
265        $(this).addClass('active');
266
267        const tabId = $(this).data('tab');
268
269        $('.tab-content').removeClass('active').hide();
270        $('.tab-content[data-id="' + tabId + '"]').addClass('active').show();
271    });
272
273    // табы для курсов студентов
274    $('.tabs .tab-link').on('click', function(e) {
275        e.preventDefault();
276
277        $('.tabs .tab-link').removeClass('active');
278        $(this).addClass('active');
279        
280        const tabId = $(this).data('tab');
281        
282        $('.tab-content').removeClass('active').hide();
283        $('.tab-content[data-id="' + tabId + '"]').addClass('active').show();
284    });
285
286    // Аккордеон
287    $('.js--accordeon__title').on('click', function () {
288        const accordeonItem = $(this).parent('.js--accordeon-parent');
289        const isCurrentActive = accordeonItem.hasClass('active');
290
291        $('.js--accordeon-parent').removeClass('active');
292
293        if (!isCurrentActive) {
294            accordeonItem.addClass('active');
295        }
296    });
297
298    // При загрузке страницы открываем первый элемент аккордеона
299    if ($('.js--accordeon-parent.active').length === 0) {
300        $('.js--accordeon-parent').first().addClass('active');
301    }
302});
303
304// Видео плеер (оставляем отдельно, так как использует vanilla JS)
305if ($('#videoPlaceholder').length) {
306    document.getElementById('videoPlaceholder').addEventListener('click', function () {
307        document.getElementById('videoPlaceholder').style.display = 'none';
308        document.getElementById('loadingIndicator').style.display = 'flex';
309
310        const iframe = document.createElement('iframe');
311        iframe.src = "https://vk.com/video_ext.php?oid=-9094688&id=456239407&hd=2";
312        iframe.width = "100%";
313        iframe.height = "400";
314        iframe.allow = "autoplay; encrypted-media; fullscreen; picture-in-picture;";
315        iframe.frameBorder = "0";
316        iframe.allowFullscreen = true;
317
318        iframe.onload = function () {
319            document.getElementById('loadingIndicator').style.display = 'none';
320            document.getElementById('videoContainer').style.display = 'block';
321        };
322
323        document.getElementById('videoContainer').appendChild(iframe);
324    });
325}
326
327var blogCarousel = function blogCarousel() {
328  var slider = $(".js-blog-carousel");
329
330  if (slider.length) {
331    var hiddenClass = "blog-carousel--hidden";
332    slider.on("init", function (event, slick) {
333      slider.removeClass(hiddenClass);
334    });
335
336    slider.slick({
337      slidesToShow: 3,
338      variableWidth: true,
339      rows: 0,
340      infinite: false,
341      arrows: true,
342      dots: true,
343      prevArrow:
344        '<button type="button" class="slick-prev"><svg class="i" viewbox="0 0 24 24" ><use xlink:href="/local/templates/alibra_v2/symbol.svg#stroke-arrow-left"/></svg></button>',
345      nextArrow:
346        '<button type="button" class="slick-next"><svg class="i" viewbox="0 0 24 24" ><use xlink:href="/local/templates/alibra_v2/symbol.svg#stroke-arrow-right"/></svg></button>',
347      responsive: [
348        {
349          breakpoint: 991,
350          settings: {
351            slidesToShow: 2,
352          },
353        },
354        {
355          breakpoint: 767,
356          settings: {
357            slidesToShow: 1,
358          },
359        },
360        {
361          breakpoint: 599,
362          settings: {
363            slidesToShow: 1,
364            variableWidth: false,
365            centerMode: true,
366            centerPadding: "15px",
367          },
368        },
369      ],
370    });
371  }
372};
373blogCarousel();