[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 `<span/>` 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

@@ -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',

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);
 

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 `<span/>` 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');
+            }
+        });
+    }
+});

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;
         }
     }

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
 //------------------------------------------------------------------------------