attachment feature #10
This commit is contained in:
life
134
public/js/app/attachment_upload.js
Normal file
134
public/js/app/attachment_upload.js
Normal file
@ -0,0 +1,134 @@
|
||||
// upload attachment
|
||||
// 依赖note
|
||||
var urlPrefix = window.location.protocol + "//" + window.location.host;
|
||||
define('attachment_upload', ['jquery.ui.widget', 'fileupload'], function(){
|
||||
// var editor = tinymce.activeEditor;
|
||||
// var dom = editor.dom;
|
||||
|
||||
var initUploader = function() {
|
||||
var $msg = $('#attachUploadMsg');
|
||||
|
||||
$('#dropAttach .btn-choose-file').click(function() {
|
||||
// trigger to show file select
|
||||
$(this).parent().find('input').click();
|
||||
});
|
||||
|
||||
// Initialize the jQuery File Upload plugin
|
||||
$('#uploadAttach').fileupload({
|
||||
dataType: 'json',
|
||||
maxFileSize: 210000,
|
||||
// This element will accept file drag/drop uploading
|
||||
dropZone: $('#dropAttach'),
|
||||
formData: function(form) {
|
||||
return [{name: 'noteId', value: Note.curNoteId}] // 传递笔记本过去
|
||||
},
|
||||
// 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 note = Note.getCurNote();
|
||||
if(!note || note.IsNew) {
|
||||
alert("This note hasn't saved, please save it firstly!")
|
||||
return;
|
||||
}
|
||||
var tpl = $('<div class="alert alert-info"><img class="loader" src="/tinymce/plugins/leaui_image/public/images/ajax-loader.gif"> <a class="close" data-dismiss="alert">×</a></div>');
|
||||
|
||||
// Append the file name and file size
|
||||
tpl.append(data.files[0].name + ' <small>[<i>' + formatFileSize(data.files[0].size) + '</i>]</small>');
|
||||
|
||||
// Add the HTML to the UL element
|
||||
tpl.appendTo($msg);
|
||||
data.context = $msg;
|
||||
|
||||
// Automatically upload the file once it is added to the queue
|
||||
var jqXHR;
|
||||
setTimeout(function() {
|
||||
jqXHR = data.submit();
|
||||
}, 0);
|
||||
},
|
||||
|
||||
done: function(e, data) {
|
||||
if (data.result.Ok == true) {
|
||||
data.context.remove();
|
||||
Attach.addAttach(data.result.Item);
|
||||
} else {
|
||||
var re = data.result;
|
||||
data.context.empty();
|
||||
var tpl = $('<div class="alert alert-danger"><a class="close" data-dismiss="alert">×</a></div>');
|
||||
tpl.append('<b>Error:</b> ' + data.files[0].name + ' <small>[<i>' + formatFileSize(data.files[0].size) + '</i>]</small> ' + data.result.Msg);
|
||||
data.context.html(tpl);
|
||||
setTimeout((function(tpl) {
|
||||
return function() {
|
||||
tpl.remove();
|
||||
}
|
||||
})(tpl), 3000);
|
||||
}
|
||||
$("#uploadAttachMsg").scrollTop(1000);
|
||||
},
|
||||
fail: function(e, data) {
|
||||
data.context.empty();
|
||||
var tpl = $('<div class="alert alert-danger"><a class="close" data-dismiss="alert">×</a></div>');
|
||||
tpl.append('<b>Error:</b> ' + data.files[0].name + ' <small>[<i>' + formatFileSize(data.files[0].size) + '</i>]</small> ' + data.errorThrown);
|
||||
data.context.html(tpl);
|
||||
setTimeout((function(tpl) {
|
||||
return function() {
|
||||
tpl.remove();
|
||||
}
|
||||
})(tpl), 3000);
|
||||
|
||||
$("#uploadAttachMsg").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 = $('#dropAttach'),
|
||||
timeout = window.dropZoneTimeout;
|
||||
if (!timeout) {
|
||||
dropZone.addClass('in');
|
||||
showUpload();
|
||||
} 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');
|
||||
hideUpload();
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
|
||||
initUploader();
|
||||
});
|
||||
@ -79,6 +79,10 @@ Note.getCurNote = function() {
|
||||
}
|
||||
return self.cache[self.curNoteId];
|
||||
}
|
||||
Note.getNote = function(noteId) {
|
||||
var self = this;
|
||||
return self.cache[noteId];
|
||||
}
|
||||
|
||||
// 每当有notebookId相应的note改变时都要重新清空之
|
||||
// 并设置该notebookId有值
|
||||
@ -441,6 +445,8 @@ Note.changeNote = function(selectNoteId, isShare, needSaveChanged) {
|
||||
Note.renderNoteReadOnly(cacheNote);
|
||||
}
|
||||
|
||||
Attach.renderNoteAttachNum(selectNoteId, true);
|
||||
|
||||
function setContent(ret) {
|
||||
Note.setNoteCache(ret, false);
|
||||
// 把其它信息也带上
|
||||
@ -704,6 +710,9 @@ Note.newNote = function(notebookId, isShare, fromUserId, isMarkdown) {
|
||||
// 添加到缓存中
|
||||
Note.addNoteCache(note);
|
||||
|
||||
// 清空附件数
|
||||
Attach.clearNoteAttachNum();
|
||||
|
||||
// 是否是为共享的notebook添加笔记, 如果是, 则还要记录fromUserId
|
||||
var newItem = "";
|
||||
|
||||
@ -1287,8 +1296,209 @@ Note.initContextmenu = function() {
|
||||
Note.contextmenu = $("#noteItemList .item-my").contextmenu(noteListMenu);
|
||||
}
|
||||
|
||||
// 附件
|
||||
// 笔记的附件需要ajax获取
|
||||
// 建一张附件表? attachId, noteId, 其它信息
|
||||
// note里有attach_nums字段记录个数
|
||||
// [ok]
|
||||
var Attach = {
|
||||
loadedNoteAttachs: {}, // noteId => [attch1Info, attach2Info...] // 按笔记
|
||||
attachsMap: {}, // attachId => attachInfo
|
||||
init: function() {
|
||||
var self = this;
|
||||
// 显示attachs
|
||||
$("#showAttach").click(function(){
|
||||
self.renderAttachs(Note.curNoteId);
|
||||
});
|
||||
// 防止点击隐藏
|
||||
self.attachListO.click(function(e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
// 删除
|
||||
self.attachListO.on("click", ".delete-attach", function(e) {
|
||||
e.stopPropagation();
|
||||
var attachId = $(this).closest('li').data("id");
|
||||
var t = this;
|
||||
if(confirm("Are you sure to delete it ?")) {
|
||||
$(t).button("loading");
|
||||
ajaxPost("/attach/deleteAttach", {attachId: attachId}, function(re) {
|
||||
$(t).button("reset");
|
||||
if(reIsOk(re)) {
|
||||
self.deleteAttach(attachId);
|
||||
} else {
|
||||
alert(re.Msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
// 下载
|
||||
self.attachListO.on("click", ".download-attach", function(e) {
|
||||
e.stopPropagation();
|
||||
var attachId = $(this).closest('li').data("id");
|
||||
window.open("/attach/download?attachId=" + attachId);
|
||||
// location.href = "/attach/download?attachId=" + attachId;
|
||||
});
|
||||
// 下载全部
|
||||
self.downloadAllBtnO.click(function() {
|
||||
window.open("/attach/downloadAll?noteId=" + Note.curNoteId);
|
||||
// location.href = "/attach/downloadAll?noteId=" + Note.curNoteId;
|
||||
});
|
||||
|
||||
// make link
|
||||
self.attachListO.on("click", ".link-attach", function(e) {
|
||||
e.stopPropagation();
|
||||
var attachId = $(this).closest('li').data("id");
|
||||
var attach = self.attachsMap[attachId];
|
||||
var src = "/attach/download?attachId=" + attachId;
|
||||
|
||||
if(LEA.isMarkdownEditor() && MarkdownEditor) {
|
||||
MarkdownEditor.insertLink(src, attach.Title);
|
||||
} else {
|
||||
tinymce.activeEditor.insertContent('<a target="_blank" href="' + src + '">' + attach.Title + '</a>');
|
||||
}
|
||||
});
|
||||
|
||||
// make all link
|
||||
self.linkAllBtnO.on("click",function(e) {
|
||||
e.stopPropagation();
|
||||
var note = Note.getCurNote();
|
||||
if(!note) {
|
||||
return;
|
||||
}
|
||||
var src = "/attach/downloadAll?noteId=" + Note.curNoteId
|
||||
var title = note.Title ? note.Title + ".tar.gz" : "all.tar.gz";
|
||||
|
||||
if(LEA.isMarkdownEditor() && MarkdownEditor) {
|
||||
MarkdownEditor.insertLink(src, title);
|
||||
} else {
|
||||
tinymce.activeEditor.insertContent('<a target="_blank" href="' + src + '">' + title + '</a>');
|
||||
}
|
||||
});
|
||||
},
|
||||
attachListO: $("#attachList"),
|
||||
attachNumO: $("#attachNum"),
|
||||
attachDropdownO: $("#attachDropdown"),
|
||||
downloadAllBtnO: $("#downloadAllBtn"),
|
||||
linkAllBtnO: $("#linkAllBtn"),
|
||||
// 添加笔记时
|
||||
clearNoteAttachNum: function() {
|
||||
var self = this;
|
||||
self.attachNumO.html("").hide();
|
||||
},
|
||||
renderNoteAttachNum: function(noteId, needHide) {
|
||||
var self = this;
|
||||
var note = Note.getNote(noteId);
|
||||
if(note.AttachNum) {
|
||||
self.attachNumO.html("(" + note.AttachNum + ")").show();
|
||||
self.downloadAllBtnO.show();
|
||||
self.linkAllBtnO.show();
|
||||
} else {
|
||||
self.attachNumO.hide();
|
||||
self.downloadAllBtnO.hide();
|
||||
self.linkAllBtnO.hide();
|
||||
}
|
||||
|
||||
// 隐藏掉
|
||||
if(needHide) {
|
||||
self.attachDropdownO.removeClass("open");
|
||||
}
|
||||
},
|
||||
_renderAttachs: function(attachs) {
|
||||
var self = this;
|
||||
// foreach 循环之
|
||||
/*
|
||||
<li class="clearfix">
|
||||
<div class="attach-title">leanote官abcefedafadfadfadfadfad方文档.doc</div>
|
||||
<div class="attach-process">
|
||||
<button class="btn btn-sm btn-warning">Delete</button>
|
||||
<button class="btn btn-sm btn-deafult">Download</button>
|
||||
</div>
|
||||
</li>
|
||||
*/
|
||||
var html = "";
|
||||
var attachNum = attachs.length;
|
||||
for(var i = 0; i < attachNum; ++i) {
|
||||
var each = attachs[i];
|
||||
html += '<li class="clearfix" data-id="' + each.AttachId + '">' +
|
||||
'<div class="attach-title">' + each.Title + '</div>' +
|
||||
'<div class="attach-process"> ' +
|
||||
' <button class="btn btn-sm btn-warning delete-attach"><i class="fa fa-trash-o"></i></button> ' +
|
||||
' <button type="button" class="btn btn-sm btn-primary download-attach"><i class="fa fa-download"></i></button> ' +
|
||||
' <button type="button" class="btn btn-sm btn-deafult link-attach" title="Insert link into content"><i class="fa fa-link"></i></button> ' +
|
||||
'</div>' +
|
||||
'</li>';
|
||||
self.attachsMap[each.AttachId] = each;
|
||||
}
|
||||
self.attachListO.html(html);
|
||||
|
||||
// 设置数量
|
||||
var note = Note.getCurNote();
|
||||
if(note) {
|
||||
note.AttachNum = attachNum;
|
||||
self.renderNoteAttachNum(note.NoteId, false);
|
||||
}
|
||||
},
|
||||
// 渲染noteId的附件
|
||||
// 当点击"附件"时加载,
|
||||
// TODO 判断是否已loaded
|
||||
renderAttachs: function(noteId) {
|
||||
var self = this;
|
||||
if(self.loadedNoteAttachs[noteId]) {
|
||||
self._renderAttachs(self.loadedNoteAttachs[noteId]);
|
||||
return;
|
||||
}
|
||||
// ajax获取noteAttachs
|
||||
ajaxGet("/attach/getAttachs", {noteId: noteId}, function(ret) {
|
||||
var list = [];
|
||||
if(ret.Ok) {
|
||||
list = ret.List;
|
||||
if(!list) {
|
||||
list = [];
|
||||
}
|
||||
}
|
||||
// 添加到缓存中
|
||||
self.loadedNoteAttachs[noteId] = list;
|
||||
self._renderAttachs(list);
|
||||
});
|
||||
},
|
||||
// 添加附件, attachment_upload上传调用
|
||||
addAttach: function(attachInfo) {
|
||||
var self = this;
|
||||
if(!self.loadedNoteAttachs[attachInfo.NoteId]) {
|
||||
self.loadedNoteAttachs[attachInfo.NoteId] = [];
|
||||
}
|
||||
self.loadedNoteAttachs[attachInfo.NoteId].push(attachInfo);
|
||||
self.renderAttachs(attachInfo.NoteId);
|
||||
},
|
||||
// 删除
|
||||
deleteAttach: function(attachId) {
|
||||
var self = this;
|
||||
var noteId = Note.curNoteId;
|
||||
var attachs = self.loadedNoteAttachs[noteId];
|
||||
for(var i = 0; i < attachs.length; ++i) {
|
||||
if(attachs[i].AttachId == attachId) {
|
||||
// 删除之, 并render之
|
||||
attachs.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
// self.loadedNoteAttachs[noteId] = attachs;
|
||||
self.renderAttachs(noteId);
|
||||
},
|
||||
|
||||
// 下载
|
||||
downloadAttach: function(fileId) {
|
||||
var self = this;
|
||||
},
|
||||
downloadAll: function() {
|
||||
}
|
||||
}
|
||||
|
||||
//------------------- 事件
|
||||
$(function() {
|
||||
// 附件初始化
|
||||
Attach.init();
|
||||
|
||||
//-----------------
|
||||
// for list nav
|
||||
$("#noteItemList").on("click", ".item", function(event) {
|
||||
|
||||
Reference in New Issue
Block a user