https://orangerootnatirals.com/app/js/count-down.js

1'use strict';
2function Util(){};
3Util.setAttributes = function (el, attrs) {
4    for (var key in attrs) {
5        el.setAttribute(key, attrs[key]);
6    }
7};
8
9(function () {
10    var CountDown = function (element) {
11        this.element = element;
12        this.labels = this.element.getAttribute('data-labels') ? this.element.getAttribute('data-labels').split(',') : [];
13        this.intervalId;
14        // set visible labels
15        this.setVisibleLabels();
16        //create countdown HTML
17        this.createCountDown();
18        //store time elements
19        this.days = this.element.getElementsByClassName('js-countdown__value--0')[0];
20        this.hours = this.element.getElementsByClassName('js-countdown__value--1')[0];
21        this.mins = this.element.getElementsByClassName('js-countdown__value--2')[0];
22        this.secs = this.element.getElementsByClassName('js-countdown__value--3')[0];
23        this.endTime = this.getEndTime();
24        //init counter
25        this.initCountDown();
26    };
27
28    CountDown.prototype.setVisibleLabels = function () {
29        this.visibleLabels = this.element.getAttribute('data-visible-labels') ? this.element.getAttribute('data-visible-labels').split(',') : [];
30        this.visibleLabels = this.visibleLabels.map(function (label) {
31            return label.trim();
32        });
33    };
34
35    CountDown.prototype.createCountDown = function () {
36        var wrapper = document.createElement("div");
37        Util.setAttributes(wrapper, {'aria-hidden': 'true', 'class': 'countdown__timer'});
38
39        for (var i = 0; i < 4; i++) {
40            var timeItem = document.createElement("span"),
41                timeValue = document.createElement("span"),
42                timeLabel = document.createElement('span');
43
44            timeItem.setAttribute('class', 'countdown__item');
45            timeValue.setAttribute('class', 'countdown__value countdown__value--' + i + ' js-countdown__value--' + i);
46            timeItem.appendChild(timeValue);
47
48            if (this.labels && this.labels.length > 0) {
49                timeLabel.textContent = this.labels[i].trim();
50                timeLabel.setAttribute('class', 'countdown__label');
51                timeItem.appendChild(timeLabel);
52            }
53
54            wrapper.appendChild(timeItem);
55        }
56        // append new content to countdown element
57        this.element.insertBefore(wrapper, this.element.firstChild);
58        // this.element.appendChild(wrapper);
59    };
60
61    CountDown.prototype.getEndTime = function () {
62        // get number of remaining seconds
63        if (this.element.getAttribute('data-timer')) return Number(this.element.getAttribute('data-timer')) * 1000 + new Date().getTime();
64        else if (this.element.getAttribute('data-countdown')) return Number(new Date(this.element.getAttribute('data-countdown')).getTime());
65    };
66
67    CountDown.prototype.initCountDown = function () {
68        var self = this;
69        this.intervalId = setInterval(function () {
70            self.updateCountDown(false);
71        }, 1000);
72        this.updateCountDown(true);
73    };
74
75    CountDown.prototype.updateCountDown = function (bool) {
76        // original countdown function
77        // https://gist.github.com/adriennetacke/f5a25c304f1b7b4a6fa42db70415bad2
78        var time = parseInt((this.endTime - new Date().getTime()) / 1000),
79            days = 0,
80            hours = 0,
81            mins = 0,
82            seconds = 0;
83
84        if (isNaN(time) || time < 0) {
85            clearInterval(this.intervalId);
86            this.emitEndEvent();
87        } else {
88            days = parseInt(time / 86400);
89            time = (time % 86400);
90            hours = parseInt(time / 3600);
91            time = (time % 3600);
92            mins = parseInt(time / 60);
93            time = (time % 60);
94            seconds = parseInt(time);
95        }
96
97        // hide days/hours/mins if not available
98        if (bool && days == 0 && this.visibleLabels.indexOf('d') < 0) this.days.parentElement.style.display = "none";
99        if (bool && days == 0 && hours == 0 && this.visibleLabels.indexOf('h') < 0) this.hours.parentElement.style.display = "none";
100        if (bool && days == 0 && hours == 0 && mins == 0 && this.visibleLabels.indexOf('m') < 0) this.mins.parentElement.style.display = "none";
101
102        this.days.textContent = days;
103        this.hours.textContent = this.getTimeFormat(hours);
104        this.mins.textContent = this.getTimeFormat(mins);
105        this.secs.textContent = this.getTimeFormat(seconds);
106    };
107
108    CountDown.prototype.getTimeFormat = function (time) {
109        return ('0' + time).slice(-2);
110    };
111
112    CountDown.prototype.emitEndEvent = function (time) {
113        var event = new CustomEvent('countDownFinished');
114        this.element.dispatchEvent(event);
115    };
116
117    // Functions calling
118    window.addEventListener ('load', function () {
119        //initialize the CountDown objects
120/*        window.setTimeout(() => {*/
121            var countDown = document.getElementsByClassName('js-countdown');
122            if (countDown.length > 0) {
123                for (var i = 0; i < countDown.length; i++) {
124                    (function (i) {
125                        new CountDown(countDown[i]);
126                    })(i);
127                }
128            }
129  /*      }, 1000);*/
130
131    });
132}());