script.imagemanager.input.js
3.92 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
var imageManagerInput = {
baseUrl: null,
//language
message: null,
//init imageManagerInput
init: function () {
//create modal
imageManagerInput.initModal();
},
//creat image Manager modal
initModal: function () {
//check if modal not jet exists
if ($("#modal-imagemanager").length === 0) {
//set html modal in var
var sModalHtml = '<div tabindex="-1" role="dialog" class="fade modal" id="modal-imagemanager">';
sModalHtml += '<div class="modal-dialog modal-lg">';
sModalHtml += '<div class="modal-content">';
sModalHtml += '<div class="modal-header">';
sModalHtml += '<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>';
sModalHtml += '<h4>Image manager</h4>';
sModalHtml += '</div>';
sModalHtml += '<div class="modal-body">';
sModalHtml += '<iframe src="#"></iframe>';
sModalHtml += '</div>';
sModalHtml += '</div>';
sModalHtml += '</div>';
sModalHtml += '</div>';
//prepend data to body
$('body').prepend(sModalHtml);
}
},
//open media manager modal
openModal: function (inputId, aspectRatio, cropViewMode) {
//get selected item
var iImageId = $("#" + inputId).val();
var srcImageIdQueryString = "";
if (iImageId !== "") {
srcImageIdQueryString = "&image-id=" + iImageId;
}
//create iframe url
var queryStringStartCharacter = ((imageManagerInput.baseUrl).indexOf('?') == -1) ? '?' : '&';
var imageManagerUrl = imageManagerInput.baseUrl + queryStringStartCharacter + "view-mode=iframe&input-id=" + inputId + "&aspect-ratio=" + aspectRatio + "&crop-view-mode=" + cropViewMode + srcImageIdQueryString;
//set iframe path
$("#modal-imagemanager iframe").attr("src", imageManagerUrl);
//set translation title for modal header
$("#modal-imagemanager .modal-dialog .modal-header h4").text(imageManagerInput.message.imageManager);
//open modal
$("#modal-imagemanager").modal("show");
},
//close media manager modal
closeModal: function () {
$("#modal-imagemanager").modal("hide");
},
//delete picked image
deletePickedImage: function (inputId) {
//remove value of the input field
var sFieldId = inputId;
var sFieldNameId = sFieldId + "_name";
var sImagePreviewId = sFieldId + "_image";
var bShowConfirm = JSON.parse($(".delete-selected-image[data-input-id='" + inputId + "']").data("show-delete-confirm"));
//show warning if bShowConfirm == true
if (bShowConfirm) {
if (confirm(imageManagerInput.message.detachWarningMessage) == false) {
return false;
}
}
//set input data
$('#' + sFieldId).val("");
$('#' + sFieldNameId).val("");
//trigger change
$('#' + sFieldId).trigger("change");
//hide image
$('#' + sImagePreviewId).attr("src", "").parent().addClass("hide");
//delete hide class
$(".delete-selected-image[data-input-id='" + inputId + "']").addClass("hide");
}
};
$(document).ready(function () {
//init Image manage
imageManagerInput.init();
//open media manager modal
$(document).on("click", ".open-modal-imagemanager", function () {
var aspectRatio = $(this).data("aspect-ratio");
var cropViewMode = $(this).data("crop-view-mode");
var inputId = $(this).data("input-id");
//open selector id
imageManagerInput.openModal(inputId, aspectRatio, cropViewMode);
});
//delete picked image
$(document).on("click", ".delete-selected-image", function () {
var inputId = $(this).data("input-id");
//open selector id
imageManagerInput.deletePickedImage(inputId);
});
});