[FIX] website: allow the scrollSpy to work with several TOC

Since the Bootstrap 5 merge, when there were several TOCs on the same
page the scrollSpy only worked for one of them. This commit fixes that.

Steps to reproduce the bug:
- Drop two TOC blocks on the same page
- Save the page

=> The second TOC is not working properly, it does not highlight the
current section.

Related to opw-3047375
Related to opw-3035502
task-2948895

X-original-commit: c182691bbfd6be8cc9aed26162635f5fdb117991
Part-of: odoo/odoo#107732

addons/website/static/src/snippets/s_table_of_content/000.js

@@ -52,7 +52,12 @@ const TableOfContent = publicWidget.Widget.extend({
         position += $mainNavBar.length ? $mainNavBar.outerHeight() : 0;
         position += isHorizontalNavbar ? this.$el.outerHeight() : 0;
         this._scrollingElement = $().getScrollingElement();
-        this._scrollingElement.scrollspy({target: this.$el.find('.s_table_of_content_navbar'), method: 'offset', offset: position + 100, alwaysKeepFirstActive: true});
+        new ScrollSpy(this._scrollingElement, {
+            target: this.$el.find('.s_table_of_content_navbar'),
+            method: 'offset',
+            offset: position + 100,
+            alwaysKeepFirstActive: true
+        });
     },
 });
 

addons/website/static/tests/tours/snippet_table_of_content.js

@@ -2,6 +2,23 @@
 
 import wTourUtils from 'website.tour_utils';
 
+const scrollToHeading = function (position) {
+    return {
+        content: `Scroll to h1 number ${position}`,
+        trigger: `iframe h1:eq(${position})`,
+        run: function () {
+            this.$anchor[0].scrollIntoView(true);
+        },
+    };
+};
+const checkTOCNavBar = function (tocPosition, activeHeaderPosition) {
+    return {
+        content: `Check that the header ${activeHeaderPosition} is active for TOC ${tocPosition}`,
+        trigger: `iframe .s_table_of_content:eq(${tocPosition}) .table_of_content_link:eq(${activeHeaderPosition}).active `,
+        run: () => {}, // This is a check.
+    };
+};
+
 wTourUtils.registerWebsitePreviewTour('snippet_table_of_content', {
     test: true,
     url: '/',
@@ -12,4 +29,13 @@ wTourUtils.registerWebsitePreviewTour('snippet_table_of_content', {
     // To make sure that the public widgets of the two previous ones started.
     wTourUtils.dragNDrop({id: 's_banner', name: 'Banner'}),
     ...wTourUtils.clickOnSave(),
+    checkTOCNavBar(0, 0),
+    checkTOCNavBar(1, 0),
+    scrollToHeading(1),
+    checkTOCNavBar(0, 1),
+    checkTOCNavBar(1, 0),
+    scrollToHeading(2),
+    checkTOCNavBar(1, 0),
+    scrollToHeading(3),
+    checkTOCNavBar(1, 1),
 ]);