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
|
odoo.define('website.ripple_effect', function (require) {
'use strict';
const publicWidget = require('web.public.widget');
publicWidget.registry.RippleEffect = publicWidget.Widget.extend({
selector: '.btn, .dropdown-toggle, .dropdown-item',
events: {
'click': '_onClick',
},
duration: 350,
/**
* @override
*/
start: async function () {
this.diameter = Math.max(this.$el.outerWidth(), this.$el.outerHeight());
this.offsetX = this.$el.offset().left;
this.offsetY = this.$el.offset().top;
return this._super(...arguments);
},
/**
* @override
*/
destroy: function () {
this._super(...arguments);
if (this.rippleEl) {
this.rippleEl.remove();
}
},
//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------
/**
* @private
* @param {boolean} [toggle]
*/
_toggleRippleEffect: function (toggle) {
this.el.classList.toggle('o_js_ripple_effect', toggle);
},
//--------------------------------------------------------------------------
// Handlers
//--------------------------------------------------------------------------
/**
* @private
* @param {Event} ev
*/
_onClick: function (ev) {
if (!this.rippleEl) {
this.rippleEl = document.createElement('span');
this.rippleEl.classList.add('o_ripple_item');
this.rippleEl.style.animationDuration = `${this.duration}ms`;
this.rippleEl.style.width = `${this.diameter}px`;
this.rippleEl.style.height = `${this.diameter}px`;
this.el.appendChild(this.rippleEl);
}
clearTimeout(this.timeoutID);
this._toggleRippleEffect(false);
this.rippleEl.style.top = `${ev.pageY - this.offsetY - this.diameter / 2}px`;
this.rippleEl.style.left = `${ev.pageX - this.offsetX - this.diameter / 2}px`;
this._toggleRippleEffect(true);
this.timeoutID = setTimeout(() => this._toggleRippleEffect(false), this.duration);
},
});
});
|
