159 lines
4.1 KiB
JavaScript
159 lines
4.1 KiB
JavaScript
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"),
|
|
},
|
|
options
|
|
);
|
|
|
|
this.events = {};
|
|
this.frame = this.getFrame();
|
|
|
|
this.appendModalToBody();
|
|
this.openFrame();
|
|
}
|
|
|
|
on(event, handler) {
|
|
this.events[event] = handler;
|
|
}
|
|
|
|
getFrame() {
|
|
let src = route(this.options.route, {
|
|
type: this.options.type,
|
|
multiple: this.options.multiple,
|
|
});
|
|
|
|
return $(
|
|
`<iframe class="file-manager-iframe" frameborder="0" src="${src}"></iframe>`
|
|
);
|
|
}
|
|
|
|
appendModalToBody() {
|
|
if ($(".media-picker-modal").length === 1) {
|
|
return;
|
|
}
|
|
|
|
$("body").append(this.getModal());
|
|
|
|
this.closeModalOnClickDismiss();
|
|
this.closeModalOnClickOutside();
|
|
}
|
|
|
|
openFrame() {
|
|
this.showModal();
|
|
|
|
this.frame.on("load", () => {
|
|
this.selectMedia();
|
|
});
|
|
}
|
|
|
|
showModal() {
|
|
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);
|
|
}
|
|
|
|
setFrameHeightOnWindowResize() {
|
|
window.addEventListener("resize", () => {
|
|
this.setFrameHeight();
|
|
});
|
|
}
|
|
|
|
setModalTitle(modal) {
|
|
modal.find(".modal-title").text(this.options.title);
|
|
}
|
|
|
|
setModalBody(modal) {
|
|
modal.find(".modal-body").html(this.frame);
|
|
}
|
|
|
|
closeModalOnEsc(modal) {
|
|
$(document).on("keydown", (e) => {
|
|
if (e.key === "Escape") {
|
|
modal.modal("hide");
|
|
}
|
|
});
|
|
|
|
this.frame.on("load keydown", () => {
|
|
this.frame.contents().on("keydown", (e) => {
|
|
if (e.key === "Escape") {
|
|
modal.modal("hide");
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
closeModalOnClickDismiss() {
|
|
const modal = $(".media-picker-modal");
|
|
|
|
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">
|
|
<div class="modal-dialog clearfix">
|
|
<div class="modal-content col-md-10 col-sm-11 clearfix">
|
|
<div class="row">
|
|
<div class="modal-header">
|
|
<a type="button" class="close" data-dismiss="modal">×</a>
|
|
|
|
<h5 class="modal-title"></h5>
|
|
</div>
|
|
|
|
<div class="modal-body"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|