no promise purely manual

Author: Jinjiu96

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

@@ -24,14 +24,11 @@ export class CarouselOptionPlugin extends Plugin {
     getActions() {
         return {
             addSlide: {
-                apply: ({ editingElement }) =>
-                    new Promise((resolve) => {
-                        resolve(this.addSlide(editingElement));
-                    }),
+                apply: ({ editingElement }) => this.addSlide(editingElement),
             },
             slideCarousel: {
-                apply: async ({ editingElement, direction }) => {
-                    await this.slide(direction, editingElement);
+                apply: ({ editingElement, direction }) => {
+                    this.slide(direction, editingElement);
                 },
             },
         };
@@ -40,8 +37,6 @@ export class CarouselOptionPlugin extends Plugin {
     addSlide(editingElement) {
         const activeCarouselItem = editingElement.querySelector(".carousel-item.active");
         this.dependencies.clone.cloneElement(activeCarouselItem);
-
-        return this.slide("next", editingElement);
     }
 
     /**
@@ -52,50 +47,38 @@ export class CarouselOptionPlugin extends Plugin {
      *     - "next": the next slide;
      *     - number: a slide number.
      * @param {Element} editingElement the carousel element.
-     * @returns {Promise}
      */
     slide(direction, editingElement) {
-        // this.trigger_up("disable_loading_effect");
-        editingElement.addEventListener("slide.bs.carousel", () =>
-            // TODO: overlay should be already handled by optionContainer, remove this
-            // setTimeout(() => this.trigger_up("hide_overlay"));
-            {
-                this.slideTimestamp = window.performance.now();
-            }
-        );
-
-        return new Promise((resolve) => {
-            editingElement.addEventListener("slid.bs.carousel", () => {
-                // slid.bs.carousel is most of the time fired too soon by bootstrap
-                // since it emulates the transitionEnd with a setTimeout. We wait
-                // here an extra 20% of the time before retargeting edition, which
-                // should be enough...
-                const slideDuration = window.performance.now() - this.slideTimestamp;
-                setTimeout(() => {
-                    // Setting the active indicator manually, as Bootstrap could
-                    // not do it because the `data-bs-slide-to` attribute is not
-                    // here in edit mode anymore.
-                    const activeSlide = editingElement.querySelector(".carousel-item.active");
-                    const indicatorsEl = editingElement.querySelector(".carousel-indicators");
-                    const activeIndex = [...activeSlide.parentElement.children].indexOf(
-                        activeSlide
-                    );
-                    const activeIndicatorEl = [...indicatorsEl.children][activeIndex];
-                    activeIndicatorEl.classList.add("active");
-                    activeIndicatorEl.setAttribute("aria-current", "true");
-
-                    resolve();
-                }, 0.2 * slideDuration);
-            });
+        const activeCurrentSlide = editingElement.querySelector(".carousel-item.active");
+        const carouselItemsEl = activeCurrentSlide.parentElement;
+        const activeIndex = [...carouselItemsEl.children].indexOf(activeCurrentSlide);
+        const carouselItemsCount = carouselItemsEl.children.length;
+
+        // compute the new active slide index
+        let newActiveSlideIndex;
+        if (typeof direction === "number") {
+            newActiveSlideIndex = direction;
+        } else if (direction === "next") {
+            newActiveSlideIndex = (activeIndex + 1) % carouselItemsCount;
+        } else if (direction === "prev") {
+            newActiveSlideIndex = (activeIndex - 1 + carouselItemsCount) % carouselItemsCount;
+        }
 
-            // rewrite the jquery interface in carousel.js
-            const carouselInstance = window.Carousel.getOrCreateInstance(editingElement);
-            if (typeof direction === "number") {
-                carouselInstance.to(direction);
-            } else {
-                carouselInstance[direction]();
-            }
-        });
+        // change the active slide manually
+        activeCurrentSlide.classList.remove("active");
+        const newActiveSlide = carouselItemsEl.children[newActiveSlideIndex];
+        newActiveSlide.classList.add("active");
+
+        // change the active indicator manually
+        const indicatorsEl = editingElement.querySelector(".carousel-indicators");
+        const currentActiveIndicatorEl = indicatorsEl.querySelector(".active");
+        if (currentActiveIndicatorEl) {
+            currentActiveIndicatorEl.classList.remove("active");
+            currentActiveIndicatorEl.removeAttribute("aria-current");
+        }
+        const activeIndicatorEl = [...indicatorsEl.children][newActiveSlideIndex];
+        activeIndicatorEl.classList.add("active");
+        activeIndicatorEl.setAttribute("aria-current", "true");
     }
 
     onWillClone({ originalEl }) {
@@ -136,6 +119,8 @@ export class CarouselOptionPlugin extends Plugin {
         ) {
             // Need to remove editor data from the clone so it gets its own.
             cloneEl.classList.remove("active");
+            const editingCarousel = cloneEl.closest(".carousel");
+            this.slide("next", editingCarousel);
         }
     }