fixed tree file‘s hotkeys bug and add remove fun; add bottom window group

static/css/base.css

@@ -235,23 +235,18 @@ ul {
 /* end editor */
 
 /* start output */
-.output .tabs {
+.bottom-window-group .tabs {
     background-color: #CAD3E3;
     border-top: 1px solid #8E97A7;
     border-bottom: 1px solid #8E97A7;
 }
 
-.output .tabs > div {
+.bottom-window-group .tabs > div {
-    background-color: #B5BDCC;
+    cursor: pointer;
-    border-left-color: #9096A2;
 }
 
-.output .tabs > div.current {
+#output, 
-    background-color: #8B99B3;
+#notification {
-    color: #FFF;
-}
-
-#output {
     border-width: 0;
     color: #555555;
     height: 130px;

static/js/hotkeys.js

@@ -26,6 +26,9 @@ var hotkeys = {
         // TODO: 滚动处理
         $("#files").keydown(function(event) {
             switch (event.which) {
+                case 46: // 删除
+                    tree.removeIt();
+                    break;
                 case 13: // 回车
                     if (!wide.curNode) {
                         return false;
@@ -60,8 +63,8 @@ var hotkeys = {
                         var preNode = wide.curNode.getPreNode();
                         if (preNode && preNode.iconSkin === "ico-ztree-dir "
                                 && preNode.open) {
-                            // 当前节点的上一个节点是目录且打开时
+                            // 当前节点的上一个节点是目录且打开时，获取打开节点中的最后一个节点
-                            node = preNode.children[preNode.children.length - 1];
+                            node = tree.getCurrentNodeLastNode(preNode);
                         }
                     }
 
@@ -75,8 +78,7 @@ var hotkeys = {
                     if (!wide.curNode) { // 没有选中节点时，默认选中第一个
                         node = tree.fileTree.getNodeByTId("files_1");
                     } else {
-                        if (wide.curNode && wide.curNode.isLastNode && !wide.curNode.open
+                        if (wide.curNode && tree.isBottomNode(wide.curNode)) {
-                                && wide.curNode.getParentNode().isLastNode) {
                             // 当前节点为最底部的节点
                             return false;
                         }
@@ -87,10 +89,11 @@ var hotkeys = {
                             node = wide.curNode.children[0];
                         }
 
-                        if (wide.curNode.isLastNode && wide.curNode.level !== 0
+                        var nextShowNode = tree.getNextShowNode(wide.curNode);
-                                && wide.curNode.getParentNode().getNextNode()) {
+                        if (wide.curNode.isLastNode && wide.curNode.level !== 0 && !wide.curNode.open
-                            // 当前节点为最后一个节点，但其父节点还有下一个节点
+                                && nextShowNode) {
-                            node = wide.curNode.getParentNode().getNextNode();
+                            // 当前节点为最后一个叶子节点，但其父或祖先节点还有下一个节点
+                            node = nextShowNode;
                         }
                     }
 

static/js/tree.js

@@ -1,12 +1,52 @@
 var tree = {
-    getTIdByPath: function (path) {
+    // 递归获取当前节点展开中的最后一个节点
-       var nodes = tree.fileTree.transformToArray(tree.fileTree.getNodes());
+    getCurrentNodeLastNode: function(node) {
+        var returnNode = node.children[node.children.length - 1];
+        if (returnNode.open) {
+            return tree.getCurrentNodeLastNode(returnNode);
+        } else {
+            return returnNode;
+        }
+    },
+    // 按照树展现获取下一个节点
+    getNextShowNode: function(node) {
+        if (node.level !== 0) {
+            if (node.getParentNode().getNextNode()) {
+                return node.getParentNode().getNextNode();
+            } else {
+                return tree.getNextShowNode(node.getParentNode());
+            }
+        } else {
+            return node.getNextNode();
+        }
+    },
+    isBottomNode: function(node) {
+        if (node.open) {
+            return false;
+        }
+
+        if (node.getParentNode()) {
+            if (node.getParentNode().isLastNode) {
+                return tree.isBottomNode(node.getParentNode());
+            } else {
+                return false;
+            }
+        } else {
+            if (node.isLastNode) {
+                return true;
+            } else {
+                return false;
+            }
+        }
+    },
+    getTIdByPath: function(path) {
+        var nodes = tree.fileTree.transformToArray(tree.fileTree.getNodes());
         for (var i = 0, ii = nodes.length; i < ii; i++) {
             if (nodes[i].path === path) {
                 return nodes[i].tId;
             }
         }
-        
+
         return undefined;
     },
     fileTree: undefined,

static/js/wide.js

@@ -1,9 +1,9 @@
 var outputWS = new WebSocket(config.channel.output + '/output/ws');
-outputWS.onopen = function () {
+outputWS.onopen = function() {
     console.log('[output onopen] connected');
 };
 
-outputWS.onmessage = function (e) {
+outputWS.onmessage = function(e) {
     console.log('[output onmessage]' + e.data);
     var data = JSON.parse(e.data);
 
@@ -21,10 +21,10 @@ outputWS.onmessage = function (e) {
             url: '/run',
             data: JSON.stringify(request),
             dataType: "json",
-            beforeSend: function (data) {
+            beforeSend: function(data) {
                 $('#output').text('');
             },
-            success: function (data) {
+            success: function(data) {
 
             }
         });
@@ -55,27 +55,34 @@ outputWS.onmessage = function (e) {
         $('#output').text($('#output').text() + data.output);
     }
 };
-outputWS.onclose = function (e) {
+outputWS.onclose = function(e) {
     console.log('[output onclose] disconnected (' + e.code + ')');
     delete outputWS;
 };
-outputWS.onerror = function (e) {
+outputWS.onerror = function(e) {
     console.log('[output onerror] ' + e);
 };
 
 var wide = {
     curNode: undefined,
     curEditor: undefined,
-    _initLayout: function () {
+    _initLayout: function() {
         var mainH = $(window).height() - $(".menu").height() - $(".footer").height() - 2;
         $(".content, .ztree").height(mainH);
 
-        $(".edit-panel").height(mainH - $(".output").height());
+        $(".edit-panel").height(mainH - $(".bottom-window-group").height());
     },
-    init: function () {
+    _initBottomWindowGroup: function() {
+        new Tabs({
+            id: ".bottom-window-group"
+        });
+    },
+    init: function() {
         this._initLayout();
+        
+        this._initBottomWindowGroup();
 
-        $("body").bind("mousedown", function (event) {
+        $("body").bind("mousedown", function(event) {
             if (!(event.target.id === "dirRMenu" || $(event.target).closest("#dirRMenu").length > 0)) {
                 $("#dirRMenu").hide();
             }
@@ -92,7 +99,7 @@ var wide = {
         });
 
     },
-    saveFile: function () {
+    saveFile: function() {
         var request = {
             file: $(".edit-header .current span:eq(0)").attr("title"),
             code: wide.curEditor.getValue()
@@ -102,24 +109,24 @@ var wide = {
             url: '/file/save',
             data: JSON.stringify(request),
             dataType: "json",
-            success: function (data) {
+            success: function(data) {
             }
         });
     },
-    saveAllFiles: function () {
+    saveAllFiles: function() {
         // TODO: save all files
     },
-    closeFile: function () {
+    closeFile: function() {
         // TODO: close file
     },
-    closeAllFiles: function () {
+    closeAllFiles: function() {
         // TODO: close all files
     },
-    exit: function () {
+    exit: function() {
         // TODO: exit
     },
     // 构建 & 运行.
-    run: function () {
+    run: function() {
         var request = {
             file: $(".edit-header .current span:eq(0)").attr("title"),
             code: wide.curEditor.getValue()
@@ -132,14 +139,14 @@ var wide = {
             url: '/build',
             data: JSON.stringify(request),
             dataType: "json",
-            beforeSend: function (data) {
+            beforeSend: function(data) {
                 $('#output').text('');
             },
-            success: function (data) {
+            success: function(data) {
             }
         });
     },
-    goget: function () {
+    goget: function() {
         var request = {
             file: $(".edit-header .current span:eq(0)").attr("title")
         };
@@ -149,14 +156,14 @@ var wide = {
             url: '/go/get',
             data: JSON.stringify(request),
             dataType: "json",
-            beforeSend: function (data) {
+            beforeSend: function(data) {
                 $('#output').text('');
             },
-            success: function (data) {
+            success: function(data) {
             }
         });
     },
-    goinstall: function () {
+    goinstall: function() {
         var request = {
             file: $(".edit-header .current span:eq(0)").attr("title"),
             code: wide.curEditor.getValue()
@@ -167,14 +174,14 @@ var wide = {
             url: '/go/install',
             data: JSON.stringify(request),
             dataType: "json",
-            beforeSend: function (data) {
+            beforeSend: function(data) {
                 $('#output').text('');
             },
-            success: function (data) {
+            success: function(data) {
             }
         });
     },
-    fmt: function () {
+    fmt: function() {
         var path = $(".edit-header .current span:eq(0)").attr("title");
         var mode = wide.curNode.mode;
 
@@ -192,7 +199,7 @@ var wide = {
                     url: '/go/fmt',
                     data: JSON.stringify(request),
                     dataType: "json",
-                    success: function (data) {
+                    success: function(data) {
                         if (data.succ) {
                             wide.curEditor.setValue(data.code);
                         }
@@ -206,7 +213,7 @@ var wide = {
                     url: '/html/fmt',
                     data: JSON.stringify(request),
                     dataType: "json",
-                    success: function (data) {
+                    success: function(data) {
                         if (data.succ) {
                             wide.curEditor.setValue(data.code);
                         }
@@ -233,7 +240,7 @@ var wide = {
     }
 };
 
-$(document).ready(function () {
+$(document).ready(function() {
     wide.init();
     tree.init();
     menu.init();

view/index.html

@@ -133,20 +133,29 @@
                     <div class="tabs-panel"></div>
                 </div>
 
-                <div class="output">
+                <div class="bottom-window-group">
                     <div class="tabs">
-                        <div class="current" data-index="files_3">
+                        <div class="current" data-index="output">
                             <span title="Output">Output</span>
                         </div>
+                        <div data-index="search">
+                            <span title="Search">Search</span>
+                        </div>
+                        <div data-index="notification">
+                            <span title="Notification">Notification</span>
+                        </div>
                     </div>
                     <div class="tabs-panel">
-                        <textarea id="output"></textarea>
+                        <div data-index="output">
+                            <textarea id="output"></textarea>
+                        </div>
+                        <div class="fn-none" data-index="search">
+                        </div>
+                        <div class="fn-none" data-index="notification">
+                            <textarea id="notification"></textarea>
+                        </div>
                     </div>
                 </div>
-
-
-
-                <textarea id="notification"></textarea>
             </div>
         </div>