428 lines
17 KiB
JavaScript
428 lines
17 KiB
JavaScript
|
tinyMCEPopup.requireLangPack();
|
||
|
|
|
||
|
|
var ImgManagerDialog = {
|
||
|
|
cropedImageData: null,
|
||
|
|
//INIT
|
||
|
|
init : function() {
|
||
|
|
var f = document.forms[0];
|
||
|
|
|
||
|
|
$('#imageInserModal').modal({show:false}); //Image insert popup init
|
||
|
|
this.openDirectory(null, null); // populate directories and files
|
||
|
|
this.populateDirectoriesSelect("directoriesSelect","Choose directory to upload to:"); //Populate folder select infomation
|
||
|
|
this.populateDirectoriesSelect("directoriesSelectParent","Choose parent directory:"); //Populate folder select infomation
|
||
|
|
|
||
|
|
//Uploadify INIT
|
||
|
|
$("#file_upload").uploadify({
|
||
|
|
'uploader' : tinyMCEPopup.getWindowArg('plugin_url')+'/libs/uploadify.swf',
|
||
|
|
'script' : tinyMCEPopup.getWindowArg('plugin_url')+'/libs/ajax.php',
|
||
|
|
'cancelImg' : 'img/cancel.png',
|
||
|
|
'folder' : '',
|
||
|
|
'auto' : false,
|
||
|
|
'multi' : true,
|
||
|
|
'scriptData': {"uploadify":1,"hash":hash}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
close : function() {
|
||
|
|
tinyMCEPopup.popup_css = false;
|
||
|
|
tinyMCEPopup.close();
|
||
|
|
},
|
||
|
|
insert : function() {
|
||
|
|
// Insert the contents from the input into the document
|
||
|
|
|
||
|
|
var dialog = $("#imageInserModal");
|
||
|
|
var alt = dialog.find("#imgAlt").val();
|
||
|
|
var width = dialog.find("#imgWidth").val();
|
||
|
|
var height = dialog.find("#imgHeight").val();
|
||
|
|
var align = dialog.find("#imgAlign").val();
|
||
|
|
var src = dialog.find("#imgWebUrl").val();
|
||
|
|
|
||
|
|
var html = '<img src="'+src+'" ';
|
||
|
|
var img = $("<img>",{"src":src});
|
||
|
|
if(alt){img.attr("alt",alt);html = html+' alt="'+alt+'"';}
|
||
|
|
if(width){img.attr("width",width);html = html+' width="'+width+'"';}
|
||
|
|
if(height){img.attr("height",height);html = html+' height="'+height+'"';}
|
||
|
|
if(align){img.attr("align",align);html = html+' align="'+align+'"';}
|
||
|
|
html = html + ' />';
|
||
|
|
|
||
|
|
var ed = tinyMCEPopup.editor, el;
|
||
|
|
|
||
|
|
tinyMCEPopup.restoreSelection();
|
||
|
|
|
||
|
|
if (tinymce.isIE){
|
||
|
|
ed.selection.setContent(html);
|
||
|
|
}else{
|
||
|
|
el = ed.selection.getNode();
|
||
|
|
$(el).append(img);
|
||
|
|
}
|
||
|
|
|
||
|
|
ed.undoManager.add();
|
||
|
|
|
||
|
|
tinyMCEPopup.popup_css = false;
|
||
|
|
tinyMCEPopup.close();
|
||
|
|
},
|
||
|
|
showTab: function(tabId){
|
||
|
|
jQuery(".contentContainers").hide();
|
||
|
|
jQuery("#"+tabId).show();
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
openDirectory: function (dirName, parent){
|
||
|
|
if(parent && parent != "/" && parent != "../"){
|
||
|
|
if(dirName)
|
||
|
|
dirName = parent+"/"+dirName;
|
||
|
|
else
|
||
|
|
dirName = parent;
|
||
|
|
}
|
||
|
|
|
||
|
|
if(dirName == parent || parent == "../"){
|
||
|
|
parent = Helppers.getParentDir(dirName);
|
||
|
|
}
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
url: tinyMCEPopup.getWindowArg('plugin_url')+'/libs/ajax.php?getFilesAndDirectories=1&dir='+dirName,
|
||
|
|
type: 'GET',
|
||
|
|
dataType: 'text json',
|
||
|
|
success:function(data){
|
||
|
|
Helppers.populateFoldersAndImages(data,dirName,parent);
|
||
|
|
},
|
||
|
|
error:function(){
|
||
|
|
alert("Error eccured. Please refresh site and try again");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
populateDirsAfterUpdate: function(){
|
||
|
|
this.populateDirectoriesSelect("directoriesSelect","Choose directory to upload to:");
|
||
|
|
this.populateDirectoriesSelect("directoriesSelectParent","Choose parent directory:");
|
||
|
|
},
|
||
|
|
populateDirectoriesSelect: function(container_id, label){
|
||
|
|
$.ajax({
|
||
|
|
url: tinyMCEPopup.getWindowArg('plugin_url')+'/libs/ajax.php?getDirectoryList=1',
|
||
|
|
type: 'GET',
|
||
|
|
dataType: 'text json',
|
||
|
|
success:function(data){
|
||
|
|
$("#"+container_id).html("");
|
||
|
|
var labelSelect = $("<label>", {"for": "directory"}).html("<h4>"+label+"</h4>");
|
||
|
|
var select = $("<select>", {"id": "directory"});
|
||
|
|
|
||
|
|
select.change(function(){
|
||
|
|
$("#file_upload").uploadifySettings("scriptData",{'dir':$("#"+container_id).find("#directory").val()});
|
||
|
|
});
|
||
|
|
|
||
|
|
select.append($("<option>",{"value":""}).html("Main directory"));
|
||
|
|
$.each(data,function(key,dir){
|
||
|
|
select.append($("<option>",{"value":key,"label":dir}).html(dir));
|
||
|
|
});
|
||
|
|
$("#"+container_id).append(labelSelect);
|
||
|
|
$("#"+container_id).append(select);
|
||
|
|
},
|
||
|
|
error:function(){
|
||
|
|
alert("Error eccured. Please refresh site and try again");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
addNewFolder: function(dir, folder){
|
||
|
|
|
||
|
|
if(!folder){
|
||
|
|
alert('No directory name provided !');
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
url: tinyMCEPopup.getWindowArg('plugin_url')+'/libs/ajax.php?addDirectory=1&dir='+dir+'&folder='+folder,
|
||
|
|
type: 'GET',
|
||
|
|
dataType: 'text json',
|
||
|
|
success:function(data){
|
||
|
|
$("#dirAddSuccess").show("slide").delay(2000).hide("slide");
|
||
|
|
ImgManagerDialog.populateDirsAfterUpdate();
|
||
|
|
$("#newFolderName").val("");
|
||
|
|
},
|
||
|
|
error:function(){
|
||
|
|
alert("Error eccured. Please refresh site and try again");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
getImageInformations: function(imgUrl){
|
||
|
|
|
||
|
|
var return_data = null;
|
||
|
|
$.ajax({
|
||
|
|
async: false,
|
||
|
|
url: tinyMCEPopup.getWindowArg('plugin_url')+'/libs/ajax.php?getImageInformation=1&url='+imgUrl,
|
||
|
|
type: 'GET',
|
||
|
|
dataType: 'text json',
|
||
|
|
success:function(data){
|
||
|
|
return_data = data;
|
||
|
|
},
|
||
|
|
error:function(){
|
||
|
|
alert("Error eccured. Please refresh site and try again!");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return return_data;
|
||
|
|
},
|
||
|
|
insertImageDialog: function(imgUrl){
|
||
|
|
var modal = $('#imageInserModal');
|
||
|
|
modal.find("#imgThumb").attr("src",imgUrl);
|
||
|
|
|
||
|
|
var data = this.getImageInformations(imgUrl);
|
||
|
|
|
||
|
|
modal.find("#imgAlt").val(data.name);
|
||
|
|
modal.find("#imgWidth").val(data.width);
|
||
|
|
modal.find("#imgHeight").val(data.height);
|
||
|
|
modal.find("#imgOrigWidth").val(data.width);
|
||
|
|
modal.find("#imgOrigHeight").val(data.height);
|
||
|
|
modal.find("#imgWebUrl").val(data.web_base_url);
|
||
|
|
modal.modal('show');
|
||
|
|
|
||
|
|
},
|
||
|
|
cropImage: function(imgUrl){
|
||
|
|
var modal = $('#imageCropModal');
|
||
|
|
modal.find("#cropImgThubContainer").html("").append($("<img>",{"src":"","id":"imgCrop"}));
|
||
|
|
var data = this.getImageInformations(imgUrl);
|
||
|
|
this.cropedImageData = data;
|
||
|
|
|
||
|
|
var this_boxHeight = 400;
|
||
|
|
var this_boxWidth = 460;
|
||
|
|
|
||
|
|
if(data.height > data.width){
|
||
|
|
modal.find("#cropImgThubContainer").removeClass("span6").addClass("span4").attr("style","margin-left:130px;");
|
||
|
|
modal.attr("style","min-height:580px;");
|
||
|
|
this_boxHeight = 430;
|
||
|
|
this_boxWidth = 450;
|
||
|
|
|
||
|
|
}else{
|
||
|
|
modal.find("#cropImgThubContainer").removeClass("span4").addClass("span6").attr("style","");
|
||
|
|
modal.attr("style","");
|
||
|
|
}
|
||
|
|
modal.find("#imgCrop").attr("src",imgUrl).Jcrop({
|
||
|
|
boxWidth: this_boxWidth,
|
||
|
|
boxHeight: this_boxHeight,
|
||
|
|
onSelect: Helppers.jCropUpdateCoords
|
||
|
|
});
|
||
|
|
modal.modal('show');
|
||
|
|
|
||
|
|
},
|
||
|
|
cropAndSave: function(overwrite){
|
||
|
|
|
||
|
|
if(Helppers.jCropCheckCoords()){
|
||
|
|
$.ajax({
|
||
|
|
async: false,
|
||
|
|
url: tinyMCEPopup.getWindowArg('plugin_url')+'/libs/ajax.php?cropImg=1',
|
||
|
|
type: 'POST',
|
||
|
|
data:{
|
||
|
|
imgData: ImgManagerDialog.cropedImageData,
|
||
|
|
overwrite: overwrite,
|
||
|
|
cW: $("#w").val(),
|
||
|
|
cH: $("#h").val(),
|
||
|
|
cX: $("#x").val(),
|
||
|
|
cY: $("#y").val()
|
||
|
|
},
|
||
|
|
dataType: 'text json',
|
||
|
|
success:function(data){
|
||
|
|
ImgManagerDialog.openDirectory(null, null);
|
||
|
|
$('#imageCropModal').modal('hide');
|
||
|
|
},
|
||
|
|
error:function(){
|
||
|
|
alert("Error eccured. Please refresh site and try again!");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
initImageUpload : function(){
|
||
|
|
if (tinymce.isIE){
|
||
|
|
$('#dropbox').hide();
|
||
|
|
$('#uploadify').show();
|
||
|
|
}else{
|
||
|
|
$('#dropbox').html('<span class=\'message\'><h4>Drop images here to upload.</h4></span>');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
tinyMCEPopup.onInit.add(ImgManagerDialog.init, ImgManagerDialog);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
var Helppers = {
|
||
|
|
init: function(){
|
||
|
|
|
||
|
|
},
|
||
|
|
populateFoldersAndImages: function(data, dirName, parentDirName){
|
||
|
|
if(data){
|
||
|
|
//Empty all containers
|
||
|
|
$("#directoriesContainer").html("");
|
||
|
|
$("#filesContainer").html("");
|
||
|
|
//$("#hFilesContainer").html("");
|
||
|
|
|
||
|
|
//Populate directories
|
||
|
|
|
||
|
|
var dir_ul = $("<ul>", {"class": "thumbnails"});
|
||
|
|
if(parentDirName || dirName){
|
||
|
|
dir_ul.append(Helppers.getFolderHtml(dirName,parentDirName,true));
|
||
|
|
}
|
||
|
|
if(data.directories){
|
||
|
|
$.each(data.directories,function(key,dir){
|
||
|
|
dir_ul.append(Helppers.getFolderHtml(dir,dirName));
|
||
|
|
});
|
||
|
|
}
|
||
|
|
$("#directoriesContainer").append(dir_ul);
|
||
|
|
|
||
|
|
|
||
|
|
//Populate images
|
||
|
|
var files_ul = $("<ul>", {"class": "thumbnails"});
|
||
|
|
if(data.files){
|
||
|
|
$.each(data.files,function(key,fileName){
|
||
|
|
var fileUrl = data.base_url+"/"+fileName;
|
||
|
|
if(dirName && dirName != "null"){
|
||
|
|
fileUrl = data.base_url+"/"+dirName+"/"+fileName;
|
||
|
|
}
|
||
|
|
files_ul.append(Helppers.getImageHtml(fileUrl));
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
$("#filesContainer").append(files_ul);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
getImageHtml: function(fileName){
|
||
|
|
var li = $("<li>", {"class": "span2","style":"min-width:130px;min-height:120px;"});
|
||
|
|
var divThumb = $("<div>", {"class": "thumbnail" ,"style":"width:130px;height:120px;"});
|
||
|
|
var img = $("<img>", {"src": fileName,"alt": "","height":"80"});
|
||
|
|
var divActions = $("<div>", {"class": "btn-group caption"});
|
||
|
|
var actionA = $("<a>",{"class":"btn dropdown-toggle","data-toggle":"dropdown","href":"#"}).html("Action").append($("<span>",{"class":"caret"}));
|
||
|
|
var ulAction = $("<ul>",{"class":"dropdown-menu"});
|
||
|
|
ulAction.append($("<li>").append($("<a>").html('<i class="icon-play-circle"></i> Insert').click(function(){
|
||
|
|
ImgManagerDialog.insertImageDialog(fileName);
|
||
|
|
})));
|
||
|
|
ulAction.append($("<li>").append($("<a>").html('<i class="icon-edit"></i> Crop').click(function(){
|
||
|
|
ImgManagerDialog.cropImage(fileName);
|
||
|
|
})));
|
||
|
|
ulAction.append($("<li>").append($("<a>").html('<i class="icon-trash"></i> Delete').click(function(){
|
||
|
|
if(confirm("Are you sure you want to delete file ? ")){
|
||
|
|
$.ajax({
|
||
|
|
url: tinyMCEPopup.getWindowArg('plugin_url')+'/libs/ajax.php?deleteFile=1&file='+fileName,
|
||
|
|
type: 'GET',
|
||
|
|
dataType: 'text json',
|
||
|
|
success:function(){
|
||
|
|
li.remove();
|
||
|
|
},
|
||
|
|
error:function(){
|
||
|
|
alert("Error eccured. Please refresh site and try again");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})));
|
||
|
|
|
||
|
|
divActions.append(actionA);
|
||
|
|
divActions.append(ulAction);
|
||
|
|
divThumb.append(img);
|
||
|
|
divThumb.append(divActions);
|
||
|
|
li.append(divThumb);
|
||
|
|
return li;
|
||
|
|
},
|
||
|
|
getFolderHtml: function(dirName,parentDirName,back){
|
||
|
|
var li = $("<li>", {"class": "span2","style":"min-width:130px;min-height:150px;"});
|
||
|
|
var divThumb = $("<div>", {"class": "thumbnail","style":"width:130px;height:150px;"});
|
||
|
|
|
||
|
|
var img = $("<img>", {"src": "img/folder.png","alt": "","class": "cursor","height":"80"}).click(function(){ImgManagerDialog.openDirectory(dirName,parentDirName)});
|
||
|
|
if(back){
|
||
|
|
img = $("<img>", {"src": "img/back.png","alt": "","class": "cursor","height":"80"}).click(function(){ImgManagerDialog.openDirectory(parentDirName,"../")});
|
||
|
|
}
|
||
|
|
|
||
|
|
var divActions = $("<div>", {"class": "caption"});
|
||
|
|
|
||
|
|
if(back){
|
||
|
|
divActions.append($("<p>").append($("<a>", {"class": "btn"}).html("Back").click(function(){ImgManagerDialog.openDirectory(parentDirName,"../")}) ));
|
||
|
|
}else{
|
||
|
|
divActions.append( $("<p>").html(dirName) );
|
||
|
|
divActions.append( $("<p>").append($("<a>", {"class": "btn btn-info"}).html('<i class="icon-trash icon-white"></i> Delete').click(function(){
|
||
|
|
if(confirm("Are you sure you want to delete folder and it's content ? ")){
|
||
|
|
var dir = dirName;
|
||
|
|
if(parentDirName){
|
||
|
|
dir = parentDirName+"/"+dirName;
|
||
|
|
}
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
url: tinyMCEPopup.getWindowArg('plugin_url')+'/libs/ajax.php?deleteFolder=1&folder='+dir,
|
||
|
|
type: 'GET',
|
||
|
|
dataType: 'text json',
|
||
|
|
success:function(){
|
||
|
|
li.remove();
|
||
|
|
ImgManagerDialog.populateDirsAfterUpdate();
|
||
|
|
},
|
||
|
|
error:function(){
|
||
|
|
alert("Error eccured. Please refresh site and try again");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})));
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
divThumb.append(img);
|
||
|
|
divThumb.append(divActions);
|
||
|
|
li.append(divThumb);
|
||
|
|
return li;
|
||
|
|
},
|
||
|
|
getParentDir: function(parentDirName){
|
||
|
|
if(parentDirName){
|
||
|
|
if(parentDirName.split("/").length == 1 || parentDirName == "../"){
|
||
|
|
parentDirName = null;
|
||
|
|
}else{
|
||
|
|
var split = parentDirName.split("/");
|
||
|
|
split.pop();
|
||
|
|
parentDirName = split.join("/");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return parentDirName;
|
||
|
|
},
|
||
|
|
toogleConstrains: function(item){
|
||
|
|
if($(item).attr("constrains") == 1){
|
||
|
|
$(item).attr("id","constrains_0");
|
||
|
|
$(item).attr("constrains","0");
|
||
|
|
}else{
|
||
|
|
$(item).attr("id","constrains_1");
|
||
|
|
$(item).attr("constrains","1");
|
||
|
|
}
|
||
|
|
},
|
||
|
|
checkConstrains: function(changed)
|
||
|
|
{
|
||
|
|
var dialog = $("#imageInserModal");
|
||
|
|
var constrains = dialog.find(".constrains");
|
||
|
|
if(constrains.attr("constrains") == 1)
|
||
|
|
{
|
||
|
|
|
||
|
|
var orginal_width = dialog.find("#imgOrigWidth").val();
|
||
|
|
var orginal_height = dialog.find("#imgOrigHeight").val();
|
||
|
|
|
||
|
|
var widthObj = dialog.find("#imgWidth");
|
||
|
|
var heightObj = dialog.find("#imgHeight");
|
||
|
|
|
||
|
|
var width = parseInt(widthObj.val());
|
||
|
|
var height = parseInt(heightObj.val());
|
||
|
|
|
||
|
|
if(orginal_width > 0 && orginal_height > 0)
|
||
|
|
{
|
||
|
|
if(changed == 'width' && width > 0) {
|
||
|
|
heightObj.val( parseInt((width/orginal_width)*orginal_height) );
|
||
|
|
}
|
||
|
|
|
||
|
|
if(changed == 'height' && height > 0) {
|
||
|
|
widthObj.val( parseInt((height/orginal_height)*orginal_width) );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
jCropUpdateCoords: function(c){
|
||
|
|
jQuery('#x').val(c.x);
|
||
|
|
jQuery('#y').val(c.y);
|
||
|
|
jQuery('#w').val(c.w);
|
||
|
|
jQuery('#h').val(c.h);
|
||
|
|
},
|
||
|
|
jCropCheckCoords: function(){
|
||
|
|
if (parseInt(jQuery('#w').val())>0) return true;
|
||
|
|
alert('Please select a crop region.');
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
|