[IMP] website, *: add the possibility to hide the footer, per page

*: web

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

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

addons/web/views/webclient_templates.xml

@@ -484,7 +484,7 @@
                 <main>
                     <t t-raw="0"/>
                 </main>
-                <footer t-if="not no_footer" id="bottom" data-anchor="true" class="bg-light o_footer">
+                <footer t-if="not no_footer" id="bottom" data-anchor="true" t-attf-class="bg-light o_footer">
                     <div id="footer"/>
                     <div class="o_footer_copyright">
                         <div class="container py-3">

addons/website/models/website_page.py

@@ -25,6 +25,7 @@ class Page(models.Model):
     header_overlay = fields.Boolean()
     header_color = fields.Char()
     header_visible = fields.Boolean(default=True)
+    footer_visible = fields.Boolean(default=True)
 
     # don't use mixin website_id but use website_id on ir.ui.view instead
     website_id = fields.Many2one(related='view_id.website_id', store=True, readonly=False, ondelete='cascade')

addons/website/static/src/js/editor/snippets.options.js

@@ -1539,7 +1539,11 @@ options.registry.Header = options.Class.extend({
     },
 });
 
-options.registry.TopMenuVisibility = options.Class.extend({
+const VisibilityPageOptionUpdate = options.Class.extend({
+    pageOptionName: undefined,
+    showOptionWidgetName: undefined,
+    shownValue: '',
+
     /**
      * @override
      */
@@ -1556,7 +1560,7 @@ options.registry.TopMenuVisibility = options.Class.extend({
         // header appear for edition, its actual visibility for the page is
         // toggled (otherwise it would be about editing an element which
         // is actually never displayed on the page).
-        const widget = this._requestUserValueWidgets('regular_header_visibility_opt')[0];
+        const widget = this._requestUserValueWidgets(this.showOptionWidgetName)[0];
         widget.$el.click();
     },
 
@@ -1564,21 +1568,66 @@ options.registry.TopMenuVisibility = options.Class.extend({
     // Options
     //--------------------------------------------------------------------------
 
+    /**
+     * @see this.selectClass for params
+     */
+    async visibility(previewMode, widgetValue, params) {
+        const show = (widgetValue !== 'hidden');
+        await new Promise(resolve => {
+            this.trigger_up('action_demand', {
+                actionName: 'toggle_page_option',
+                params: [{name: this.pageOptionName, value: show}],
+                onSuccess: () => resolve(),
+            });
+        });
+        this.trigger_up('snippet_option_visibility_update', {show: show});
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    async _computeWidgetState(methodName, params) {
+        if (methodName === 'visibility') {
+            const shown = await this._isShown();
+            return shown ? this.shownValue : 'hidden';
+        }
+        return this._super(...arguments);
+    },
+    /**
+     * @private
+     * @returns {boolean}
+     */
+    async _isShown() {
+        return new Promise(resolve => {
+            this.trigger_up('action_demand', {
+                actionName: 'get_page_option',
+                params: [this.pageOptionName],
+                onSuccess: v => resolve(!!v),
+            });
+        });
+    },
+});
+
+options.registry.TopMenuVisibility = VisibilityPageOptionUpdate.extend({
+    pageOptionName: 'header_visible',
+    showOptionWidgetName: 'regular_header_visibility_opt',
+
+    //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
     /**
      * Handles the switching between 3 differents visibilities of the header.
      *
      * @see this.selectClass for params
      */
     async visibility(previewMode, widgetValue, params) {
+        await this._super(...arguments);
         const show = (widgetValue !== 'hidden');
-        await new Promise(resolve => {
-            this.trigger_up('action_demand', {
-                actionName: 'toggle_page_option',
-                params: [{name: 'header_visible', value: show}],
-                onSuccess: () => resolve(),
-            });
-        });
-        this.trigger_up('snippet_option_visibility_update', {show: show});
         if (!show) {
             return;
         }
@@ -1610,12 +1659,9 @@ options.registry.TopMenuVisibility = options.Class.extend({
      * @override
      */
     async _computeWidgetState(methodName, params) {
+        const _super = this._super.bind(this);
         if (methodName === 'visibility') {
-            const shown = await this._isShown();
-            if (!shown) {
-                return "hidden";
-            }
-            return new Promise(resolve => {
+            this.shownValue = await new Promise(resolve => {
                 this.trigger_up('action_demand', {
                     actionName: 'get_page_option',
                     params: ['header_overlay'],
@@ -1623,20 +1669,7 @@ options.registry.TopMenuVisibility = options.Class.extend({
                 });
             });
         }
-        return this._super(...arguments);
-    },
-    /**
-     * @private
-     * @returns {boolean}
-     */
-    async _isShown() {
-        return new Promise(resolve => {
-            this.trigger_up('action_demand', {
-                actionName: 'get_page_option',
-                params: ['header_visible'],
-                onSuccess: v => resolve(!!v),
-            });
-        });
+        return _super(...arguments);
     },
 });
 
@@ -1680,6 +1713,15 @@ options.registry.topMenuColor = options.Class.extend({
     },
 });
 
+/**
+ * Hide/show footer in the current page.
+ */
+options.registry.HideFooter = VisibilityPageOptionUpdate.extend({
+    pageOptionName: 'footer_visible',
+    showOptionWidgetName: 'hide_footer_page_opt',
+    shownValue: 'shown',
+});
+
 /**
  * Handles the edition of snippet's anchor name.
  */

addons/website/static/src/js/menu/content.js

@@ -801,6 +801,9 @@ var ContentMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
         header_visible: function (value) {
             $('#wrapwrap > header').toggleClass('d-none o_snippet_invisible', !value);
         },
+        footer_visible: function (value) {
+            $('#wrapwrap > footer').toggleClass('d-none o_snippet_invisible', !value);
+        },
     },
 
     /**

addons/website/views/snippets/snippets.xml

@@ -571,6 +571,16 @@
         </we-select>
     </div>
 
+    <div data-js="HideFooter"
+        data-selector="[data-main-object^='website.page('] #wrapwrap > footer"
+        data-no-check="true"
+        groups="website.group_website_designer">
+        <we-checkbox string="Show on this page"
+                     data-name="hide_footer_page_opt"
+                     data-visibility="hidden|shown"
+                     data-no-preview="true"/>
+    </div>
+
     <div data-selector=".o_footer_copyright"
          data-no-check="true"
          groups="website.group_website_designer">

addons/website/views/website_templates.xml

@@ -149,7 +149,7 @@
     <xpath expr="//footer" position="attributes">
         <attribute name="data-name">Footer</attribute>
         <!-- Background now controlled by css configuration, using color combinations -->
-        <attribute name="class" add="o_colored_level o_cc" remove="bg-light" separator=" "/>
+        <attribute name="t-attf-class" add="o_colored_level o_cc" remove="bg-light" separator=" "/>
     </xpath>
     <xpath expr="//div[hasclass('o_footer_copyright')]" position="attributes">
         <attribute name="data-name">Copyright</attribute>
@@ -179,7 +179,7 @@
     <!-- Page options -->
     <xpath expr="//div[@id='wrapwrap']" position="before">
         <t groups="website.group_website_publisher">
-            <t t-foreach="['header_overlay', 'header_color', 'header_visible']" t-as="optionName">
+            <t t-foreach="['header_overlay', 'header_color', 'header_visible', 'footer_visible']" t-as="optionName">
                 <input t-if="optionName in main_object" type="hidden" class="o_page_option_data" t-att-name="optionName" t-att-value="main_object[optionName]"/>
             </t>
         </t>
@@ -193,6 +193,9 @@
     <xpath expr="//header" position="attributes">
         <attribute name="t-attf-class" add="#{'d-none o_snippet_invisible' if 'header_visible' in main_object and not main_object.header_visible else ''}" separator=" "/>
     </xpath>
+    <xpath expr="//footer[@id='bottom']" position="attributes">
+        <attribute name="t-attf-class" add="#{'d-none o_snippet_invisible' if 'footer_visible' in main_object and not main_object.footer_visible else ''}" separator=" "/>
+    </xpath>
 </template>
 
 <template id="custom_code_layout" name="Custom Code Layout" inherit_id="website.layout" priority="55">
@@ -538,7 +541,7 @@
 <!-- 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=" "/>
+        <attribute name="t-attf-class" add="o_footer_slideout" separator=" "/>
     </xpath>
 </template>