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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
odoo.define('website.s_countdown_options', function (require) {
'use strict';
const core = require('web.core');
const options = require('web_editor.snippets.options');
const CountdownWidget = require('website.s_countdown');
const qweb = core.qweb;
options.registry.countdown = options.Class.extend({
events: _.extend({}, options.Class.prototype.events || {}, {
'click .toggle-edit-message': '_onToggleEndMessageClick',
}),
//--------------------------------------------------------------------------
// Options
//--------------------------------------------------------------------------
/**
* Changes the countdown action at zero.
*
* @see this.selectClass for parameters
*/
endAction: function (previewMode, widgetValue, params) {
this.$target[0].dataset.endAction = widgetValue;
if (widgetValue === 'message') {
if (!this.$target.find('.s_countdown_end_message').length) {
const message = this.endMessage || qweb.render('website.s_countdown.end_message');
this.$target.append(message);
}
} else {
const $message = this.$target.find('.s_countdown_end_message').detach();
if ($message.length) {
this.endMessage = $message[0].outerHTML;
}
}
},
/**
* Changes the countdown style.
*
* @see this.selectClass for parameters
*/
layout: function (previewMode, widgetValue, params) {
switch (widgetValue) {
case 'circle':
this.$target[0].dataset.progressBarStyle = 'disappear';
this.$target[0].dataset.progressBarWeight = 'thin';
this.$target[0].dataset.layoutBackground = 'none';
break;
case 'boxes':
this.$target[0].dataset.progressBarStyle = 'none';
this.$target[0].dataset.layoutBackground = 'plain';
break;
case 'clean':
this.$target[0].dataset.progressBarStyle = 'none';
this.$target[0].dataset.layoutBackground = 'none';
break;
case 'text':
this.$target[0].dataset.progressBarStyle = 'none';
this.$target[0].dataset.layoutBackground = 'none';
break;
}
this.$target[0].dataset.layout = widgetValue;
},
//--------------------------------------------------------------------------
// Public
//--------------------------------------------------------------------------
/**
* @override
*/
updateUIVisibility: async function () {
await this._super(...arguments);
const dataset = this.$target[0].dataset;
// End Action UI
this.$el.find('.toggle-edit-message')
.toggleClass('d-none', dataset.endAction !== 'message');
// End Message UI
this.updateUIEndMessage();
},
/**
* @see this.updateUI
*/
updateUIEndMessage: function () {
this.$target.find('.s_countdown_canvas_wrapper')
.toggleClass("d-none", this.showEndMessage === true && this.$target.hasClass("hide-countdown"));
this.$target.find('.s_countdown_end_message')
.toggleClass("d-none", !this.showEndMessage);
},
//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------
/**
* @override
*/
_computeWidgetState: function (methodName, params) {
switch (methodName) {
case 'endAction':
case 'layout':
return this.$target[0].dataset[methodName];
case 'selectDataAttribute': {
if (params.colorNames) {
// In this case, it is a colorpicker controlling a data
// value on the countdown: the default value is determined
// by the countdown public widget.
params.attributeDefaultValue = CountdownWidget.prototype.defaultColor;
}
break;
}
}
return this._super(...arguments);
},
//--------------------------------------------------------------------------
// Handlers
//--------------------------------------------------------------------------
/**
* @private
*/
_onToggleEndMessageClick: function () {
this.showEndMessage = !this.showEndMessage;
this.$el.find(".toggle-edit-message")
.toggleClass('text-primary', this.showEndMessage);
this.updateUIEndMessage();
this.trigger_up('cover_update');
},
});
});
|
