From 9207bba8eafbd54e0290dba8fbd36887d110a7fa Mon Sep 17 00:00:00 2001
From: fdardenne <dafl@odoo.com>
Date: Thu, 20 Mar 2025 13:31:29 +0100
Subject: [PATCH 1/2] Add slideshow layout customization

---
 .../plugins/options/image_gallery_option.js   |  2 +
 .../plugins/options/image_gallery_option.xml  | 38 +++++++++++++++++++
 2 files changed, 40 insertions(+)

diff --git a/addons/html_builder/static/src/website_builder/plugins/options/image_gallery_option.js b/addons/html_builder/static/src/website_builder/plugins/options/image_gallery_option.js
index 31c1dce656b2e..42a1a526119c9 100644
--- a/addons/html_builder/static/src/website_builder/plugins/options/image_gallery_option.js
+++ b/addons/html_builder/static/src/website_builder/plugins/options/image_gallery_option.js
@@ -1,7 +1,9 @@
 import { BaseOptionComponent, useDomState } from "@html_builder/core/utils";
+import { BorderConfigurator } from "@html_builder/plugins/border_configurator_option";
 
 export class ImageGalleryComponent extends BaseOptionComponent {
     static template = "html_builder.ImageGalleryOption";
+    static components = { BorderConfigurator };
     static props = {};
 
     setup() {
diff --git a/addons/html_builder/static/src/website_builder/plugins/options/image_gallery_option.xml b/addons/html_builder/static/src/website_builder/plugins/options/image_gallery_option.xml
index 7236bec0dd952..5d0c352d83b73 100644
--- a/addons/html_builder/static/src/website_builder/plugins/options/image_gallery_option.xml
+++ b/addons/html_builder/static/src/website_builder/plugins/options/image_gallery_option.xml
@@ -30,6 +30,44 @@
     <BuilderRow label.translate="Speed" t-if="this.state.isSlideShow">
         <BuilderNumberInput applyTo="'.carousel'" action="'setCarouselSpeed'" unit="'s'" saveUnit="''" step="0.1"/>
     </BuilderRow>
+
+    <BuilderRow label.translate="Style" t-if="this.state.isSlideShow">
+        <BuilderSelect>
+            <BuilderSelectItem classAction="''">Classic</BuilderSelectItem>
+            <BuilderSelectItem classAction="'s_image_gallery_controllers_indicators_outside'">Indicators outside</BuilderSelectItem>
+            <BuilderSelectItem classAction="'s_image_gallery_controllers_outside'">Outside, center</BuilderSelectItem>
+            <BuilderSelectItem classAction="'s_image_gallery_controllers_outside s_image_gallery_controllers_outside_arrows_left'">Outside, at right</BuilderSelectItem>
+            <BuilderSelectItem classAction="'s_image_gallery_controllers_outside s_image_gallery_controllers_outside_arrows_right'">Outside, at left</BuilderSelectItem>
+        </BuilderSelect>
+    </BuilderRow>
+
+    <BuilderRow label.translate="Invert colors" level="1" t-if="this.state.isSlideShow">
+        <BuilderCheckbox applyTo="'.carousel'" classAction="'carousel-dark'"/>
+    </BuilderRow>
+
+    <BuilderRow label.translate="Arrows" level="1" t-if="this.state.isSlideShow">
+        <BuilderSelect>
+            <BuilderSelectItem classAction="'s_image_gallery_arrows_default'">Default</BuilderSelectItem>
+            <BuilderSelectItem classAction="'s_image_gallery_arrows_boxed'">Boxed</BuilderSelectItem>
+            <BuilderSelectItem classAction="'s_image_gallery_arrows_rounded'">Rounded</BuilderSelectItem>
+            <BuilderSelectItem classAction="'s_image_gallery_arrows_hidden'">Hidden</BuilderSelectItem>
+        </BuilderSelect>
+     </BuilderRow>
+
+    <BuilderRow label.translate="Indicators" level="1" t-if="this.state.isSlideShow">
+        <BuilderSelect>
+            <BuilderSelectItem classAction="'s_image_gallery_indicators_bars'">Bars</BuilderSelectItem>
+            <BuilderSelectItem classAction="'s_image_gallery_indicators_dots'">Dots</BuilderSelectItem>
+            <BuilderSelectItem classAction="'s_image_gallery_indicators_numbers'">Numbers</BuilderSelectItem>
+            <BuilderSelectItem classAction="'s_image_gallery_indicators_squared'">Squared Miniatures</BuilderSelectItem>
+            <BuilderSelectItem classAction="'s_image_gallery_indicators_rounded'">Rounded Miniatures</BuilderSelectItem>
+            <BuilderSelectItem classAction="'s_image_gallery_indicators_hidden'">Hidden</BuilderSelectItem>
+        </BuilderSelect>
+     </BuilderRow>
+
+    <BuilderContext applyTo="'img'">
+        <BorderConfigurator label.translate="Border"/>
+    </BuilderContext>
 </t>
 <t t-name="html_builder.s_image_gallery_slideshow">
     <div t-attf-id="#{id}" t-attf-class="carousel slide #{colorContrast}" t-att-data-bs-ride="ride" t-attf-data-bs-interval="#{interval}" style="margin: 0 12px;">

From e2be4de944aa5fe626b05c40e2437eee6b1240e6 Mon Sep 17 00:00:00 2001
From: fdardenne <dafl@odoo.com>
Date: Wed, 26 Mar 2025 15:12:04 +0100
Subject: [PATCH 2/2] image gallery carrousel: add listeners on add elem

---
 .../plugins/options/image_gallery_option_plugin.js       | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/addons/html_builder/static/src/website_builder/plugins/options/image_gallery_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/options/image_gallery_option_plugin.js
index 1db8fbd258ebd..ad315956f2eac 100644
--- a/addons/html_builder/static/src/website_builder/plugins/options/image_gallery_option_plugin.js
+++ b/addons/html_builder/static/src/website_builder/plugins/options/image_gallery_option_plugin.js
@@ -27,6 +27,10 @@ class ImageGalleryOption extends Plugin {
         on_reorder_items_handlers: this.reorderGalleryItems.bind(this),
         on_remove_handlers: this.onRemove.bind(this),
         after_remove_handlers: this.afterRemove.bind(this),
+        on_add_element_handlers: (element) => {
+            const carousels = element.elementToAdd.querySelectorAll(".s_image_gallery .carousel");
+            this.addCarouselListener(carousels);
+        },
     };
 
     getActions() {
@@ -82,10 +86,15 @@ class ImageGalleryOption extends Plugin {
 
     setup() {
         const slideshowCarousels = this.document.querySelectorAll(".s_image_gallery .carousel");
+        this.addCarouselListener(slideshowCarousels);
+    }
+
+    addCarouselListener(slideshowCarousels) {
         for (const carousel of slideshowCarousels) {
             this.addDomListener(carousel, "slid.bs.carousel", this.onCarouselSlid);
         }
     }
+
     restoreSelection(imageToSelect) {
         if (imageToSelect && !this.dependencies.history.getIsPreviewing()) {
             // We want to update the container to the equivalent cloned image.