[IMP] web_editor, *: improve file media widget views & selection

* = web_unsplash, website_blog

Rename "image" to "attachment" when appropriate in FileWidget

Improve image selection / highlight code (now based on attachment id)

Improve image grid view:
 - Remove the row mechanism and replace it by a single loop over the images.
 - Take advantage of row wrap for a responsive display.
 - Uniformize the height (prevent tall images from moving down everything).
 - Load a miniature of the images when possible, remove the loading placeholder.
 	This should significantly reduce the download size when opening the dialog,
 	at the cost of CPU usage on the server.
 - Split the existing image view into one view for the loop and one view for the
 	image itself. This way in a following commit we can reuse the image view
 	when adding a new one, instead of having to render everything again.

task-1930726
PR: #31208

2 files changed, 14 insertions, 28 deletions

diff --git a/addons/web_unsplash/static/src/js/unsplash_image_widget.js b/addons/web_unsplash/static/src/js/unsplash_image_widget.js
index 963d31c961a..53259e6278b 100644
--- a/addons/web_unsplash/static/src/js/unsplash_image_widget.js
+++ b/addons/web_unsplash/static/src/js/unsplash_image_widget.js
@@ -76,7 +76,7 @@ widgetsMedia.ImageWidget.include({
     /**
      * @override
      */
-    save: function () {
+    _save: function () {
         if (!this._unsplash.query) {
             return this._super.apply(this, arguments);
         }
@@ -96,7 +96,8 @@ widgetsMedia.ImageWidget.include({
                 image.src = image.url;
                 image.isDocument = !(/gif|jpe|jpg|png/.test(image.mimetype));
             });
-            self.images = images;
+            self.attachments = images;
+            self.selectedAttachments = images;
             return _super.apply(self, args);
         });
     },
@@ -114,10 +115,9 @@ widgetsMedia.ImageWidget.include({
         var always = function () {
             if (!noRender) {
                 self._renderImages();
-                self._adaptLoadMore();
             }
         };
-        return this.unsplashAPI.getImages(needle, this.IMAGES_DISPLAYED_TOTAL).then(function (res) {
+        return this.unsplashAPI.getImages(needle, this.numberOfAttachmentsToDisplay).then(function (res) {
             self._unsplash.isMaxed = res.isMaxed;
             self._unsplash.records = res.images;
             self._unsplash.error = false;
@@ -131,20 +131,9 @@ widgetsMedia.ImageWidget.include({
     //--------------------------------------------------------------------------
 
     /**
-     * @private
-     */
-    _adaptLoadMore: function () {
-        if (!this._unsplash.isActive) {
-            return this._super.apply(this, arguments);
-        }
-
-        this.$('.o_load_more').toggleClass('d-none', !!this._unsplash.error || this._unsplash.isMaxed);
-        this.$('.o_load_done_msg').toggleClass('d-none', !!this._unsplash.error || !this._unsplash.isMaxed);
-    },
-    /**
      * @override
      */
-    _highlightSelectedImages: function () {
+    _highlightSelected: function () {
         var self = this;
         if (!this._unsplash.isActive) {
             return this._super.apply(this, arguments);
@@ -167,7 +156,6 @@ widgetsMedia.ImageWidget.include({
      * @override
      */
     _renderImages: function () {
-        var self = this;
         if (!this._unsplash.isActive) {
             return this._super.apply(this, arguments);
         }
@@ -181,13 +169,11 @@ widgetsMedia.ImageWidget.include({
             return;
         }
 
-        var rows = _(this._unsplash.records).chain()
-            .groupBy(function (a, index) { return Math.floor(index / self.IMAGES_PER_ROW); })
-            .values()
-            .value();
+        this.$('.unsplash_img_container').html(core.qweb.render('web_unsplash.dialog.image.content', {records: this._unsplash.records}));
+        this._highlightSelected();
 
-        this.$('.unsplash_img_container').html(core.qweb.render('web_unsplash.dialog.image.content', {rows: rows}));
-        this._highlightSelectedImages();
+        this.$('.o_load_more').toggleClass('d-none', !!this._unsplash.error || this._unsplash.isMaxed);
+        this.$('.o_load_done_msg').toggleClass('d-none', !!this._unsplash.error || !this._unsplash.isMaxed);
     },
     /**
      * @private
@@ -248,7 +234,7 @@ widgetsMedia.ImageWidget.include({
         } else {
             this._unsplash.selectedImages[imgid] = {url: url, download_url: downloadURL};
         }
-        this._highlightSelectedImages();
+        this._highlightSelected();
     },
     /**
      * @private
diff --git a/addons/web_unsplash/static/src/xml/unsplash_image_widget.xml b/addons/web_unsplash/static/src/xml/unsplash_image_widget.xml
index 6ecf304034b..73593b25e50 100644
--- a/addons/web_unsplash/static/src/xml/unsplash_image_widget.xml
+++ b/addons/web_unsplash/static/src/xml/unsplash_image_widget.xml
@@ -27,15 +27,15 @@
 </t>
 
 <t t-name="web_unsplash.dialog.image.content">
-    <div class="row mt16" t-as="row" t-foreach="rows">
-        <div class="col-sm-2 o_unsplash_img_cell text-center" t-as="img" t-foreach="row">
-            <div class="o_image o_webimage" t-att-data-imgid="img.id" t-att-data-url="img.urls.regular" t-att-data-download-url="img.links.download_location">
+    <div class="row mt16">
+        <div class="col-sm-2 o_unsplash_img_cell text-center" t-as="img" t-foreach="records">
+            <div class="o_image o_webimage text-center" t-att-data-imgid="img.id" t-att-data-url="img.urls.regular" t-att-data-download-url="img.links.download_location">
                 <img class="img-fluid" t-att-src="img.urls.thumb"/>
             </div>
             <div class="author_name"><a t-att-href="img.user.links.html" target="_blank"><t t-esc="img.user.name"/></a></div>
         </div>
     </div>
-    <div class="row mt16" t-if="rows.length == 0">
+    <div class="row mt16" t-if="records.length == 0">
         <div class="m-auto text-muted not-found">
             <i class="fa fa-camera mr8"/> Photos not found
         </div>