From f0fe283c761cd6b1d7293dd41795ac6fc721e341 Mon Sep 17 00:00:00 2001 From: xO-Tx Date: Thu, 10 Mar 2022 15:49:21 +0000 Subject: [PATCH] [FIX] web_editor, *: fix image options visibility *: website Issue: from 15.0 onwards all image options are available on "/shop". Details: On 14.0, images options were removed for unsupported images (we had a message "Quality Options Unavailable" - see [1]) and images related options on old editor toolbar were hidden too. On 14.4 and after [2], images options from the toolbar (crop, width,...) were moved to a separate 'ImageTools' option and as a consequence, they don't respect the same visibility rules as 'ImageOptimize'. Other options were added in XML and they have the same issue, they are visible as long as the target is an 'img'. This is a list of options that should be available for unsupported or partly supported images: [A] For "t-field" images (shape & quality options are available only if the image is supported for processing): - Shape - Filter - Width (image width) - Quality - Transform (crop) [B] For external images or images unsupported for processing: - Description - Tooltip - Transform (crop, transform) - width (CSS width) - Alignment - Style - Padding - Animate [C] For illustrations: - Same as [B] - Dynamic colors The goal of this commit is to fix this visibility issue on the JS code of image options. [1]: https://github.com/odoo/odoo/commit/84417a174bc2bb76730cc89783d3426a3a3b07d9 [2]: https://github.com/odoo/odoo/commit/d934b81aaae8d68b5579d1489b1fbe8ea347b4ed task-2724946 closes odoo/odoo#90224 closes odoo/odoo#90832 X-original-commit: 8e6ca51ed3ebf121acfc7cb1ab992984d0764c90 Signed-off-by: Quentin Smetz (qsm) --- .../static/src/js/editor/image_processing.js | 8 ++++++++ .../static/src/js/editor/snippets.options.js | 10 +++++++++- addons/web_editor/views/snippets.xml | 4 ++-- .../website/static/src/js/editor/snippets.options.js | 10 ++++++++++ 4 files changed, 29 insertions(+), 3 deletions(-) diff --git a/addons/web_editor/static/src/js/editor/image_processing.js b/addons/web_editor/static/src/js/editor/image_processing.js index 87d68adb0bd..84fdd77d414 100644 --- a/addons/web_editor/static/src/js/editor/image_processing.js +++ b/addons/web_editor/static/src/js/editor/image_processing.js @@ -456,6 +456,13 @@ function isImageSupportedForProcessing(mimetype, strict = false) { } return ['image/jpeg', 'image/png'].includes(mimetype); } +/** + * @param {HTMLImageElement} img + * @returns {Boolean} + */ +function isImageSupportedForStyle(img) { + return img.parentElement && !img.parentElement.dataset.oeType; +} /** * @param {Blob} blob @@ -479,6 +486,7 @@ return { loadImage, removeOnImageChangeAttrs: [...cropperDataFields, ...modifierFields, 'aspectRatio'], isImageSupportedForProcessing, + isImageSupportedForStyle, createDataURL, isGif, }; 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 eed090765b0..b36ffb1f336 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -25,6 +25,7 @@ const { applyModifications, removeOnImageChangeAttrs, isImageSupportedForProcessing, + isImageSupportedForStyle, createDataURL, isGif, } = require('web_editor.image_processing'); @@ -4912,6 +4913,9 @@ registry.ReplaceMedia = SnippetOptionWidget.extend({ */ async _computeWidgetVisibility(widgetName, params) { if (widgetName === 'media_link_opt') { + if (this.$target[0].matches('img')) { + return isImageSupportedForStyle(this.$target[0]); + } return !this.$target[0].classList.contains('media_iframe_video'); } return this._super(...arguments); @@ -5216,7 +5220,7 @@ const ImageHandlerOption = SnippetOptionWidget.extend({ const img = this._getImg(); return this._isImageSupportedForProcessing(img, true); } - return this._super(...arguments); + return isImageSupportedForStyle(this._getImg()); }, /** * Indicates if an option should be applied only on supported mimetypes. @@ -5593,6 +5597,10 @@ registry.ImageTools = ImageHandlerOption.extend({ if (params.optionsPossibleValues.resetCrop) { return this._isCropped(); } + if (params.optionsPossibleValues.crop) { + const img = this._getImg(); + return isImageSupportedForStyle(img) || this._isImageSupportedForProcessing(img); + } return this._super(...arguments); }, /** diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml index 44764a825d8..aceff75bac2 100644 --- a/addons/web_editor/views/snippets.xml +++ b/addons/web_editor/views/snippets.xml @@ -428,7 +428,7 @@ -
+
-
+
None Left diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js index a0a14aa1e9c..b5cb4cf61c2 100644 --- a/addons/website/static/src/js/editor/snippets.options.js +++ b/addons/website/static/src/js/editor/snippets.options.js @@ -11,6 +11,7 @@ const weUtils = require('web_editor.utils'); var options = require('web_editor.snippets.options'); const wLinkPopoverWidget = require('@website/js/widgets/link_popover_widget')[Symbol.for("default")]; const wUtils = require('website.utils'); +const {isImageSupportedForStyle} = require('web_editor.image_processing'); require('website.s_popup_options'); var _t = core._t; @@ -3087,6 +3088,15 @@ options.registry.WebsiteAnimate = options.Class.extend({ } return this._super(...arguments); }, + /** + * @override + */ + _computeVisibility(methodName, params) { + if (this.$target[0].matches('img')) { + return isImageSupportedForStyle(this.$target[0]); + } + return this._super(...arguments); + }, }); /**