[IMP] website: add ripple effect option for buttons

Part of https://github.com/odoo/odoo/pull/56427
task-2264627

X-original-commit: 92c911fe1a8b24437ef5174d04c92ef8f185fc2c
Co-authored-by: qsm-odoo <qsm@odoo.com>

addons/website/models/theme_models.py

@@ -172,11 +172,15 @@ class Theme(models.AbstractModel):
                 'navbar-font': 'null',
                 'buttons-font': 'null',
                 'color-palettes-number': 'null',
+                'btn-ripple': 'null',
                 'header-template': 'null',
                 'footer-template': 'null',
             }
         )
 
+        # Reinitialize effets
+        self.disable_view('website.option_ripple_effect')
+
         # Reinitialize header templates
         self.disable_view('website.template_header_hamburger')
         self.disable_view('website.template_header_hamburger_left')

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);
+    },
+});
+});

addons/website/static/src/scss/options/ripple_effect.scss

@@ -0,0 +1,28 @@
+@keyframes o-btn-ripple {
+    100% {
+        opacity: 0;
+        transform: scale(2.5);
+    }
+}
+
+.o_ripple_item {
+    display: none;
+    position: absolute;
+    z-index: -1;
+    border-radius: 100%;
+    opacity: .3;
+    background: currentColor;
+    pointer-events: none;
+    transform: scale(0);
+}
+
+.o_js_ripple_effect {
+    transform-style: preserve-3d;
+    position: relative !important;
+    overflow: hidden !important;
+
+    .o_ripple_item {
+        display: block;
+        animation: o-btn-ripple ease-in;
+    }
+}

addons/website/static/src/scss/primary_variables.scss

@@ -252,6 +252,7 @@ $o-base-website-values-palette: (
     'btn-primary-outline': false,
     'btn-secondary-outline': false,
     'link-underline': 'hover', // 'never' / 'hover' / 'always'
+    'btn-ripple': false,
 
     // A key from the $o-theme-font-configs map (null = default to the first key)
     'font': null,

addons/website/views/snippets/snippets.xml

@@ -916,6 +916,10 @@
             <we-button data-customize-website-variable="false">Fill</we-button>
             <we-button data-customize-website-variable="true">Outline</we-button>
         </we-select>
+        <we-checkbox string="Ripple Buttons"
+                     data-customize-website-views="website.option_ripple_effect"
+                     data-customize-website-variable="false|true"
+                     data-variable="btn-ripple"/>
         <we-select string="Link Style" data-variable="link-underline">
             <we-button data-customize-website-variable="'never'">Normal</we-button>
             <we-button data-customize-website-variable="'hover'">Underline On Hover</we-button>

addons/website/views/website_templates.xml

@@ -721,6 +721,16 @@
 <template id="pager" name="Pager" inherit_id="portal.pager">
 </template>
 
+<!-- Effect options -->
+<template id="option_ripple_effect" inherit_id="website.assets_frontend" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/ripple_effect.scss"/>
+    </xpath>
+    <xpath expr="//script[last()]" position="after">
+        <script type="text/javascript" src="/website/static/src/js/content/ripple_effect.js"/>
+    </xpath>
+</template>
+
 <!-- Layout options -->
 <template id="option_layout_boxed_variables" inherit_id="website._assets_primary_variables" active="False">
     <xpath expr="//link[last()]" position="after">