script.imagemanager.input.js
4.54 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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
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);
}
);
}
);