https://www.fraserhealth.ca/-/media/Themes/FraserHealth/FraserHeal…/Site/scripts/component-datetime-content.js

1/**
2 * Component Date Time Content - dtcontent
3 * @module DTContent
4 * @param  {jQuery} $ Instance of jQuery
5 * @return {Object} List of archive methods
6 */
7XA.component.dtcontent = (function($) {
8    /**
9     * This object stores all public api methods
10     * @type {Object.<Methods>}
11     * @memberOf module:DTContent
12     * */
13    var api = {};
14
15    function dtcCountdown(datetime, $el) {
16        // Set the date we're counting down to
17        var countDownDate = new Date(datetime).getTime();
18    
19        var nowDateTime = new Date();
20        var now = nowDateTime.getTime();
21    
22        // Find the distance between now and the count down date
23        var distance = countDownDate - now;
24        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
25    
26        if (seconds > 10) {
27            // Update the count down every 1 second
28            var x = setInterval(function() {
29                
30                var $days = $el.find(".dt-days");
31                var $hours = $el.find(".dt-hours");
32                var $mins = $el.find(".dt-minutes");
33                var $seconds = $el.find(".dt-seconds");
34    
35                // Get today's date and time
36                var nowDateTime = new Date();
37                var now = nowDateTime.getTime();
38    
39                // Find the distance between now and the count down date
40                var distance = countDownDate - now;
41    
42                // Time calculations for days, hours, minutes and seconds
43                var days = Math.floor(distance / (1000 * 60 * 60 * 24));
44                var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
45                var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
46                var seconds = Math.floor((distance % (1000 * 60)) / 1000);
47    
48                // Display the result in the element with id="demo"
49                $days.html(days);
50                $hours.html(hours);
51                $mins.html(minutes);
52                $seconds.html(seconds);
53    
54                // If the count down is finished, write some text
55                if (distance < 0) {
56                    clearInterval(x);
57                    $el.innerHTML = "EXPIRED";
58                }
59            }, 1000);
60        } else {
61            $el.find(".dt-days").html(0);
62            $el.find(".dt-hours").html(0);
63            $el.find(".dt-minutes").html(0);
64            $el.find(".dt-seconds").html(0);
65        }
66    } 
67
68    api.init = function() {
69        const $countdownBox = ".datetime-content.countdown";
70        const $cdBox = $($countdownBox);
71        if ($cdBox) {
72            $cdBox.each(function() {
73                const $dateTime = $(this).data('dtselected')
74                const $el = $(this).find('.dt-wrapper');
75                dtcCountdown($dateTime, $el);
76            });
77        }
78    };
79
80    return api;
81})(jQuery, document);
82
83XA.register("dtcontent", XA.component.dtcontent);