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

contexmenu dynamic

Browse Source
This commit is contained in:
iiuazz
2014-09-13 00:20:18 +08:00
parent d1f18b9476
commit 27dbd6552c
12 changed files with 118 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1340,12 +1340,13 @@ background-position:-1px -670px
list-style: none;
}
#searchNotebookForList {
border: 1px solid rgba(255, 255, 255, 0.3);
color: #ccc;
border: 1px solid rgba(255, 255, 255, 0.1);
background-color: #37485e;
}
#searchNotebookForList:focus {
outline: none !important;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: none;
}
.label-default {
@ -1358,3 +1359,6 @@ background-position:-1px -670px
#myShareNotebooks .folderBody {
background: none;
}
.tmpzTreeMove_arrow {
color: #fff;
}

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

@ -1169,12 +1169,13 @@ background-position:-1px -670px
//----------------------
#searchNotebookForList {
border: 1px solid rgba(255, 255, 255, 0.3);
color: #ccc;
border: 1px solid rgba(255, 255, 255, 0.1);
background-color: @leftBgColor;
&:focus {
outline: none !important;
box-shadow: none;
outline: none !important;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: none;
}
}
.label-default {
@ -1186,4 +1187,7 @@ background-position:-1px -670px
}
#myShareNotebooks .folderBody {
background: none;
}
.tmpzTreeMove_arrow {
color: #fff;
}

89
public/css/zTreeStyle/zTreeStyle.css
View File

@ -1,18 +1,7 @@
/*-------------------------------------
zTree Style
version: 3.4
author: Hunter.z
email: hunter.z@263.net
website: http://code.google.com/p/jquerytree/
-------------------------------------*/
.ztree * {padding:0; margin:0; font-size:12px;}
.ztree {margin:0; padding:5px; color:#333}
.ztree li{padding:0; margin:0; list-style:none; line-height:14px; text-align:left; white-space:nowrap; outline:0}
.ztree li ul{ margin:0; padding:0 0 0 18px}
.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: block;
@ -21,67 +10,25 @@ website: http://code.google.com/p/jquerytree/
.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;}
/* 拖动到上面 */
.ztree li a.tmpTargetNode_inner {
padding-top:0px; background-color:#316AC5;
color:white; height:30px; border:1px #316AC5 solid;
padding-top:0px;
background-color:#316AC5;
color:white; height:30px;
border:1px #316AC5 solid;
opacity:0.8; filter:alpha(opacity=80)
}
.ztree li a.tmpTargetNode_prev {}
.ztree li a.tmpTargetNode_next {}
.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;
background-color:transparent; background-repeat:no-repeat; background-attachment: scroll;
background-image:url("./img/zTreeStandard.png"); *background-image:url("./img/zTreeStandard.gif")}
.ztree li span.button.chk {width:13px; height:13px; margin:0 3px 0 0; cursor: auto}
.ztree li span.button.chk.checkbox_false_full {background-position:0 0}
.ztree li span.button.chk.checkbox_false_full_focus {background-position:0 -14px}
.ztree li span.button.chk.checkbox_false_part {background-position:0 -28px}
.ztree li span.button.chk.checkbox_false_part_focus {background-position:0 -42px}
.ztree li span.button.chk.checkbox_false_disable {background-position:0 -56px}
.ztree li span.button.chk.checkbox_true_full {background-position:-14px 0}
.ztree li span.button.chk.checkbox_true_full_focus {background-position:-14px -14px}
.ztree li span.button.chk.checkbox_true_part {background-position:-14px -28px}
.ztree li span.button.chk.checkbox_true_part_focus {background-position:-14px -42px}
.ztree li span.button.chk.checkbox_true_disable {background-position:-14px -56px}
.ztree li span.button.chk.radio_false_full {background-position:-28px 0}
.ztree li span.button.chk.radio_false_full_focus {background-position:-28px -14px}
.ztree li span.button.chk.radio_false_part {background-position:-28px -28px}
.ztree li span.button.chk.radio_false_part_focus {background-position:-28px -42px}
.ztree li span.button.chk.radio_false_disable {background-position:-28px -56px}
.ztree li span.button.chk.radio_true_full {background-position:-42px 0}
.ztree li span.button.chk.radio_true_full_focus {background-position:-42px -14px}
.ztree li span.button.chk.radio_true_part {background-position:-42px -28px}
.ztree li span.button.chk.radio_true_part_focus {background-position:-42px -42px}
.ztree li span.button.chk.radio_true_disable {background-position:-42px -56px}
border:0 none; cursor: pointer;outline:none;}
.ztree li span.button.switch {width:18px; height:18px}
.ztree li span.button.root_open{background-position:-92px -54px}
.ztree li span.button.root_close{background-position:-74px -54px}
.ztree li span.button.roots_open{background-position:-92px 0}
.ztree li span.button.roots_close{background-position:-74px 0}
.ztree li span.button.center_open{background-position:-92px -18px}
.ztree li span.button.center_close{background-position:-74px -18px}
.ztree li span.button.bottom_open{background-position:-92px -36px}
.ztree li span.button.bottom_close{background-position:-74px -36px}
.ztree li span.button.noline_open{background-position:-92px -72px}
.ztree li span.button.noline_close{background-position:-74px -72px}
.ztree li span.button.root_docu{ background:none;}
.ztree li span.button.roots_docu{background-position:-56px 0}
.ztree li span.button.center_docu{background-position:-56px -18px}
.ztree li span.button.bottom_docu{background-position:-56px -36px}
.ztree li span.button.noline_docu{ background:none;}
.ztree li span.button.ico_open{margin-right:2px; background-position:-110px -16px; vertical-align:top; *vertical-align:middle}
.ztree li span.button.ico_close{margin-right:2px; background-position:-110px 0; vertical-align:top; *vertical-align:middle}
.ztree li span.button.ico_docu{margin-right:2px; background-position:-110px -32px; vertical-align:top; *vertical-align:middle}
.ztree li span.button.edit {margin-right:2px; background-position:-110px -48px; vertical-align:top; *vertical-align:middle}
.ztree li span.button.remove {margin-right:2px; background-position:-110px -64px; vertical-align:top; *vertical-align:middle}
.ztree li span.button.ico_loading{margin-right:2px; background:url(./img/loading.gif) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.ico_open{margin-right:2px; background-position:-110px -16px; vertical-align:top;
}
.ztree li span.button.ico_close{margin-right:2px; background-position:-110px 0; vertical-align:top; }
.ztree li span.button.ico_docu{margin-right:2px; background-position:-110px -32px; vertical-align:top; }
.ztree li span.button.edit {margin-right:2px; background-position:-110px -48px; vertical-align:top; }
.ztree li span.button.remove {margin-right:2px; background-position:-110px -64px; vertical-align:top; }
ul.tmpTargetzTree {background-color:#FFE6B0; opacity:0.8; filter:alpha(opacity=80)}
@ -94,16 +41,6 @@ span.tmpzTreeMove_arrow {
ul.ztree.zTreeDragUL {z-index: 333;margin:0; padding:0; position:absolute; width:auto; height:auto;overflow:hidden;
background-color:cfcfcf; border:1px #00B83F dotted; opacity:0.8; filter:alpha(opacity=80)}
.zTreeMask {z-index:1000; background-color:#cfcfcf; opacity:0.0; filter:alpha(opacity=0); position:absolute}
/* level style*/
/*.ztree li span.button.level0 {
display:none;
}
.ztree li ul.level0 {
padding:0;
background:none;
}*/
.ztree li ul{ margin:0; padding:0}
.ztree li {line-height:30px;}
.ztree > li {
@ -120,7 +57,7 @@ ul.ztree.zTreeDragUL {z-index: 333;margin:0; padding:0; position:absolute; width
.ztree li a.level0 span {font-size: 14px;}
.ztree li span.button {
background-image: none; /* url("./img/left_menuForOutLook.png"); */
background-image: none;
}
.ztree li span.button.switch.level0 {width: 20px;}
.ztree li span.button.switch.level1 {width: 20px;}

2
public/js/all.js
View File

File diff suppressed because one or more lines are too long

2
public/js/app/note-min.js vendored
View File

File diff suppressed because one or more lines are too long

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

@ -1152,6 +1152,7 @@ Note.copyNote = function(target, data, isShared) {
});
}
// 这里速度不慢, 很快
Note.getContextNotebooks = function(notebooks) {
var moves = [];
var copys = [];
@ -1166,9 +1167,12 @@ Note.getContextNotebooks = function(notebooks) {
move.items = mc[0];
copy.items = mc[1];
copy2.items = mc[2];
$.extend(move, {type: "group", width: 150});
$.extend(copy, {type: "group", width: 150});
$.extend(copy2, {type: "group", width: 150});
move.type = "group";
move.width = 150;
copy.type = "group";
copy.width = 150;
copy2.type = "group";
copy2.width = 150;
}
moves.push(move);
copys.push(copy);
@ -1187,6 +1191,7 @@ Note.initContextmenu = function() {
// 得到可移动的notebook
var notebooks = Notebook.everNotebooks;
var mc = self.getContextNotebooks(notebooks);
var notebooksMove = mc[0];
var notebooksCopy = mc[1];
self.notebooksCopy = mc[2];
@ -1269,6 +1274,7 @@ Note.initContextmenu = function() {
return this.id != "target3";
}
// 这里很慢!!
Note.contextmenu = $("#noteItemList .item-my").contextmenu(noteListMenu);
}

2
public/js/app/notebook-min.js vendored
View File

File diff suppressed because one or more lines are too long

18
public/js/app/notebook.js
View File

@ -95,14 +95,14 @@ Notebook.getTreeSetting = function(isSearch, isShare){
// 成为子节点, 那么只需要得到targetNode下所有的子结点即可
if(moveType == "inner") {
parentNode = targetNode;
// 在targetNode之前或之后,
// 那么: 1) 需要将该parentNode下所有的node重新排序即可; 2) treeNodes[0]为parentNode的子
} else {
parentNode = targetNode.getParentNode();
}
// 在targetNode之前或之后,
// 那么: 1) 需要将该parentNode下所有的node重新排序即可; 2) treeNodes[0]为parentNode的子
if(!parentNode) {
var nodes = treeObj.getNodes();
var nodes = treeObj.getNodes(); // 得到所有nodes
} else {
ajaxData.parentNotebookId = parentNode.NotebookId;
var nextLevel = parentNode.level+1;
@ -119,9 +119,13 @@ Notebook.getTreeSetting = function(isSearch, isShare){
ajaxData.siblings.push(notebookId);
}
}
ajaxPost("/notebook/dragNotebooks", {data: JSON.stringify(ajaxData)});
Notebook.changeNav();
// 这里慢!
setTimeout(function() {
Notebook.changeNav();
}, 100);
}
if(!isShare) {
@ -303,6 +307,7 @@ Notebook.searchNotebookForList = function(key) {
$notebookList.hide();
var notebooks = self.tree.getNodesByParamFuzzy("Title", key);
log('search');
log(notebooks);
if(isEmpty(notebooks)) {
$search.html("");
@ -353,7 +358,6 @@ Notebook.everNavForNewNote = "";
Notebook.everNotebooks = [];
Notebook.changeNav = function() {
var self = Notebook;
var notebooks = Notebook.tree.getNodes();
var pureNotebooks = notebooks.slice(1, -1); // 不含新和垃圾
var html = self.getChangedNotebooks(pureNotebooks);
@ -364,8 +368,12 @@ Notebook.changeNav = function() {
$("#notebookNavForNewNote").html(html);
// 移动, 复制重新来, 因为nav变了, 移动至-----的notebook导航也变了
// 这里速度很慢
var t1 = (new Date()).getTime();
Note.initContextmenu();
Share.initContextmenu(Note.notebooksCopy);
var t2 = (new Date()).getTime();
log(t2-t1);
}
/**

1
public/js/contextmenu/css/contextmenu.css
View File

@ -10,6 +10,7 @@
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
background-clip: padding-box;
overflow: scroll;
}
.b-m-split {
height: 6px;

2
public/js/contextmenu/jquery.contextmenu-min.js vendored
View File

File diff suppressed because one or more lines are too long

105
public/js/contextmenu/jquery.contextmenu.js
View File

@ -12,8 +12,12 @@ LEA.cmroot = 1;
var gTemplet = $("<div/>").addClass("b-m-mpanel").attr("unselectable", "on").css("display", "none");
var iTemplet = $("<div/>").addClass("b-m-item").attr("unselectable", "on");
var sTemplet = $("<div/>").addClass("b-m-split");
var $body = $("body");
var itemsCache = {}; // idx => items
//build group item, which has sub items
var buildGroup = function(obj) {
var buildGroup = function(obj) { // this = $("")对象, obj=item
groups[obj.alias] = this;
this.gidx = obj.alias;
this.id = obj.alias;
@ -21,7 +25,7 @@ LEA.cmroot = 1;
this.disable = obj.disable;
this.className = "b-m-idisable";
}
$(this).width(obj.width).click(function(){}).mousedown(returnfalse).appendTo($("body"));
$(this).width(obj.width).click(function(){}).mousedown(returnfalse).appendTo($body);
obj = null;
return this;
@ -59,42 +63,47 @@ LEA.cmroot = 1;
//add new items
var addItems = function(gidx, items, parentAlias) {
var tmp = null;
for (var i = 0; i < items.length; i++) {
if (items[i].type == "splitLine") {
//split line
var len = items.length;
for (var i = 0; i < len; i++) {
var item = items[i];
if (item.type == "splitLine") {
tmp = sTemplet.clone()[0];
} else {
// life, alias可以不需要, 从text取, 但必须唯一
if(!items[i].alias) {
if(!item.alias) {
if(parentAlias) {
items[i].alias = parentAlias + "." + items[i].text; // 移动.Hadoop
item.alias = parentAlias + "." + item.text; // 移动.Hadoop
} else {
items[i].alias = items[i].text;
item.alias = item.text;
}
// log(items[i].alias);
// log(item.alias);
}
items[i].gidx = gidx;
if (items[i].type == "group" && !items[i].action) {
item.gidx = gidx;
if (item.type == "group" && !item.action) {
//group
buildGroup.apply(gTemplet.clone()[0], [items[i]]);
arguments.callee(items[i].alias, items[i].items, items[i].alias); // life 传上级的alias, 避免重复
items[i].type = "arrow";
tmp = buildItem.apply(iTemplet.clone()[0], [items[i]]);
buildGroup.apply(gTemplet.clone()[0], [item]);
itemsCache[item.alias] = item.items;
// 递归调用, 可以动态生成?
// arguments.callee(item.alias, item.items, item.alias); // life 传上级的alias, 避免重复
item.type = "arrow";
tmp = buildItem.apply(iTemplet.clone()[0], [item]);
} else {
// 如果group有action还是可以点击的 life
if(items[i].type == "group") {
if(item.type == "group") {
//group
buildGroup.apply(gTemplet.clone()[0], [items[i]]);
arguments.callee(items[i].alias, items[i].items, items[i].alias); // life 传上级的alias, 避免重复
items[i].type = "arrow";
tmp = buildItem.apply(iTemplet.clone()[0], [items[i]]);
buildGroup.apply(gTemplet.clone()[0], [item]);
itemsCache[item.alias] = item.items;
// 递归调用
// arguments.callee(item.alias, item.items, item.alias); // life 传上级的alias, 避免重复
item.type = "arrow";
tmp = buildItem.apply(iTemplet.clone()[0], [item]);
} else {
//normal item
items[i].type = "ibody";
tmp = buildItem.apply(iTemplet.clone()[0], [items[i]]);
item.type = "ibody";
tmp = buildItem.apply(iTemplet.clone()[0], [item]);
}
//
var thisItem = items[i];
var thisItem = item;
// 点击item
// 用闭包来存储变量
@ -115,16 +124,16 @@ LEA.cmroot = 1;
});
}(thisItem, tmp));
} //end if
$(tmp).bind("contextmenu", returnfalse).hover(overItem, outItem);
}
groups[gidx].appendChild(tmp);
tmp = items[i] = items[i].items = null;
tmp = item = item.items = null;
} //end for
gidx = items = null;
};
// hover
var overItem = function(e) {
//menu item is disabled
if (this.disable)
@ -134,11 +143,12 @@ LEA.cmroot = 1;
if (this.group) {
var pos = $(this).offset();
var width = $(this).outerWidth();
showMenuGroup.apply(groups[this.idx], [pos, width]);
showMenuGroup.apply(groups[this.idx], [pos, width, this]);
}
this.className = "b-m-ifocus";
return false;
};
// hover out
//menu loses focus
var outItem = function(e) {
//disabled item
@ -150,15 +160,26 @@ LEA.cmroot = 1;
} //Endif
return false;
};
//show menu group at specified position
var showMenuGroup = function(pos, width) {
var bwidth = $("body").width();
var bheight = document.documentElement.clientHeight;
// 显示group, 这里可以动态生成
// show menu group at specified position
var showMenuGroup = function(pos, width, t) {
var $this = $(this); // dom 对象
// 没有东西, 那么生成之, 动态生成 life [ok]
if($this.html() == "") {
addItems(t.idx, itemsCache[t.idx], t.idx);
}
var bwidth = $body.width();
// var bheight = $body.height();
var bheight = document.documentElement.clientHeight-10;
bheight = bheight < 0 ? 100 : bheight;
var mwidth = $(this).outerWidth();
var mheight = $(this).outerHeight()-10;
mheight = mheight < 0 ? 100 : mheight;
var mwidth = $(this).outerWidth();
var mheight = $(this).outerHeight();
pos.left = (pos.left + width + mwidth > bwidth) ? (pos.left - mwidth < 0 ? 0 : pos.left - mwidth) : pos.left + width;
pos.top = (pos.top + mheight > bheight) ? (pos.top - mheight + (width > 0 ? 25 : 0) < 0 ? 0 : pos.top - mheight + (width > 0 ? 25 : 0)) : pos.top;
$(this).css(pos).show();
$(this).css(pos).show().css("max-height", bheight);
showGroups.push(this.gidx);
};
//to hide menu
@ -217,27 +238,13 @@ LEA.cmroot = 1;
root = buildGroup.apply(gTemplet.clone()[0], [option]);
root.applyrule = applyRule;
root.showMenu = showMenu;
// 这里很费时
addItems(option.alias, option.items);
}
else {
root = $root[0];
}
/*
var me = $(this).each(function() {
return $(this).bind('contextmenu', function(e) {
var bShowContext = (option.onContextMenu && $.isFunction(option.onContextMenu)) ? option.onContextMenu.call(this, e) : true;
if (bShowContext) {
if (option.onShow && $.isFunction(option.onShow)) {
option.onShow.call(this, root);
}
root.showMenu(e, this);
}
return false;
});
});
*/
function onShowMenu(e) {
var bShowContext = (option.onContextMenu && $.isFunction(option.onContextMenu)) ? option.onContextMenu.call(this, e) : true;
if (bShowContext) {
@ -261,8 +268,10 @@ LEA.cmroot = 1;
if (option.rule) {
applyRule(option.rule);
}
/*
gTemplet = iTemplet = sTemplet = itemTpl = buildGroup = buildItem = null;
addItems = overItem = outItem = null;
*/
//CollectGarbage();
var out = {
@ -270,8 +279,6 @@ LEA.cmroot = 1;
me.unbind("contextmenu");
},
showMenu: function(e, target) {
log(e);
log(target);
onShowMenu.call(target, e);
}
}

11
public/js/jquery.ztree.all-3.5.js
View File

@ -2555,6 +2555,7 @@
if (node.parentTId) view.expandCollapseParentNode(this.setting, node.getParentNode(), true);
view.editNode(this.setting, node)
}
zTreeTools.moveNode = function(targetNode, node, moveType, isSilent) {
if (!node) return node;
if (targetNode && !targetNode.isParent && this.setting.data.keep.leaf && moveType === consts.move.TYPE_INNER) {
@ -2661,6 +2662,7 @@
if (tools.uCanDo(setting)) {
doc.bind("mousemove", _docMouseMove);
}
// 拖动
function _docMouseMove(event) {
//avoid start drag after click node
if (root.dragFlag == 0 && Math.abs(mouseDownX - event.clientX) < setting.edit.drag.minMoveSize
@ -2994,6 +2996,7 @@
}
var newNodes = isCopy ? tools.clone(nodes) : nodes;
// 这里速度慢
function dropCallback() {
if (isOtherTree) {
if (!isCopy) {
@ -3019,6 +3022,7 @@
if (isCopy && moveType == consts.move.TYPE_INNER) {
view.addNodes(targetSetting, dragTargetNode, newNodes);
} else {
// 这里
if (isCopy) {
view.addNodes(targetSetting, dragTargetNode.getParentNode(), newNodes);
}
@ -3036,6 +3040,7 @@
view.selectNodes(targetSetting, newNodes);
$$(newNodes[0], setting).focus().blur();
// 这里非常耗时!!! 原因是ajax自定义方法
setting.treeObj.trigger(consts.event.DROP, [event, targetSetting.treeId, newNodes, dragTargetNode, moveType, isCopy]);
}
@ -3240,6 +3245,7 @@
root.noSelection = false;
root.curEditNode = node;
},
// 这里, 速度慢
moveNode: function(setting, targetNode, node, moveType, animateFlag, isSilent) {
var root = data.getRoot(setting),
childKey = setting.data.key.children;
@ -3302,7 +3308,6 @@
} else if (targetObj.get(0) && moveType == consts.move.TYPE_NEXT) {
targetObj.after(nodeDom);
}
//repair the data after move
var i,l,
tmpSrcIndex = -1,
@ -3412,6 +3417,10 @@
if (!isSilent) {
view.expandCollapseParentNode(setting, node.getParentNode(), true, animateFlag);
}
// 这里打印一直就好了
setTimeout(function() {
}, 10);
},
removeEditBtn: function(setting, node) {
$$(node, consts.id.EDIT, setting).unbind().remove();