function log(o) {
// console.log(o);
}
function retIsOk(ret) {
if(ret && typeof ret == "object" && ret.Ok == 1) {
return true;
}
return false;
}
var urlPrefix = UrlPrefix;
var getMsg = parent.getMsg;
if (!getMsg) {
getMsg = function(msg) {
return msg;
};
}
// load image
function getImageSize(url, callback) {
var img = document.createElement('img');
function done(width, height) {
img.parentNode.removeChild(img);
callback({width: width, height: height});
}
img.onload = function() {
done(img.clientWidth, img.clientHeight);
};
img.onerror = function() {
done();
};
img.src = url;
var style = img.style;
style.visibility = 'hidden';
style.position = 'fixed';
style.bottom = style.left = 0;
style.width = style.height = 'auto';
document.body.appendChild(img);
}
var o = {
maxSelected: G.maxSelected,
selectedZoneO:$("#preview"),
previewO: $("#preview"),
selectedImages:[], // selected urls
imageAttrs: {}, // src => {width, height, title}
pageNum: 1,
pagination: function(count) {
var self = this;
$(".pagination").pagination(count, {
items_per_page: G.perPageItems,
prev_text: getMsg('Prev'),
next_text: getMsg('Next'),
callback: function(pageNum) {
self.pageNum = pageNum+1;
self.renderImages($("#albumsForList").val(), self.pageNum, false);
}
});
},
showMsg: function(msg) {
$("#msg").html(msg).css("display", "inline");
setTimeout(function() {
$("#msg").fadeOut();
}, 2000);
},
pageAddAlbum: function(ret) {
var html = '' + ret.Name + ' ';
$("#albumsForUpload").append(html).val(ret.AlbumId);
$("#albumsForList").append(html);
},
pageUpdateAlbum: function(albumId, albumName) {
$('option[value="' + albumId + '"]').html(albumName);
},
// add, delete, update album
processAlbum: function() {
var self = this;
var isAddAlbum = true;
var curAlbum = "";
function toggleAddAlbum() {
if($("#addOrUpdateAlbumForm").is(":hidden")) {
$("#addOrUpdateAlbumForm").show();
$("#albumSelect").hide();
} else {
$("#addOrUpdateAlbumForm").hide();
$("#albumSelect").show();
}
}
// rename
$("#renameAlbumBtn").click(function(){
curAlbum = $("#albumsForUpload").val();
if(!curAlbum) {
alert(getMsg("Cannot rename default album"));
return;
}
toggleAddAlbum();
$("#addOrUpdateAlbumBtn").html(getMsg("Rename Album"));
$("#albumName").val($("#albumsForUpload option:selected").html()).focus();
isAddAlbum = false;
});
// add album
$("#addAlbumBtn").click(function() {
toggleAddAlbum();
$("#addOrUpdateAlbumBtn").html(getMsg("Add Album"));
$("#albumName").val("").focus();
isAddAlbum = true;
});
$("#cancelAlbumBtn").click(function() {
toggleAddAlbum();
});
// add or update album
$("#addOrUpdateAlbumBtn").click(function() {
var albumName = $("#albumName").val();
if(!albumName) {
$("#albumName").focus();
return;
}
if(isAddAlbum) {
$.get("/album/addAlbum", {name: albumName}, function(ret) {
if(typeof ret == "object" && ret.AlbumId != "") {
$("#albumName").val("");
self.showMsg(getMsg("Add Success!"));
self.pageAddAlbum(ret);
setTimeout(function() {
toggleAddAlbum();
}, 200);
} else {
alert(getMsg("error"));
}
});
} else {
$.get("/album/updateAlbum", {albumId: curAlbum, name: albumName}, function(ret) {
if(typeof ret == "boolean" && ret) {
$("#albumName").val("");
self.showMsg(getMsg("Rename Success!"));
self.pageUpdateAlbum(curAlbum, albumName);
setTimeout(function() {
toggleAddAlbum();
}, 200);
} else {
alert(getMsg("error!"));
}
});
}
})
// delete album
$("#deleteAlbumBtn").click(function() {
var albumId = $("#albumsForUpload").val();
if(!albumId) {
alert(getMsg("Cannot delete default album"));
return;
}
$.get("/album/deleteAlbum", {albumId: albumId}, function(ret) {
if(typeof ret == "object" && ret.Ok == true) {
self.showMsg(getMsg("Delete Success!"));
// delete this album from select
$("#albumsForUpload option[value='" + albumId + "']").remove();
// if the albumsForList has select this album, it must refresh list after delete it;
if($("#albumsForList").val() == albumId) {
self.needRefresh = true;
}
$("#albumsForList option[value='" + albumId + "']").remove();
} else {
alert(getMsg("This album has images, please delete it's images at first."));
}
});
});
},
renderAlbums: function() {
var self = this;
$.get("/album/getAlbums", function(ret) {
if(!ret) return;
var html = "";
for(var i in ret) {
var each = ret[i];
var option = '' + each.Name+ ' ';
html += option;
}
$("#albumsForUpload").append(html);
$("#albumsForList").append(html);
var albumId = $("#albumsForList").val();
self.renderImages(albumId, 1, true);
});
},
imageMaskO: $("#imageMask"),
noImagesO: $("#noImages"),
loadingO: $("#loading"),
loadingStart: function() {
if(this.imageMaskO.is(":hidden")) {
this.imageMaskO.css("opacity", 0.8).show();
}
this.noImagesO.hide();
this.loadingO.show();
},
loadingEnd: function() {
this.imageMaskO.hide();
},
noImages: function () {
this.imageMaskO.show().css("opacity", 1);
this.noImagesO.show();
this.loadingO.hide();
},
search: function() {
var self = this;
var t1 = 1;
$("#key").on("keyup", function() {
var t2 = ++t1;
var key = $(this).val();
var albumId = $("#albumsForList").val();
self.renderImages(albumId, 1, true, key, function(){
return t1 == t2;
});
});
},
renderImages: function(albumId, page, needRenderPagination, key, needRender) {
var self = this;
if(!page) {
page = 1;
}
self.loadingStart();
$.get("/file/getImages", {albumId: albumId, page: page, key: key}, function(ret) {
if(!ret || !ret.Count) {
self.noImages();
return;
}
self.loadingEnd();
var datas = ret.List;
var selectedMap = {};
for(var i in self.selectedImages) {
var src = self.selectedImages[i]; // src include G.imageSrcPrefix
selectedMap[src] = true;
}
// log(self.selectedImages);
var html = "";
for(var i in datas){
var each = datas[i];
var classes = "";
// life edit
// 之前的
if(each.Path != "" && each.Path[0] == "/") {
each.Path = each.Path.substr(1);
}
if(each.Path != "" && each.Path.substr(0, 7) == "upload/") {
var src = urlPrefix + "/" + each.Path;
} else {
var src = urlPrefix + "/api/file/getImage?fileId=" + each.FileId;
}
// log(src);
if(selectedMap[src]) {
classes = 'class="selected"';
}
html += '
';
html += ' ';
// html += '';
html += '';
html += " ";
}
// var html = $("#tImage").render(datas);
$("#imageList").html(html);
if(needRenderPagination) {
self.pagination(ret.Count);
}
// $("#imageList img").lazyload({effect : "fadeIn"});
// $("#imageList img").lazyload();
});
},
// 初始化已选择的图片区域
initSelectedZones: function() {
var self = this;
num = this.maxSelected;
self.previewO.html("");
for(var i = 1; i <= num; ++i) {
// self.previewO.append("" + i + " ");
self.previewO.append("? ");
}
},
reRenderSelectedImages: function(isRemove, addSrc) {
var self = this;
var lis = this.selectedZoneO.find("li");
var size = this.selectedImages.length-1;
for(var i = 0; i < this.maxSelected; ++i) {
var target = lis.eq(i);
if(i > size) {
target.html('?');
} else {
src = this.selectedImages[i];
var data = self.imageAttrs[src];
var attrs = "";
if(data) {
if(data.width) attrs += ' data-width="' + data.width + '"';
if(data.height) attrs += ' data-height="' + data.height + '"';
if(data.title) attrs += ' data-title="' + data.title + '"';
}
target.html(' ');
}
// remove selected
if(isRemove) {
target.removeClass("selected");
} else {
// is add
// trigger click and set attrs
if(addSrc == src) {
target.click();
}
}
}
},
removeSelectedImage: function($li) {
var self = this;
var src = $li.find("img").attr('src');
for(var i in this.selectedImages) {
if(this.selectedImages[i] == src) {
this.selectedImages.splice(i, 1)
}
}
this.reRenderSelectedImages(true);
// clear attrs and disable it
self.clearAttrs();
},
addSelectedImage: function($li) {
if(this.maxSelected > 1 && this.maxSelected <= this.selectedImages.length) {
return false;
}
// life 为了图片安全
if(typeof $li == "object") {
var src = $li.find("img").attr('src');
} else {
// 也有可能来自url
if($li.indexOf("http://") != -1 || $li.indexOf("https://") != -1) {
src = $li;
} else {
// 来自内部
src = urlPrefix + "/api/file/getImage?fileId=" + $li;
}
}
// 如果只允许选1个
if(this.maxSelected == 1) {
// 先把其它的去掉
$("#imageList li").removeClass("selected");
this.selectedImages = [src];
} else {
this.selectedImages.push(src);
}
this.reRenderSelectedImages(false, src);
return true;
},
initDataFromTinymce: function() {
var self = this;
var datas = top.LEAUI_DATAS;
var lastSrc = "";
if(datas && datas.length > 0) {
for(var i in datas) {
var data = datas[i];
data.constrain = true;
lastSrc = data.src;
self.selectedImages.push(data.src);
self.imageAttrs[data.src] = data;
}
self.reRenderSelectedImages(false, lastSrc);
}
},
init: function() {
var self = this;
self.processAlbum();
$("#albumsForList").change(function() {
var albumId = $(this).val();
self.renderImages(albumId, 1, true);
});
$("#imageList").on("click", 'li', function() {
if($(this).hasClass("selected")) {
$(this).removeClass("selected");
self.removeSelectedImage($(this));
} else {
if(self.addSelectedImage($(this))){
$(this).addClass("selected");
}
}
});
// delete file
$("#imageList").on("click", '.del', function(e) {
var t = this;
e.stopPropagation();
if(confirm(getMsg("Are you sure to delete this image ?"))) {
var fileId = $(this).data('id');
$.get("/file/deleteImage", {fileId: fileId}, function(ret) {
if(ret) {
var $li = $(t).closest('li');
if($li.hasClass("selected")) {
self.removeSelectedImage($li);
}
$(t).closest('li').remove();
}
});
}
});
// edit file title
$("#imageList").on("click", '.file-title', function(e) {
var p = this;
var t = this;
e.stopPropagation();
if($(this).children().eq(0).is("input")){
return;
}
var fileId = $(p).parent().data('id');
var fileTitle = $(this).text();
$(this).html(' ');
var $input = $(this).find("input");
$input.focus();
$input.keydown(function(e){
if(e.keyCode==13){
$(this).trigger("blur");
}
});
$input.blur(function() {
var title = $(this).val();
if(!title) {
title = fileTitle;
} else {
$.post("/file/updateImageTitle", {fileId: fileId, title: title});
}
$(p).html(title);
});
});
// remove preview
$("#preview").on("click", '.del', function(e) {
e.stopPropagation();
var $li = $(this).closest("li");
var src = $li.find("img").attr("src");
self.removeSelectedImage($li);
// 在当前的imagesList下看是否有
$("#imageList img").each(function() {
var src2 = $(this).attr('src');
if(src == src2) {
$(this).parent().parent().removeClass("selected");
}
});
});
//
$("#goAddImageBtn").click(function() {
$("#albumsForUpload").val($("#albumsForList").val());
$('#myTab li:eq(1) a').tab('show');
});
// toggle tab
// refresh
$('#myTab a').on('shown.bs.tab', function(e) {
e.preventDefault()
$(this).tab('show');
var href = $(this).attr("href");
if(self.needRefresh && href == "#images") {
setTimeout(function(){
var albumId = $("#albumsForList").val();
var key = $("#key").val();
self.renderImages(albumId, self.pageNum, true, key);
}, 200);
self.needRefresh = false;
}
if(href == "#url") {
$("#imageUrl").focus();
}
});
$("#refresh").click(function() {
var albumId = $("#albumsForList").val();
var key = $("#key").val();
self.renderImages(albumId, self.pageNum, false, key);
});
// add url
$("#addImageUrlBtn").click(function(e) {
e.preventDefault();
var url = $.trim($("#imageUrl").val());
if(!url) {
$("#imageUrl").focus();
return;
}
getImageSize(url, function(ret) {
if(!ret.width || !ret.height){
$("#msgForUrl").show();
return;
}
$("#msgForUrl").hide();
$("#imageUrl").val("");
self.addSelectedImage(url);
});
});
// 设置属性
$("#preview").on("click", 'li', function() {
if($(this).hasClass("selected")) {
// $(this).removeClass("selected");
} else {
if($(this).find("img").length){
$("#preview li").removeClass("selected");
$(this).addClass("selected");
self.initAttr($(this));
}
}
});
$("#attrTitle, #attrWidth, #attrHeight").on("keyup", function(){
self.modifyAttr($(this));
});
$("#attrConstrain").on("click", function(){
self.modifyAttr($(this));
});
// file search
self.search();
self.initSelectedZones();
self.initDataFromTinymce();
self.renderAlbums();
//...
self.initUploader();
},
// 设置
curSrc: "",
curLi: null,
attrTitleO: $("#attrTitle"),
attrWidthO: $("#attrWidth"),
attrHeightO: $("#attrHeight"),
attrConstrainO: $("#attrConstrain"),
// clear attrs and disable it
clearAttrs: function() {
var self = this;
self.attrTitleO.val("").attr("disabled", true);
self.attrHeightO.val("").attr("disabled", true);
self.attrWidthO.val("").attr("disabled", true);
self.attrConstrainO.prop("checked", false).attr("disabled", true);
},
scale: function(isWidth) {
var self = this;
var autoScale = self.attrConstrainO.is(":checked");
var width = +self.attrWidthO.val();
var height = +self.attrHeightO.val();
if(isNaN(width) || isNaN(height)) {
return;
}
var curAttrs = self.getCurAttrs();
var preWidth = curAttrs.preWidth || curAttrs.width;
var preHeight = curAttrs.preHeight || curAttrs.height;
if(autoScale && preWidth && preHeight) {
if(isWidth) {
height = parseInt((width/preWidth) * preHeight);
self.attrHeightO.val(height);
} else {
width = parseInt((height/preHeight) * preWidth);
self.attrWidthO.val(width);
}
}
var ret = {width: width, height: height};
return ret;
},
getCurAttrs: function() {
var self = this;
return self.imageAttrs[self.curSrc];
},
setCurDataAttrs: function(attrs) {
var self = this;
var img = self.curLi.find("img");
img.attr("data-width", attrs.width);
img.attr("data-height", attrs.height);
img.attr("data-title", attrs.title);
self.imageAttrs[self.curSrc] = attrs;
},
// 修改属性
modifyAttr: function($target){
var self = this;
var id = $target.attr("id");
var val = $target.val();
var curAttrs = self.getCurAttrs();
if(!curAttrs) {
return;
}
switch(id) {
case "attrConstrain":
val = 0;
if($target.is(":checked")) {
val = 1;
}
curAttrs['constrain'] = val;
break;
case "attrTitle":
curAttrs['title'] = val;
break;
case "attrWidth":
$.extend(curAttrs, self.scale(true));
break;
case "attrHeight":
$.extend(curAttrs, self.scale(false));
break;
}
self.setCurDataAttrs(curAttrs);
},
// when click preview li
initAttr: function($li) {
var self = this;
if(typeof $li != "object") {
$li = $("#preview").find('img[src="' + $li + '"]').parent();
};
var src = $li.find("img").attr("src");
self.curSrc = src;
self.curLi = $li;
var attrs = self.imageAttrs[src];
function setAttr(attrs) {
attrs = attrs || {};
self.attrTitleO.val(attrs.title).attr("disabled", false);
self.attrWidthO.val(attrs.width).attr("disabled", false);
self.attrHeightO.val(attrs.height).attr("disabled", false);
self.attrConstrainO.attr("disabled", false);
if(attrs.constrain) {
self.attrConstrainO.prop('checked', true);
} else {
self.attrConstrainO.prop('checked', false);
}
self.setCurDataAttrs(attrs);
}
attrs = attrs || {};
if(!attrs || !attrs.width || !attrs.height) {
getImageSize(src, function(ret) {
ret.title = attrs.title || "";
ret.constrain = 1;
ret.preWidth = ret.width;
ret.preHeight = ret.height;
if(src != self.curSrc) {
self.imageAttrs[src] = ret;
// in case user click fast
self.setCurDataAttrs(attrs);
return;
}
// set attrs
setAttr(ret);
return;
});
} else {
setAttr(attrs);
}
},
needRefresh: false,
uploadRefreshImageList: function() {
var self = this;
// check albumId
var albumId = $("#albumsForList").val();
if(albumId == $("#albumsForUpload").val()){
self.needRefresh = true;
}
},
initUploader: function() {
var self = this;
var ul = $('#upload ul');
$('#drop a').click(function() {
// trigger to show file select
$(this).parent().find('input').click();
});
// Initialize the jQuery File Upload plugin
$('#upload').fileupload({
dataType: 'json',
pasteZone: '',
acceptFileTypes: /(\.|\/)(gif|jpg|jpeg|png|jpe)$/i,
// maxFileSize: 210000,
// This element will accept file drag/drop uploading
dropZone: $('#drop'),
formData: function(form) {
return [{name: 'albumId', value: $("#albumsForUpload").val()}]
},
/*
urlFunc: function() {
return 'server/index.php?action=file:uploadImage&album_id=' + $("#albumsForUpload").val();
},
*/
// This function is called when a file is added to the queue;
// either via the browse button, or via drag/drop:
add: function(e, data) {
// 文件大小限制
var size = data.files[0].size;
var maxFileSize = +parent.GlobalConfigs["uploadImageSize"] || 100;
if(typeof size == 'number' && size > 1024 * 1024 * maxFileSize) {
var tpl = $(' ');
tpl.find('div').append('Warning: ' + data.files[0].name + ' [' + formatFileSize(data.files[0].size) + ' ] is bigger than ' + maxFileSize + 'M ');
tpl.appendTo(ul);
return;
}
var tpl = $(' ');
// Append the file name and file size
tpl.find('div').append(data.files[0].name + ' [' + formatFileSize(data.files[0].size) + ' ] ');
// Add the HTML to the UL element
data.context = tpl.appendTo(ul);
// data.form[0].action += "&album_id=" + $("#albumsForUpload").val();
// Automatically upload the file once it is added to the queue
var jqXHR = data.submit();
},
done: function(e, data) {
if (data.result.Ok == true) {
data.context.remove();
// add image to preview
self.addSelectedImage(data.result.Id);
// reresh image list
self.uploadRefreshImageList();
} else {
data.context.empty();
var tpl = $(' ');
tpl.find('div').append('' + getMsg('Error') + ': ' + data.files[0].name + ' [' + formatFileSize(data.files[0].size) + ' ] ' + data.result.Msg);
data.context.append(tpl);
setTimeout((function(tpl) {
return function() {
tpl.remove();
}
})(tpl), 3000);
}
$("#upload-msg").scrollTop(1000);
},
fail: function(e, data) {
data.context.empty();
var tpl = $(' ');
tpl.find('div').append('Error: ' + data.files[0].name + ' [' + formatFileSize(data.files[0].size) + ' ] ' + data.errorThrown);
data.context.append(tpl);
$("#upload-msg").scrollTop(1000);
}
});
// Prevent the default action when a file is dropped on the window
$(document).on('drop dragover', function(e) {
e.preventDefault();
});
// Helper function that formats the file sizes
function formatFileSize(bytes) {
if (typeof bytes !== 'number') {
return '';
}
if (bytes >= 1000000000) {
return (bytes / 1000000000).toFixed(2) + ' GB';
}
if (bytes >= 1000000) {
return (bytes / 1000000).toFixed(2) + ' MB';
}
return (bytes / 1000).toFixed(2) + ' KB';
}
// drag css
$(document).bind('dragover', function (e) {
var dropZone = $('#drop'),
timeout = window.dropZoneTimeout;
if (!timeout) {
dropZone.addClass('in');
} else {
clearTimeout(timeout);
}
var found = false,
node = e.target;
do {
if (node === dropZone[0]) {
found = true;
break;
}
node = node.parentNode;
} while (node != null);
if (found) {
dropZone.addClass('hover');
} else {
dropZone.removeClass('hover');
}
window.dropZoneTimeout = setTimeout(function () {
window.dropZoneTimeout = null;
dropZone.removeClass('in hover');
}, 100);
});
}
}
$(function() {
o.init();
});
// 为md得到图片链接
function mdGetImgSrc() {
if(o.selectedImages && o.selectedImages.length) {
return o.selectedImages[0];
}
return "";
}