[IMP] website: move options in table of content snippet

Move position options in navbar.

Part of https://github.com/odoo/odoo/pull/46503
task-2194309

2 files changed, 52 insertions, 30 deletions

diff --git a/addons/website/static/src/snippets/s_table_of_content/options.js b/addons/website/static/src/snippets/s_table_of_content/options.js
index f33dcbafd47..2e3d533e92d 100644
--- a/addons/website/static/src/snippets/s_table_of_content/options.js
+++ b/addons/website/static/src/snippets/s_table_of_content/options.js
@@ -43,31 +43,6 @@ options.registry.TableOfContent = options.Class.extend({
         _.each($headings, el => el.dataset.anchor = anchorValue);
         this.isAnimateScrolling = !!widgetValue;
     },
-    /**
-     * Change the navbar position.
-     *
-     * @see this.selectClass for parameters
-     */
-    navbarPosition: function (previewMode, widgetValue, params) {
-        const $navbar = this.$target.find('.s_table_of_content_navbar_wrap');
-        const $mainContent = this.$target.find('.s_table_of_content_main');
-        if (widgetValue === 'top' || widgetValue === 'left') {
-            $navbar.prev().before($navbar);
-        }
-        if (widgetValue === 'left' || widgetValue === 'right') {
-            $navbar.removeClass('s_table_of_content_horizontal_navbar col-lg-12').addClass('s_table_of_content_vertical_navbar col-lg-3');
-            $mainContent.removeClass('col-lg-12').addClass('col-lg-9');
-            $navbar.find('.s_table_of_content_navbar').removeClass('list-group-horizontal-md');
-        }
-        if (widgetValue === 'right') {
-            $navbar.next().after($navbar);
-        }
-        if (widgetValue === 'top') {
-            $navbar.removeClass('s_table_of_content_vertical_navbar col-lg-3').addClass('s_table_of_content_horizontal_navbar col-lg-12');
-            $navbar.find('.s_table_of_content_navbar').addClass('list-group-horizontal-md');
-            $mainContent.removeClass('col-lg-9').addClass('col-lg-12');
-        }
-    },
 
     //--------------------------------------------------------------------------
     // Private
@@ -105,12 +80,58 @@ options.registry.TableOfContent = options.Class.extend({
                     return 'true';
                 }
             }
+        }
+        return this._super(...arguments);
+    },
+});
+
+options.registry.TableOfContentNavbar = options.Class.extend({
+
+    //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
+    /**
+     * Change the navbar position.
+     *
+     * @see this.selectClass for parameters
+     */
+    navbarPosition: function (previewMode, widgetValue, params) {
+        const $navbar = this.$target;
+        const $mainContent = this.$target.parent().find('.s_table_of_content_main');
+        if (widgetValue === 'top' || widgetValue === 'left') {
+            $navbar.prev().before($navbar);
+        }
+        if (widgetValue === 'left' || widgetValue === 'right') {
+            $navbar.removeClass('s_table_of_content_horizontal_navbar col-lg-12').addClass('s_table_of_content_vertical_navbar col-lg-3');
+            $mainContent.removeClass('col-lg-12').addClass('col-lg-9');
+            $navbar.find('.s_table_of_content_navbar').removeClass('list-group-horizontal-md');
+        }
+        if (widgetValue === 'right') {
+            $navbar.next().after($navbar);
+        }
+        if (widgetValue === 'top') {
+            $navbar.removeClass('s_table_of_content_vertical_navbar col-lg-3').addClass('s_table_of_content_horizontal_navbar col-lg-12');
+            $navbar.find('.s_table_of_content_navbar').addClass('list-group-horizontal-md');
+            $mainContent.removeClass('col-lg-9').addClass('col-lg-12');
+        }
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    _computeWidgetState: function (methodName, params) {
+        switch (methodName) {
             case 'navbarPosition': {
-                const $navbar = this.$target.find('.s_table_of_content_navbar_wrap');
+                const $navbar = this.$target;
                 if ($navbar.hasClass('s_table_of_content_horizontal_navbar')) {
                     return 'top';
                 } else {
-                    const $mainContent = this.$target.find('.s_table_of_content_main');
+                    const $mainContent = $navbar.parent().find('.s_table_of_content_main');
                     return $navbar.prev().is($mainContent) === true ? 'right' : 'left';
                 }
             }
diff --git a/addons/website/views/snippets/s_table_of_content.xml b/addons/website/views/snippets/s_table_of_content.xml
index ce4859b0630..87502863a92 100644
--- a/addons/website/views/snippets/s_table_of_content.xml
+++ b/addons/website/views/snippets/s_table_of_content.xml
@@ -52,13 +52,14 @@
     <xpath expr="." position="inside">
         <div data-js="TableOfContent" data-selector=".s_table_of_content">
             <we-checkbox string="Animate Scrolling" data-animate-scrolling="true" data-no-preview="true"/>
-            <we-select string="Navbar position">
+        </div>
+        <div data-js="TableOfContentNavbar" data-selector=".s_table_of_content_navbar_wrap">
+            <we-select string="Position">
                 <we-button data-navbar-position="left">Left</we-button>
                 <we-button data-navbar-position="right">Right</we-button>
                 <we-button data-navbar-position="top">Top</we-button>
             </we-select>
-            <we-checkbox string="Sticky" data-select-class="s_table_of_content_navbar_sticky"
-                        data-apply-to=".s_table_of_content_navbar_wrap" data-no-preview="true"/>
+            <we-checkbox string="Sticky" data-select-class="s_table_of_content_navbar_sticky" data-no-preview="true"/>
         </div>
         <div data-js="TableOfContentMainColumns" data-selector=".s_table_of_content_navbar_wrap, .s_table_of_content_main"/>
     </xpath>