From 63c66dbf5c296452e91f53bceeb637d78df60326 Mon Sep 17 00:00:00 2001 From: "Guillaume (gdi)" Date: Mon, 24 Oct 2022 14:01:13 +0000 Subject: [PATCH] [FIX] website: prevent carousel indicators errors In this commit [1] (merged in 16.0) a bugfix has been made in the `removeSlide` function but this one should have been applied on all supported versions because the bug it fixes is present on all versions. The bug it fixes is the following: - Drop a carousel block on a page - Remove the *first* slide => There is no active indicator. Moreover, the bugfix made in 16.0 [1] introduces another error: when a slide is removed from the carousel the indicators are not in a correct state anymore. Following the same steps with the changes of [1]: - Drop a carousel block on a page - Remove a slide => Indicators are no longer consistent with the slides so tracebacks appear during the carousel slides. The list of indicators must have on each element a `data-slide-to` attribute which must reflect the position of the slide (starting with 0). So this commit is to backport the fix from 16.0 [1] to 14.0 and to fix the new bug that [1] introduces. [1]: https://github.com/odoo/odoo/commit/f7055d3dbabfbe471f490bd65c2032f5251f3f37 task-3040931 opw-3051615 closes odoo/odoo#106639 X-original-commit: 212e8ce620f6eb95aeff6426e06cb29b2c06d0c1 Signed-off-by: Quentin Smetz (qsm) --- addons/website/static/src/js/editor/snippets.options.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js index a2fcd6e6290..18baaf0fc01 100644 --- a/addons/website/static/src/js/editor/snippets.options.js +++ b/addons/website/static/src/js/editor/snippets.options.js @@ -1823,9 +1823,17 @@ options.registry.CarouselItem = options.Class.extend({ const $items = this.$carousel.find('.carousel-item'); const newLength = $items.length - 1; if (!this.removing && newLength > 0) { + // The active indicator is deleted to ensure that the other + // indicators will still work after the deletion. const $toDelete = $items.filter('.active').add(this.$indicators.find('.active')); this.$carousel.one('active_slide_targeted.carousel_item_option', () => { $toDelete.remove(); + // To ensure the proper functioning of the indicators, their + // attributes must reflect the position of the slides. + const indicatorsEls = this.$indicators[0].querySelectorAll('li'); + for (let i = 0; i < indicatorsEls.length; i++) { + indicatorsEls[i].setAttribute('data-bs-slide-to', i); + } this.$controls.toggleClass('d-none', newLength === 1); this.$carousel.trigger('content_changed'); this.removing = false;