initial commit 2

1 files changed, 72 insertions, 0 deletions

diff --git a/addons/website/static/src/js/content/ripple_effect.js b/addons/website/static/src/js/content/ripple_effect.js
new file mode 100644
index 00000000..2e61d5b7
--- /dev/null
+++ b/addons/website/static/src/js/content/ripple_effect.js
@@ -0,0 +1,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);
+    },
+});
+});