https://www.fraserhealth.ca/-/media/Themes/FraserHealth/FraserHeal…/scripts/component-hero-banner-slider.js

1XA.component.herobannerslider = (function($) {
2    var api = {};
3
4    function checkPageEditor() {
5        if ($("body").hasClass("on-page-editor")) {
6            return true;
7        }
8        return false;
9    }
10
11    function initHeroBannerSlider(component, options) {
12
13        var rsOptions = {
14            autoPlaySpeed: options.AutoPlaySpeed || 9000,
15            arrowsNav: options.ArrowsNav || false,
16            loop: options.Loop || true,
17            autoScaleSlider: true,
18            autoHeight: false,            
19            transitionType: options.TransitionType || 'fade',
20            transitionSpeed: options.TransitionSpeed || 800,
21            imgWidth: options.ImageWidth || 1400,
22            imgHeight: options.ImageHeight || 680
23        }
24
25        /* Full Width Option requires autoScaleSlider:false and autoHeight: false */
26        if (options.FullWidth) {
27            rsOptions.autoScaleSlider = false;
28            rsOptions.autoHeight = false;
29        }
30
31        jQuery(function() {
32            jQuery(component).royalSlider({
33              arrowsNav: rsOptions.arrowsNav,
34              loop: rsOptions.loop,
35              keyboardNavEnabled: true,
36              controlsInside: false,
37              imageScaleMode: 'fill',
38              arrowsNavAutoHide: false,
39              autoScaleSlider: rsOptions.autoScaleSlider, 
40              autoScaleSliderWidth: 960,
41              autoScaleSliderHeight: 350,
42              controlNavigation: 'bullets',
43              thumbsFitInViewport: false,
44              navigateByClick: false,
45              startSlideId: 0,
46              autoPlay: {
47                  enabled: true,
48                  delay: rsOptions.autoPlaySpeed,
49              },
50              transitionType: rsOptions.transitionType,
51              transitionSpeed: rsOptions.transitionSpeed,
52              globalCaption: false,
53              deeplinking: {
54                enabled: true,
55                change: false
56              },
57              imgWidth: rsOptions.imgWidth,
58              imgHeight: rsOptions.imgHeight
59            });
60        });        
61    }
62
63    api.init = function() {
64        if (!checkPageEditor()) {
65            var heroBannerSlider = $(".hero-banner-slider:not(.initialized)");
66
67            heroBannerSlider.find('.rsContent img').each( function(){
68                $(this).addClass('rsImg');
69            });
70
71            heroBannerSlider.each(function() {
72                // Adding required image classes
73                $(this).find('.rsContent img').each( function(){
74                    $(this).addClass('rsImg');
75                });
76
77                // Get Component Props
78                var sliderOptions = $(this).data("options");
79                $(this).css('height', sliderOptions.ImageHeight + 'px').addClass('full-width');
80
81                var sliderEl = $(this).find('.royalSlider');
82                
83                // Adding Configured Image Height and Width
84                sliderEl.css({
85                    'width': sliderOptions.imgWidth + 'px',
86                    'height': sliderOptions.ImageHeight +'px',
87                });
88
89                initHeroBannerSlider(sliderEl, sliderOptions);
90
91                $(this).addClass("initialized");
92            });
93        }
94    };
95
96    return api;
97}(jQuery, document));
98
99XA.register("herobannerslider", XA.component.herobannerslider);