From f56ff35a5f6041082611135d74a8eafbf519a2f4 Mon Sep 17 00:00:00 2001 From: xO-Tx Date: Fri, 31 Mar 2023 16:26:13 +0000 Subject: [PATCH] [FIX] website: fix input attributes translation Issue: - Go to website > edit mode > add a form - On one of the form fields, add a placeholder > save - Change language > translate > impossible to translate the placeholder. The fix on [1] was added to prevent interacting with inputs in editable zones. This prevents translating attributes on those inputs too (using the AttributeTranslateDialog) so the goal of this commit is to add an exception to the restriction in [1], when input attributes are translated. Remark: On translation editor, elements with translatable default values will get a `` as translation value which stays visible until the content is updated on the editor. This issue can be fixed on CSS for `placeholder` and input `value` attributes (since we can select elements with attribute translation on CSS). In this commit, we need to hide the text on JS until the editor's code sets the right values on inputs and textareas. [1]: 3e598a8 task-3042522 X-original-commit: 52aa67f74b89ad95d773bf1af836a136d0445b3a Part-of: odoo/odoo#117472 --- addons/website/__manifest__.py | 2 ++ .../src/components/translator/translator.js | 3 ++- .../static/src/js/content/adapt_content.js | 19 +++++++++++++++ .../static/src/scss/website.edit_mode.scss | 4 ++-- addons/website/static/src/scss/website.scss | 23 +++++++++++++++++++ 5 files changed, 48 insertions(+), 3 deletions(-) create mode 100644 addons/website/static/src/js/content/adapt_content.js diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py index 41265bf38c4..0cebee77c63 100644 --- a/addons/website/__manifest__.py +++ b/addons/website/__manifest__.py @@ -140,12 +140,14 @@ 'website/static/src/js/content/inject_dom.js', 'website/static/src/js/content/auto_hide_menu.js', 'website/static/src/js/content/redirect.js', + 'website/static/src/js/content/adapt_content.js', ], 'web.assets_frontend_lazy': [ # Remove assets_frontend_minimal ('remove', 'website/static/src/js/content/inject_dom.js'), ('remove', 'website/static/src/js/content/auto_hide_menu.js'), ('remove', 'website/static/src/js/content/redirect.js'), + ('remove', 'website/static/src/js/content/adapt_content.js'), ], 'web._assets_primary_variables': [ 'website/static/src/scss/primary_variables.scss', diff --git a/addons/website/static/src/components/translator/translator.js b/addons/website/static/src/components/translator/translator.js index 8d746b0e037..d13c895dc0d 100644 --- a/addons/website/static/src/components/translator/translator.js +++ b/addons/website/static/src/components/translator/translator.js @@ -156,7 +156,8 @@ export class WebsiteTranslator extends WebsiteEditorComponent { $trans.remove(); $node.val(match[2]); - $node.addClass('o_translatable_text').data('translation', translation); + $node.addClass('o_translatable_text').removeClass('o_text_content_invisible') + .data('translation', translation); }); $edited = $edited.add(textEdit); diff --git a/addons/website/static/src/js/content/adapt_content.js b/addons/website/static/src/js/content/adapt_content.js new file mode 100644 index 00000000000..3d6250d60ab --- /dev/null +++ b/addons/website/static/src/js/content/adapt_content.js @@ -0,0 +1,19 @@ +/** @odoo-module */ + +document.addEventListener('DOMContentLoaded', () => { + const htmlEl = document.documentElement; + const editTranslations = !!htmlEl.dataset.edit_translations; + // Hack: on translation editor, textareas with translatable text content + // will get a `` as translation value which stays visible until + // the values are updated on the editor. The same issue was fixed on CSS + // for `placeholder` and `value` attributes (since we can get the elements + // with attribute translation on CSS). But here, we need to hide the text + // on JS until the editor's code sets the right values on textareas. + if (editTranslations) { + [...document.querySelectorAll('textarea')].map(textarea => { + if (textarea.value.indexOf('data-oe-translation-initial-sha') !== -1) { + textarea.classList.add('o_text_content_invisible'); + } + }); + } +}); diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss index e6826599024..6195ee061e0 100644 --- a/addons/website/static/src/scss/website.edit_mode.scss +++ b/addons/website/static/src/scss/website.edit_mode.scss @@ -228,12 +228,12 @@ body.editor_enable { // target all inputs and/or target specific snippets in their own app. .editor_enable { .s_website_form, .s_searchbar_input, .js_subscribe, .s_group, .s_donation_form { - input { + input:not(.o_translatable_attribute) { pointer-events: none; } } .s_website_form { - [data-toggle="datetimepicker"], textarea { + [data-toggle="datetimepicker"], textarea:not(.o_translatable_attribute):not(.o_translatable_text) { pointer-events: none; } } diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss index e214486920a..52bfd84f0d5 100644 --- a/addons/website/static/src/scss/website.scss +++ b/addons/website/static/src/scss/website.scss @@ -1559,6 +1559,29 @@ ul.o_checklist > li.o_checked::after { display: none !important; } +// On translation editor, inputs & textareas with translatable "placeholder" and +// "value" will get HTML content as translation value for the attributes. +// The goal here is to hide these values until the editor's code sets the right +// ones on elements. The `o_text_content_invisible` class is mainly used on JS +// to have the same behaviour for textareas, since it's not possible to target +// them on CSS using the "value" attribute unlike inputs. +.o_text_content_invisible { + color: transparent !important; +} +[placeholder*="data-oe-translation-initial-sha"] { + &::-webkit-input-placeholder{ /* WebKit */ + color: transparent; + opacity: 0; + } + &::-moz-placeholder { /* Firefox */ + color: transparent; + opacity: 0; + } +} +input[value*="data-oe-translation-initial-sha"] { + @extend .o_text_content_invisible; +} + //------------------------------------------------------------------------------ // Website Animate //------------------------------------------------------------------------------