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

tab 重构 + 关闭

This commit is contained in:
Van 2014-08-29 17:24:08 +08:00
parent 123a9f17bb
commit 93931e0083
5 changed files with 232 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
static/css/base.css
View File

@ -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%
}
@ -76,3 +84,18 @@ 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 */

116
static/js/editor.js
View File

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

82
static/js/tabs.js
View File

@ -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 () {
$.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();
});
},
remove: function () {
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();
}
});

8
static/js/wide.js
View File

@ -12,12 +12,12 @@ outputWS.onmessage = function(e) {
} else if ('build' === data.cmd) {
$('#output').val(data.output);
if (0 != data.output.length) { // 说明编译有错误输出
if (0 !== data.output.length) { // 说明编译有错误输出
return;
}
}
if ('build' == data.cmd) {
if ('build' === data.cmd) {
if ('run' === data.nextCmd) {
var request = {
"executable": data.executable
@ -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) {

9
templates/index.html
View File

@ -13,6 +13,7 @@
</head>
<body>
<div class="content">
<div class="side">
<ul id="files" class="ztree"></ul>
<!-- 目录右键菜单 -->
@ -30,9 +31,14 @@
<li onclick="tree.removeIt();">delete it....</li>
</ul>
</div>
</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>
@ -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>