ScrollButton

addons/html_builder/static/src/utils/utils_css.js

@@ -600,7 +600,7 @@ export function applyNeededCss(
     { force = false, allowImportant = true } = {}
 ) {
     if (force) {
-        el.style.setProperty(cssProp, cssValue, "important");
+        el.style.setProperty(cssProp, cssValue, allowImportant ? "important" : "");
         return true;
     }
     el.style.removeProperty(cssProp);

addons/html_builder/static/src/website_builder/plugins/options/scroll_button_option.js

@@ -0,0 +1,22 @@
+import { BaseOptionComponent, useDomState } from "@html_builder/core/utils";
+import { _t } from "@web/core/l10n/translation";
+
+export class ScrollButtonOption extends BaseOptionComponent {
+    static template = "html_builder.ScrollButtonOption";
+    static props = {};
+
+    setup() {
+        super.setup();
+        this.state = useDomState((editingElement) => ({
+            heightLabel:
+                editingElement.dataset.snippet === "s_image_gallery"
+                    ? _t("Min-Height")
+                    : _t("Height"),
+            heightFieldEnabled: editingElement.dataset.snippet === "s_image_gallery",
+        }));
+    }
+
+    showHeightField() {
+        return this.state.heightFieldEnabled && this.isActiveItem("fit_content_opt");
+    }
+}

addons/html_builder/static/src/website_builder/plugins/options/scroll_button_option.xml

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+<t t-name="html_builder.ScrollButtonOption">
+    <BuilderRow label="this.state.heightLabel">
+        <BuilderButtonGroup action="'scrollButtonSectionHeightClassAction'">
+            <BuilderButton id="'fit_content_opt'" actionParam="''" title.translate="Fit content">Auto</BuilderButton>
+            <BuilderButton actionParam="'o_half_screen_height'" title.translate="Half screen">50%</BuilderButton>
+            <BuilderButton id="'full_height_opt'" actionParam="'o_full_screen_height'" title.translate="Full screen">100%</BuilderButton>
+        </BuilderButtonGroup>
+    </BuilderRow>
+
+    <BuilderRow label.translate="Height" level="1" t-if="this.showHeightField()">
+        <BuilderNumberInput styleAction="{ mainParam: 'height', force: true, allowImportant: false }" unit="'px'" min="0"/>
+    </BuilderRow>
+
+    <BuilderRow label.translate="Scroll Down Button" t-if="this.isActiveItem('full_height_opt')">
+        <BuilderCheckbox id="'scroll_button_opt'" action="'addScrollButton'"/>
+    </BuilderRow>
+
+    <t t-if="this.isActiveItem('scroll_button_opt')">
+        <BuilderRow label.translate="Colors" level="1" applyTo="':scope > .o_scroll_button'">
+            <BuilderColorPicker styleAction="'background-color'"/>
+            <BuilderColorPicker styleAction="'color'"/>
+        </BuilderRow>
+        <BuilderRow label.translate="Spacing" level="1" applyTo="':scope > .o_scroll_button'">
+            <BuilderSelect>
+                <BuilderSelectItem classAction="''">None</BuilderSelectItem>
+                <BuilderSelectItem classAction="'mb-1'">Extra-Small</BuilderSelectItem>
+                <BuilderSelectItem classAction="'mb-2'">Small</BuilderSelectItem>
+                <BuilderSelectItem classAction="'mb-3'">Medium</BuilderSelectItem>
+                <BuilderSelectItem classAction="'mb-4'">Large</BuilderSelectItem>
+                <BuilderSelectItem classAction="'mb-5'">Extra-Large</BuilderSelectItem>
+            </BuilderSelect>
+        </BuilderRow>
+    </t>
+</t>
+
+</templates>

addons/html_builder/static/src/website_builder/plugins/options/scroll_button_option_plugin.js

@@ -0,0 +1,96 @@
+import { Plugin } from "@html_editor/plugin";
+import { _t } from "@web/core/l10n/translation";
+import { registry } from "@web/core/registry";
+import { ScrollButtonOption } from "./scroll_button_option";
+import { classAction } from "@html_builder/core/core_builder_action_plugin";
+
+class ScrollButtonOptionPlugin extends Plugin {
+    static id = "scrollButtonOption";
+    resources = {
+        builder_options: [
+            {
+                OptionComponent: ScrollButtonOption,
+                selector: "section",
+                exclude:
+                    "[data-snippet] :not(.oe_structure) > [data-snippet],.s_instagram_page,.o_mega_menu > section,.s_appointments .s_dynamic_snippet_content",
+            },
+        ],
+        builder_actions: {
+            addScrollButton: {
+                isApplied: ({ editingElement }) =>
+                    !!editingElement.querySelector(":scope > .o_scroll_button"),
+                apply: ({ editingElement }) => {
+                    let button = this.buttonCache.get(editingElement);
+                    if (!button) {
+                        const anchor = document.createElement("a");
+                        anchor.classList.add(
+                            "o_scroll_button",
+                            "mb-3",
+                            "rounded-circle",
+                            "align-items-center",
+                            "justify-content-center",
+                            "mx-auto",
+                            "bg-primary",
+                            "o_not_editable"
+                        );
+                        anchor.href = "#";
+                        anchor.contentEditable = "false";
+                        anchor.title = _t("Scroll down to next section");
+                        const arrow = document.createElement("i");
+                        arrow.classList.add("fa", "fa-angle-down", "fa-3x");
+                        anchor.appendChild(arrow);
+                        button = anchor;
+                        this.buttonCache.set(editingElement, button);
+                    }
+                    editingElement.appendChild(button);
+                },
+                clean: this.removeButton.bind(this),
+            },
+            scrollButtonSectionHeightClassAction: {
+                ...classAction,
+                apply: (args) => {
+                    classAction.apply(args);
+                    const {
+                        editingElement,
+                        param: { mainParam },
+                    } = args;
+                    // If a "d-lg-block" class exists on the section (e.g., for
+                    // mobile visibility option), it should be replaced with a
+                    // "d-lg-flex" class. This ensures that the section has the
+                    // "display: flex" property applied, which is the default
+                    // rule for both "height" option classes.
+                    if (mainParam) {
+                        editingElement.classList.replace("d-lg-block", "d-lg-flex");
+                    } else if (editingElement.classList.contains("d-lg-flex")) {
+                        // There are no known cases, but we still make sure that
+                        // the <section> element doesn't have a "display: flex"
+                        // originally.
+                        editingElement.classList.remove("d-lg-flex");
+                        const sectionStyle = window.getComputedStyle(editingElement);
+                        const hasDisplayFlex = sectionStyle.getPropertyValue("display") === "flex";
+                        editingElement.classList.add(hasDisplayFlex ? "d-lg-flex" : "d-lg-block");
+                    }
+                },
+                clean: (args) => {
+                    classAction.clean(args);
+                    if (args.param.mainParam === "o_full_screen_height") {
+                        this.removeButton(args);
+                    }
+                },
+            },
+        },
+    };
+
+    setup() {
+        this.buttonCache = new Map();
+    }
+
+    removeButton({ editingElement }) {
+        const button = editingElement.querySelector(":scope > .o_scroll_button");
+        if (button) {
+            button.remove();
+            this.buttonCache.set(editingElement, button);
+        }
+    }
+}
+registry.category("website-plugins").add(ScrollButtonOptionPlugin.id, ScrollButtonOptionPlugin);