330 lines
12 KiB
JavaScript
330 lines
12 KiB
JavaScript
|
|
/**
|
|
* CmsTextManager File upload class
|
|
*
|
|
* @author Aivars Žukovskis <info@brsystems.lv>
|
|
* @category CmsTextManager
|
|
*/
|
|
var FileUpload = (function() {
|
|
|
|
function FileUpload(jqObj, d, maxFiles) {
|
|
var _this = this;
|
|
|
|
if(d) _this.oD = d;
|
|
_this.jqModuleObj = $.isDefined(jqObj) ? jqObj : $(".form-data");
|
|
|
|
_this.lMaxFilesInContainer = (maxFiles ? maxFiles : 1);
|
|
|
|
_this.bindEvents();
|
|
}
|
|
FileUpload.prototype = {
|
|
lMaxFilesInContainer : 1,
|
|
jqModuleObj : {},
|
|
oD : {}
|
|
};
|
|
|
|
FileUpload.prototype.bindEvents = function(){
|
|
var _this = this;
|
|
|
|
// Set up file upload;
|
|
_this.setupFileUpload();
|
|
|
|
_this.loadFile(_this.oD.cnt_files, _this.jqModuleObj.find("#cnt_files"));
|
|
_this.loadImg(_this.oD.img, _this.jqModuleObj.find("#cnt_img"));
|
|
|
|
|
|
_this.addNewImageNode(_this.jqModuleObj.find("#cnt_files"), false, true);
|
|
_this.addNewImageNode(_this.jqModuleObj.find("#cnt_img"), false);
|
|
|
|
|
|
var p = $("div.cnt_file_url");
|
|
var pInput = p.find("#c_f_url");
|
|
_this.jqModuleObj.find(".prod-img li .link").click(function(){
|
|
|
|
var link = $(this).closest("li").find("#img").val();
|
|
var re = /(?:\.([^.]+))?$/;
|
|
var ext = re.exec(link)[1];
|
|
|
|
if(CBase.dt.prevExt.indexOf(ext) != -1){
|
|
pInput.val(link);
|
|
}else{
|
|
var id = $(this).closest("li").find("#img_id").val();
|
|
CBase.jsModule.oTable.sendAjaxActionAdvanced({
|
|
action : "getFileLink",
|
|
link : link,
|
|
file_id : id
|
|
}, function(d){
|
|
if(d && d.jsonok){
|
|
pInput.val(d.link);
|
|
jqObj.find("input#img_id").val(d.id);
|
|
}
|
|
});
|
|
}
|
|
|
|
if(!p.is(":visible"))
|
|
p.fadeIn("fast");
|
|
pInput.addClass("update").focus().select();
|
|
setTimeout( function() {
|
|
pInput.removeClass("update");
|
|
}, 700);
|
|
});
|
|
pInput.bind("click", function(){$(this).select();});
|
|
|
|
|
|
// Delete image node;
|
|
_this.jqModuleObj.find(".prod-img li .delete")
|
|
.css({opacity : 0})
|
|
.click(function(){ _this.deleteImageNode($(this).closest("li")); });
|
|
|
|
// Team Card action
|
|
_this.jqModuleObj.find(".prod-img li .team-card")
|
|
.css({opacity : 0})
|
|
.click(function(){ _this.addTeamCard($(this).closest("li")); });
|
|
|
|
};
|
|
|
|
FileUpload.prototype.setupFileUpload = function(){
|
|
var _this = this;
|
|
|
|
// Initiate uploadify plugin
|
|
if($.isDefined(CBase.dt.uploadImg)){
|
|
_this.cfg = CBase.dt.uploadImg;
|
|
$.extend(_this.cfg, {
|
|
onComplete:function(event, ID, fileObj, response){
|
|
$response = jQuery.parseJSON(response);
|
|
fileObj.name = $response.file;
|
|
fileObj.path = $response.path;
|
|
_this.showUploadedImage(event, fileObj);
|
|
},
|
|
onError : function(event,ID,fileObj,errorObj){}
|
|
});
|
|
}
|
|
if($.isDefined(CBase.dt.uploadFile)){
|
|
_this.fileCfg = CBase.dt.uploadFile;
|
|
$.extend(_this.fileCfg, {
|
|
onComplete:function(event, ID, fileObj, response){
|
|
response = jQuery.parseJSON(response);
|
|
fileObj.name = response.file;
|
|
fileObj.path = response.path;
|
|
_this.showUploadedImage(event, fileObj, response);
|
|
},
|
|
onError : function(event,ID,fileObj,errorObj){}
|
|
});
|
|
}
|
|
|
|
|
|
// Disable the default browser drop action.
|
|
$(document).on('drop dragover', function (e) {
|
|
e.preventDefault();
|
|
});
|
|
};
|
|
// Function to show newly uploaded image in field
|
|
FileUpload.prototype.showUploadedImage = function(event, $fileObj){
|
|
if(event){
|
|
var oImg, $container = $(event.target).parent();
|
|
var $file = CBase.dt.prevExt.indexOf($fileObj.file_ext) != -1 ? $fileObj.path + $fileObj.dir + '/' + $fileObj.file : '' ;
|
|
if($fileObj.file_ext === 'svg')
|
|
$file = $fileObj.path + $fileObj.file;
|
|
|
|
$container.removeClass().addClass("click-to-addimg img-sample");
|
|
$container.find(".upper").removeClass("upper");
|
|
$container.find("input#img").val($fileObj.path + $fileObj.file);
|
|
var p = $container.parent();
|
|
p.find(".displayNone").removeClass("displayNone");
|
|
if($file.length > 0){
|
|
$container.append(oImg = $('<img src="' + $file + '" class="upper" />').hide());
|
|
oImg.fadeIn("fast", function(){
|
|
$container.find("> img:not(.upper)").remove();
|
|
});
|
|
}else{
|
|
$container.addClass("file " + $fileObj.file_ext).find("img").fadeOut("fast", function(){
|
|
$(this).remove();
|
|
});
|
|
p.find(".youtube, .pic").addClass("displayNone");
|
|
}
|
|
p.find("#img_name").val($fileObj.file_name);
|
|
$container.parent().removeClass("upp empty");
|
|
}
|
|
};
|
|
|
|
// Function to load saved images
|
|
FileUpload.prototype.loadImg = function(img, obj){
|
|
var _this = this;
|
|
var $cont;
|
|
// Set images data
|
|
if(img){
|
|
for(var i in img){
|
|
if(img.hasOwnProperty(i)){
|
|
$cont = _this.addNewImageNode(obj, false, false);
|
|
if($cont.length){
|
|
if(typeof(img[i]['img_ppath']) != "undefined"){
|
|
$cont.find(".click-to-addimg").append('<img src="' + img[i]['img_ppath'] + '" class="upper" />');
|
|
$cont.find("input#img").val(img[i]['img_path']);
|
|
$cont.find("input#img_id").val(img[i]['img_id']);
|
|
$cont.find("input#img_name").val(img[i]['img_name']);
|
|
}
|
|
if(img[i]['img_blocked']){
|
|
if(img[i]['img_blocked'] == "1")
|
|
$cont.find(".chk").addClass("chked");
|
|
}
|
|
|
|
$cont.removeClass("upp empty").addClass("sbox");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
// Function to load saved file
|
|
FileUpload.prototype.loadFile = function(dataObj, obj){
|
|
var _this = this;
|
|
var $cont;
|
|
// Set images data
|
|
if(dataObj){
|
|
for(var i in dataObj){
|
|
if(dataObj.hasOwnProperty(i)){
|
|
$cont = _this.addNewImageNode(obj, false, true);
|
|
if($cont.length){
|
|
if(typeof(dataObj[i]['img_ppath']) != "undefined"){
|
|
var ext = dataObj[i]['img_ppath'].split('.').pop();
|
|
|
|
$cont.find("input#img").val(dataObj[i]['img_path']);
|
|
$cont.find("input#img_id").val(dataObj[i]['img_id']);
|
|
$cont.find("input#img_name").val(dataObj[i]['img_name']);
|
|
|
|
if(CBase.dt.prevExt.indexOf(ext) != -1){
|
|
$cont.find(".click-to-addimg").append('<img src="' + dataObj[i]['img_ppath'] + '" class="upper" />');
|
|
}else{
|
|
$cont.find(".click-to-addimg").addClass("file " + ext);
|
|
$cont.find(".youtube, .pic").addClass("displayNone");
|
|
}
|
|
|
|
$cont.removeClass("upp empty").addClass("sbox");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
// Function to delete row with image
|
|
FileUpload.prototype.deleteImageNode = function(jqObj){
|
|
var _this = this;
|
|
if(!jqObj.hasClass("upp")){
|
|
var jqFileCnt = jqObj.closest(".gbox");
|
|
var jqFileCount = jqFileCnt.find(" > ul > li:not(.sample,.empty)").length;
|
|
jqObj.fadeOut("fast", function(){
|
|
$(this).remove();
|
|
if(jqFileCount >= _this.lMaxFilesInContainer)
|
|
_this.addNewImageNode(jqFileCnt, false);
|
|
});
|
|
}
|
|
};
|
|
// Function to add new row with image sample at the end of the table
|
|
FileUpload.prototype.addNewImageNode = function(obj, fade, file){
|
|
var _this = this;
|
|
|
|
fade = ($.isDefined(fade)?fade:true);
|
|
if(!$.isDefined(obj))
|
|
obj = $(".form-data");
|
|
|
|
// Check how many files can be uploaded
|
|
if(obj.find(" > ul > li:not(.sample)").length < _this.lMaxFilesInContainer){
|
|
var $clone = obj.find(".sample").clone(true);
|
|
|
|
var $i = 1;
|
|
while(obj.find("#item-" + $i).length)
|
|
$i++;
|
|
|
|
// Set new node id
|
|
$clone.attr("id", "item-" + $i).removeClass("sample").addClass("upp empty");
|
|
|
|
var sFor = $clone.find(".placeh input").attr("id") + "-" + $i;
|
|
|
|
// Update disabled checkbox names & ids
|
|
$clone.find("label").attr("for", sFor);
|
|
$clone.find(".placeh > input").attr("id", sFor).attr("name", sFor);
|
|
|
|
// Append new input for uploadify
|
|
$clone.find(".click-to-addimg").append('<input id="upload-' + $i + '" type="file" class="skip file-upload" />');
|
|
obj.find(" > ul").append($clone);
|
|
|
|
$clone.find("#upload-" + $i).fileupload({
|
|
url: file ? _this.fileCfg.script : _this.cfg.script,
|
|
dataType: 'json',
|
|
formData: file ? _this.fileCfg.scriptData : _this.cfg.scriptData,
|
|
acceptFileTypes: /(\.|\/)(file ? _this.fileCfg.fileExt. : _this.cfg.fileExt)$/i,
|
|
maxFileSize: file ? _this.fileCfg.sizeLimit : _this.cfg.sizeLimit, // 5 MB
|
|
// Enable image resizing, except for Android and Opera,
|
|
// which actually support image resizing, but fail to
|
|
// send Blob objects via XHR requests:
|
|
disableImageResize: true,
|
|
previewCrop: false,
|
|
dropZone: $clone,
|
|
done: function (e, data) {
|
|
if($(this).closest("li").hasClass("upp"))
|
|
_this.addNewImageNode(obj, true, file);
|
|
_this.showUploadedImage(e, data.result);
|
|
},
|
|
drop: function (e) {
|
|
if(e.delegateTarget){
|
|
$(e.target).attr("data-trigger-type", $(e.delegateTarget).attr("class"));
|
|
}
|
|
},
|
|
add: function (e, data) {
|
|
// Rewrite formData variable
|
|
data.formData = $.extend({
|
|
type : $(e.target).attr("data-trigger-type"), // TODO: Is empty
|
|
type_id : $("#pbase").find("#a_type").val()
|
|
}, _this.cfg["scriptData"]);
|
|
data.submit();
|
|
}
|
|
}).prop('disabled', !$.support.fileInput)
|
|
.parent().addClass($.support.fileInput ? undefined : 'disabled');
|
|
|
|
if(fade)
|
|
$clone.fadeIn();
|
|
else
|
|
$clone.show();
|
|
|
|
return $clone;
|
|
}
|
|
return false;
|
|
};
|
|
|
|
// Function to add team card with simple alerts for name and description
|
|
FileUpload.prototype.addTeamCard = function(jqObj){
|
|
var _this = this;
|
|
var imgPath = jqObj.find("input#img").val();
|
|
|
|
if(!imgPath) return;
|
|
|
|
// Alert for team member name
|
|
var name = prompt("Team Member Name:", "");
|
|
if(!name) return;
|
|
|
|
// Alert for professional title
|
|
var title = prompt("Professional Title (e.g., Web Designer):", "");
|
|
if(!title) return;
|
|
|
|
// Generate HTML card
|
|
var cardHtml = '<div class="col-6 col-lg-3" data-animate="animate__fadeIn">' +
|
|
'<div class="about-team-content banner-hover">' +
|
|
'<div class="about-team-img">' +
|
|
'<img src="' + imgPath + '" alt="' + name + '" />' +
|
|
'</div>' +
|
|
'<div class="about-team-info pst-25">' +
|
|
'<h6>' + name + '</h6>' +
|
|
'<span>' + title + '</span>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>';
|
|
|
|
// Insert into TinyMCE
|
|
if(tinymce.activeEditor) {
|
|
tinymce.activeEditor.execCommand('mceInsertContent', false, cardHtml);
|
|
}
|
|
};
|
|
|
|
|
|
return FileUpload;
|
|
})();
|