From 317ba93d2af2a1658749f80b410ce3a66bede597 Mon Sep 17 00:00:00 2001
From: Romain Tripault <rt@seda.digital>
Date: Mon, 23 Jan 2023 11:16:11 +0100
Subject: [PATCH] Added ability to select multiple images and pass them to
 dedicated callback

---
 .../mediamanager/js/mgr/mediamanager-files.js | 20 ++++++-
 .../mediamanager/js/mgr/mediamanager-modal.js | 56 ++++++++++++++-----
 .../templates/chunks/files/filters.chunk.tpl  |  3 +-
 3 files changed, 63 insertions(+), 16 deletions(-)

diff --git a/assets/components/mediamanager/js/mgr/mediamanager-files.js b/assets/components/mediamanager/js/mgr/mediamanager-files.js
index 33d4f4e..b60f934 100644
--- a/assets/components/mediamanager/js/mgr/mediamanager-files.js
+++ b/assets/components/mediamanager/js/mgr/mediamanager-files.js
@@ -65,6 +65,7 @@ $.fn.modal.Constructor.prototype.enforceFocus = function () {};
         $bulkShareButton         : 'button[data-bulk-share]',
         $bulkDownloadButton      : 'button[data-bulk-download]',
         $bulkDeleteButton        : 'button[data-bulk-delete]',
+        $bulkUseButton           : 'button[data-bulk-use]',
         $bulkCancelButton        : 'button[data-bulk-cancel]',
 
         $search                  : 'input[data-search]',
@@ -1465,6 +1466,19 @@ $.fn.modal.Constructor.prototype.enforceFocus = function () {};
             });
         },
 
+        useFiles: function (e) {
+            e.target.dispatchEvent(
+                new CustomEvent(
+                    'files_selected',
+                    {
+                        detail: {
+                            files: this.$selectedFiles
+                        }
+                    }
+                )
+            )
+        },
+
         /**
          * Copy file to source.
          *
@@ -1905,6 +1919,10 @@ $.fn.modal.Constructor.prototype.enforceFocus = function () {};
         click : $.proxy(MediaManagerFiles, 'deleteFiles')
     }, MediaManagerFiles.$bulkDeleteButton);
 
+    $(document).on({
+        click : $.proxy(MediaManagerFiles, 'useFiles')
+    }, MediaManagerFiles.$bulkUseButton);
+
     $(document).on({
         click : $.proxy(MediaManagerFiles, 'shareFiles')
     }, MediaManagerFiles.$bulkShareButton);
@@ -1925,4 +1943,4 @@ $.fn.modal.Constructor.prototype.enforceFocus = function () {};
         click : $.proxy(MediaManagerFiles, 'removeMetaFields')
     }, MediaManagerFiles.$removeMetaFieldsButton);
 
-}(jQuery);
\ No newline at end of file
+}(jQuery);
diff --git a/assets/components/mediamanager/js/mgr/mediamanager-modal.js b/assets/components/mediamanager/js/mgr/mediamanager-modal.js
index a558d37..8a9412f 100644
--- a/assets/components/mediamanager/js/mgr/mediamanager-modal.js
+++ b/assets/components/mediamanager/js/mgr/mediamanager-modal.js
@@ -10,7 +10,9 @@
         height        : $(window).height() * 0.94,
         wrapperId     : 'modal-wrapper',
         selectElement : '.mediamanager-browser .view-mode-grid .file .file-options .btn-success',
-        onSelect      : function () {}
+        selectMultiElement : '.use-multi',
+        onSelect      : function () {},
+        onSelectMulti : function() {}
     }
 
     $.MediaManagerModal = function (options) {
@@ -39,6 +41,15 @@
                 }
             });
 
+            function buildObject($file) {
+                return {
+                    preview: $file.find('.file-preview img, .file-preview svg').data('path'),
+                    path: $file.find('.file-preview img, .file-preview svg').data('path'),
+                    id: $file.data('id'),
+                    name: $.trim($file.find('.file-name').text())
+                };
+            }
+
             $iFrameElement.on('load', function() {
                 var $iFrame = $(this).contents();
 
@@ -46,26 +57,43 @@
                 $iFrame.on('click', settings.selectElement, function(e) {
                     e.preventDefault();
 
-                    var $file       = $(this).parents('.file'),
-                        filePreview = $file.find('.file-preview img, .file-preview svg').data('path'),
-                        filePath    = $file.find('.file-preview img, .file-preview svg').data('path'),
-                        fileId      = $file.data('id'),
-                        fileName    = $.trim($file.find('.file-name').text());
-
-                    var object = {
-                        'preview' : filePreview,
-                        'path'    : filePath,
-                        'id'      : fileId,
-                        'name'    : fileName
-                    };
+                    let $file = $(this).parents('.file');
+                    let object = buildObject($file)
 
                     settings.onSelect(object);
 
                     $dialogElement.dialog('close');
                 });
+
+                if (settings.onSelectMulti !== function() {}) {
+                    const batchUseButtons = $iFrame.find(settings.selectMultiElement);
+                    if (batchUseButtons.length !== 1) {
+                        return
+                    }
+                    batchUseButtons[0].classList.remove('hidden')
+                    batchUseButtons[0].addEventListener(
+                        'files_selected',
+                        function (event) {
+                            let objects = []
+                            event.detail.files.forEach(function (file) {
+                                let $file = $iFrame.find("[data-id='"+ file.id + "']")
+                                if ($file.length === 0) {
+                                    return
+                                }
+                                objects.push(buildObject($file))
+                            })
+
+                            if (objects.length === 0) {
+                                return
+                            }
+                            settings.onSelectMulti(objects)
+                            $dialogElement.dialog('close');
+                        }
+                    )
+                }
             });
 
             $dialogElement.dialog('open');
         }
     }
-}(jQuery));
\ No newline at end of file
+}(jQuery));
diff --git a/core/components/mediamanager/templates/chunks/files/filters.chunk.tpl b/core/components/mediamanager/templates/chunks/files/filters.chunk.tpl
index 3d79ad9..33ce5ea 100644
--- a/core/components/mediamanager/templates/chunks/files/filters.chunk.tpl
+++ b/core/components/mediamanager/templates/chunks/files/filters.chunk.tpl
@@ -7,6 +7,7 @@
             <button type="button" class="btn btn-default" data-archive-title="[[%mediamanager.files.bulk.archive_title]]" data-archive-message="[[%mediamanager.files.bulk.archive_message]]" data-archive-confirm="[[%mediamanager.global.archive]]" data-archive-cancel="[[%mediamanager.global.cancel]]" data-bulk-archive>[[%mediamanager.global.archive]]</button>
             <button type="button" class="btn btn-default" data-share-title="[[%mediamanager.files.bulk.share_title]]" data-share-message="[[%mediamanager.files.bulk.share_message]]" data-share-confirm="[[%mediamanager.global.share]]" data-share-cancel="[[%mediamanager.global.cancel]]" data-bulk-share>[[%mediamanager.global.share]]</button>
             <button type="button" class="btn btn-default" data-download-title="[[%mediamanager.files.bulk.download_title]]" data-download-message="[[%mediamanager.files.bulk.download_message]]" data-download-confirm="[[%mediamanager.global.download]]" data-download-cancel="[[%mediamanager.global.cancel]]" data-bulk-download>[[%mediamanager.global.download]]</button>
+            <button type="button" class="btn btn-default use-multi hidden" data-bulk-use>[[%mediamanager.global.use]]</button>
             <button type="button" class="btn btn-default" data-bulk-cancel>[[%mediamanager.global.cancel]]</button>
 
             <button type="button" class="btn btn-default hidden" data-archive-title="[[%mediamanager.files.bulk.unarchive_title]]" data-archive-message="[[%mediamanager.files.bulk.unarchive_message]]" data-archive-confirm="[[%mediamanager.global.unarchive]]" data-archive-cancel="[[%mediamanager.global.cancel]]" data-bulk-unarchive>[[%mediamanager.global.unarchive]]</button>
@@ -41,4 +42,4 @@
 
     </div>
 
-</div>
\ No newline at end of file
+</div>