多编辑器

data/src/hello/main1.go

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

static/css/base.css

@@ -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 {

static/js/editor.js

@@ -1,8 +1,10 @@
-(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();
 
@@ -34,25 +36,88 @@
 
             return {list: autocompleteHints, from: cur, to: cur};
         });
-});
 
-CodeMirror.commands.autocomplete = function(cm) {
+        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.setSize('100%', 450);
+        wide.curEditor = editor;
+        editors.data.push({
+            "editor": editor,
+            "id": id
+        });
+    },
+    removeEditor: function() {
 
-editor.addKeyMap({
+    }
-});
+};
 
-editor.on('keyup', function(cm, event) {
+editors.init();
-
-});

static/js/tree.js

@@ -115,10 +115,10 @@ var tree = {
                                         data: JSON.stringify(request),
                                         dataType: "json",
                                         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);
+                    // TODO: remove
                     tree.fileTree.expandAll(true);
                 }
             }

static/js/wide.js

@@ -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,
+            "file": wide.curNode.path,
-            "code": editor.getValue()
+            "code": wide.curEditor.getValue()
         };
         $.ajax({
             type: 'POST',
@@ -76,8 +77,8 @@ var wide = {
     },
     run: function() {
         var request = {
-            "file": wide.curFile,
+            "file": wide.curNode.path,
-            "code": editor.getValue()
+            "code": wide.curEditor.getValue()
         };
         $.ajax({
             type: 'POST',
@@ -94,10 +95,10 @@ var wide = {
     },
     fmt: function() {
         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({
             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);
                 }
             }
         });

templates/index.html

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