1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
odoo.define('website_event.display_timer_widget', function (require) {
'use strict';
var core = require('web.core');
var _t = core._t;
var publicWidget = require('web.public.widget');
publicWidget.registry.displayTimerWidget = publicWidget.Widget.extend({
selector: '.o_display_timer',
/**
* This widget allows to display a dom element at the end of a certain time laps.
* There are 2 timers available:
* - The main-timer: display the DOM element (using the displayClass) at the end of this timer.
* - The pre-timer: additional timer to display the main-timer. This pre-timer can be invisible or visible,
* depending of the startCountdownDisplay option. Once the pre-timer is over,
the main-timer is displayed.
* @override
*/
start: function () {
var self = this;
return this._super.apply(this, arguments).then(function () {
self.options = self.$target.data();
self.preCountdownDisplay = self.options["preCountdownDisplay"];
self.preCountdownTime = self.options["preCountdownTime"];
self.preCountdownText = self.options["preCountdownText"];
self.mainCountdownTime = self.options["mainCountdownTime"];
self.mainCountdownText = self.options["mainCountdownText"];
self.mainCountdownDisplay = self.options["mainCountdownDisplay"];
self.displayClass = self.options["displayClass"];
if (self.preCountdownDisplay) {
$(self.$el).parent().removeClass('d-none');
}
self._checkTimer();
self.interval = setInterval(function () { self._checkTimer(); }, 1000);
});
},
/**
* This method removes 1 second to the current timer (pre-timer or main-timer)
* and call the method to update the DOM, unless main-timer is over. In that last case,
* the DOM element to show is displayed.
*
* @private
*/
_checkTimer: function () {
var now = new Date();
var remainingPreSeconds = this.preCountdownTime - (now.getTime()/1000);
if (remainingPreSeconds <= 1) {
this.$('.o_countdown_text').text(this.mainCountdownText);
if (this.mainCountdownDisplay) {
$(this.$el).parent().removeClass('d-none');
}
var remainingMainSeconds = this.mainCountdownTime - (now.getTime()/1000);
if (remainingMainSeconds <= 1) {
clearInterval(this.interval);
$(this.displayClass).removeClass('d-none');
$(this.$el).parent().addClass('d-none');
} else {
this._updateCountdown(remainingMainSeconds);
}
} else {
this._updateCountdown(remainingPreSeconds);
}
},
/**
* This method update the DOM to display the remaining time.
* from seconds, the method extract the number of days, hours, minutes and seconds and
* override the different DOM elements values.
*
* @private
*/
_updateCountdown: function (remainingTime) {
var remainingSeconds = remainingTime;
var days = Math.floor(remainingSeconds / 86400);
remainingSeconds = remainingSeconds % 86400;
var hours = Math.floor(remainingSeconds / 3600);
remainingSeconds = remainingSeconds % 3600;
var minutes = Math.floor(remainingSeconds / 60);
remainingSeconds = Math.floor(remainingSeconds % 60);
this.$("span.o_timer_days").text(days);
this.$("span.o_timer_hours").text(this._zeroPad(hours, 2));
this.$("span.o_timer_minutes").text(this._zeroPad(minutes, 2));
this.$("span.o_timer_seconds").text(this._zeroPad(remainingSeconds, 2));
},
/**
* Small tool to add leading zéros to the given number, in function of the needed number of leading zéros.
*
* @private
*/
_zeroPad: function (num, places) {
var zero = places - num.toString().length + 1;
return new Array(+(zero > 0 && zero)).join("0") + num;
},
});
return publicWidget.registry.countdownWidget;
});
|
