¨4.0.1¨

Modules/Media/Resources/assets/admin/js/MediaPicker.js

@@ -1,14 +1,16 @@
-import '../sass/media-picker.scss';
+import "../sass/media-picker.scss";
 
 export default class {
     constructor(options) {
-        this.options = _.merge({
-            type: null,
-            multiple: false,
-            route: 'admin.file_manager.index',
-            title: trans('media::media.file_manager.title'),
-            message: trans('media::messages.image_has_been_added'),
-        }, options);
+        this.options = _.merge(
+            {
+                type: null,
+                multiple: false,
+                route: "admin.file_manager.index",
+                title: trans("media::media.file_manager.title"),
+            },
+            options
+        );
 
         this.events = {};
         this.frame = this.getFrame();
@@ -27,78 +29,113 @@ export default class {
             multiple: this.options.multiple,
         });
 
-        return $(`<iframe class="file-manager-iframe" frameborder="0" src="${src}"></iframe>`);
+        return $(
+            `<iframe class="file-manager-iframe" frameborder="0" src="${src}"></iframe>`
+        );
     }
 
     appendModalToBody() {
-        if ($('.media-picker-modal').length === 1) {
+        if ($(".media-picker-modal").length === 1) {
             return;
         }
 
-        $('body').append(this.getModal());
+        $("body").append(this.getModal());
+
+        this.closeModalOnClickDismiss();
+        this.closeModalOnClickOutside();
     }
 
     openFrame() {
         this.showModal();
 
-        this.frame.on('load', () => {
+        this.frame.on("load", () => {
             this.selectMedia();
         });
     }
 
     showModal() {
-        let modal = $('.media-picker-modal').modal('show');
+        let modal = $(".media-picker-modal").modal("show");
 
         this.setFrameHeight();
+        this.setFrameHeightOnWindowResize();
         this.setModalTitle(modal);
         this.setModalBody(modal);
         this.closeModalOnEsc(modal);
     }
 
     setFrameHeight() {
-        this.frame.css('height', window.innerHeight * 0.8);
+        this.frame.css("height", window.innerHeight * 0.8);
+    }
+
+    setFrameHeightOnWindowResize() {
+        window.addEventListener("resize", () => {
+            this.setFrameHeight();
+        });
     }
 
     setModalTitle(modal) {
-        modal.find('.modal-title').text(this.options.title);
+        modal.find(".modal-title").text(this.options.title);
     }
 
     setModalBody(modal) {
-        modal.find('.modal-body').html(this.frame);
+        modal.find(".modal-body").html(this.frame);
     }
 
     closeModalOnEsc(modal) {
-        $(document).on('keydown', (e) => {
-            if (e.keyCode === 27) {
-                modal.modal('hide');
+        $(document).on("keydown", (e) => {
+            if (e.key === "Escape") {
+                modal.modal("hide");
             }
         });
 
-        this.frame.on('load keydown', () => {
-            this.frame.contents().on('keydown', (e) => {
-                if (e.keyCode === 27) {
-                    modal.modal('hide');
+        this.frame.on("load keydown", () => {
+            this.frame.contents().on("keydown", (e) => {
+                if (e.key === "Escape") {
+                    modal.modal("hide");
                 }
             });
         });
     }
 
-    selectMedia() {
-        this.frame.contents().find('.table').on('click', '.select-media', (e) => {
-            e.preventDefault();
+    closeModalOnClickDismiss() {
+        const modal = $(".media-picker-modal");
 
-            this.events['select'](e.currentTarget.dataset);
-
-            if (this.options.multiple) {
-                if (this.options.message) {
-                    notify('success', this.options.message, { context: this.frame.contents() });
-                }
-            } else {
-                $('.media-picker-modal').modal('hide');
-            }
+        modal.find('[data-dismiss="modal"]').on("click", () => {
+            modal.modal("hide");
         });
     }
 
+    closeModalOnClickOutside() {
+        const modal = $(".media-picker-modal");
+
+        modal.find(".modal-content").on("click", (e) => {
+            e.stopPropagation();
+        });
+
+        modal.on("click", () => {
+            modal.modal("hide");
+        });
+    }
+
+    selectMedia() {
+        this.frame
+            .contents()
+            .find(".table")
+            .on("click", ".select-media", (e) => {
+                e.preventDefault();
+
+                this.events["select"](e.currentTarget.dataset);
+
+                if (this.options.multiple) {
+                    $(e.currentTarget)
+                        .attr("disabled", true)
+                        .html(`<i class="fa fa-check" aria-hidden="true"></i>`);
+                } else {
+                    $(".media-picker-modal").modal("hide");
+                }
+            });
+    }
+
     getModal() {
         return `
             <div class="media-picker-modal modal fade" role="dialog">
@@ -107,7 +144,8 @@ export default class {
                         <div class="row">
                             <div class="modal-header">
                                 <a type="button" class="close" data-dismiss="modal">&times;</a>
-                                <h4 class="modal-title"></h4>
+
+                                <h5 class="modal-title"></h5>
                             </div>
 
                             <div class="modal-body"></div>