mbk-lab
/
wide
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fixed tree file‘s hotkeys bug and add remove fun; add bottom window group

This commit is contained in:
Van 2014-09-16 17:48:19 +08:00
parent c516a7e289
commit 5ed8033ef9
5 changed files with 111 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
static/css/base.css
View File

@ -235,23 +235,18 @@ ul {
/* end editor */
/* start output */
.output .tabs {
.bottom-window-group .tabs {
background-color: #CAD3E3;
border-top: 1px solid #8E97A7;
border-bottom: 1px solid #8E97A7;
}
.output .tabs > div {
background-color: #B5BDCC;
border-left-color: #9096A2;
.bottom-window-group .tabs > div {
cursor: pointer;
}
.output .tabs > div.current {
background-color: #8B99B3;
color: #FFF;
}
#output {
#output,
#notification {
border-width: 0;
color: #555555;
height: 130px;

19
static/js/hotkeys.js
View File

@ -26,6 +26,9 @@ var hotkeys = {
// TODO: 滚动处理
$("#files").keydown(function(event) {
switch (event.which) {
case 46: // 删除
tree.removeIt();
break;
case 13: // 回车
if (!wide.curNode) {
return false;
@ -60,8 +63,8 @@ var hotkeys = {
var preNode = wide.curNode.getPreNode();
if (preNode && preNode.iconSkin === "ico-ztree-dir "
&& preNode.open) {
// 当前节点的上一个节点是目录且打开时
node = preNode.children[preNode.children.length - 1];
// 当前节点的上一个节点是目录且打开时，获取打开节点中的最后一个节点
node = tree.getCurrentNodeLastNode(preNode);
}
}
@ -75,8 +78,7 @@ var hotkeys = {
if (!wide.curNode) { // 没有选中节点时，默认选中第一个
node = tree.fileTree.getNodeByTId("files_1");
} else {
if (wide.curNode && wide.curNode.isLastNode && !wide.curNode.open
&& wide.curNode.getParentNode().isLastNode) {
if (wide.curNode && tree.isBottomNode(wide.curNode)) {
// 当前节点为最底部的节点
return false;
}
@ -87,10 +89,11 @@ var hotkeys = {
node = wide.curNode.children[0];
}
if (wide.curNode.isLastNode && wide.curNode.level !== 0
&& wide.curNode.getParentNode().getNextNode()) {
// 当前节点为最后一个节点，但其父节点还有下一个节点
node = wide.curNode.getParentNode().getNextNode();
var nextShowNode = tree.getNextShowNode(wide.curNode);
if (wide.curNode.isLastNode && wide.curNode.level !== 0 && !wide.curNode.open
&& nextShowNode) {
// 当前节点为最后一个叶子节点，但其父或祖先节点还有下一个节点
node = nextShowNode;
}
}

46
static/js/tree.js
View File

@ -1,12 +1,52 @@
var tree = {
getTIdByPath: function (path) {
var nodes = tree.fileTree.transformToArray(tree.fileTree.getNodes());
// 递归获取当前节点展开中的最后一个节点
getCurrentNodeLastNode: function(node) {
var returnNode = node.children[node.children.length - 1];
if (returnNode.open) {
return tree.getCurrentNodeLastNode(returnNode);
} else {
return returnNode;
}
},
// 按照树展现获取下一个节点
getNextShowNode: function(node) {
if (node.level !== 0) {
if (node.getParentNode().getNextNode()) {
return node.getParentNode().getNextNode();
} else {
return tree.getNextShowNode(node.getParentNode());
}
} else {
return node.getNextNode();
}
},
isBottomNode: function(node) {
if (node.open) {
return false;
}
if (node.getParentNode()) {
if (node.getParentNode().isLastNode) {
return tree.isBottomNode(node.getParentNode());
} else {
return false;
}
} else {
if (node.isLastNode) {
return true;
} else {
return false;
}
}
},
getTIdByPath: function(path) {
var nodes = tree.fileTree.transformToArray(tree.fileTree.getNodes());
for (var i = 0, ii = nodes.length; i < ii; i++) {
if (nodes[i].path === path) {
return nodes[i].tId;
}
}
return undefined;
},
fileTree: undefined,

65
static/js/wide.js
View File

@ -1,9 +1,9 @@
var outputWS = new WebSocket(config.channel.output + '/output/ws');
outputWS.onopen = function () {
outputWS.onopen = function() {
console.log('[output onopen] connected');
};
outputWS.onmessage = function (e) {
outputWS.onmessage = function(e) {
console.log('[output onmessage]' + e.data);
var data = JSON.parse(e.data);
@ -21,10 +21,10 @@ outputWS.onmessage = function (e) {
url: '/run',
data: JSON.stringify(request),
dataType: "json",
beforeSend: function (data) {
beforeSend: function(data) {
$('#output').text('');
},
success: function (data) {
success: function(data) {
}
});
@ -55,27 +55,34 @@ outputWS.onmessage = function (e) {
$('#output').text($('#output').text() + data.output);
}
};
outputWS.onclose = function (e) {
outputWS.onclose = function(e) {
console.log('[output onclose] disconnected (' + e.code + ')');
delete outputWS;
};
outputWS.onerror = function (e) {
outputWS.onerror = function(e) {
console.log('[output onerror] ' + e);
};
var wide = {
curNode: undefined,
curEditor: undefined,
_initLayout: function () {
_initLayout: function() {
var mainH = $(window).height() - $(".menu").height() - $(".footer").height() - 2;
$(".content, .ztree").height(mainH);
$(".edit-panel").height(mainH - $(".output").height());
$(".edit-panel").height(mainH - $(".bottom-window-group").height());
},
init: function () {
_initBottomWindowGroup: function() {
new Tabs({
id: ".bottom-window-group"
});
},
init: function() {
this._initLayout();
this._initBottomWindowGroup();
$("body").bind("mousedown", function (event) {
$("body").bind("mousedown", function(event) {
if (!(event.target.id === "dirRMenu" || $(event.target).closest("#dirRMenu").length > 0)) {
$("#dirRMenu").hide();
}
@ -92,7 +99,7 @@ var wide = {
});
},
saveFile: function () {
saveFile: function() {
var request = {
file: $(".edit-header .current span:eq(0)").attr("title"),
code: wide.curEditor.getValue()
@ -102,24 +109,24 @@ var wide = {
url: '/file/save',
data: JSON.stringify(request),
dataType: "json",
success: function (data) {
success: function(data) {
}
});
},
saveAllFiles: function () {
saveAllFiles: function() {
// TODO: save all files
},
closeFile: function () {
closeFile: function() {
// TODO: close file
},
closeAllFiles: function () {
closeAllFiles: function() {
// TODO: close all files
},
exit: function () {
exit: function() {
// TODO: exit
},
// 构建 & 运行.
run: function () {
run: function() {
var request = {
file: $(".edit-header .current span:eq(0)").attr("title"),
code: wide.curEditor.getValue()
@ -132,14 +139,14 @@ var wide = {
url: '/build',
data: JSON.stringify(request),
dataType: "json",
beforeSend: function (data) {
beforeSend: function(data) {
$('#output').text('');
},
success: function (data) {
success: function(data) {
}
});
},
goget: function () {
goget: function() {
var request = {
file: $(".edit-header .current span:eq(0)").attr("title")
};
@ -149,14 +156,14 @@ var wide = {
url: '/go/get',
data: JSON.stringify(request),
dataType: "json",
beforeSend: function (data) {
beforeSend: function(data) {
$('#output').text('');
},
success: function (data) {
success: function(data) {
}
});
},
goinstall: function () {
goinstall: function() {
var request = {
file: $(".edit-header .current span:eq(0)").attr("title"),
code: wide.curEditor.getValue()
@ -167,14 +174,14 @@ var wide = {
url: '/go/install',
data: JSON.stringify(request),
dataType: "json",
beforeSend: function (data) {
beforeSend: function(data) {
$('#output').text('');
},
success: function (data) {
success: function(data) {
}
});
},
fmt: function () {
fmt: function() {
var path = $(".edit-header .current span:eq(0)").attr("title");
var mode = wide.curNode.mode;
@ -192,7 +199,7 @@ var wide = {
url: '/go/fmt',
data: JSON.stringify(request),
dataType: "json",
success: function (data) {
success: function(data) {
if (data.succ) {
wide.curEditor.setValue(data.code);
}
@ -206,7 +213,7 @@ var wide = {
url: '/html/fmt',
data: JSON.stringify(request),
dataType: "json",
success: function (data) {
success: function(data) {
if (data.succ) {
wide.curEditor.setValue(data.code);
}
@ -233,7 +240,7 @@ var wide = {
}
};
$(document).ready(function () {
$(document).ready(function() {
wide.init();
tree.init();
menu.init();

23
view/index.html
View File

@ -133,20 +133,29 @@
<div class="tabs-panel"></div>
</div>
<div class="output">
<div class="bottom-window-group">
<div class="tabs">
<div class="current" data-index="files_3">
<div class="current" data-index="output">
<span title="Output">Output</span>
</div>
<div data-index="search">
<span title="Search">Search</span>
</div>
<div data-index="notification">
<span title="Notification">Notification</span>
</div>
</div>
<div class="tabs-panel">
<textarea id="output"></textarea>
<div data-index="output">
<textarea id="output"></textarea>
</div>
<div class="fn-none" data-index="search">
</div>
<div class="fn-none" data-index="notification">
<textarea id="notification"></textarea>
</div>
</div>
</div>
<textarea id="notification"></textarea>
</div>
</div>