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,4 +1,44 @@
 var tree = {
+    // 递归获取当前节点展开中的最后一个节点
+    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++) {

static/js/wide.js

@@ -70,11 +70,18 @@ var wide = {
         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());
+    },
+    _initBottomWindowGroup: function() {
+        new Tabs({
+            id: ".bottom-window-group"
+        });
     },
     init: function() {
         this._initLayout();
         
+        this._initBottomWindowGroup();
+
         $("body").bind("mousedown", function(event) {
             if (!(event.target.id === "dirRMenu" || $(event.target).closest("#dirRMenu").length > 0)) {
                 $("#dirRMenu").hide();

view/index.html

@@ -133,22 +133,31 @@
                     <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">
+                        <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>
+            </div>
+        </div>
 
         <div class="footer">
             <span>|</span>