From 3c2febddb67888617dad74af0e9e46ed60d105b7 Mon Sep 17 00:00:00 2001 From: Younn Olivier Date: Wed, 3 Aug 2022 12:26:28 +0000 Subject: [PATCH] [IMP] website: block the client action clicks when blocking the iframe Before this commit, the BlockIframe component was managing its visibility based on the 'BLOCK'/'UNBLOCK' events. Also, it was possible to continue to interact with the SnippetsMenu when the iframe was blocked. With the previous commit modifications, it is needed to block the clicks and prevent interactions with the SnippetsMenu when reloading the iframe. For that, the BlockIframe component is reworked: a specific state for this component is added at the WebsitePreview level. This allows to add a o_is_blocked class on the container which prevents the clicks on the client action when it is blocked. Therefore, it is not blocking only the iframe anymore, but the whole preview. It is renamed accordingly. The 'loaderDelay' parameter is dropped, as it was used only to show the loader after the snippets menu transition. As now the snippets menu is removed after the reload, it is not useful anymore. Related to https://github.com/odoo/odoo/commit/31cc10b91dc7762e23b4bde9b945be0c4ce3fe3b task-2687506 Part-of: odoo/odoo#97408 --- .../website_preview/website_preview.js | 65 +++++++------------ .../website_preview/website_preview.scss | 14 +++- .../website_preview/website_preview.xml | 19 +++--- .../static/src/components/editor/editor.js | 12 ++-- .../static/src/components/editor/editor.scss | 2 +- .../static/src/js/editor/snippets.editor.js | 4 +- .../static/src/services/website_service.js | 20 ++++-- 7 files changed, 68 insertions(+), 68 deletions(-) diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.js b/addons/website/static/src/client_actions/website_preview/website_preview.js index e4d2ed87a5b..75d553375ce 100644 --- a/addons/website/static/src/client_actions/website_preview/website_preview.js +++ b/addons/website/static/src/client_actions/website_preview/website_preview.js @@ -1,7 +1,7 @@ /** @odoo-module **/ import { registry } from '@web/core/registry'; -import { useService } from '@web/core/utils/hooks'; +import { useService, useBus } from '@web/core/utils/hooks'; import core from 'web.core'; import { AceEditorAdapterComponent } from '../../components/ace_editor/ace_editor'; import { WebsiteEditorComponent } from '../../components/editor/editor'; @@ -10,42 +10,8 @@ import {OptimizeSEODialog} from '@website/components/dialog/seo'; const { Component, onWillStart, onMounted, onWillUnmount, useRef, useEffect, useState } = owl; -class BlockIframe extends Component { - setup() { - this.websiteService = useService('website'); - this.state = useState({ - blockIframe: false, - showLoader: false, - }); - this.processes = []; - this.ANONYMOUS_PROCESS_ID = 'ANONYMOUS_PROCESS_ID'; - this.websiteService.bus.addEventListener("BLOCK", this.block.bind(this)); - this.websiteService.bus.addEventListener("UNBLOCK", this.unblock.bind(this)); - } - block(event) { - if (event.detail.showLoader && !this.state.showLoader) { - setTimeout(() => { - this.state.showLoader = true; - }, event.detail.loaderDelay); - } - if (!this.processes.length) { - this.state.blockIframe = true; - } - this.processes.push(event.detail.processId || this.ANONYMOUS_PROCESS_ID); - } - unblock(event) { - const processId = event.detail.processId || this.ANONYMOUS_PROCESS_ID; - const processIndex = this.processes.indexOf(processId); - if (processIndex > -1) { - this.processes.splice(processIndex, 1); - } - if (this.processes.length === 0) { - this.state.blockIframe = false; - this.state.showLoader = false; - } - } -} -BlockIframe.template = 'website.BlockIframe'; +class BlockPreview extends Component {} +BlockPreview.template = 'website.BlockPreview'; export class WebsitePreview extends Component { setup() { @@ -62,6 +28,13 @@ export class WebsitePreview extends Component { this.iframefallback = useRef('iframefallback'); this.container = useRef('container'); this.websiteContext = useState(this.websiteService.context); + this.blockedState = useState({ + isBlocked: false, + showLoader: false, + }); + + useBus(this.websiteService.bus, 'BLOCK', (event) => this.block(event.detail)); + useBus(this.websiteService.bus, 'UNBLOCK', () => this.unblock()); onWillStart(async () => { await this.websiteService.fetchWebsites(); @@ -98,12 +71,12 @@ export class WebsitePreview extends Component { }, () => [this.props.action.context.params]); onMounted(() => { - this.websiteService.blockIframe(true, 0, 'load-iframe'); - this.iframe.el.addEventListener('load', () => this.websiteService.unblockIframe('load-iframe'), { once: true }); + this.websiteService.blockPreview(true, 'load-iframe'); + this.iframe.el.addEventListener('load', () => this.websiteService.unblockPreview('load-iframe'), { once: true }); // For a frontend page, it is better to use the // OdooFrameContentLoaded event to unblock the iframe, as it is // triggered faster than the load event. - this.iframe.el.addEventListener('OdooFrameContentLoaded', () => this.websiteService.unblockIframe('load-iframe'), { once: true }); + this.iframe.el.addEventListener('OdooFrameContentLoaded', () => this.websiteService.unblockPreview('load-iframe'), { once: true }); }); onWillUnmount(() => { @@ -173,6 +146,16 @@ export class WebsitePreview extends Component { }); } + block({ showLoader = true } = {}) { + this.blockedState.isBlocked = true; + this.blockedState.showLoader = showLoader; + } + + unblock() { + this.blockedState.isBlocked = false; + this.blockedState.showLoader = false; + } + addWelcomeMessage() { if (this.websiteService.isPublisher) { const $wrap = $(this.iframe.el.contentDocument.querySelector('#wrapwrap.homepage')).find('#wrap'); @@ -313,7 +296,7 @@ export class WebsitePreview extends Component { WebsitePreview.template = 'website.WebsitePreview'; WebsitePreview.components = { WebsiteEditorComponent, - BlockIframe, + BlockPreview, WebsiteTranslator, AceEditorAdapterComponent, }; diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.scss b/addons/website/static/src/client_actions/website_preview/website_preview.scss index 81b7558e622..a66286bf38b 100644 --- a/addons/website/static/src/client_actions/website_preview/website_preview.scss +++ b/addons/website/static/src/client_actions/website_preview/website_preview.scss @@ -18,6 +18,10 @@ margin-right: $o-we-sidebar-width !important; } + &.o_is_blocked { + pointer-events: none; + } + .o_iframe_container { position: relative; height: 100%; @@ -43,7 +47,7 @@ box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); } - .o_block_iframe { + .o_block_preview { border-radius: 25px; } } @@ -65,6 +69,10 @@ border-bottom: 0px; } } + + .o_block_preview { + z-index: $zindex-modal-backdrop + 1 !important; + } } header { @@ -73,6 +81,6 @@ header { } } -.o_block_iframe { - z-index: $zindex-dropdown - 1; +.o_block_preview { + z-index: $zindex-dropdown - 1 !important; } diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.xml b/addons/website/static/src/client_actions/website_preview/website_preview.xml index 691395be0fa..7d92d1c3534 100644 --- a/addons/website/static/src/client_actions/website_preview/website_preview.xml +++ b/addons/website/static/src/client_actions/website_preview/website_preview.xml @@ -1,20 +1,17 @@ - - -
- - - + +
+ - +
+ -
+
+
-