https://apprenticeshipandskillsawards.co.uk/js/app.js

1$(document).ready(function () {
2    $("body").on("click", ".toggle-mobile-menu", function (e) {
3        e.preventDefault();
4
5        $(".page").toggleClass("open");
6
7        if (!$(".page").hasClass("open")) {
8            $(".award-winners-submenu").slideUp(200);
9            $(".award-winners-arrow").removeClass("tw-rotate-180");
10        }
11    });
12
13    $("body").on("click", ".award-winners-toggle", function (e) {
14        e.preventDefault();
15        $(this).siblings(".award-winners-submenu").slideToggle(300);
16        $(this).find(".award-winners-arrow").toggleClass("tw-rotate-180");
17    });
18
19    $('[data-bs-toggle="tooltip"]').tooltip();
20
21    $(".testimonial-carousel").owlCarousel({
22        items: 1,
23        loop: true,
24        autoHeight: true,
25        navText: [
26            "<span class='nav-button' aria-label='Arrow Left'><span class='fa fa-arrow-left'></span></span>",
27            "<span class='nav-button' aria-label='Arrow Right'><span class='fa fa-arrow-right'></span></span>",
28        ],
29        onInitialized: addAccessibilityToCarouselNav,
30        onRefreshed: addAccessibilityToCarouselNav,
31    });
32
33    function addAccessibilityToCarouselNav(event) {
34        const carousel = $(".testimonial-carousel");
35    
36        carousel.find(".owl-prev").attr({
37            'aria-label': 'Previous testimonial',
38            'role': 'button'
39        });
40    
41        carousel.find(".owl-next").attr({
42            'aria-label': 'Next testimonial',
43            'role': 'button'
44        });
45
46        addDotAccessibility(event)
47    }
48
49    $(".supporters-carousel").owlCarousel({
50        items: 5,
51        loop: true,
52        margin: 100,
53        autoplay: true,
54        autoplayTimeout: 3000,
55        responsive: {
56            0: {
57                items: 2,
58            },
59            680: {
60                items: 3,
61            },
62            1024: {
63                items: 5,
64            },
65        },
66        onInitialized: addDotAccessibility,
67        onRefreshed: addDotAccessibility,
68    });
69
70    $(".stat-carousel").owlCarousel({
71        items: 4,
72        margin: 20,
73        loop: true,
74        autoplay: true,
75        autoplayTimeout: 3000,
76        responsive: {
77            0: {
78                items: 1,
79            },
80            680: {
81                items: 2,
82            },
83            1024: {
84                items: 3,
85            },
86            1250: {
87                items: 4,
88            },
89        },
90        onInitialized: addDotAccessibility,
91        onRefreshed: addDotAccessibility,
92    });
93
94    function addDotAccessibility(event) {
95        const dots = $(event.target).find('.owl-dot');
96        dots.each(function(index) {
97            $(this).attr({
98                'aria-label': `Go to slide ${index + 1}`,
99                'role': 'button'
100            });
101        });
102    }
103
104    var category_carousel = $(".category-carousel").owlCarousel({
105        items: 4,
106        margin: 20,
107        loop: true,
108        autoplay: true,
109        autoplayTimeout: 3000,
110        autoHeight: true,
111        responsive: {
112            0: {
113                items: 1,
114            },
115            680: {
116                items: 2,
117            },
118            1024: {
119                items: 3,
120            },
121            1250: {
122                items: 4,
123            },
124        },
125        onInitialized: addDotAccessibility,
126        onRefreshed: addDotAccessibility,
127    });
128
129    var catHeight = 0;
130    $(".category-carousel .owl-item").each(function (e) {
131        if ($(this).innerHeight() > catHeight)
132            catHeight = $(this).innerHeight();
133    });
134
135    $(".category-carousel .owl-item").css("height", catHeight);
136
137
138    $("body").on("click", ".category-carousel-prev", function (e) {
139        e.preventDefault();
140        category_carousel.trigger("prev.owl.carousel");
141    });
142
143    $("body").on("click", ".category-carousel-next", function (e) {
144        e.preventDefault();
145        category_carousel.trigger("next.owl.carousel");
146    });
147
148    var what_else_carousel = $(".what-else-carousel").owlCarousel({
149        items: 3,
150        loop: true,
151        margin: 25,
152
153        responsive: {
154            0: {
155                items: 1,
156            },
157            680: {
158                items: 2,
159            },
160            1024: {
161                items: 3,
162            },
163        },
164    });
165
166    $("body").on("click", ".what-else-prev", function (e) {
167        e.preventDefault();
168        what_else_carousel.trigger("prev.owl.carousel");
169    });
170
171    $("body").on("click", ".what-else-next", function (e) {
172        e.preventDefault();
173        what_else_carousel.trigger("next.owl.carousel");
174    });
175
176    var aotf_carousel = $(".aotf-carousel").owlCarousel({
177        items: 3,
178        margin: 20,
179        loop: true,
180        autoplay: false,
181        responsive: {
182            0: {
183                items: 1,
184            },
185            1024: {
186                items: 2,
187            },
188            1250: {
189                items: 3,
190            },
191        },
192        onInitialized: addAccessibilityToCarouselNav,
193        onRefreshed: addAccessibilityToCarouselNav,
194    });
195
196    $("body").on("click", ".aotf-prev", function (e) {
197        e.preventDefault();
198        aotf_carousel.trigger("prev.owl.carousel");
199    });
200
201    $("body").on("click", ".aotf-next", function (e) {
202        e.preventDefault();
203        aotf_carousel.trigger("next.owl.carousel");
204    });
205
206    const countdownTime = moment($(".countdown").data("date")).format("x");
207
208    setInterval(function () {
209        $(".countdown, .countdown-title").removeClass("tw-opacity-0");
210        const now = moment().format("x");
211        const distance = countdownTime - now;
212
213        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
214        const hours = Math.floor(
215            (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
216        );
217        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
218        const seconds = Math.floor((distance % (1000 * 60)) / 1000);
219
220        // Confetti if the countdown hits 0 exactly.
221        if (days == 0 && hours == 0 && minutes == 0 && seconds == 0) {
222            fireConfetti();
223        }
224
225        // Countdown expired
226        if (days <= 0 && hours <= 0 && minutes <= 0 && seconds <= 0) {
227            $(".countdown").addClass("tw-hidden");
228            return $(".countdown-finished").removeClass("tw-hidden");
229        }
230
231        $(".countdown").each(function () {
232            $(this).find(".countdown-days span").text(days);
233            $(this).find(".countdown-hours span").text(hours);
234            $(this).find(".countdown-minutes span").text(minutes);
235            $(this).find(".countdown-seconds span").text(seconds);
236        });
237    }, 1000);
238
239    $(".collapse")
240        .collapse({
241            parent: "#accordion",
242        })
243        .on("show.bs.collapse", function () {
244            $(this)
245                .closest(".panel-group")
246                .find(".collapse-open")
247                .removeClass("collapse-open");
248            $(this)
249                .parent(".panel")
250                .find(".panel-heading")
251                .addClass("collapse-open");
252        })
253        .on("hide.bs.collapse", function () {
254            $(this)
255                .parent(".panel")
256                .find(".collapse-open")
257                .removeClass("collapse-open");
258        });
259
260    $("#account_types").on("click", "a", function (e) {
261        e.preventDefault();
262
263        const value = $(this).data("value");
264        $("#account_type_input").val(value).trigger("change");
265    });
266
267    $("#account_type_input").on("change", function (e) {
268        const value = $(this).val();
269
270        $("#account_types a.active").removeClass("active");
271        $(`#account_types a[data-value="${value}"]`).addClass("active");
272
273        // Fade in the rest of the form and animate the scroll down to it
274        $(".register-form-wrapper").fadeIn(300);
275        const top = $(".register-form-wrapper").offset().top;
276
277        $("html, body").animate(
278            {
279                scrollTop: top - 40,
280            },
281            300
282        );
283    });
284
285    if (window.current_account_type) {
286        $("#account_types a.active").removeClass("active");
287        $(
288            `#account_types a[data-value="${window.current_account_type}"]`
289        ).addClass("active");
290        $(".register-form-wrapper").show();
291    }
292
293    // Ugly but neccessary fix :(
294    $(".modal").on("show.bs.modal", function () {
295        setTimeout(function () {
296            var backdrop = $(".modal-backdrop").detach();
297            $(".page").append(backdrop);
298        }, 1);
299    });
300
301    $(".tw-table").each(function () {
302        removeFromTable($(this), "delete");
303        removeFromTable($(this), "biography");
304        removeFromTable($(this), "download");
305    });
306
307    if ($(".percentage").length > 0) {
308        var total = $(".application-progress-tracker-form").length,
309            complete = 0;
310
311        $(".application-progress-tracker-form").each(function () {
312            if ($(this).find(".fa-check").length > 0) {
313                complete++;
314            }
315        });
316
317        var percentage = complete == 0 ? 0 : (complete / total) * 100;

318        percentage = Math.ceil(percentage);
319
320        $(".percentage-value").text(percentage);
321        $(".progress-bar").css("width", `${percentage}%`);
322    }
323
324    $("body").on("click", ".close-modal", function () {
325        $(this).closest(".modal").modal("hide");
326    });
327
328    $(".modal-invite").click(function (e) {
329        e.preventDefault();
330
331        var id = $(e.currentTarget).attr("href").replace("#", "");
332        $("#modal-invite #invite-id").val(id);
333        $("#modal-invite").modal("show");
334    });
335
336    $("body").on("click", ".jq-toast-single", function (e) {
337        if ($(e.target).hasClass("close-jq-toast-single")) return;
338        window.location.href = "/account/milestones";
339    });
340});
341
342function removeFromTable(table, class_name) {
343    var total = table.find(`td.${class_name}-content`).length,
344        empty = 0;
345
346    table.find(`td.${class_name}-content`).each(function () {
347        if ($(this).html() == "") empty++;
348    });
349
350    if (empty >= total) {
351        table.find(`td.${class_name}-content`).remove();
352        table.find(`th.${class_name}-header`).remove();
353    }
354}
355
356const confettiDefaults = {
357    spread: 360,
358    ticks: 100,
359    gravity: 0,
360    decay: 0.94,
361    startVelocity: 30,
362    shapes: ["square"],
363};
364
365function fireConfetti() {
366    confetti({
367        ...confettiDefaults,
368        particleCount: 200,
369        scalar: 1,
370    });
371
372    confetti({
373        ...confettiDefaults,
374        particleCount: 100,
375        scalar: 1,
376    });
377
378    confetti({
379        ...confettiDefaults,
380        particleCount: 50,
381        scalar: 1,
382    });
383}