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

159
static/js/editor.js
View File

@ -1,58 +1,123 @@
(function(mod) {
mod(CodeMirror);
})(function(CodeMirror) {
"use strict";
var editors = {
data: [],
init: function() {
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 cur = editor.getCursor();
var request = {
code: editor.getValue(),
cursorLine: editor.getCursor().line,
cursorCh: editor.getCursor().ch
};
var request = {
code: editor.getValue(),
cursorLine: editor.getCursor().line,
cursorCh: editor.getCursor().ch
};
// XXX: 回调有问题，暂时不使用 WS 协议
//editorWS.send(JSON.stringify(request));
// XXX: 回调有问题，暂时不使用 WS 协议
//editorWS.send(JSON.stringify(request));
var autocompleteHints = [];
var autocompleteHints = [];
$.ajax({
async: false, // 同步执行
type: 'POST',
url: '/autocomplete',
data: JSON.stringify(request),
dataType: "json",
success: function(data) {
var autocompleteArray = data[1];
$.ajax({
async: false, // 同步执行
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;
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) {
cm.showHint({hint: CodeMirror.hint.go});
$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;
});
},
_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'), {
lineNumbers: true,
theme: 'lesser-dark',
extraKeys: {
"Ctrl-\\": "autocomplete"
}
});
editor.setSize('100%', 450);
editor.addKeyMap({
});
editor.on('keyup', function(cm, event) {
});
editors.init();

7
static/js/tree.js
View File

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

21
static/js/wide.js
View File

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

5
templates/index.html
View File

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