xuemingqiang/leanote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

attachment feature #10

Browse Source
This commit is contained in:
life
2014-09-21 22:05:04 +08:00
parent ab242b10f2
commit c556ab59b5
26 changed files with 1197 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
public/css/theme/basic.less
View File

@ -38,6 +38,13 @@
/*"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue", Helvetica, "Microsoft Yahei", Verdana, Simsun, "Segoe UI", "Segoe UI Web Regular", "Segoe UI Symbol", "BBAlpha Sans", "S60 Sans", Arial, sans-serif;*/
.btn {
border-radius: 2px;
}
.alert {
margin-bottom: 10px;
}
#logo {
font-family: "leanoteregular";
font-size: 36px;
@ -319,4 +326,99 @@
}
.ztree {
padding: 0px;
}
}
// leaui image drop drag
#upload {
position: absolute;
z-index: 0;
bottom: 0;
right: 0;
left: 0px;
padding: 0;
background-color: #fff;
text-align: center;
display: none;
}
#upload #drop {
width: 100%;
height: 100%;
padding-top: 100px;
}
#drop.in {
border: 1px solid #000000;
}
#drop.hover {
border: 2px solid #000000;
}
#uploadMsg {
position: absolute;
top: 3px;
right: 3px;
bottom: 10px;
overflow: scroll;
list-style: none;
}
// upload attach
#uploadAttach {
position: relative;
margin-top: 5px;
}
#dropAttach {
text-align: center;
input {
display: none;
}
}
#dropAttach.in {
border: 1px solid #000000;
}
#dropAttach.hover {
border: 2px solid #000000;
}
#attachUploadMsg{
list-style-type: none;
margin: 0;
padding: 0;
max-height: 240px;
overflow: scroll;
z-index: 3;
.alert {
margin: 0;
padding: 0 3px;
margin-top: 10px;
}
}
#attachMenu {
width: 400px;
padding: 10px 5px;
}
#attachList {
margin: 0;
padding: 0;
max-height: 450px;
overflow-y: scroll;
li {
display: block;
margin: 0;
padding: 0 3px;
border-radius: 3px;
border-bottom: 1px dashed #eee;
height: 45px;
line-height: 45px;
div {
float: left;
}
.attach-title {
width: 200px;
white-space: nowrap;text-overflow:ellipsis; overflow:hidden;
}
.attach-process {
float: right;
}
}
}

132
public/css/theme/default.css
View File

@ -31,6 +31,12 @@
font-style: normal;
}
/*"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue", Helvetica, "Microsoft Yahei", Verdana, Simsun, "Segoe UI", "Segoe UI Web Regular", "Segoe UI Symbol", "BBAlpha Sans", "S60 Sans", Arial, sans-serif;*/
.btn {
border-radius: 2px;
}
.alert {
margin-bottom: 10px;
}
#logo {
font-family: "leanoteregular";
font-size: 36px;
@ -285,6 +291,96 @@
.ztree {
padding: 0px;
}
#upload {
position: absolute;
z-index: 0;
bottom: 0;
right: 0;
left: 0px;
padding: 0;
background-color: #fff;
text-align: center;
display: none;
}
#upload #drop {
width: 100%;
height: 100%;
padding-top: 100px;
}
#drop.in {
border: 1px solid #000000;
}
#drop.hover {
border: 2px solid #000000;
}
#uploadMsg {
position: absolute;
top: 3px;
right: 3px;
bottom: 10px;
overflow: scroll;
list-style: none;
}
#uploadAttach {
position: relative;
margin-top: 5px;
}
#dropAttach {
text-align: center;
}
#dropAttach input {
display: none;
}
#dropAttach.in {
border: 1px solid #000000;
}
#dropAttach.hover {
border: 2px solid #000000;
}
#attachUploadMsg {
list-style-type: none;
margin: 0;
padding: 0;
max-height: 240px;
overflow: scroll;
z-index: 3;
}
#attachUploadMsg .alert {
margin: 0;
padding: 0 3px;
margin-top: 10px;
}
#attachMenu {
width: 400px;
padding: 10px 5px;
}
#attachList {
margin: 0;
padding: 0;
max-height: 450px;
overflow-y: scroll;
}
#attachList li {
display: block;
margin: 0;
padding: 0 3px;
border-radius: 3px;
border-bottom: 1px dashed #eee;
height: 45px;
line-height: 45px;
}
#attachList li div {
float: left;
}
#attachList li .attach-title {
width: 200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
#attachList li .attach-process {
float: right;
}
::selection {
background: #000000;
color: #ffffff;
@ -1265,12 +1361,6 @@ background-position:-1px -670px
.tab-pane {
padding: 5px 0 0 0;
}
.alert {
margin-bottom: 10px;
}
.btn {
border-radius: 0 !important;
}
#notebookNavForNewNote li,
#notebookNavForNewSharedNote > li {
padding-left: 0;
@ -1313,36 +1403,6 @@ background-position:-1px -670px
#toggleEditorMode {
margin: 0 10px !important;
}
#upload {
position: absolute;
z-index: 0;
bottom: 0;
right: 0;
left: 0px;
padding: 0;
background-color: #fff;
text-align: center;
display: none;
}
#upload #drop {
width: 100%;
height: 100%;
padding-top: 100px;
}
#drop.in {
border: 1px solid #000000;
}
#drop.hover {
border: 2px solid #000000;
}
#uploadMsg {
position: absolute;
top: 3px;
right: 3px;
bottom: 10px;
overflow: scroll;
list-style: none;
}
#searchNotebookForList {
color: #ccc;
border: 1px solid rgba(255, 255, 255, 0.1);

39
public/css/theme/default.less
View File

@ -1075,13 +1075,6 @@ background-position:-1px -670px
.tab-pane {
padding: 5px 0 0 0;
}
.alert {
margin-bottom: 10px;
}
.btn {
border-radius: 0 !important;
}
.mce-container-body iframe {
//overflow-x: hidden; // firefox 不能要
@ -1137,38 +1130,6 @@ background-position:-1px -670px
margin: 0 10px !important;
}
// leaui image drop drag
#upload {
position: absolute;
z-index: 0;
bottom: 0;
right: 0;
left: 0px;
padding: 0;
background-color: #fff;
text-align: center;
display: none;
}
#upload #drop {
width: 100%;
height: 100%;
padding-top: 100px;
}
#drop.in {
border: 1px solid #000000;
}
#drop.hover {
border: 2px solid #000000;
}
#uploadMsg {
position: absolute;
top: 3px;
right: 3px;
bottom: 10px;
overflow: scroll;
list-style: none;
}
//----------------------
#searchNotebookForList {
color: #ccc;

2
public/css/theme/simple.css
View File

File diff suppressed because one or more lines are too long

37
public/css/theme/simple.less
View File

@ -1024,13 +1024,7 @@ background-position:-1px -670px
.tab-pane {
padding: 5px 0 0 0;
}
.alert {
margin-bottom: 10px;
}
.btn {
border-radius: 0 !important;
}
.mce-container-body iframe {
//overflow-x: hidden;
@ -1087,37 +1081,6 @@ background-position:-1px -670px
}
// leaui image drop drag
#upload {
position: absolute;
z-index: 0;
bottom: 0;
right: 0;
left: 0px;
padding: 0;
background-color: #fff;
text-align: center;
display: none;
}
#upload #drop {
width: 100%;
height: 100%;
padding-top: 100px;
}
#drop.in {
border: 1px solid #000000;
}
#drop.hover {
border: 2px solid #000000;
}
#uploadMsg {
position: absolute;
top: 3px;
right: 3px;
bottom: 10px;
overflow: scroll;
list-style: none;
}
#notebookList {
border-top: 1px dashed #eee;
}

2
public/css/theme/writting-overwrite.css
View File

File diff suppressed because one or more lines are too long

2
public/css/theme/writting.css
View File

File diff suppressed because one or more lines are too long

134
public/js/app/attachment_upload.js Normal file
View 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();
});

210
public/js/app/note.js
View File

@ -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) {

5
public/js/common.js
View File

@ -288,7 +288,12 @@ function editorIframeTabindex(index) {
}
}
//切换编辑器
LEA.isM = false;
LEA.isMarkdownEditor = function() {
return LEA.isM;
}
function switchEditor(isMarkdown) {
LEA.isM = isMarkdown;
// 富文本永远是2
if(!isMarkdown) {
$("#editor").show();

94
public/mdeditor/editor/pagedown/Markdown.Editor.js
View File

@ -1317,7 +1317,37 @@
}
});
}
// life 新添加函数
// life
function insertLinkLife(link, text) {
inputBox.focus();
if (undoManager) {
undoManager.setCommandMode();
}
var state = new TextareaState(panels);
if (!state) {
return;
}
var chunks = state.getChunks(); // 得到chunk
var fixupInputArea = function () {
inputBox.focus();
if (chunks) {
state.setChunks(chunks);
}
state.restore();
previewManager.refresh();
};
var a = commandProto.insertLink(chunks, fixupInputArea, link, text);
if(!a) fixupInputArea();
}
MarkdownEditor.insertLink = insertLinkLife;
// Perform the button's action.
function doClick(button) {
@ -1369,6 +1399,7 @@
var noCleanup = button.textOp(chunks, fixupInputArea);
// 这里生成
if (!noCleanup) {
fixupInputArea();
}
@ -1378,6 +1409,7 @@
if (button.execute) {
button.execute(undoManager);
}
};
function setupButton(button, isEnabled) {
@ -1707,6 +1739,68 @@
return title ? link + ' "' + title + '"' : link;
});
}
// life 添加
commandProto.insertLink = function (chunk, postProcessing, link, text) {
isImage = false;
chunk.trimWhitespace();
chunk.findTags(/\s*!?\[/, /\][ ]?(?:\n[ ]*)?(\[.*?\])?/);
var background;
if (chunk.endTag.length > 1 && chunk.startTag.length > 0) {
chunk.startTag = chunk.startTag.replace(/!?\[/, "");
chunk.endTag = "";
this.addLinkDef(chunk, null);
}
else {
// We're moving start and end tag back into the selection, since (as we're in the else block) we're not
// *removing* a link, but *adding* one, so whatever findTags() found is now back to being part of the
// link text. linkEnteredCallback takes care of escaping any brackets.
chunk.selection = chunk.startTag + chunk.selection + chunk.endTag;
chunk.startTag = chunk.endTag = "";
if (/\n\n/.test(chunk.selection)) {
this.addLinkDef(chunk, null);
return;
}
var that = this;
// The function to be executed when you enter a link and press OK or Cancel.
// Marks up the link and adds the ref.
var linkEnteredCallback = function (link) {
background.parentNode.removeChild(background);
if (link !== null) {
chunk.selection = (" " + chunk.selection).replace(/([^\\](?:\\\\)*)(?=[[\]])/g, "$1\\").substr(1);
var linkDef = " [999]: " + properlyEncoded(link);
var num = that.addLinkDef(chunk, linkDef);
chunk.startTag = isImage ? "![" : "[";
chunk.endTag = "][" + num + "]";
chunk.selection = text;
}
postProcessing();
};
background = ui.createBackground();
linkEnteredCallback(link);
/*
if (isImage) {
if (!this.hooks.insertImageDialog(linkEnteredCallback))
ui.prompt(this.getString("imagedialog"), imageDefaultText, linkEnteredCallback);
}
else {
if (!this.hooks.insertLinkDialog(linkEnteredCallback)) // jiawzhang
ui.prompt(this.getString("linkdialog"), linkDefaultText, linkEnteredCallback);
}
*/
return true;
}
};
commandProto.doLinkOrImage = function (chunk, postProcessing, isImage) {