FaqHorizontal

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

@@ -1,52 +1,42 @@
-import {extraMenuUpdateCallbacks} from "@website/js/content/menu";
-import publicWidget from "@web/legacy/js/public/public_widget";
-
-const faqHorizontal = publicWidget.Widget.extend({
-    selector: '.s_faq_horizontal',
-    disabledInEditableMode: false,
-
-    /**
-     * @override
-     */
-    async start() {
-        await this._super(...arguments);
-
-        this.titles = this.$el[0].getElementsByClassName('s_faq_horizontal_entry_title');
-
-        this._updateTitlesPosition();
-        this._updateTitlesPositionBound = this._updateTitlesPosition.bind(this);
-        extraMenuUpdateCallbacks.push(this._updateTitlesPositionBound);
-    },
-    /**
-     * @override
-     */
-    destroy() {
-        const indexCallback = extraMenuUpdateCallbacks.indexOf(this._updateTitlesPositionBound);
-        if (indexCallback >= 0) {
-            extraMenuUpdateCallbacks.splice(indexCallback, 1);
-        }
-    },
+import { Interaction } from "@website/core/interaction";
+import { registry } from "@web/core/registry";
+
+// TODO - Handle extraMenuUpdateCallbacks
+class FaqHorizontal extends Interaction {
+    static selector = ".s_faq_horizontal";
 
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
+    setup() {
+        this.titles = this.el.getElementsByClassName('s_faq_horizontal_entry_title');
+        // this.updateTitlesPositionBound = this.updateTitlesPosition.bind(this);
+        // extraMenuUpdateCallbacks.push(this.updateTitlesPositionBound);
+    }
 
-    /**
-     * @private
-     */
-    _updateTitlesPosition() {
+    start() {
+        this.updateTitlesPosition();
+    }
+
+    destroy() {
+        // const indexCallback = extraMenuUpdateCallbacks.indexOf(this._updateTitlesPositionBound);
+        // if (indexCallback >= 0) {
+        //     extraMenuUpdateCallbacks.splice(indexCallback, 1);
+        // }
+    }
+
+    updateTitlesPosition() {
         let position = 16; // Add 1rem equivalent in px to provide a visual gap by default
         const fixedElements = document.getElementsByClassName('o_top_fixed_element');
 
-        Array.from(fixedElements).forEach((el) => position += el.offsetHeight);
+        for (let el of fixedElements) {
+            position += el.offsetHeight;
+        }
 
-        Array.from(this.titles).forEach((title) => {
+        for (let title of this.titles) {
             title.style.top = `${position}px`;
             title.style.maxHeight = `calc(100vh - ${position + 40}px)`;
-        });
-    },
-});
-
-publicWidget.registry.snippetFaqHorizontal = faqHorizontal;
+        }
+    }
+}
 
-export default faqHorizontal;
+registry
+    .category("website.active_elements")
+    .add("website.faq_horizontal", FaqHorizontal);