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

多编辑器

This commit is contained in:
Van 2014-08-19 17:07:35 +08:00
parent f01fea661f
commit 33e8b843ae
6 changed files with 177 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
data/src/hello/main1.go Normal file
View File

@ -0,0 +1,12 @@
package main
import (
"fmt"
"time"
)
func main() {
fmt.Println("Hello, 世界")
time.Sleep(time.Second)
}

59
static/css/base.css
View File

@ -1,6 +1,6 @@
ul { ul {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.fn-clear:before, .fn-clear:before,
@ -14,54 +14,65 @@ ul {
} }
.fn-none { .fn-none {
display: none; display: none;
} }
.content { .content {
position: relative; position: relative;
height: 460px; height: 460px;
} }
.ztree { .ztree {
position: absolute; position: absolute;
width: 20%; width: 20%;
height: 440px; height: 440px;
overflow: auto; overflow: auto;
} }
#dirRMenu, #fileRMenu { #dirRMenu, #fileRMenu {
position: absolute; position: absolute;
border: 1px solid #DDD; border: 1px solid #DDD;
background-color: #444; background-color: #444;
color: #FFF; color: #FFF;
} }
#dirRMenu li, #fileRMenu li { #dirRMenu li, #fileRMenu li {
padding: 5px 10px; padding: 5px 10px;
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 12px;
} }
.edit-panel { .edit-panel {
position: absolute; background-color: #262626;
width: 80%; height: 450px;
left: 20%; left: 20%;
position: absolute;
width: 80%;
}
.edit-panel .tabs span {
background-color: #FFF;
cursor: pointer;
}
.edit-panel .tabs span.current {
background-color: #EEEEEE;
} }
.output { .output {
width: 49% width: 49%
} }
.shell { .shell {
float: right; float: right;
width: 49% width: 49%
} }
.shellInput, .shellOutput { .shellInput, .shellOutput {
width: 99% width: 99%
} }
.shellOutput { .shellOutput {
height: 125px; height: 125px;
} }

159
static/js/editor.js
View File

@ -1,58 +1,123 @@
(function(mod) { var editors = {
mod(CodeMirror); data: [],
})(function(CodeMirror) { init: function() {
"use strict"; editors._initAutocomplete();
editors._initTabs();
},
_initAutocomplete: function() {
CodeMirror.registerHelper("hint", "go", function(editor, options) {
var cur = editor.getCursor();
CodeMirror.registerHelper("hint", "go", function(editor, options) { var request = {
var cur = editor.getCursor(); code: editor.getValue(),
cursorLine: editor.getCursor().line,
cursorCh: editor.getCursor().ch
};
var request = { // XXX: 回调有问题，暂时不使用 WS 协议
code: editor.getValue(), //editorWS.send(JSON.stringify(request));
cursorLine: editor.getCursor().line,
cursorCh: editor.getCursor().ch
};
// XXX: 回调有问题，暂时不使用 WS 协议 var autocompleteHints = [];
//editorWS.send(JSON.stringify(request));
var autocompleteHints = []; $.ajax({
async: false, // 同步执行
type: 'POST',
url: '/autocomplete',
data: JSON.stringify(request),
dataType: "json",
success: function(data) {
var autocompleteArray = data[1];
$.ajax({ for (var i = 0; i < autocompleteArray.length; i++) {
async: false, // 同步执行 autocompleteHints[i] = autocompleteArray[i].name;
type: 'POST', }
url: '/autocomplete',
data: JSON.stringify(request),
dataType: "json",
success: function(data) {
var autocompleteArray = data[1];
for (var i = 0; i < autocompleteArray.length; i++) {
autocompleteHints[i] = autocompleteArray[i].name;
} }
} });
return {list: autocompleteHints, from: cur, to: cur};
}); });
return {list: autocompleteHints, from: cur, to: cur}; CodeMirror.commands.autocomplete = function(cm) {
}); cm.showHint({hint: CodeMirror.hint.go});
}); };
},
_initTabs: function() {
var $tabsPanel = $(".edit-panel .tabs-panel"),
$tabs = $(".edit-panel .tabs");
CodeMirror.commands.autocomplete = function(cm) { $tabs.on("click", "span", function() {
cm.showHint({hint: CodeMirror.hint.go}); 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;
});
},
_selectTab: function(id) {
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();
},
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);
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>');
var editor = CodeMirror.fromTextArea(document.getElementById("editor" + id), {
lineNumbers: true,
theme: 'lesser-dark',
extraKeys: {
"Ctrl-\\": "autocomplete"
}
});
editor.setSize('100%', 450);
editor.setValue(data.content);
editor.setOption("mode", data.mode);
wide.curEditor = editor;
editors.data.push({
"editor": editor,
"id": id
});
},
removeEditor: function() {
}
}; };
var editor = CodeMirror.fromTextArea(document.getElementById('code'), { editors.init();
lineNumbers: true,
theme: 'lesser-dark',
extraKeys: {
"Ctrl-\\": "autocomplete"
}
});
editor.setSize('100%', 450);
editor.addKeyMap({
});
editor.on('keyup', function(cm, event) {
});

7
static/js/tree.js
View File

@ -115,10 +115,10 @@ var tree = {
data: JSON.stringify(request), data: JSON.stringify(request),
dataType: "json", dataType: "json",
success: function(data) { success: function(data) {
if (data.succ) { if (!data.succ) {
editor.setValue(data.content); return false;
editor.setOption("mode", data.mode);
} }
editors.newEditor(data);
} }
}); });
} }
@ -126,6 +126,7 @@ var tree = {
} }
}; };
tree.fileTree = $.fn.zTree.init($("#files"), setting, data.root.children); tree.fileTree = $.fn.zTree.init($("#files"), setting, data.root.children);
// TODO: remove
tree.fileTree.expandAll(true); tree.fileTree.expandAll(true);
} }
} }

21
static/js/wide.js
View File

@ -37,7 +37,8 @@ shellWS.onerror = function(e) {
}; };
var wide = { var wide = {
curFile: "", curNode: "",
curEditor: "",
init: function() { init: function() {
$('#shellInput').keydown(function(event) { $('#shellInput').keydown(function(event) {
if (13 === event.which) { if (13 === event.which) {
@ -61,8 +62,8 @@ var wide = {
}, },
save: function() { save: function() {
var request = { var request = {
"file": wide.curFile, "file": wide.curNode.path,
"code": editor.getValue() "code": wide.curEditor.getValue()
}; };
$.ajax({ $.ajax({
type: 'POST', type: 'POST',
@ -76,8 +77,8 @@ var wide = {
}, },
run: function() { run: function() {
var request = { var request = {
"file": wide.curFile, "file": wide.curNode.path,
"code": editor.getValue() "code": wide.curEditor.getValue()
}; };
$.ajax({ $.ajax({
type: 'POST', type: 'POST',
@ -94,10 +95,10 @@ var wide = {
}, },
fmt: function() { fmt: function() {
var request = { var request = {
"file": wide.curFile, "file": wide.curNode.path,
"code": editor.getValue(), "code": wide.curEditor.getValue(),
"cursorLine": editor.getCursor().line, "cursorLine": wide.curEditor.getCursor().line,
"cursorCh": editor.getCursor().ch "cursorCh": wide.curEditor.getCursor().ch
}; };
$.ajax({ $.ajax({
type: 'POST', type: 'POST',
@ -106,7 +107,7 @@ var wide = {
dataType: "json", dataType: "json",
success: function(data) { success: function(data) {
if (data.succ) { if (data.succ) {
editor.setValue(data.code); wide.curEditor.setValue(data.code);
} }
} }
}); });

5
templates/index.html
View File

@ -32,7 +32,8 @@
</div> </div>
<div class="edit-panel"> <div class="edit-panel">
<textarea id="code" name="code"></textarea> <div class="tabs"></div>
<div class="tabs-panel"></div>
</div> </div>
</div> </div>
@ -43,7 +44,7 @@
</div> </div>
<div> <div>
<textarea id="output" class="output" rows="10"></textarea> <textarea id="output" class="output" rows="7"></textarea>
<div class="shell"> <div class="shell">
<div> <div>