[IMP] website, *: add new footer effect options

*: web

Part of https://github.com/odoo/odoo/pull/49142
task-2229551

Co-authored-by: qsm-odoo <qsm@odoo.com>

6 files changed, 62 insertions, 0 deletions

diff --git a/addons/web/static/src/scss/base_frontend.scss b/addons/web/static/src/scss/base_frontend.scss
index 1175ab2c990..f1c341a89f9 100644
--- a/addons/web/static/src/scss/base_frontend.scss
+++ b/addons/web/static/src/scss/base_frontend.scss
@@ -1,5 +1,8 @@
 // Frontend general
 #wrapwrap {
+    // The z-index is useful to prevent that children with a negative z-index
+    // go behind the wrapwrap (we create a new stacking context).
+    z-index: 0;
     position: relative;
     display: flex;
     flex-flow: column nowrap;
diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js
index 0cb7334af64..48afbe0db65 100644
--- a/addons/website/static/src/js/content/snippets.animation.js
+++ b/addons/website/static/src/js/content/snippets.animation.js
@@ -967,6 +967,28 @@ registry.ScrollButton = registry.anchorSlide.extend({
     },
 });
 
+registry.FooterSlideout = publicWidget.Widget.extend({
+    selector: '#wrapwrap:has(.o_footer_slideout)',
+    disabledInEditableMode: false,
+
+    /**
+     * @override
+     */
+    async start() {
+        const $main = this.$('> main');
+        const slideoutEffect = $main.outerHeight() >= $(window).outerHeight();
+        this.el.classList.toggle('o_footer_effect_enable', slideoutEffect);
+        return this._super(...arguments);
+    },
+    /**
+     * @override
+     */
+    destroy() {
+        this._super(...arguments);
+        this.el.classList.remove('o_footer_effect_enable');
+    },
+});
+
 return {
     Widget: publicWidget.Widget,
     Animation: Animation,
diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index a3c4cbba5dd..2fd572c69f6 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -255,6 +255,7 @@ $o-base-website-values-palette: (
     'btn-secondary-outline': false,
     'header-template': 'logo_menu',
     'footer-template': 'products_contacts_about_us',
+    'footer-effect': null, // null / 'slideout_slide_hover' / 'slideout_shadow'
 );
 $o-website-values-palettes: (
     (
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 1c4daea78ca..ac2f9a31a18 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -863,6 +863,24 @@ header {
     }
 }
 
+@if index(('slideout_slide_hover', 'slideout_shadow'), o-website-value('footer-effect')) {
+    @include media-breakpoint-up(lg) {
+        #wrapwrap.o_footer_effect_enable {
+            > main {
+                background-color: $body-bg;
+                @if o-website-value('footer-effect') == 'slideout_shadow' {
+                    box-shadow: $box-shadow;
+                }
+            }
+            > footer {
+                @include o-position-absolute(0, 0, 0, 0);
+                position: sticky;
+                z-index: -1;
+            }
+        }
+    }
+}
+
 // Copyright
 .o_footer_copyright {
 
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index a6074432768..6b71320c7b1 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -554,6 +554,17 @@
                        data-customize-website-variable="address_logo"
                        string="Address - Logo"/>
         </we-select>
+        <we-select string="Slideout Effect" data-variable="footer-effect" data-reload="/">
+            <we-button string="Regular"
+                       data-customize-website-views=""
+                       data-customize-website-variable=""/>
+            <we-button string="Slide Hover"
+                       data-customize-website-views="website.template_footer_slideout"
+                       data-customize-website-variable="slideout_slide_hover"/>
+            <we-button string="Shadow"
+                       data-customize-website-views="website.template_footer_slideout"
+                       data-customize-website-variable="slideout_shadow"/>
+        </we-select>
     </div>
 
     <div data-selector=".o_footer_copyright"
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 5cd7087580d..89206552c19 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -520,6 +520,13 @@
     </xpath>
 </template>
 
+<!-- slideout effect -->
+<template id="template_footer_slideout" inherit_id="website.layout" name="Template Footer Slideout" active="False">
+    <xpath expr="//footer[@id='bottom']" position="attributes">
+        <attribute name="class" add="o_footer_slideout" separator=" "/>
+    </xpath>
+</template>
+
 <template id="cookies_bar" inherit_id="website.footer_custom" name="Cookies Bar">
     <xpath expr="//footer" position="after">
         <div id="website_cookies_bar" t-if="website.cookies_bar" class="s_popup o_snippet_invisible" data-name="Cookies Bar" data-vcss="001" data-invisible="1">