Add the slideshow layout

This commit add the possibility to add an image in a slideshow gallery.
It also add the possibility of reordering images in a slideshow.

Author: fdardenne

addons/html_builder/static/src/plugins/image_gallery_option.xml

@@ -31,5 +31,31 @@
         <BuilderNumberInput applyTo="'.carousel'" action="'setCarouselSpeed'" unit="'s'" saveUnit="''" step="0.1"/>
     </BuilderRow>
 </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;">
+        <div class="carousel-inner">
+            <t t-foreach="images" t-as="image" t-key="image_index">
+                <div t-attf-class="carousel-item #{image_index == index and 'active' or None}">
+                    <img t-if="!hideImage" class="img img-fluid d-block" t-att-src="image.getAttribute('src')" t-att-alt="image.alt" data-name="Image"/>
+                </div>
+            </t>
+        </div>
+        <div class="o_carousel_controllers">
+            <button class="carousel-control-prev o_we_no_overlay o_not_editable" contenteditable="false" t-attf-data-bs-target="##{id}" data-bs-slide="prev" aria-label="Previous" title="Previous">
+                <span class="carousel-control-prev-icon" aria-hidden="true"/>
+                <span class="visually-hidden">Previous</span>
+            </button>
+            <div class="carousel-indicators s_image_gallery_indicators_bars">
+                <t t-foreach="images" t-as="image" t-key="image_index">
+                    <button type="button" aria-label="Carousel indicator" t-attf-data-bs-target="##{id}" t-att-data-bs-slide-to="image_index" t-att-class="image_index == index and 'active' or None" t-attf-style="background-image: url(#{image.getAttribute('src')})"/>
+                </t>
+            </div>
+            <button class="carousel-control-next o_we_no_overlay o_not_editable" contenteditable="false" t-attf-data-bs-target="##{id}" data-bs-slide="next" aria-label="Next" title="Next">
+                <span class="carousel-control-next-icon" aria-hidden="true"/>
+                <span class="visually-hidden">Next</span>
+            </button>
+        </div>
+    </div>
+</t>
 
 </templates>

addons/html_builder/static/src/plugins/image_gallery_option_plugin.js

@@ -3,6 +3,7 @@ import { Plugin } from "@html_editor/plugin";
 import { applyModifications, loadImageInfo } from "@html_editor/utils/image_processing";
 import { _t } from "@web/core/l10n/translation";
 import { ImageGalleryComponent } from "./image_gallery_option";
+import { renderToElement } from "@web/core/utils/render";
 
 class ImageGalleryOption extends Plugin {
     static id = "imageGalleryOption";
@@ -67,6 +68,12 @@ class ImageGalleryOption extends Plugin {
         };
     }
 
+    setup() {
+        const slideshowCarousels = this.document.querySelectorAll(".s_image_gallery .carousel");
+        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.
@@ -119,7 +126,27 @@ class ImageGalleryOption extends Plugin {
                     itemsEls.push(elementToReorder);
                     break;
             }
-            this.reorderItems(itemsEls, itemsEls.indexOf(elementToReorder));
+
+            const newItemPosition = itemsEls.indexOf(elementToReorder);
+            itemsEls.forEach((img, index) => {
+                img.dataset.index = index;
+            });
+            const mode = this.getMode(editingGalleryElement);
+            this.setImages(editingGalleryElement, mode, itemsEls);
+
+            if (mode === "slideshow") {
+                const carouselEl = editingGalleryElement.querySelector(".carousel");
+                const carouselInstance = window.Carousel.getOrCreateInstance(carouselEl, {
+                    ride: false,
+                    pause: true,
+                });
+
+                carouselInstance.to(newItemPosition);
+                const activeImageEl = editingGalleryElement.querySelector(
+                    ".carousel-item.active img"
+                );
+                this.dependencies["builder-options"].updateContainers(activeImageEl);
+            }
         }
     }
 
@@ -203,7 +230,6 @@ class ImageGalleryOption extends Plugin {
             imageGalleryElement.classList.remove("o_nomode", "o_masonry", "o_grid", "o_slideshow");
             imageGalleryElement.classList.add(`o_${mode}`);
         }
-        //TODO: apply other layouts
         switch (mode) {
             case "masonry":
                 this.masonry(imageGalleryElement, images);
@@ -214,6 +240,9 @@ class ImageGalleryOption extends Plugin {
             case "nomode":
                 this.nomode(imageGalleryElement, images);
                 break;
+            case "slideshow":
+                this.slideshow(imageGalleryElement, images);
+                break;
         }
     }
 
@@ -304,6 +333,36 @@ class ImageGalleryOption extends Plugin {
         }
     }
 
+    slideshow(imageGalleryElement, images) {
+        const container = this.getContainer(imageGalleryElement);
+        const currentInterval = imageGalleryElement.querySelector(".carousel").dataset.bsInterval;
+        const carouselEl = imageGalleryElement.querySelector(".carousel");
+        const colorContrast =
+            carouselEl && carouselEl.classList.contains("carousel-dark") ? "carousel-dark" : " ";
+        const slideshowEl = renderToElement("html_builder.s_image_gallery_slideshow", {
+            images: images,
+            index: 0,
+            interval: currentInterval || 0,
+            ride: !currentInterval ? "false" : "carousel",
+            id: "slideshow_" + new Date().getTime(),
+            colorContrast,
+        });
+        carouselEl.removeEventListener("slide.bs.carousel", this.onCarouselSlid);
+        container.replaceChildren(slideshowEl);
+        slideshowEl.querySelectorAll("img").forEach((img, index) => {
+            img.setAttribute("data-index", index);
+        });
+
+        imageGalleryElement.style.height = window.innerHeight * 0.7 + "px";
+        this.addDomListener(slideshowEl, "slid.bs.carousel", this.onCarouselSlid);
+    }
+
+    onCarouselSlid(ev) {
+        // When the carousel slides, update the builder options to select the active image
+        const activeImageEl = ev.target.querySelector(".carousel-item.active img");
+        this.dependencies["builder-options"].updateContainers(activeImageEl);
+    }
+
     async processImages(editingElement, newImages = []) {
         await this.transformImagesToWebp(newImages);
         this.setImageProperties(editingElement, newImages);
@@ -442,23 +501,6 @@ class ImageGalleryOption extends Plugin {
             this.imageRemovedGalleryElement = undefined;
         }
     }
-
-    reorderItems(itemsEls, newItemPosition) {
-        itemsEls.forEach((img, index) => {
-            img.dataset.index = index;
-        });
-        const editingImageElement = itemsEls[newItemPosition];
-        const editingGalleryElement = editingImageElement.closest(".s_image_gallery");
-        const mode = this.getMode(editingGalleryElement);
-
-        // relayout the gallery
-        this.setImages(editingGalleryElement, mode, itemsEls);
-        if (mode === "slideshow") {
-            // todo: wait for implementation in CarouselHandler, convert it to a
-            // handler and dispatch to it
-            // this._updateIndicatorAndActivateSnippet(newItemPosition);
-        }
-    }
 }
 
 registry.category("website-plugins").add(ImageGalleryOption.id, ImageGalleryOption);