From 8e264dbc46fd5eed0c5782a233288f6ce2809f1b Mon Sep 17 00:00:00 2001 From: Romaric MOYEUVRE Date: Thu, 21 Nov 2024 14:15:23 +0100 Subject: [PATCH] FaqHorizontal --- .../src/snippets/s_faq_horizontal/000.js | 76 ++++++++----------- 1 file changed, 33 insertions(+), 43 deletions(-) diff --git a/addons/website/static/src/snippets/s_faq_horizontal/000.js b/addons/website/static/src/snippets/s_faq_horizontal/000.js index 107dcb3732020..08ab93aaf0920 100644 --- a/addons/website/static/src/snippets/s_faq_horizontal/000.js +++ b/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);