https://www.apli.com/themes/custom/apli/js/banner_rotator.js?tmb479

1(function ($, Drupal, drupalSettings) {
2    'use strict';
3    Drupal.behaviors.banner_rotator = {
4      attach: function (context) {
5        $('body', context).once('banner_rotator').each(function () {
6
7
8            $('body').on('click','.view-banner-rotator .slick-carousel .field--name-field-media-image .field__item a', function (e) {
9                e.preventDefault();
10            });
11
12            const $slider = $('.view-banner-rotator .slick-carousel');
13
14            $slider.on('init', function() {
15                //mouseWheel($slider);
16            }).on('beforeChange', function(event, slick, currentSlide, nextSlide) {
17                checkCurrentDuplicated(event, slick, currentSlide, nextSlide);
18            }).slick({
19                infinite: true,
20                slidesToShow: 1,
21                slidesToScroll: 1,
22                vertical: false,
23                dots: true,
24                mobileFirst:true,
25                arrows: false,
26                autoplay: true,
27                autoplaySpeed: 3500,
28                responsive: [
29                    {
30                        breakpoint: 1025,
31                        settings: {
32                        vertical: true,
33                        slidesToShow: 1,
34                        }
35                    },
36                    // You can unslick at a given breakpoint now by adding:
37                    // settings: "unslick"
38                    // instead of a settings objec  t
39                ]
40            });
41
42
43            function checkCurrentDuplicated(event, slick, currentSlide, nextSlide) {
44
45                var element = '.block-views-blockbanner-rotator-block-1 .custom-duplicated';
46                $(element).addClass('inactive');
47                $(element).removeClass('active');
48                $(element+"[data-slick-index='" + nextSlide + "']").addClass('active');
49            }
50
51            function mouseWheel($slider) {
52                var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
53                $slider[0].addEventListener(mousewheelevt, function(e){
54                    mouseWheelHandler(e,$slider);
55                }, { passive: false });
56
57
58            }
59            function mouseWheelHandler(event, $slider) {
60                if($(window).width() > 1025) {
61                    event.preventDefault();
62                    const delta = event.deltaY
63                    if(delta > 0) {
64                        $slider.slick('slickPrev');
65                    }
66                    else {
67                        $slider.slick('slickNext');
68                    }
69                    return false;
70                }
71            }
72
73            $(document).ready(function () {
74                createElementBackgroundElement($('.view-banner-rotator .node__content .field--name-body'),$('.block-views-blockbanner-rotator-block-1'),$('.navbar-brand'));
75            });
76
77            $(window).resize(function () {
78                createElementBackgroundElement($('.view-banner-rotator .node__content .field--name-body'), $('.block-views-blockbanner-rotator-block-1'),$('.navbar-brand'));
79            });
80
81            function createElementBackgroundElement($elementSelect, $element_destiny, $left_element) {
82                if($element_destiny === undefined) {
83                    $element_destiny = false;
84                }
85                if($left_element === undefined) {
86                    $element_destiny = false;
87                }
88                $($elementSelect).each(function (index, element) {
89                    // element == this
90
91                    var $element, isNew = false, element_duplicated, $element_duplicated, position, left, top, width, height, classes, bg_color, html, id, link;
92
93                    
94
95                    $element = $(element);
96                    classes = $element.attr('class');
97                    id = 'custom-duplicated-'+index;
98                    $element_duplicated = $('#'+id);
99                    html = $element.html();
100                    link = $element.parent().parent().find('.banner-content-link').attr('href');                    
101                    html = (link === undefined) ? $element.html() : $element.html()+'<a href="'+link+'"></a>';
102                    if(!$element_duplicated.length) {
103                        isNew = true;
104                        element_duplicated = document.createElement("div");
105                        element_duplicated.setAttribute("id", id);
106                        $element_duplicated = $(element_duplicated);
107                        $element_duplicated.html(html);
108                    }
109
110
111
112                    position = $element.position();
113                    top = $element.offset().top - $(window).scrollTop();
114                    left = $element.offset().left - $(window).scrollLeft();
115                    width = $element.outerWidth();
116                    height = $element.outerHeight();
117                    bg_color = $element.css('background-color');
118
119
120                    if($left_element) {
121                        left = $left_element.offset().left - $(window).scrollLeft();
122                    }
123                    $element_duplicated.css({
124                        'width' : width,

125                        'height' : height,
126                        'left' : left,
127                        'background-color' : bg_color,
128                    });
129
130                    if(isNew) {
131                        $element_duplicated.addClass('custom-duplicated ' + classes);
132                        $element_duplicated.addClass('inactive');
133                        if(index == $slider.find('.slick-current').index()) {
134                            $element_duplicated.addClass('active');
135                        }
136                    }
137                    if($element.closest('.slick-slide').length) {
138                        $element_duplicated.attr('data-slick-index',$element.closest('.slick-slide').attr('data-slick-index'));
139                    }
140
141                    if($element_destiny.length && isNew) {
142
143                        classes = $element_destiny.attr('class')+'-duplicated';
144                        $element_duplicated.addClass(classes);
145                        $element_duplicated.addClass(classes);
146                        $element.addClass('visibility-hidden-lg');
147                        $element_destiny.append($element_duplicated);
148                        $element_duplicated[0].addEventListener("mousewheel", function(e) {
149                            mouseWheelHandler(e,$slider);
150                          },{ passive: false });
151                    }
152
153
154                });
155
156
157
158
159
160
161
162
163            }
164        });
165
166      }
167    };
168  })(jQuery, Drupal, drupalSettings);