From 2feb17cc0ac3e99d47e639e9249ae35161b53b6a Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Fri, 13 Dec 2019 12:20:40 +0000 Subject: [PATCH] [FIX] web_editor, website: missing wait of async parts in left panel - updateUI is async, most of the time it is really important to wait for its async parts. - method options are now async and should wait for async parts and user choices before resolving their returned deferred. --- .../static/src/js/editor/snippets.options.js | 8 +- .../static/src/js/editor/snippets.options.js | 101 ++++++++++-------- 2 files changed, 59 insertions(+), 50 deletions(-) diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js index 48089a955b6..b8048cd8641 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -1957,8 +1957,8 @@ registry.sizing = SnippetOptionWidget.extend({ /** * @override */ - updateUI: function () { - this._super(...arguments); + updateUI: async function () { + await this._super(...arguments); const resizeValues = this._getSize(); _.each(resizeValues, (value, key) => { this.$handles.filter('.' + key).toggleClass('readonly', !value); @@ -2097,11 +2097,11 @@ registry.background = SnippetOptionWidget.extend({ * * @see this.selectClass for parameters */ - background: function (previewMode, widgetValue, params) { + background: async function (previewMode, widgetValue, params) { if (previewMode === 'reset') { // No background has been selected and we want to reset back to the // original custom image - this._setCustomBackground(this.__customImageSrc); // FIXME this is async... + await this._setCustomBackground(this.__customImageSrc); return; } diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js index 8c60b00ebca..1b6329a259a 100644 --- a/addons/website/static/src/js/editor/snippets.options.js +++ b/addons/website/static/src/js/editor/snippets.options.js @@ -365,8 +365,8 @@ options.registry.CarouselItem = options.Class.extend({ * * @override */ - updateUI: function () { - this._super(...arguments); + updateUI: async function () { + await this._super(...arguments); const $items = this.$carousel.find('.carousel-item'); const $activeSlide = $items.filter('.active'); const updatedText = ` (${$activeSlide.index() + 1}/${$items.length})`; @@ -490,13 +490,16 @@ options.registry.navTabs = options.Class.extend({ var $activePane = this.$tabPanes.filter('.active'); var $next = this.$navLinks.eq((this.$navLinks.index($activeLink) + 1) % this.$navLinks.length); - $next.one('shown.bs.tab', function () { - $activeLink.parent().remove(); - $activePane.remove(); - self._findLinksAndPanes(); - self.updateUI(); // TODO forced to do this because we do not return deferred for options + + return new Promise(resolve => { + $next.one('shown.bs.tab', function () { + $activeLink.parent().remove(); + $activePane.remove(); + self._findLinksAndPanes(); + resolve(); + }); + $next.tab('show'); }); - $next.tab('show'); }, //-------------------------------------------------------------------------- @@ -1109,24 +1112,25 @@ options.registry.gallery = options.Class.extend({ * @see this.selectClass for parameters */ addImages: function (previewMode) { - var self = this; var $container = this.$('.container:first'); var dialog = new weWidgets.MediaDialog(this, {multiImages: true, onlyImages: true, mediaWidth: 1920}); var lastImage = _.last(this._getImages()); var index = lastImage ? this._getIndex(lastImage) : -1; - dialog.on('save', this, function (attachments) { - for (var i = 0; i < attachments.length; i++) { - $('', { - class: 'img img-fluid', - src: attachments[i].image_src, - 'data-index': ++index, - }).appendTo($container); - } - this.mode('reset', this.getMode()); - this.trigger_up('cover_update'); - this.updateUI(); + return new Promise(resolve => { + dialog.on('save', this, function (attachments) { + for (var i = 0; i < attachments.length; i++) { + $('', { + class: 'img img-fluid', + src: attachments[i].image_src, + 'data-index': ++index, + }).appendTo($container); + } + this.mode('reset', this.getMode()); + this.trigger_up('cover_update'); + resolve(); + }); + dialog.open(); }); - dialog.open(); }, /** * Allows to change the number of columns when displaying images with a @@ -1523,8 +1527,8 @@ options.registry.countdown = options.Class.extend({ /** * @override */ - updateUI: function () { - this._super(...arguments); + updateUI: async function () { + await this._super(...arguments); const dataset = this.$target[0].dataset; // End Action UI @@ -1692,14 +1696,17 @@ options.registry.topMenuColor = options.Class.extend({ /** * @override */ - updateUI: function () { - this._super(...arguments); - this.trigger_up('action_demand', { - actionName: 'get_page_option', - params: ['header_overlay'], - onSuccess: value => { - this.$el.toggleClass('d-none', !value); - }, + updateUI: async function () { + await this._super(...arguments); + await new Promise(resolve => { + this.trigger_up('action_demand', { + actionName: 'get_page_option', + params: ['header_overlay'], + onSuccess: value => { + this.$el.toggleClass('d-none', !value); + resolve(); + }, + }); }); }, @@ -1905,18 +1912,20 @@ options.registry.CoverProperties = options.Class.extend({ $image.attr('src', background.match(/^url\(["']?(.+?)["']?\)$/)[1]); } - var editor = new weWidgets.MediaDialog(this, { - mediaWidth: 1920, - onlyImages: true, - firstFilters: ['background'] - }, $image[0]).open(); - editor.on('save', this, function (image) { - var src = image.src; - this.$image.css('background-image', src ? ('url(' + src + ')') : ''); - if (!this.$target.hasClass('o_record_has_cover')) { - this.$el.find('.o_record_cover_opt_size_default[data-select-class]').click(); - } - this.updateUI(); + return new Promise(resolve => { + var editor = new weWidgets.MediaDialog(this, { + mediaWidth: 1920, + onlyImages: true, + firstFilters: ['background'] + }, $image[0]).open(); + editor.on('save', this, function (image) { + var src = image.src; + this.$image.css('background-image', src ? ('url(' + src + ')') : ''); + if (!this.$target.hasClass('o_record_has_cover')) { + this.$el.find('.o_record_cover_opt_size_default[data-select-class]').click(); + } + resolve(); + }); }); }, /** @@ -2080,7 +2089,7 @@ options.registry.InnerChart = options.Class.extend({ */ init: function () { this._super.apply(this, arguments); - this.themeArray = ['alpha', 'beta', 'gamma', 'delta', 'epsilon'], + this.themeArray = ['alpha', 'beta', 'gamma', 'delta', 'epsilon']; this.style = window.getComputedStyle(document.documentElement); }, /** @@ -2115,13 +2124,13 @@ options.registry.InnerChart = options.Class.extend({ /** * @override */ - updateUI: function () { + updateUI: async function () { // Selected input might not be in dom anymore if col/row removed // Done before _super because _computeWidgetState of colorChange if (!this.lastEditableSelectedInput.closest('table') || this.colorPaletteSelectedInput && !this.colorPaletteSelectedInput.closest('table')) { this._setDefaultSelectedInput(); } - this._super(...arguments); + await this._super(...arguments); // prevent the columns from becoming too small. this.tableEl.classList.toggle('o_we_matrix_five_col', this.tableEl.querySelectorAll('tr:first-child th').length > 5); this.el.querySelector('[data-attribute-name="stacked"]').classList.toggle('d-none', !this._isStackableChart() || this._getColumnCount() === 1);