https://www.paturnpike.com/Frontend-Assembly/PTC.Presentation.Web/…?package=PATurnpike&v=ODM3NzAxMzg0

1class TravelAdvisoriesTicker {
2
3    // -----------------------------------------------------------------------------------------------------------------------
4    // #region Public
5    // -----------------------------------------------------------------------------------------------------------------------
6
7    constructor() {
8        this.displayUtils = window.com.paturnpike.DisplayUtils;
9
10        this.isFixed = true;
11
12        this.widgetName = "c-travel-advisories";
13        this.$widget = $(`.${this.widgetName}`);
14        this.$widgetPlaceholder = $(`#${this.widgetName}-placeholder`);
15        this.$loading = this.$widget.find(`.travel-advisories-ticker-loader`);
16        this.$travelAdvisories = this.$widget.find(`.travel-advisories`);
17        if (!this.displayUtils.isElementInViewport(this.$widgetPlaceholder)) {
18            this.$widget.addClass("fixed");
19        }
20
21        window.addEventListener('scroll', $.proxy(this.onScrollWindow, this));
22
23        this.$loading.show();
24
25        $.ajax({
26            url: "/travel-advisories-ticker/ajax/get-travel-advisories",
27            cache: false,
28            type: 'GET',
29            success: $.proxy(this.onSuccess, this),
30        });
31
32    }
33
34    // #endregion Public
35
36    // -----------------------------------------------------------------------------------------------------------------------
37    // #region Private
38    // -----------------------------------------------------------------------------------------------------------------------
39
40    initializeTravelAdvisoriesUi() {
41        // we are in admin interface, no need to initalize the carousel
42        if (typeof Telerik !== "undefined" && typeof Telerik.Sitefinity !== "undefined") {
43            return;
44        }
45
46        this.$travelAdvisories.slick({
47            accessibility: true,
48            arrows: false,
49            dots: false,
50            vertical: true,
51            autoplay: true,
52            autoplaySpeed: 8000,
53            focusOnSelect: true
54        });
55
56        this.addCarouselAccessibility();
57        this.addCarouselVerticalResize();
58
59        $(".travel-advisory").on("focusin", () => {
60            this.$travelAdvisories.slick("slickPause");
61        })
62
63        $(".travel-advisory").on("focusout", () => {
64            this.$travelAdvisories.slick("slickPlay");
65        })
66
67        return;
68    }
69
70    addCarouselAccessibility() {
71        $(".slick-track").attr("aria-live", "polite");
72        $(".notification").attr("aria-roledescription", "slide");
73        $(".notification").each(function (index) {
74            const length = $(".notification").length
75            $(this).attr("aria-label", `Slide ${index + 1} of ${length}`)
76        })
77    }
78
79    addCarouselVerticalResize() {
80      var maxHeight = -1;
81      $('.ticker .slick-slide').each(function() {
82        if ($(this).height() > maxHeight) {
83          maxHeight = $(this).height();
84        }
85      });
86      $('.ticker .slick-slide').each(function() {
87        if ($(this).height() < maxHeight) {
88          $(this).css('margin-top', Math.ceil((maxHeight-$(this).height())/2) + 'px');
89          $(this).css('margin-bottom', Math.ceil((maxHeight-$(this).height())/2) + 'px');
90        }
91      });
92    }
93
94    decodeHtmlString(text) {
95        if (text == null || typeof text !== 'string') {
96            return '';
97        }
98        var txt = document.createElement("textarea");
99        txt.innerHTML = text;
100        return txt.value;
101    }
102
103    onScrollWindow() {
104        if (this.isFixed) {
105            if (!this.displayUtils.isElementInViewport(this.$widgetPlaceholder)) {
106                this.$widget.addClass("fixed");
107            }
108            else {
109                this.$widget.removeClass("fixed");
110                this.isFixed = false;
111            }
112        }
113    }
114
115    onSuccess(result) {
116        this.$travelAdvisories.html(result);
117
118        this.initializeTravelAdvisoriesUi();
119
120        this.$loading.hide();
121    }
122
123    // #endregion Private
124};