add notebook, add sub notebook, delete, rename [ok]

This commit is contained in:
iiuazz
2014-09-11 14:31:25 +08:00
parent 2bed5b31fa
commit dc2435a83d
6 changed files with 161 additions and 90 deletions

View File

@ -15,7 +15,7 @@ website: http://code.google.com/p/jquerytree/
.ztree li ul.line{ background:url(./img/line_conn.gif) 0 0 repeat-y;}
.ztree li a {padding:1px 3px 0 0; margin:0; cursor:pointer; height:17px; color:#333; background-color: transparent;
text-decoration:none; vertical-align:top; display: inline-block}
text-decoration:none; vertical-align:top; display: block}
.ztree li a:hover {text-decoration:underline}
.ztree li a.curSelectedNode {padding-top:0px; background-color:#FFE6B0; color:black; height:16px; border:1px #FFB951 solid; opacity:0.8;}
.ztree li a.curSelectedNode_Edit {padding-top:0px; background-color:#FFE6B0; color:black; height:16px; border:1px #FFB951 solid; opacity:0.8;}
@ -27,8 +27,7 @@ website: http://code.google.com/p/jquerytree/
}
.ztree li a.tmpTargetNode_prev {}
.ztree li a.tmpTargetNode_next {}
.ztree li a input.rename {height:14px; width:80px; padding:0; margin:0;
font-size:12px; border:1px #7EC4CC solid; *border:0px}
.ztree li span {line-height:16px; margin-right:2px}
.ztree li span.button {line-height:0; margin:0; width:16px; height:16px; display: inline-block; vertical-align:middle;
border:0 none; cursor: pointer;outline:none;
@ -106,7 +105,10 @@ ul.ztree.zTreeDragUL {z-index: 333;margin:0; padding:0; position:absolute; width
.ztree li ul{ margin:0; padding:0}
.ztree li {line-height:30px;}
.ztree li a {width:200px;height:30px;padding-top: 0px;}
.ztree > li {
border-bottom: 1px dashed #eee;
}
.ztree li a {height:30px;padding-top: 0px;}
.ztree li a:hover {text-decoration:none; background-color: #E7E7E7;}
.ztree li a span.button.switch {visibility:hidden}
.ztree.showIcon li a span.button.switch {visibility:visible}
@ -123,4 +125,15 @@ ul.ztree.zTreeDragUL {z-index: 333;margin:0; padding:0; position:absolute; width
.ztree li span.button.noline_open {background-position: 0 0;}
.ztree li span.button.noline_close {background-position: -18px 0;}
.ztree li span.button.noline_open.level0 {background-position: 0 -18px;}
.ztree li span.button.noline_close.level0 {background-position: -18px -18px;}
.ztree li span.button.noline_close.level0 {background-position: -18px -18px;}
/* life */
.ztree .tree-title {
display: inline-block;
}
/*
.ztree li a input.rename {height:14px; width:80px; padding:0; margin:0;
font-size:12px; border:1px #7EC4CC solid; *border:0px}
*/
.ztree li a.curSelectedNode_Edit input {
}

View File

@ -51,6 +51,7 @@ Notebook.curNotebookIsTrashOrAll = function() {
return Notebook.curNotebookId == Notebook.trashNotebookId || Notebook.curNotebookId == Notebook.allNotebookId ;
}
Notebook.renderNotebooks = function(notebooks) {
var self = this;
if(!notebooks || typeof notebooks != "object" || notebooks.length < 0) {
notebooks = [];
@ -75,7 +76,7 @@ Notebook.renderNotebooks = function(notebooks) {
function onDrop(e, treeId, treeNodes, targetNode, moveType) {
var treeNode = treeNodes[0];
var parentNode;
var treeObj = $.fn.zTree.getZTreeObj("notebookList");
var treeObj = self.tree;
var ajaxData = {curNotebookId: treeNode.NotebookId};
// 成为子节点, 那么只需要得到targetNode下所有的子结点即可
@ -120,6 +121,7 @@ Notebook.renderNotebooks = function(notebooks) {
}
}
var setting = {
view: {
showLine: false,
showIcon: false,
@ -151,12 +153,39 @@ Notebook.renderNotebooks = function(notebooks) {
onClick: function(e, treeId, treeNode) {
var notebookId = treeNode.NotebookId;
Notebook.changeNotebook(notebookId);
},
onRightClick: function(event, treeId, treeNode) {
},
beforeRename: function(treeId, treeNode, newName, isCancel) {
if(newName == "") {
if(treeNode.IsNew) {
// 删除之
self.tree.removeNode(treeNode);
return true;
}
return false;
}
if(treeNode.Title == newName) {
return true;
}
// 如果是新添加的
if(treeNode.IsNew) {
var parentNode = treeNode.getParentNode();
var parentNotebookId = parentNode ? parentNode.NotebookId : "";
self.doAddNotebook(treeNode.NotebookId, newName, parentNotebookId);
} else {
self.doUpdateNotebookTitle(treeNode.NotebookId, newName);
}
return true;
}
}
};
$.fn.zTree.init($("#notebookList"), setting, notebooks);
self.tree = $.fn.zTree.init($("#notebookList"), setting, notebooks);
// 展开/折叠图标
var $notebookList = $("#notebookList");
$notebookList.hover(function () {
if (!$notebookList.hasClass("showIcon")) {
@ -166,16 +195,10 @@ Notebook.renderNotebooks = function(notebooks) {
$notebookList.removeClass("showIcon");
});
var nav = "";
for(var i in notebooks) {
var notebook = notebooks[i];
Notebook.cache[notebook.NotebookId] = notebook;
var classes = "";
if(i == 0) {
classes = "active";
Notebook.curNotebookId = notebook.NotebookId;
}
// $notebookList.append(t('<li><a class="?" notebookId="?">?</a></li>', classes, notebook.NotebookId, notebook.Title))
// 缓存所有notebooks信息
if(!isEmpty(notebooks)) {
Notebook.curNotebookId = notebooks[0].NotebookId;
self.cacheAllNotebooks(notebooks);
}
// 渲染nav
@ -185,6 +208,18 @@ Notebook.renderNotebooks = function(notebooks) {
Notebook.changeNotebookNavForNewNote(notebooks[0].NotebookId);
}
Notebook.cacheAllNotebooks = function(notebooks) {
var self = this;
for(var i in notebooks) {
var notebook = notebooks[i];
Notebook.cache[notebook.NotebookId] = notebook;
if(!isEmpty(notebook.Subs)) {
self.cacheAllNotebooks(notebook.Subs);
}
}
}
// RenderNotebooks调用,
// nav 为了新建, 快速选择, 移动笔记
// 这些在添加,修改,删除notebooks都要变动!!!
@ -223,21 +258,23 @@ Notebook.changeNav = function() {
$list.each(function() {
var notebookId = $(this).attr("notebookId");
var notebook = Notebook.cache[notebookId];
var each = t('<li role="presentation"><a role="menuitem" tabindex="-1" href="#" notebookId="?">?</a></li>', notebook.NotebookId, notebook.Title);
var eachForNew = t('<li role="presentation" class="clearfix"><div class="new-note-left pull-left" title="为该笔记本新建笔记" href="#" notebookId="?">?</div><div title="为该笔记本新建markdown笔记" class="new-note-right pull-left" notebookId="?">Markdown</div></li>', notebook.NotebookId, notebook.Title, notebook.NotebookId);
navForListNote += each;
var isActive = $(this).hasClass('active'); // 万一修改的是已选择的, 那么...
if(isActive) {
$("#curNotebookForListNote").html(notebook.Title);
}
if(i != 0 && i != len) {
navForNewNote += eachForNew;
if(notebook) {
var each = t('<li role="presentation"><a role="menuitem" tabindex="-1" href="#" notebookId="?">?</a></li>', notebook.NotebookId, notebook.Title);
var eachForNew = t('<li role="presentation" class="clearfix"><div class="new-note-left pull-left" title="为该笔记本新建笔记" href="#" notebookId="?">?</div><div title="为该笔记本新建markdown笔记" class="new-note-right pull-left" notebookId="?">Markdown</div></li>', notebook.NotebookId, notebook.Title, notebook.NotebookId);
navForListNote += each;
var isActive = $(this).hasClass('active'); // 万一修改的是已选择的, 那么...
if(isActive) {
$("#curNotebookForNewNote").html(notebook.Title);
$("#curNotebookForListNote").html(notebook.Title);
}
if(i != 0 && i != len) {
navForNewNote += eachForNew;
if(isActive) {
$("#curNotebookForNewNote").html(notebook.Title);
}
}
i++;
}
i++;
});
$("#notebookNavForListNote").html(navForListNote);
@ -517,29 +554,24 @@ Notebook.setNotebook2Blog = function(target) {
// 修改笔记本标题
Notebook.updateNotebookTitle = function(target) {
var self = Notebook;
var notebookId = $(target).attr("notebookId");
self.tree.editName(self.tree.getNodeByTId(notebookId));
return;
var notebookTitle = $(target).text();
var id = "editNotebookTitle";
$(target).html(t('<input type="text" value="?" everValue="?" id="?" notebookId="?"/>', notebookTitle, notebookTitle, id, $(target).attr("notebookId")));
$("#" + id).focus();
}
Notebook.doUpdateNotebookTitle = function() {
var title = $(this).val();
var everTitle = $(this).attr("everTitle");
var notebookId = $(this).attr("notebookId");
if(!title) {
title = everTitle;
}
$(this).parent().html(title);
if(title != everTitle) {
ajaxPost("/notebook/updateNotebookTitle", {notebookId: notebookId, title: title}, function(ret) {
// 修改缓存
Notebook.cache[notebookId].Title = title;
// 改变nav
Notebook.changeNav();
});
}
Notebook.doUpdateNotebookTitle = function(notebookId, newTitle) {
ajaxPost("/notebook/updateNotebookTitle", {notebookId: notebookId, title: newTitle}, function(ret) {
// 修改缓存
Notebook.cache[notebookId].Title = newTitle;
// 改变nav
Notebook.changeNav();
});
}
//-----------
@ -548,47 +580,53 @@ Notebook.doUpdateNotebookTitle = function() {
// 2 在所有后面添加<li></li>
Notebook.addNotebookSeq = 1; // inputId
Notebook.addNotebook = function() {
var self = Notebook;
if($("#myNotebooks").hasClass("closed")) {
$("#myNotebooks .folderHeader").trigger("click");
}
var inputId = "newNotebookInput" + Notebook.addNotebookSeq;
Notebook.addNotebookSeq++;
$("#notebookList li").eq(0).after(t('<li><a><input id="?"/></a></li>', inputId));
$("#" + inputId).focus();
// 回车调用blur
enterBlur("#" + inputId);
$("#" + inputId).blur(function() {
// 为防多次发生blur
$(this).unbind("blur");
var title = $(this).val();
if(!title) {
$(this).parent().parent().remove();
} else {
// 添加之
var notebookId = getObjectId();
var $a = $(this).parent();
ajaxPost("/notebook/addNotebook", {notebookId: notebookId, title: title}, function(ret) {
if(ret.NotebookId) {
Notebook.cache[ret.NotebookId] = ret;
$a.attr("notebookId", notebookId);
$a.html(title);
// 选中之
Notebook.changeNotebook(notebookId);
// 改变nav
Notebook.changeNav();
}
});
// 添加并修改
self.tree.addNodes(null, {Title: "", NotebookId: getObjectId(), IsNew: true}, true, true);
}
// rename 调用
Notebook.doAddNotebook = function(notebookId, title, parentNotebookId) {
var self = Notebook;
ajaxPost("/notebook/addNotebook", {notebookId: notebookId, title: title, parentNotebookId: parentNotebookId}, function(ret) {
if(ret.NotebookId) {
Notebook.cache[ret.NotebookId] = ret;
var notebook = self.tree.getNodeByTId(notebookId);
$.extend(notebook, ret);
notebook.IsNew = false;
// 选中之
Notebook.changeNotebook(notebookId);
// 改变nav
Notebook.changeNav();
}
});
}
//-------------
// 添加子笔记本
Notebook.addChildNotebook = function(target) {
var self = Notebook;
if($("#myNotebooks").hasClass("closed")) {
$("#myNotebooks .folderHeader").trigger("click");
}
var notebookId = $(target).attr("notebookId");
// 添加并修改
self.tree.addNodes(self.tree.getNodeByTId(notebookId), {Title: "", NotebookId: getObjectId(), IsNew: true}, false, true);
}
//-------------
// 删除
Notebook.deleteNotebook = function(target) {
var self = Notebook;
var notebookId = $(target).attr("notebookId");
if(!notebookId) {
return;
@ -596,8 +634,12 @@ Notebook.deleteNotebook = function(target) {
ajaxGet("/notebook/deleteNotebook", {notebookId: notebookId}, function(ret) {
if(ret.Ok) {
/*
$(target).parent().remove();
*/
self.tree.removeNode(self.tree.getNodeByTId(notebookId));
delete Notebook.cache[notebookId];
// 改变nav
Notebook.changeNav();
} else {
@ -621,6 +663,12 @@ $(function() {
Notebook.changeNotebook(notebookId);
});
// 修改笔记本标题, blur后修改标题之
/*
enterBlur("#notebookList", "input#editNotebookTitle");
$("#notebookList").on("blur", "input#editNotebookTitle", Notebook.doUpdateNotebookTitle);
*/
//-------------------
// 右键菜单
var notebookListMenu = {
@ -631,6 +679,7 @@ $(function() {
{ text: "公开为博客", alias: 'set2Blog', icon: "", action: Notebook.setNotebook2Blog },
{ text: "取消公开为博客", alias: 'unset2Blog', icon: "", action: Notebook.setNotebook2Blog }, // Unset
{ type: "splitLine" },
{ text: "添加子笔记本", icon: "", action: Notebook.addChildNotebook },
{ text: "重命名", icon: "", action: Notebook.updateNotebookTitle },
{ text: "删除", icon: "", alias: 'delete', faIcon: "fa-trash-o", action: Notebook.deleteNotebook }
],
@ -640,16 +689,13 @@ $(function() {
children: "li a"
}
// 修改笔记本标题, blur后修改标题之
enterBlur("#notebookList", "input#editNotebookTitle");
$("#notebookList").on("blur", "input#editNotebookTitle", Notebook.doUpdateNotebookTitle);
function applyrule(menu) {
var notebookId = $(this).attr("notebookId");
var notebook = Notebook.cache[notebookId];
if(!notebook) {
return;
}
// disabled的items
var items = [];
// 是否已公开为blog
if(!notebook.IsBlog) {

View File

@ -226,6 +226,7 @@ LEA.cmroot = 1;
});
*/
// bind event
var me = $(option.parent).on('contextmenu', option.children, function(e) {
var bShowContext = (option.onContextMenu && $.isFunction(option.onContextMenu)) ? option.onContextMenu.call(this, e) : true;
if (bShowContext) {
@ -234,6 +235,8 @@ LEA.cmroot = 1;
}
root.showMenu(e, this);
}
// 阻止冒泡, 默认事件
e.preventDefault();
return false;
});