image manager optimization, i18n
This commit is contained in:
lealife
1
public/album/css/style-min.css
vendored
Normal file
1
public/album/css/style-min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
#drop,#imageList li,#upload{position:relative}#imageMask,#upload-msg{position:absolute;top:0}*{font-family:'Open Sans','Helvetica Neue',Arial,'Hiragino Sans GB','Microsoft YaHei','WenQuanYi Micro Hei',sans-serif}#drop{width:99%;min-height:260px;border:1px dotted #000;z-index:2;text-align:center}#drop.in{border:2px solid #000}#drop a{left:33%;top:105px;z-index:15;position:absolute}#drop input{display:none}#upload-msg{list-style-type:none;padding-left:0;margin-left:0;right:10px;width:300px;max-height:240px;overflow:auto;z-index:3}#imageList li,#preview li,.md{overflow:hidden}.tab-pane{padding:10px}#paginationContainer{text-align:right}#imageList{margin:10px 0 0;padding:0;height:196px}#imageList li{display:inline-block;float:left;padding:0;margin:0 3px 3px 0;height:90px;width:122px;border:1px solid #eee}#imageList li .a-img{line-height:80px;display:block;text-align:center}#imageList li:hover{border:1px solid #FF7300}#imageList li.selected{border:2px solid #FF7300}#imageList li img{max-width:100%;vertical-align:middle}#imageList li .tools{position:absolute;bottom:0;left:0;right:0;background-color:#fff;padding-right:2px;text-align:right;opacity:.7}.tools .file-title{width:100px;height:20px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-align:left}#imageList li:hover .tools{display:block;opacity:.9}.alert{padding:5px;margin-bottom:3px}#preview{margin:3px 0 3px 10px;padding:5px 0 0;border-top:1px solid #eee}#preview li{position:relative;display:inline-block;float:left;border:1px solid #E6E5E3;background-color:#FFF;width:64px;height:64px;margin-right:10px;line-height:64px;text-align:center;color:#E1E1E1;font-size:28px;cursor:pointer}#preview li:hover{border:1px solid #FF7300}#preview li.selected{border:2px solid #FF7300}#preview li .tools{position:absolute;bottom:0;right:0;left:0;height:15px;line-height:15px;font-size:14px;text-align:right}#preview li .tools a{color:red}#imagePage{position:relative}#imageMask{background:#fff;left:0;right:0;bottom:20px;font-size:18px;text-align:center;display:none;z-index:2}#previewAttrs .form-control{width:auto}#previewAttrs label{font-weight:400}@media screen and (max-width:700px){#previewAttrs{display:none}#drop{min-height:initial;padding:10px 0}#drop a{position:initial;margin:auto}#url form{margin:0!important}.form-inline .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}.form-inline .form-control{width:auto;display:inline-block}#preview li:nth-child(10),#preview li:nth-child(3n),#preview li:nth-child(4n),#preview li:nth-child(5),#preview li:nth-child(7){display:none}#imageList li{width:90px}}#imageUrlForm{min-height:260px;text-align:center;padding-top:100px}.md{position:relative;height:350px}.md #previewAttrs{display:none}.md #preview{border:none;position:absolute;bottom:0;left:0;z-index:3}.md #drop{min-height:250px}#albumsForUpload{width:150px}
|
||||
243
public/album/css/style.css
Normal file
243
public/album/css/style.css
Normal file
@ -0,0 +1,243 @@
|
||||
* {
|
||||
font-family: 'Open Sans', 'Helvetica Neue', Arial, 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
|
||||
}
|
||||
/* upload */
|
||||
#upload {
|
||||
position: relative;
|
||||
}
|
||||
#drop {
|
||||
position: relative;
|
||||
width: 99%;
|
||||
min-height: 260px;
|
||||
border: 1px dotted #000000;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
}
|
||||
#drop.in {
|
||||
border: 2px solid #000000;
|
||||
}
|
||||
#drop a {
|
||||
left: 33%;
|
||||
top: 105px;
|
||||
z-index: 15;
|
||||
position: absolute;
|
||||
}
|
||||
#drop input {
|
||||
display: none;
|
||||
}
|
||||
#upload-msg {
|
||||
list-style-type: none;
|
||||
padding-left: 0px;
|
||||
margin-left: 0px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 10px;
|
||||
width: 300px;
|
||||
max-height: 240px;
|
||||
overflow: auto;
|
||||
z-index: 3;
|
||||
}
|
||||
/**/
|
||||
.tab-pane {
|
||||
padding: 10px;
|
||||
}
|
||||
#paginationContainer {
|
||||
text-align: right;
|
||||
}
|
||||
#imageList {
|
||||
margin: 0;
|
||||
margin-top: 10px;
|
||||
padding: 0;
|
||||
height: 196px;
|
||||
}
|
||||
#imageList li {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
padding: 0;
|
||||
margin: 0 3px 3px 0;
|
||||
position: relative;
|
||||
height: 90px;
|
||||
width: 122px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
#imageList li .a-img {
|
||||
line-height: 80px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
#imageList li:hover {
|
||||
border: 1px solid #FF7300;
|
||||
}
|
||||
#imageList li.selected {
|
||||
border: solid 2px #FF7300;
|
||||
}
|
||||
#imageList li img {
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#imageList li .tools {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
padding-right: 2px;
|
||||
text-align: right;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.tools .file-title {
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
}
|
||||
#imageList li:hover .tools {
|
||||
display: block;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.alert {
|
||||
padding: 5px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.tabs {
|
||||
/*height: 350px;*/
|
||||
}
|
||||
#preview {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-left: 10px;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 3px;
|
||||
padding-top: 5px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
#preview li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
border: solid 1px #E6E5E3;
|
||||
background-color: #FFF;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
overflow: hidden;
|
||||
margin-right: 10px;
|
||||
line-height: 64px;
|
||||
text-align: center;
|
||||
/*font-style: italic;*/
|
||||
color: #E1E1E1;
|
||||
font-size: 28px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#preview li:hover {
|
||||
border: 1px solid #FF7300;
|
||||
}
|
||||
#preview li.selected {
|
||||
border: solid 2px #FF7300;
|
||||
}
|
||||
#preview li .tools {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 15px;
|
||||
line-height: 15px;
|
||||
font-size: 14px;
|
||||
text-align: right;
|
||||
}
|
||||
#preview li .tools a {
|
||||
color: red;
|
||||
}
|
||||
/**/
|
||||
#imagePage {
|
||||
position: relative;
|
||||
}
|
||||
#imageMask {
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 20px;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
display: none;
|
||||
z-index: 2;
|
||||
}
|
||||
/**/
|
||||
#previewAttrs .form-control {
|
||||
width: auto;
|
||||
}
|
||||
#previewAttrs label {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@media screen and (max-width:700px) {
|
||||
#previewAttrs {
|
||||
display: none;
|
||||
}
|
||||
#drop {
|
||||
min-height: initial;
|
||||
padding: 10px 0;
|
||||
}
|
||||
#drop a {
|
||||
position: initial;
|
||||
margin: auto;
|
||||
}
|
||||
#url form {
|
||||
margin: 0 !important;
|
||||
margin: auto;
|
||||
}
|
||||
.form-inline .form-group {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.form-inline .form-control {
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
}
|
||||
#preview li:nth-child(3n),
|
||||
#preview li:nth-child(4n),
|
||||
#preview li:nth-child(5),
|
||||
#preview li:nth-child(7),
|
||||
#preview li:nth-child(10)
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
#imageList li {
|
||||
width: 90px;
|
||||
}
|
||||
}
|
||||
#imageUrlForm {
|
||||
min-height: 260px;
|
||||
text-align: center;
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
.md {
|
||||
position: relative;
|
||||
height: 350px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.md #previewAttrs {
|
||||
display: none;
|
||||
|
||||
}
|
||||
.md #preview {
|
||||
border: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.md #drop {
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
#albumsForUpload {
|
||||
width: 150px;
|
||||
}
|
||||
BIN
public/album/images/ajax-loader.gif
Normal file
BIN
public/album/images/ajax-loader.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 723 B |
7
public/album/js/main.all.js
Normal file
7
public/album/js/main.all.js
Normal file
File diff suppressed because one or more lines are too long
865
public/album/js/main.js
Normal file
865
public/album/js/main.js
Normal file
@ -0,0 +1,865 @@
|
||||
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 = '<option value="' + ret.AlbumId + '">' + ret.Name + '</option>';
|
||||
$("#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 = '<option value="' + each.AlbumId + '">' + each.Name+ '</option>';
|
||||
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 + "/file/outputImage?fileId=" + each.FileId;
|
||||
}
|
||||
// log(src);
|
||||
if(selectedMap[src]) {
|
||||
classes = 'class="selected"';
|
||||
}
|
||||
html += '<li ' + classes + '>';
|
||||
html += '<a title="" href="javascript:;" class="a-img"><img alt="" src="' + src + '" data-original="' + src + '" ></a>';
|
||||
// html += '<div class="tools"><a href="javascript:;" class="del" data-id="' + each.FileId + '"><span class="fa fa-trash"></span></a></div>';
|
||||
html += '<div class="tools clearfix" data-id="' + each.FileId + '"><div class="file-title pull-left">' + each.Title + '</div><div class="pull-right"><a href="javascript:;" class="del" data-id="' + each.FileId + '"><span class="fa fa-trash"></span></a></div></div>';
|
||||
html += "</li>";
|
||||
}
|
||||
|
||||
// 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("<li>" + i + "</li>");
|
||||
self.previewO.append("<li>?</li>");
|
||||
}
|
||||
},
|
||||
|
||||
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('<img ' + attrs + ' src="' + src + '" width="60"/><div class="tools"><a title="' + getMsg('click to remove this image') + '" href="javascript:;" class="del"><span class="fa fa-trash"></span></a></div>');
|
||||
}
|
||||
|
||||
// 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 + "/file/outputImage?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('<input type="text" value="' + fileTitle + '" />');
|
||||
|
||||
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 = $('<li><div class="alert alert-danger"><a class="close" data-dismiss="alert">×</a></div></li>');
|
||||
tpl.find('div').append('<b>Warning:</b> ' + data.files[0].name + ' <small>[<i>' + formatFileSize(data.files[0].size) + '</i>] is bigger than ' + maxFileSize + 'M</small> ');
|
||||
tpl.appendTo(ul);
|
||||
return;
|
||||
}
|
||||
|
||||
var tpl = $('<li><div class="alert alert-info"><img class="loader" src="/public/album/images/ajax-loader.gif"> <a class="close" data-dismiss="alert">×</a></div></li>');
|
||||
// Append the file name and file size
|
||||
tpl.find('div').append(data.files[0].name + ' <small>[<i>' + formatFileSize(data.files[0].size) + '</i>]</small>');
|
||||
|
||||
// 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 = $('<li><div class="alert alert-danger"><a class="close" data-dismiss="alert">×</a></div></li>');
|
||||
tpl.find('div').append('<b>' + getMsg('Error') + ':</b> ' + data.files[0].name + ' <small>[<i>' + formatFileSize(data.files[0].size) + '</i>]</small> ' + 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 = $('<li><div class="alert alert-danger"><a class="close" data-dismiss="alert">×</a></div></li>');
|
||||
tpl.find('div').append('<b>Error:</b> ' + data.files[0].name + ' <small>[<i>' + formatFileSize(data.files[0].size) + '</i>]</small> ' + 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 "";
|
||||
}
|
||||
Reference in New Issue
Block a user