From f1df077ac9e5da9b6270c8cbfd63077a612d0c71 Mon Sep 17 00:00:00 2001 From: Gorash Date: Fri, 16 Oct 2020 11:18:48 +0000 Subject: [PATCH] [FIX] web_editor: trigger a resize when use the mobile preview Issue: Dynamic carousel has a wrong mobile preview because the DOM must change when the screen size change. --- .../static/src/js/editor/snippets.editor.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js index eeb48a71ffc..a3ef2e3d784 100644 --- a/addons/web_editor/static/src/js/editor/snippets.editor.js +++ b/addons/web_editor/static/src/js/editor/snippets.editor.js @@ -6,6 +6,7 @@ var core = require('web.core'); var Dialog = require('web.Dialog'); var dom = require('web.dom'); var Widget = require('web.Widget'); +var config = require('web.config'); var snippetOptions = require('web_editor.snippets.options'); const {ColorPaletteWidget} = require('web_editor.ColorPalette'); const SmoothScrollOnDrag = require('web/static/src/js/core/smooth_scroll_on_drag.js'); @@ -2848,8 +2849,17 @@ var SnippetsMenu = Widget.extend({ /** * On click on discard button. */ - _onMobilePreviewClick: function() { - this.wysiwyg.editor.execCommand('toggleDevicePreview', { device: 'mobile' }); + _onMobilePreviewClick: async function() { + await this.wysiwyg.editor.execCommand('toggleDevicePreview', { device: 'mobile' }); + await new Promise(r => setTimeout(r)); // Wait browser redrawing (because the commands use microtask and not setTimeout) + const $iframe = this.$el.closest('.wrap_editor').find('iframe[name="jw-iframe"]'); + if ($iframe.length) { + config.device.isMobile = true; + config.device.bus.trigger('size_changed', 0); + } else { + config.device.isMobile = config.device.size_class <= config.device.SIZES.SM; + config.device.bus.trigger('size_changed', config.device.size_class); + } }, /** * Set the last snippet activated.