[IMP] web_editor, web_unsplash: split media widget (image & document)

The common code is kept in a generic File widget, while the split allows for
easier customization.

PR: #33509

1 files changed, 46 insertions, 33 deletions

diff --git a/addons/web_editor/static/src/xml/wysiwyg.xml b/addons/web_editor/static/src/xml/wysiwyg.xml
index cd20ee3f4ef..9a93066ee48 100644
--- a/addons/web_editor/static/src/xml/wysiwyg.xml
+++ b/addons/web_editor/static/src/xml/wysiwyg.xml
@@ -93,8 +93,8 @@
         </div>
     </t>
 
-    <!-- Image choosing part of the Media Dialog -->
-    <t t-name="wysiwyg.widgets.image">
+    <!-- File choosing part of the Media Dialog -->
+    <t t-name="wysiwyg.widgets.file">
         <t t-set="iframeName" t-value="_.uniqueId('fileframe-')"/>
         <form method="POST"
             action="/web_editor/attachment/add"
@@ -104,10 +104,7 @@
             <input type="hidden" name="filters" t-att-value="widget.firstFilters.join('_')"/>
             <input t-if="widget.options.res_id" type="hidden" name="res_id" t-att-value="widget.options.res_id"/>
             <input t-if="widget.options.res_model" type="hidden" name="res_model" t-att-value="widget.options.res_model"/>
-            <t t-call="wysiwyg.widgets.files.submenu">
-                <t t-set="isDocument" t-value="widget.options.document"/>
-                <t t-set="accept" t-value="widget.accept"/>
-            </t>
+            <t t-call="wysiwyg.widgets.files.submenu"/>
             <div class="form-text"/>
             <div class="existing-attachments"/>
             <div class="mt-4 text-center mx-auto">
@@ -122,48 +119,62 @@
 
     <t t-name="wysiwyg.widgets.files.submenu">
         <div class="form-inline align-items-center py-4">
-            <input type="file" class="d-none o_file_input" name="upload" t-att-accept="accept" multiple="multiple"/>
+            <input type="file" class="d-none o_file_input" name="upload" t-att-accept="widget.accept" multiple="multiple"/>
             <input type="hidden" name="disable_optimization" value=""/>
 
             <div class="btn-group">
                 <button type="button" class="btn btn-primary o_upload_media_button">
-                    <t t-if="isDocument">Upload a document</t>
-                    <t t-else="">Upload an image</t>
+                    <t t-esc="uploadText"/>
                 </button>
-                <t t-if="!isDocument">
-                    <button class="btn btn-primary dropdown-toggle dropdown-toggle-split o_media_optimization" data-toggle="dropdown" type="button">
-                        <span class="sr-only">Alternate Upload</span>
-                    </button>
-                    <div class="dropdown-menu" role="menu">
-                        <button type="button" role="menuitem" class="dropdown-item o_upload_media_button_no_optimization">Upload image without optimization</button>
-                    </div>
-                </t>
+                <t t-raw="alternateUpload"/>
             </div>
 
             <div class="input-group align-items-center ml-2">
-                <input type="text" class="form-control o_we_url_input" name="url" t-attf-placeholder="https://www.odoo.com/#{isDocument ? 'mydocument' : 'logo.png'}"/>
+                <input type="text" class="form-control o_we_url_input" name="url" t-att-placeholder="urlPlaceholder"/>
                 <div class="input-group-append align-items-center">
                     <button type="button" class="btn btn-secondary o_upload_media_url_button" disabled="disabled">
-                        <t t-if="isDocument">Add document</t>
-                        <t t-else="">Add image</t>
+                        <t t-esc="addText"/>
                     </button>
                     <div class="ml-2">
-                        <span class="o_we_url_success text-success d-none fa fa-lg fa-check" title="The URL seems valid"/>
-                        <span class="o_we_url_warning text-warning d-none fa fa-lg fa-warning" title="The URL does not contain any image. The file will be added in the document section."/>
-                        <span class="o_we_url_error text-danger d-none fa fa-lg fa-times" title="The URL does not seem to work"/>
+                        <span class="o_we_url_success text-success d-none fa fa-lg fa-check" title="The URL seems valid."/>
+                        <span class="o_we_url_warning text-warning d-none fa fa-lg fa-warning" t-att-title="urlWarningTitle"/>
+                        <span class="o_we_url_error text-danger d-none fa fa-lg fa-times" title="The URL does not seem to work."/>
                     </div>
                 </div>
             </div>
 
-            <t t-call="wysiwyg.widgets.media.search">
-                <t t-set="searchPlaceholder">
-                    <t t-if="isDocument">Search a document</t>
-                    <t t-else="">Search an image</t>
-                </t>
-            </t>
+            <t t-call="wysiwyg.widgets.media.search"/>
         </div>
     </t>
 
+    <t t-name="wysiwyg.widgets.image">
+        <t t-call="wysiwyg.widgets.file">
+            <t t-set="uploadText">Upload an image</t>
+            <t t-set="urlPlaceholder">https://www.odoo.com/logo.png</t>
+            <t t-set="addText">Add image</t>
+            <t t-set="searchPlaceholder">Search an image</t>
+            <t t-set="urlWarningTitle">The URL does not contain any image. The file will be added in the document section.</t>
+            <t t-set="alternateUpload">
+                <button class="btn btn-primary dropdown-toggle dropdown-toggle-split o_media_optimization" data-toggle="dropdown" type="button">
+                    <span class="sr-only">Alternate Upload</span>
+                </button>
+                <div class="dropdown-menu" role="menu">
+                    <button type="button" role="menuitem" class="dropdown-item o_upload_media_button_no_optimization">Upload image without optimization</button>
+                </div>
+            </t>
+        </t>
+    </t>
+
+    <t t-name="wysiwyg.widgets.document">
+        <t t-call="wysiwyg.widgets.file">
+            <t t-set="uploadText">Upload a document</t>
+            <t t-set="urlPlaceholder">https://www.odoo.com/mydocument</t>
+            <t t-set="addText">Add document</t>
+            <t t-set="searchPlaceholder">Search a document</t>
+            <t t-set="urlWarningTitle">The URL contains an image. The file will be added in the image section.</t>
+        </t>
+    </t>
+
     <t t-name="wysiwyg.widgets.image.existing">
         <div role="dialog" class="modal" tabindex="-1">
             <div class="modal-dialog select-image">
@@ -183,20 +194,22 @@
             </div>
         </div>
     </t>
-    <t t-name="wysiwyg.widgets.files.existing.content">
+    <t t-name="wysiwyg.widgets.image.existing.attachments">
         <div class="existing-attachments">
             <div class="row mt16 ml-auto" t-as="row" t-foreach="rows">
                 <div class="col-2 o_existing_attachment_cell" t-as="attachment" t-foreach="row">
                     <i t-if="attachment.res_model === 'ir.ui.view'" class="fa fa-trash o_existing_attachment_remove" title="This file is a public view attachment" role="img" aria-label="This file is a public view attachment" t-att-data-id="attachment.id"/>
                     <i t-else="" class="fa fa-trash o_existing_attachment_remove" title="This file is attached to the current record" role="img" aria-label="This file is attached to the current record" t-att-data-id="attachment.id"/>
                     <div class="o_attachment_border" t-att-style="attachment.res_model === 'ir.ui.view' ? null : 'border: 1px solid #5cb85c;'"><div t-att-data-src="attachment.src" t-att-data-url="attachment.url" role="img" t-att-aria-label="attachment.name" t-att-title="attachment.name" t-att-data-id="attachment.id" t-att-data-mimetype="attachment.mimetype" t-attf-class="o_image {{withEffect ? 'o_image_loading' : ''}}"/></div>
-                    <t t-if="isDocument">
-                        <small class="o_file_name"><t t-esc="attachment.name"/></small>
-                    </t>
                 </div>
             </div>
         </div>
     </t>
+    <t t-name="wysiwyg.widgets.document.existing.attachments" t-extend="wysiwyg.widgets.image.existing.attachments">
+        <t t-jquery=".o_existing_attachment_cell" t-operation="append">
+            <small class="o_file_name"><t t-esc="attachment.name"/></small>
+        </t>
+    </t>
     <t t-name="wysiwyg.widgets.image.existing.error">
         <div class="form-text">
             <p>The image could not be deleted because it is used in the