tab 重构 + 关闭

static/css/base.css

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

static/js/editor.js

@@ -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"),
+        editors.tabs.add({
-                $tabs = $(".edit-panel .tabs");
+            id: id,
-
+            title: '<span title="' + wide.curNode.path + '">' + wide.curNode.name + '</span>',
-        $tabs.children("span").removeClass("current");
+            content: '<textarea id="editor' + id + '"></textarea>'
-        $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,
@@ -135,7 +135,7 @@ var editors = {
                 ".": "autocompleteAfterDot"
             }
         });
-        editor.setSize('100%', 450);
+        editor.setSize('100%', 430);
         editor.setValue(data.content);
         editor.setOption("mode", data.mode);
 

static/js/tabs.js

@@ -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, {
+$.extend(Tabs.prototype, {
-   add: function () {
+    _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();
     }
 });

static/js/wide.js

@@ -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: "",
+    curNode: undefined,
-    curEditor: "",
+    curEditor: undefined,
     init: function() {
         $('#shellInput').keydown(function(event) {
             if (13 === event.which) {

templates/index.html

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