tab 重构 + 关闭
This commit is contained in:
Van
parent
123a9f17bb
commit
93931e0083
|
|
@ -1,8 +1,25 @@
|
|||
body {
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fn-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.fn-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.fn-clear:before,
|
||||
.fn-clear:after {
|
||||
display: table;
|
||||
|
|
@ -44,22 +61,13 @@ ul {
|
|||
|
||||
|
||||
.edit-panel {
|
||||
background-color: #262626;
|
||||
border: 1px solid #262626;
|
||||
height: 450px;
|
||||
left: 20%;
|
||||
position: absolute;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.edit-panel .tabs span {
|
||||
background-color: #FFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.edit-panel .tabs span.current {
|
||||
background-color: #EEEEEE;
|
||||
}
|
||||
|
||||
.output {
|
||||
width: 49%
|
||||
}
|
||||
|
|
@ -75,4 +83,19 @@ ul {
|
|||
|
||||
.shellOutput {
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
/* start tabs */
|
||||
.tabs > div {
|
||||
background-color: #FFF;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.tabs > div.current {
|
||||
background-color: #EEEEEE;
|
||||
}
|
||||
|
||||
.tabs .ico-close {
|
||||
cursor: pointer;
|
||||
}
|
||||
/* end tabs */
|
||||
|
|
@ -2,7 +2,56 @@ var editors = {
|
|||
data: [],
|
||||
init: function() {
|
||||
editors._initAutocomplete();
|
||||
editors._initTabs();
|
||||
editors.tabs = new Tabs({
|
||||
id: ".edit-panel",
|
||||
clickAfter: function(id) {
|
||||
// set tree node selected
|
||||
var node = tree.fileTree.getNodeByTId(id);
|
||||
tree.fileTree.selectNode(node);
|
||||
wide.curNode = node;
|
||||
|
||||
for (var i = 0, ii = editors.data.length; i < ii; i++) {
|
||||
if (editors.data[i].id === id) {
|
||||
wide.curEditor = editors.data[i].editor;
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
removeAfter: function(id, nextId) {
|
||||
for (var i = 0, ii = editors.data.length; i < ii; i++) {
|
||||
if (editors.data[i].id === id) {
|
||||
editors.data.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!nextId) {
|
||||
// 不存在打开的编辑器
|
||||
// remove selected tree node
|
||||
tree.fileTree.cancelSelectedNode();
|
||||
wide.curNode = undefined;
|
||||
|
||||
wide.curEditor = undefined;
|
||||
return false;
|
||||
}
|
||||
|
||||
if (nextId === editors.tabs.getCurrentId()) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// set tree node selected
|
||||
var node = tree.fileTree.getNodeByTId(nextId);
|
||||
tree.fileTree.selectNode(node);
|
||||
wide.curNode = node;
|
||||
|
||||
for (var i = 0, ii = editors.data.length; i < ii; i++) {
|
||||
if (editors.data[i].id === nextId) {
|
||||
wide.curEditor = editors.data[i].editor;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
_initAutocomplete: function() {
|
||||
CodeMirror.registerHelper("hint", "go", function(editor) {
|
||||
|
|
@ -61,70 +110,21 @@ var editors = {
|
|||
cm.showHint({hint: CodeMirror.hint.auto});
|
||||
};
|
||||
},
|
||||
_initTabs: function() {
|
||||
var $tabsPanel = $(".edit-panel .tabs-panel"),
|
||||
$tabs = $(".edit-panel .tabs");
|
||||
|
||||
$tabs.on("click", "span", function() {
|
||||
var $it = $(this);
|
||||
if ($it.hasClass("current")) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var id = $it.data("id");
|
||||
|
||||
$tabs.children("span").removeClass("current");
|
||||
$tabsPanel.children("div").hide();
|
||||
|
||||
$it.addClass("current");
|
||||
$("#editor" + id).parent().show();
|
||||
|
||||
// set tree node selected
|
||||
var node = tree.fileTree.getNodeByTId(id);
|
||||
tree.fileTree.selectNode(node);
|
||||
wide.curNode = node;
|
||||
|
||||
for (var i = 0, ii = editors.data.length; i < ii; i++) {
|
||||
if (editors.data[i].id === id) {
|
||||
wide.curEditor = editors.data[i].editor;
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
_selectTab: function(id, editor) {
|
||||
var $tabsPanel = $(".edit-panel .tabs-panel"),
|
||||
$tabs = $(".edit-panel .tabs");
|
||||
|
||||
var $currentTab = $tabs.children(".current");
|
||||
if ($currentTab.data("id") === id) {
|
||||
return false;
|
||||
}
|
||||
|
||||
$tabs.children("span").removeClass("current");
|
||||
$tabsPanel.children("div").hide();
|
||||
|
||||
$tabs.children("span[data-id='" + id + "']").addClass("current");
|
||||
$("#editor" + id).parent().show();
|
||||
wide.curEditor = editor;
|
||||
},
|
||||
newEditor: function(data) {
|
||||
var id = wide.curNode.tId;
|
||||
for (var i = 0, ii = editors.data.length; i < ii; i++) {
|
||||
if (editors.data[i].id === id) {
|
||||
editors._selectTab(id, editors.data[i].editor);
|
||||
editors.tabs.setCurrent(id);
|
||||
wide.curEditor = editor;
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
var $tabsPanel = $(".edit-panel .tabs-panel"),
|
||||
$tabs = $(".edit-panel .tabs");
|
||||
|
||||
$tabs.children("span").removeClass("current");
|
||||
$tabsPanel.children("div").hide();
|
||||
|
||||
$tabsPanel.append('<div><textarea id="editor' + id + '" name="code"></textarea></div>');
|
||||
$tabs.append('<span data-id="' + id + '" class="current">' + wide.curNode.name + '</span>');
|
||||
editors.tabs.add({
|
||||
id: id,
|
||||
title: '<span title="' + wide.curNode.path + '">' + wide.curNode.name + '</span>',
|
||||
content: '<textarea id="editor' + id + '"></textarea>'
|
||||
});
|
||||
|
||||
var editor = CodeMirror.fromTextArea(document.getElementById("editor" + id), {
|
||||
lineNumbers: true,
|
||||
|
|
@ -135,7 +135,7 @@ var editors = {
|
|||
".": "autocompleteAfterDot"
|
||||
}
|
||||
});
|
||||
editor.setSize('100%', 450);
|
||||
editor.setSize('100%', 430);
|
||||
editor.setValue(data.content);
|
||||
editor.setOption("mode", data.mode);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,86 @@
|
|||
var tabs = function () {
|
||||
|
||||
var Tabs = function(obj) {
|
||||
obj._$tabsPanel = $(obj.id + " .tabs-panel");
|
||||
obj._$tabs = $(obj.id + " .tabs");
|
||||
|
||||
this.obj = obj;
|
||||
|
||||
this._init(obj);
|
||||
};
|
||||
|
||||
$.extend(tabs.prototype, {
|
||||
add: function () {
|
||||
|
||||
},
|
||||
remove: function () {
|
||||
|
||||
}
|
||||
$.extend(Tabs.prototype, {
|
||||
_init: function(obj) {
|
||||
var _that = this;
|
||||
|
||||
obj._$tabs.on("click", "div", function(event) {
|
||||
var id = $(this).data("index");
|
||||
_that.setCurrent(id);
|
||||
obj.clickAfter(id);
|
||||
});
|
||||
|
||||
obj._$tabs.on("click", ".ico-close", function(event) {
|
||||
var id = $(this).parent().data("index");
|
||||
_that.del(id);
|
||||
event.stopPropagation();
|
||||
});
|
||||
},
|
||||
add: function(data) {
|
||||
var $tabsPanel = this.obj._$tabsPanel,
|
||||
$tabs = this.obj._$tabs;
|
||||
|
||||
this.obj._prevId = $tabs.children("div.current").data("index");
|
||||
|
||||
$tabs.children("div").removeClass("current");
|
||||
$tabsPanel.children("div").hide();
|
||||
|
||||
$tabs.append('<div class="current" data-index="' + data.id + '">'
|
||||
+ data.title + '<span class="ico-close">X</span><div>');
|
||||
$tabsPanel.append('<div data-index="' + data.id + '">' + data.content
|
||||
+ '</div>');
|
||||
},
|
||||
del: function(id) {
|
||||
var $tabsPanel = this.obj._$tabsPanel,
|
||||
$tabs = this.obj._$tabs,
|
||||
prevId = undefined,
|
||||
currentId = $tabs.children(".current").data("index");
|
||||
$tabs.children("div[data-index='" + id + "']").remove();
|
||||
$tabsPanel.children("div[data-index='" + id + "']").remove();
|
||||
|
||||
if (this.obj._prevId === id) {
|
||||
this.obj._prevId = $tabs.children("div:first").data("index");
|
||||
}
|
||||
|
||||
if (currentId !== id) {
|
||||
prevId = currentId;
|
||||
} else {
|
||||
prevId = this.obj._prevId;
|
||||
this.setCurrent(prevId);
|
||||
}
|
||||
|
||||
this.obj.removeAfter(id, prevId);
|
||||
},
|
||||
getCurrentId: function() {
|
||||
var $tabs = this.obj._$tabs;
|
||||
return $tabs.children(".current").data("index");
|
||||
},
|
||||
setCurrent: function(id) {
|
||||
if (!id) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var $tabsPanel = this.obj._$tabsPanel,
|
||||
$tabs = this.obj._$tabs;
|
||||
|
||||
var $currentTab = $tabs.children(".current");
|
||||
if ($currentTab.data("index") === id) {
|
||||
return false;
|
||||
}
|
||||
|
||||
this.obj._prevId = $currentTab.data("index");
|
||||
|
||||
$tabs.children("div").removeClass("current");
|
||||
$tabsPanel.children("div").hide();
|
||||
|
||||
$tabs.children("div[data-index='" + id + "']").addClass("current");
|
||||
$tabsPanel.children("div[data-index='" + id + "']").show();
|
||||
}
|
||||
});
|
||||
|
|
@ -6,37 +6,37 @@ outputWS.onopen = function() {
|
|||
outputWS.onmessage = function(e) {
|
||||
console.log('[output onmessage]' + e.data);
|
||||
var data = JSON.parse(e.data);
|
||||
|
||||
|
||||
if ('run' === data.cmd) {
|
||||
$('#output').val($('#output').val() + data.output);
|
||||
} else if ('build' === data.cmd) {
|
||||
} else if ('build' === data.cmd) {
|
||||
$('#output').val(data.output);
|
||||
|
||||
if (0 != data.output.length) { // 说明编译有错误输出
|
||||
return;
|
||||
}
|
||||
|
||||
if (0 !== data.output.length) { // 说明编译有错误输出
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if ('build' === data.cmd) {
|
||||
if ('run' === data.nextCmd) {
|
||||
var request = {
|
||||
"executable": data.executable
|
||||
};
|
||||
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: '/run',
|
||||
data: JSON.stringify(request),
|
||||
dataType: "json",
|
||||
beforeSend: function(data) {
|
||||
$('#output').val('');
|
||||
},
|
||||
success: function(data) {
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if ('build' == data.cmd) {
|
||||
if ('run' === data.nextCmd) {
|
||||
var request = {
|
||||
"executable": data.executable
|
||||
};
|
||||
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: '/run',
|
||||
data: JSON.stringify(request),
|
||||
dataType: "json",
|
||||
beforeSend: function(data) {
|
||||
$('#output').val('');
|
||||
},
|
||||
success: function(data) {
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
outputWS.onclose = function(e) {
|
||||
console.log('[output onclose] disconnected (' + e.code + ')');
|
||||
|
|
@ -66,8 +66,8 @@ shellWS.onerror = function(e) {
|
|||
};
|
||||
|
||||
var wide = {
|
||||
curNode: "",
|
||||
curEditor: "",
|
||||
curNode: undefined,
|
||||
curEditor: undefined,
|
||||
init: function() {
|
||||
$('#shellInput').keydown(function(event) {
|
||||
if (13 === event.which) {
|
||||
|
|
@ -109,7 +109,7 @@ var wide = {
|
|||
"file": wide.curNode.path,
|
||||
"code": wide.curEditor.getValue()
|
||||
};
|
||||
|
||||
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: '/build',
|
||||
|
|
@ -119,11 +119,11 @@ var wide = {
|
|||
$('#output').val('');
|
||||
},
|
||||
success: function(data) {
|
||||
executable = data.executable;
|
||||
executable = data.executable;
|
||||
|
||||
if (data.succ) {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -13,26 +13,32 @@
|
|||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<ul id="files" class="ztree"></ul>
|
||||
<div class="side">
|
||||
<ul id="files" class="ztree"></ul>
|
||||
|
||||
<!-- 目录右键菜单 -->
|
||||
<div id="dirRMenu" class="fn-none">
|
||||
<ul>
|
||||
<li onclick="tree.newFile();">create file....</li>
|
||||
<li onclick="tree.newDir();">create dir....</li>
|
||||
<li onclick="tree.removeIt();">delete it....</li>
|
||||
</ul>
|
||||
<!-- 目录右键菜单 -->
|
||||
<div id="dirRMenu" class="fn-none">
|
||||
<ul>
|
||||
<li onclick="tree.newFile();">create file....</li>
|
||||
<li onclick="tree.newDir();">create dir....</li>
|
||||
<li onclick="tree.removeIt();">delete it....</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 文件右键菜单 -->
|
||||
<div id="fileRMenu" class="fn-none">
|
||||
<ul>
|
||||
<li onclick="tree.removeIt();">delete it....</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 文件右键菜单 -->
|
||||
<div id="fileRMenu" class="fn-none">
|
||||
<ul>
|
||||
<li onclick="tree.removeIt();">delete it....</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="edit-panel">
|
||||
<div class="tabs"></div>
|
||||
<div class="edit-header fn-clear">
|
||||
<div class="tabs fn-left"></div>
|
||||
<span class="fn-right">全屏</span>
|
||||
</div>
|
||||
<div class="tabs-panel"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -60,7 +66,7 @@
|
|||
channel: {
|
||||
editor: '{{.Wide.EditorChannel}}',
|
||||
shell: '{{.Wide.ShellChannel}}',
|
||||
output: '{{.Wide.OutputChannel}}'
|
||||
output: '{{.Wide.OutputChannel}}'
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -70,7 +76,7 @@
|
|||
|
||||
<script type="text/javascript" src="{{.Wide.StaticServer}}/static/js/lib/codemirror-4.4/codemirror.js"></script>
|
||||
<script type="text/javascript" src="{{.Wide.StaticServer}}/static/js/lib/codemirror-4.4/addon/hint/show-hint.js"></script>
|
||||
<script type="text/javascript" src="{{.Wide.StaticServer}}/static/js/lib/codemirror-4.4/addon/hint/anyword-hint.js"></script>
|
||||
<script type="text/javascript" src="{{.Wide.StaticServer}}/static/js/lib/codemirror-4.4/addon/hint/anyword-hint.js"></script>
|
||||
<script type="text/javascript" src="{{.Wide.StaticServer}}/static/js/lib/codemirror-4.4/mode/go/go.js"></script>
|
||||
<script type="text/javascript" src="{{.Wide.StaticServer}}/static/js/lib/codemirror-4.4/mode/xml/xml.js"></script>
|
||||
<script type="text/javascript" src="{{.Wide.StaticServer}}/static/js/lib/codemirror-4.4/mode/htmlmixed/htmlmixed.js"></script>
|
||||
|
|
@ -80,6 +86,7 @@
|
|||
<script type="text/javascript" src="{{.Wide.StaticServer}}/static/js/lib/codemirror-4.4/mode/shell/shell.js"></script>
|
||||
<script type="text/javascript" src="{{.Wide.StaticServer}}/static/js/lib/codemirror-4.4/mode/sql/sql.js"></script>
|
||||
|
||||
<script type="text/javascript" src="{{.Wide.StaticServer}}/static/js/tabs.js"></script>
|
||||
<script type="text/javascript" src="{{.Wide.StaticServer}}/static/js/editor.js"></script>
|
||||
<script type="text/javascript" src="{{.Wide.StaticServer}}/static/js/tree.js"></script>
|
||||
<script type="text/javascript" src="{{.Wide.StaticServer}}/static/js/wide.js"></script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue