多编辑器

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

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)
}

View File

@ -44,9 +44,20 @@ ul {
.edit-panel {
background-color: #262626;
height: 450px;
left: 20%;
position: absolute;
width: 80%;
left: 20%;
}
.edit-panel .tabs span {
background-color: #FFF;
cursor: pointer;
}
.edit-panel .tabs span.current {
background-color: #EEEEEE;
}
.output {

View File

@ -1,8 +1,10 @@
(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();
@ -34,25 +36,88 @@
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");
var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
$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);
editor.addKeyMap({
wide.curEditor = editor;
editors.data.push({
"editor": editor,
"id": id
});
},
removeEditor: function() {
editor.on('keyup', function(cm, event) {
}
};
});
editors.init();

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

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

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>