ryanwong
365 lines
11 KiB
JavaScript
365 lines
11 KiB
JavaScript
/*Powered By: Manaknightdigital Inc. https://manaknightdigital.com/ Year: 2019*/
|
|
$(document).ready(function() {
|
|
var page = 0;
|
|
var num_page = 0;
|
|
var image_selected = "";
|
|
var field = "";
|
|
});
|
|
|
|
// ====== Assets ===========
|
|
window.asset_page = 0;
|
|
window.asset_num_page = 0;
|
|
window.asset_per_page = 0;
|
|
window.asset_num_item = 0;
|
|
window.asset_selected_id = 0;
|
|
window.asset_selected_img = "";
|
|
|
|
// ====== CROPPING ===========
|
|
window.crop_object = null;
|
|
window.crop_width = 500;
|
|
window.crop_height = 500;
|
|
window.crop_boundary_width = 500;
|
|
window.crop_boundary_height = 500;
|
|
window.crop_output_image = "output_image";
|
|
window.crop_image_id = 0;
|
|
window.crop_image_url = "";
|
|
|
|
$(document).ready(function() {
|
|
$(".mkd-close-modal").click(function() {
|
|
$("#mkd-media-gallery-wrapper").html("");
|
|
|
|
window.asset_page = 0;
|
|
window.asset_num_page = 0;
|
|
window.asset_per_page = 0;
|
|
window.asset_num_item = 0;
|
|
window.asset_selected_id = 0;
|
|
window.asset_selected_img = "";
|
|
|
|
if (window.crop_object) {
|
|
window.crop_object.destroy();
|
|
}
|
|
window.crop_object = null;
|
|
window.crop_width = 500;
|
|
window.crop_height = 500;
|
|
window.crop_boundary_width = 500;
|
|
window.crop_boundary_height = 500;
|
|
window.crop_output_image = "output_image";
|
|
window.crop_image_id = 0;
|
|
window.crop_image_url = "";
|
|
$("#mkd-media-gallery-container").show();
|
|
$(".mkd-media-panel-1").show();
|
|
$(".mkd-media-panel-3").hide();
|
|
$("#mkd-media-upload-container").hide();
|
|
$("#mkd-media-crop-container").hide();
|
|
$(".mkd-media-panel-2").hide();
|
|
});
|
|
$("#mkd-media-choose").click(function() {
|
|
if (window.asset_selected_id != 0) {
|
|
$("#" + window.crop_image_id).val(window.asset_selected_id);
|
|
$("#" + window.crop_image_url).val(window.asset_selected_img);
|
|
$("#" + window.crop_output_image).attr("src", window.asset_selected_img);
|
|
$("#mkd-media-gallery").modal("hide");
|
|
$("#mkd-media-upload-container").hide();
|
|
$("#mkd-media-crop-container").hide();
|
|
$("#mkd-media-gallery-container").show();
|
|
$(".mkd-media-panel-1").show();
|
|
$(".mkd-media-panel-2").hide();
|
|
$(".mkd-media-panel-3").hide();
|
|
$("#mkd-media-gallery-wrapper").html("");
|
|
|
|
window.asset_page = 0;
|
|
window.asset_num_page = 0;
|
|
window.asset_per_page = 0;
|
|
window.asset_num_item = 0;
|
|
window.asset_selected_id = 0;
|
|
window.asset_selected_img = "";
|
|
|
|
window.crop_object = null;
|
|
window.crop_width = 500;
|
|
window.crop_height = 500;
|
|
window.crop_boundary_width = 500;
|
|
window.crop_boundary_height = 500;
|
|
window.crop_output_image = "output_image";
|
|
window.crop_image_id = 0;
|
|
window.crop_image_url = "";
|
|
}
|
|
});
|
|
$("#mkd-load-more").click(function() {
|
|
if (window.asset_page + window.asset_per_page >= window.asset_num_item) {
|
|
$("#mkd-load-more-container").hide();
|
|
}
|
|
$.ajax({
|
|
type: "GET",
|
|
url: "/v1/api/assets/" + window.asset_page
|
|
}).done(function(result) {
|
|
window.asset_page = result.page;
|
|
window.asset_num_page = result.num_page;
|
|
window.asset_num_item = result.num_item;
|
|
window.asset_per_page = result.per_page;
|
|
var items = result.item;
|
|
for (var i = 0; i < items.length; i++) {
|
|
var element = items[i];
|
|
$("#mkd-media-gallery-wrapper").append(
|
|
'<div class="col-md-2 mb-2"><img data-id="' +
|
|
element.id +
|
|
'"src="' +
|
|
element.url +
|
|
'" alt="" onerror="if (this.src != \'/uploads/placeholder.jpg\') this.src = \'/uploads/placeholder.jpg\';" class="img-fluid mkd-gallery-image-image"></div>'
|
|
);
|
|
}
|
|
|
|
if (window.asset_page + window.asset_per_page >= window.asset_num_item) {
|
|
$("#mkd-load-more-container").hide();
|
|
}
|
|
window.asset_page = window.asset_page + window.asset_per_page;
|
|
|
|
$(".mkd-gallery-image-image").click(function() {
|
|
var id = Number($(this).attr("data-id"));
|
|
$(this).addClass("active");
|
|
window.asset_selected_id = id;
|
|
window.asset_selected_img = $(this).attr("src");
|
|
});
|
|
});
|
|
});
|
|
|
|
$(".mkd-choose-image").click(function() {
|
|
var view_width = Number($(this).attr("data-view-width"));
|
|
var view_height = Number($(this).attr("data-view-height"));
|
|
var boundary_width = Number($(this).attr("data-boundary-width"));
|
|
var boundary_height = Number($(this).attr("data-boundary-height"));
|
|
var image_preview = $(this).attr("data-image-preview");
|
|
var image_id = $(this).attr("data-image-id");
|
|
var image_url = $(this).attr("data-image-url");
|
|
window.crop_output_image = image_preview;
|
|
window.crop_image_id = image_id;
|
|
window.crop_image_url = image_url;
|
|
|
|
if (Number.isInteger(view_width)) {
|
|
window.crop_width = Number(view_width);
|
|
}
|
|
if (Number.isInteger(view_height)) {
|
|
window.crop_height = Number(view_height);
|
|
}
|
|
if (Number.isInteger(boundary_width)) {
|
|
window.crop_boundary_width = Number(boundary_width);
|
|
}
|
|
if (Number.isInteger(boundary_height)) {
|
|
window.crop_boundary_height = Number(boundary_height);
|
|
}
|
|
$("#mkd-media-gallery").modal("show");
|
|
$("#mkd-load-more-container").show();
|
|
|
|
$.ajax({
|
|
type: "GET",
|
|
url: "/v1/api/assets/0"
|
|
}).done(function(result) {
|
|
window.asset_page = result.page;
|
|
window.asset_num_page = result.num_page;
|
|
window.asset_num_item = result.num_item;
|
|
window.asset_per_page = result.per_page;
|
|
var items = result.item;
|
|
for (var i = 0; i < items.length; i++) {
|
|
var element = items[i];
|
|
$("#mkd-media-gallery-wrapper").append(
|
|
'<div class="col-md-2 mb-2"><img data-id="' +
|
|
element.id +
|
|
'"src="' +
|
|
element.url +
|
|
'" alt="" onerror="if (this.src != \'/uploads/placeholder.jpg\') this.src = \'/uploads/placeholder.jpg\';" class="img-fluid mkd-gallery-image-image"></div>'
|
|
);
|
|
}
|
|
|
|
if (result.page + result.per_page >= result.num_item) {
|
|
$("#mkd-load-more-container").hide();
|
|
}
|
|
|
|
window.asset_page = window.asset_page + window.asset_per_page;
|
|
|
|
$(".mkd-gallery-image-image").click(function() {
|
|
var id = Number($(this).attr("data-id"));
|
|
$(this).addClass("active");
|
|
window.asset_selected_id = id;
|
|
window.asset_selected_img = $(this).attr("src");
|
|
});
|
|
});
|
|
});
|
|
|
|
$("#mkd-media-upload").click(function() {
|
|
$("#mkd-media-gallery-container").hide();
|
|
$(".mkd-media-panel-1").hide();
|
|
$(".mkd-media-panel-3").hide();
|
|
$("#mkd-media-upload-container").show();
|
|
$(".mkd-media-panel-2").show();
|
|
});
|
|
|
|
mkd_events.subscribe("crop_image", function(e) {
|
|
$("#mkd-media-upload-container").hide();
|
|
$("#mkd-media-crop-container").show();
|
|
$(".mkd-media-panel-1").hide();
|
|
$(".mkd-media-panel-2").hide();
|
|
$(".mkd-media-panel-3").show();
|
|
|
|
var el = document.getElementById("mkd-crop-upload-container");
|
|
window.crop_object = new Croppie(el, {
|
|
enableExif: true,
|
|
viewport: {
|
|
width: window.crop_width,
|
|
height: window.crop_height
|
|
},
|
|
boundary: {
|
|
width: window.crop_boundary_width,
|
|
height: window.crop_boundary_height
|
|
}
|
|
});
|
|
|
|
window.crop_object.bind({
|
|
url: e.url
|
|
});
|
|
|
|
$("#mkd-media-crop").click(function() {
|
|
window.crop_object
|
|
.result({
|
|
type: "base64",
|
|
format: "png"
|
|
})
|
|
.then(function(base64) {
|
|
$.ajax({
|
|
type: "POST",
|
|
url: "/v1/api/image/upload",
|
|
data: {
|
|
image: base64
|
|
}
|
|
})
|
|
.done(function(result) {
|
|
mkd_events.publish("image_uploaded", result);
|
|
})
|
|
.fail(function(jqXHR, textStatus) {
|
|
alert("Image Upload Failed");
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
mkd_events.subscribe("file_upload", function(e) {
|
|
var formData = new FormData();
|
|
formData.append("file", e.url, "file");
|
|
$.ajax({
|
|
url: "/v1/api/file/upload",
|
|
type: "post",
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
cache: false,
|
|
async: false,
|
|
success: function(data) {
|
|
$("#" + e.id).val(data.file);
|
|
$("#" + e.id + "_id").val(data.id);
|
|
$("#" + e.id + "_text").html(data.file);
|
|
}
|
|
});
|
|
});
|
|
|
|
mkd_events.subscribe("image_uploaded", function(e) {
|
|
$("#mkd-media-gallery").modal("hide");
|
|
$("#mkd-media-upload-container").hide();
|
|
$("#mkd-media-crop-container").hide();
|
|
$("#mkd-media-gallery-container").show();
|
|
$(".mkd-media-panel-1").show();
|
|
$(".mkd-media-panel-2").hide();
|
|
$(".mkd-media-panel-3").hide();
|
|
$("#" + window.crop_output_image).attr("src", e.image);
|
|
$("#" + window.crop_image_id).val(e.id);
|
|
$("#" + window.crop_image_url).val(e.image);
|
|
$("#mkd-media-gallery-wrapper").html("");
|
|
|
|
window.asset_page = 0;
|
|
window.asset_num_page = 0;
|
|
window.asset_num_item = 0;
|
|
window.asset_selected_id = 0;
|
|
window.asset_selected_img = "";
|
|
|
|
if (window.crop_object) {
|
|
window.crop_object.destroy();
|
|
}
|
|
window.crop_object = null;
|
|
window.crop_width = 500;
|
|
window.crop_height = 500;
|
|
window.crop_boundary_width = 500;
|
|
window.crop_boundary_height = 500;
|
|
window.crop_output_image = "output_image";
|
|
window.crop_image_id = 0;
|
|
window.crop_image_url = "";
|
|
});
|
|
|
|
mkd_events.subscribe("file_import", function(e) {
|
|
var formData = new FormData();
|
|
formData.append("file", e.url, "file");
|
|
$.ajax({
|
|
url: "/v1/api/file/import/" + e.model,
|
|
type: "post",
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
cache: false,
|
|
async: false,
|
|
success: function(data) {
|
|
alert("Imported Data successfully");
|
|
},
|
|
error: function(error) {
|
|
alert("Error: " + error.responseJSON.message);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
function onFileSelected(event) {
|
|
var selectedFile = event.target.files[0];
|
|
var reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
mkd_events.publish("crop_image", {
|
|
url: e.target.result
|
|
});
|
|
};
|
|
reader.readAsDataURL(selectedFile);
|
|
}
|
|
|
|
function onFileUploaded(event, id) {
|
|
var selectedFile = event.target.files[0];
|
|
var reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
mkd_events.publish("file_upload", {
|
|
url: selectedFile,
|
|
id: id
|
|
});
|
|
};
|
|
reader.readAsDataURL(selectedFile);
|
|
}
|
|
|
|
function onFileImport(event, model) {
|
|
alert(
|
|
"Remember to have to the following in CSV: \n1.All field seperate by ;. \n2.ID is first field. \n3.All field wrap around with double quotes.\n4.1 line per row.\n5.No header row."
|
|
);
|
|
var selectedFile = event.target.files[0];
|
|
var reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
mkd_events.publish("file_import", {
|
|
url: selectedFile,
|
|
model: model
|
|
});
|
|
};
|
|
reader.readAsDataURL(selectedFile);
|
|
}
|
|
|
|
function fixBrokenImages(url) {
|
|
var img = document.getElementsByTagName("img");
|
|
var i = 0,
|
|
l = img.length;
|
|
for (; i < l; i++) {
|
|
var t = img[i];
|
|
if (t.naturalWidth === 0) {
|
|
//this image is broken
|
|
t.src = url;
|
|
}
|
|
}
|
|
}
|