dialog 引入，替换 alert， prompt， confirm

i18n/zh_CN.json

@@ -1,5 +1,7 @@
 {
     "wide": "Wide",
+    "isDelete": "是否删除",
+    "cancel": "取消",
     "file": "文件",
     "login": "登录",
     "username": "用户名",
@@ -14,6 +16,7 @@
     "about": "关于",
     "start_page": "起始页",
     "create_file": "创建文件",
+    "create": "创建",
     "create_dir": "创建目录",
     "delete": "删除",
     "save": "保存",
@@ -28,5 +31,7 @@
     "full_screen": "全屏",
     "unread_notification": "未读通知",
     "notification_2": "没有检查到 gocode，这将会导致 [自动完成] 失效",
-    "notification_3": "没有检查到 ide_stub，这将会导致 [跳转到声明]、[查找使用] 失效"
+    "notification_3": "没有检查到 ide_stub，这将会导致 [跳转到声明]、[查找使用] 失效",
+    "goto_line": "跳转到行",
+    "goto": "跳转"
 }

static/css/base.css

@@ -236,24 +236,33 @@ ul {
 
 /* start bottom-window-group */
 .bottom-window-group .tabs {
-    background-color: #CAD3E3;
+    background-color: #E6E6E6;
-    border-top: 1px solid #8E97A7;
+    border-top: 1px solid #A4A4A4;
-    border-bottom: 1px solid #8E97A7;
+    border-bottom: 1px solid #9D9D9D;
 }
 
 .bottom-window-group .tabs > div {
     cursor: pointer;
+    background-color: #DDD;
+    color: #8B8B8B;
+    border-right-color: #ADADAD;
+}
+
+.bottom-window-group .tabs > div.current {
+    background-color: #9F9F9F;
+    color: #FFF;
 }
 
 .bottom-window-group .tabs-panel {
     height: 133px;
 }
 
-.bottom-window-group textarea {
+.bottom-window-group textarea.output {
     border-width: 0;
+    background-color: #FFF;
     color: #555555;
-    height: 130px;
     width: 100%;
+    height: 132px;
 }
 
 .bottom-window-group .notification,

static/css/dialog.css

@@ -0,0 +1,84 @@
+/**
+ * dialig style
+ *
+ * @author <a href="mailto:LLY219@gmail.com">Liyuan Li</a>
+ * @version 0.0.0.6, Jun 3, 2012
+*/
+
+.dialog-background {
+    height: 100%;
+    left: 0;
+    opacity: .3;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    filter: alpha(opacity=30);
+    display: none;
+    background-color: #000000;
+}
+
+.dialog-panel {
+    position: absolute;
+    z-index: 100;
+    display: none;
+    -moz-user-select: none;
+    user-select: none;
+}
+
+.dialog-title {
+    float: left;
+    line-height: 22px;
+    margin-left: 3px;
+    color: #000;
+}
+
+.dialog-header-bg {
+    height: 23px;
+    background-color: #CCD5E5;
+    cursor: move;
+    width: 100%;
+    border: 1px solid #9B9B9B;
+    border-top-color: #8E97A7;
+    border-bottom-color: #8891A1;
+}
+
+.dialog-close-icon {
+    background-position: -15px 0;
+    cursor: pointer;
+    float: right;
+    height: 18px;
+    margin: 5px 3px 0 0;
+    width: 18px;
+}
+
+.dialog-close-icon:hover {
+    background-position: -15px -18px;
+}
+
+.dialog-main {
+    border: 1px solid #9B9B9B;
+    border-top-width: 0px;
+    background-color: #F0F0F0;
+}
+
+.dialog-main > div {
+    width: 100%;
+}
+
+.dialog-footer {
+    padding: 10px;
+    text-align: right;
+}
+
+#dialogRemoveConfirm,
+#dialogNewFilePrompt,
+#dialogNewDirPrompt,
+#dialogGoLinePrompt {
+    padding: 10px 20px 0;
+}
+
+#dialogNewFilePrompt > input,
+#dialogNewDirPrompt > input,
+#dialogGoLinePrompt > input {
+    width: 100%;
+}

static/js/dialog.js

@@ -0,0 +1,350 @@
+/*
+ * Copyright (C) 2011, Liyuan Li
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+(function($) {
+    $.fn.extend({
+        dialog: {
+            version: "0.0.1.7",
+            author: "lly219@gmail.com"
+        }
+    });
+
+    var dpuuid = new Date().getTime();
+    var PROP_NAME = 'dialog';
+
+    var Dialog = function() {
+        this._defaults = {
+            "styleClass": {
+                "background": "dialog-background",
+                "panel": "dialog-panel",
+                "main": "dialog-main",
+                "footer": "dialog-footer",
+                "headerMiddle": "dialog-header-middle",
+                "headerBg": "dialog-header-bg",
+                "closeIcon": "dialog-close-icon",
+                "closeIconHover": "dialog-close-icon-hover",
+                "title": "dialog-title"
+            }
+        }
+    };
+
+    $.extend(Dialog.prototype, {
+        _attach: function(target, settings) {
+            if (!target.id) {
+                this.uuid++;
+                target.id = 'dp' + this.uuid;
+            }
+            var inst = this._newInst($(target));
+
+            inst.settings = $.extend({}, settings || {});
+            $.data(target, PROP_NAME, inst);
+            this._init(target);
+        },
+        /* Create a new instance object. */
+        _newInst: function(target) {
+            // escape jQuery meta chars
+            var id = target[0].id.replace(/([^A-Za-z0-9_])/g, '\\\\$1');
+            return {
+                id: id
+            };
+        },
+        _getInst: function(target) {
+            try {
+                return $.data(target, PROP_NAME);
+            } catch (err) {
+                throw 'Missing instance data for this dialog';
+            }
+        },
+        _destroyDialog: function(target) {
+            var inst = $.dialog._getInst(target);
+            var id = inst.id;
+            $.removeData(target, PROP_NAME);
+
+            $(target).prependTo("#" + id + "Wrap").unwrap();
+            $(target).removeAttr("style");
+
+            var styleClass = this._getDefaults($.dialog._defaults, inst.settings, "styleClass");
+            $("." + styleClass.background).remove();
+            $("#" + id + "Dialog").remove();
+        },
+        _init: function(target) {
+            var inst = this._getInst(target);
+            var id = inst.id,
+                    settings = inst.settings;
+            var windowH = $(window).height(),
+                    windowW = $(window).width();
+            var styleClass = this._getDefaults($.dialog._defaults, settings, "styleClass"),
+                    dialogH = settings.height ? settings.height : parseInt(windowH * 0.6),
+                    dialogW = settings.width ? settings.width : parseInt(windowW * 0.6);
+
+            // get settings or default value.
+            settings.title = settings.title ? settings.title : "";
+            settings.okText = settings.okText ? settings.okText : "Ok";
+            settings.cancelText = settings.cancelText ? settings.cancelText : "Cancel";
+
+            // build HTML.
+            var footerHTML = "",
+                    headerHTML = "<div class='"
+                    + styleClass.headerBg + "'><div class='"
+                    + styleClass.title + "'>"
+                    + settings.title + "</div><a href='javascript:void(0);' class='"
+                    + styleClass.closeIcon + "'></a></div>";
+
+            // Sets footerHTML.
+            if (!settings.hideFooter) {
+                footerHTML = "<button>" + settings.okText +
+                        "</button><button>"
+                        + settings.cancelText + "</button>";
+            }
+
+            var dialogHTML = "<div id='" + id + "Dialog' class='" + styleClass.panel
+                    + "' style='width: " + dialogW + "px;' onselectstart='return false;'>" + headerHTML
+                    + "<div class='" + styleClass.main + "'><div style='overflow: auto; height: "
+                    + dialogH + "px;'></div><div class='" + styleClass.footer + "'>"
+                    + footerHTML + "</div></div>";
+
+            var bgHTML = "";
+            if (settings.modal && $("." + styleClass.background).length === 0) {
+                var bgHeight = windowH < document.documentElement.scrollHeight
+                        ? document.documentElement.scrollHeight : windowH;
+                bgHTML = "<div style='height:" + bgHeight
+                        + "px;' class='" + styleClass.background + "'></div>";
+            }
+
+            // Package dialog.
+            $("#" + id).wrap("<div id='" + id + "Wrap'></div>");
+            var cloneObj = $(target).clone(true);
+            $(target).remove();
+            $('body').append(bgHTML + dialogHTML);
+            $($("#" + id + "Dialog ." + styleClass.main + " div").get(0)).append(cloneObj);
+            $(cloneObj).show();
+
+            // Sets position.
+            var top = "", left = "",
+                    $dialog = $("#" + id + "Dialog");
+            if (settings.position) {
+                top = settings.position.top;
+                left = settings.position.left;
+            } else {
+                top = parseInt((windowH - dialogH) / 2);
+                left = parseInt((windowW - dialogW) / 2);
+            }
+            $dialog.css({
+                "top": top + "px",
+                "left": left + "px"
+            });
+
+            // Bind event.
+            $("#" + id + "Dialog ." + styleClass.closeIcon).bind("click", function() {
+                $.dialog._close(id, settings);
+            });
+
+            var $buttons = $("#" + id + "Dialog ." + styleClass.footer + " button");
+            $($buttons.get(1)).bind("click", function() {
+                $.dialog._close(id, settings);
+            });
+
+            $($buttons.get(0)).bind("click", function() {
+                if (settings.ok === undefined || settings.ok()) {
+                    $.dialog._close(id, settings);
+                }
+            });
+
+            this._bindMove(id, styleClass.headerBg, dialogH, dialogW);
+
+            // esc exit
+            $(window).keyup(function(event) {
+                if (event.keyCode === 27) {
+                    $.dialog._close(id, settings);
+                }
+            });
+        },
+        _bindMove: function(id, className) {
+            $("#" + id + "Dialog ." + className).mousedown(function(event) {
+                var _document = document;
+                if (!event) {
+                    event = window.event;
+                }
+                var dialog = document.getElementById(id + "Dialog");
+                var x = event.clientX - parseInt(dialog.style.left),
+                        y = event.clientY - parseInt(dialog.style.top);
+                _document.ondragstart = "return false;";
+                _document.onselectstart = "return false;";
+                _document.onselect = "document.selection.empty();";
+
+                if (this.setCapture) {
+                    this.setCapture();
+                } else if (window.captureEvents) {
+                    window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
+                }
+
+                _document.onmousemove = function(event) {
+                    if (!event) {
+                        event = window.event;
+                    }
+                    var positionX = event.clientX - x,
+                            positionY = event.clientY - y;
+                    if (positionX < 0) {
+                        positionX = 0;
+                    }
+                    if (positionX > $(window).width() - $(dialog).width()) {
+                        positionX = $(window).width() - $(dialog).width();
+                    }
+                    if (positionY < 0) {
+                        positionY = 0;
+                    }
+                    if (positionY > $(window).height() - $(dialog).height()) {
+                        positionY = $(window).height() - $(dialog).height();
+                    }
+                    dialog.style.left = positionX + "px";
+                    dialog.style.top = positionY + "px";
+                };
+
+                _document.onmouseup = function() {
+                    if (this.releaseCapture) {
+                        this.releaseCapture();
+                    } else if (window.captureEvents) {
+                        window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
+                    }
+                    _document.onmousemove = null;
+                    _document.onmouseup = null;
+                    _document.ondragstart = null;
+                    _document.onselectstart = null;
+                    _document.onselect = null;
+                }
+            });
+        },
+        _close: function(id, settings) {
+            if ($("#" + id + "Dialog").css("display") === "none") {
+                return;
+            }
+            if (settings.close === undefined || settings.close()) {
+                $("#" + id + "Dialog").hide();
+                if (settings.modal) {
+                    var styleClass = this._getDefaults($.dialog._defaults, settings, "styleClass");
+                    $("." + styleClass.background).hide();
+                }
+            }
+        },
+        _closeDialog: function(target) {
+            var inst = this._getInst(target);
+            var id = inst.id,
+                    settings = inst.settings;
+            $.dialog._close(id, settings);
+        },
+        _openDialog: function(target) {
+            var inst = this._getInst(target);
+            var id = inst.id,
+                    settings = inst.settings;
+
+            $("#" + id + "Dialog").show();
+
+            if (settings.modal) {
+                var styleClass = this._getDefaults($.dialog._defaults, settings, "styleClass");
+                $("." + styleClass.background).show();
+            }
+
+            $("#" + id + "Dialog .dialog-footer button:eq(0)").focus();
+            
+            if (typeof settings.afterOpen === "function") {
+                settings.afterOpen();
+            }
+        },
+        _updateDialog: function(target, data) {
+            var inst = this._getInst(target);
+            var id = inst.id,
+                    settings = inst.settings;
+            var styleClass = this._getDefaults($.dialog._defaults, settings, "styleClass");
+            $.extend(settings, data);
+            var $dialog = $("#" + id + "Dialog");
+            if (data.position) {
+                $dialog.css({
+                    "top": data.position.top,
+                    "left": data.position.left
+                })
+            }
+
+            if (data.width) {
+                $dialog.width(data.width + 26);
+                $dialog.find("." + styleClass.main + " div")[0].style.width = data.width + "px";
+                $dialog.find("." + styleClass.headerBg).width(data.width + 18);
+            }
+
+            if (data.height) {
+                $dialog.find("." + styleClass.main + " div")[0].style.height = data.height + "px";
+            }
+
+            if (data.title) {
+                $dialog.find("." + styleClass.title).html(data.title);
+            }
+
+            if (data.modal !== undefined) {
+                if (data.modal) {
+                    $("." + styleClass.background).show();
+                } else {
+                    $("." + styleClass.background).hide();
+                }
+            }
+
+            if (data.hideFooter !== undefined) {
+                if (data.hideFooter) {
+                    $dialog.find("." + styleClass.footer).hide();
+                } else {
+                    $dialog.find("." + styleClass.footer).show();
+                }
+            }
+
+        },
+        _getDefaults: function(defaults, settings, key) {
+            if (key === "styleClass") {
+                if (settings.theme === "default" || settings.theme === undefined) {
+                    return defaults.styleClass;
+                }
+                settings.styleClass = {};
+                for (var styleName in defaults[key]) {
+                    settings.styleClass[styleName] = settings.theme + "-" + defaults.styleClass[styleName];
+                }
+            } else if (key === "height" || key === "width") {
+                if (settings[key] === null || settings[key] === undefined) {
+                    return "auto";
+                } else {
+                    return settings[key] + "px";
+                }
+            } else {
+                if (settings[key] === null || settings[key] === undefined) {
+                    return defaults[key];
+                }
+            }
+            return settings[key];
+        }
+    });
+
+    $.fn.dialog = function(options) {
+        var otherArgs = Array.prototype.slice.call(arguments);
+
+        if (typeof options === 'string') {
+            otherArgs.shift();
+            return $.dialog['_' + options + 'Dialog'].apply($.dialog, [this[0]].concat(otherArgs));
+        }
+        return this.each(function() {
+            $.dialog._attach(this, options);
+        });
+    };
+
+    $.dialog = new Dialog();
+
+    // Add another global to avoid noConflict issues with inline event handlers
+    window['DP_jQuery_' + dpuuid] = $;
+})(jQuery);

static/js/editor.js

@@ -122,9 +122,7 @@ var editors = {
         };
 
         CodeMirror.commands.gotoLine = function (cm) {
-            var line = prompt("Go To Line: ", "0");
+           $("#dialogGoLinePrompt").dialog("open");
-
-            cm.setCursor(CodeMirror.Pos(line - 1, 0));
         };
 
         CodeMirror.commands.doNothing = function (cm) {

static/js/tree.js

@@ -1,6 +1,6 @@
 var tree = {
     // 递归获取当前节点展开中的最后一个节点
-    getCurrentNodeLastNode: function (node) {
+    getCurrentNodeLastNode: function(node) {
         var returnNode = node.children[node.children.length - 1];
         if (returnNode.open) {
             return tree.getCurrentNodeLastNode(returnNode);
@@ -9,7 +9,7 @@ var tree = {
         }
     },
     // 按照树展现获取下一个节点
-    getNextShowNode: function (node) {
+    getNextShowNode: function(node) {
         if (node.level !== 0) {
             if (node.getParentNode().getNextNode()) {
                 return node.getParentNode().getNextNode();
@@ -20,7 +20,7 @@ var tree = {
             return node.getNextNode();
         }
     },
-    isBottomNode: function (node) {
+    isBottomNode: function(node) {
         if (node.open) {
             return false;
         }
@@ -39,7 +39,7 @@ var tree = {
             }
         }
     },
-    getTIdByPath: function (path) {
+    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) {
@@ -50,7 +50,7 @@ var tree = {
         return undefined;
     },
     fileTree: undefined,
-    _isParents: function (tId, parentTId) {
+    _isParents: function(tId, parentTId) {
         var node = tree.fileTree.getNodeByTId(tId);
         if (!node || !node.parentTId) {
             return false;
@@ -62,143 +62,20 @@ var tree = {
             }
         }
     },
-    newFile: function () {
+    newFile: function() {
         $("#dirRMenu").hide();
-        var name = prompt("Name", "");
+        $("#dialogNewFilePrompt").dialog("open");
-        if (!name) {
-            return false;
-        }
-
-        var request = newWideRequest();
-        request.path = wide.curNode.path + '\\' + name;
-        request.fileType = "f";
-
-        $.ajax({
-            type: 'POST',
-            url: '/file/new',
-            data: JSON.stringify(request),
-            dataType: "json",
-            success: function (data) {
-                if (!data.succ) {
-                    return false;
-                }
-
-                var suffix = name.split(".")[1],
-                        iconSkin = "ico-ztree-other ";
-                switch (suffix) {
-                    case "html", "htm":
-                        iconSkin = "ico-ztree-html ";
-                        break;
-                    case "go":
-                        iconSkin = "ico-ztree-go ";
-                        break;
-                    case "css":
-                        iconSkin = "ico-ztree-css ";
-                        break;
-                    case "txt":
-                        iconSkin = "ico-ztree-text ";
-                        break;
-                    case "sql":
-                        iconSkin = "ico-ztree-sql ";
-                        break;
-                    case "properties":
-                        iconSkin = "ico-ztree-pro ";
-                        break;
-                    case "md":
-                        iconSkin = "ico-ztree-md ";
-                        break;
-                    case "js", "json":
-                        iconSkin = "ico-ztree-js ";
-                        break;
-                    case "xml":
-                        iconSkin = "ico-ztree-xml ";
-                        break;
-                    case "jpg", "jpeg", "bmp", "gif", "png", "svg", "ico":
-                        iconSkin = "ico-ztree-img ";
-                        break;
-                }
-
-                tree.fileTree.addNodes(wide.curNode, [{
-                        "name": name,
-                        "iconSkin": iconSkin,
-                        "path": request.path,
-                        "mode": data.mode
-                    }]);
-            }
-        });
     },
-    newDir: function () {
+    newDir: function() {
         $("#dirRMenu").hide();
-        var name = prompt("Name", "");
+        $("#dialogNewDirPrompt").dialog("open");
-        if (!name) {
-            return false;
-        }
-
-        var request = newWideRequest();
-        request.path = wide.curNode.path + '\\' + name;
-        request.fileType = "d";
-
-        $.ajax({
-            type: 'POST',
-            url: '/file/new',
-            data: JSON.stringify(request),
-            dataType: "json",
-            success: function (data) {
-                if (!data.succ) {
-                    return false;
-                }
-                tree.fileTree.addNodes(wide.curNode, [{
-                        "name": name,
-                        "iconSkin": "ico-ztree-dir ",
-                        "path": request.path
-                    }]);
-            }
-        });
     },
-    removeIt: function () {
+    removeIt: function() {
         $("#dirRMenu").hide();
         $("#fileRMenu").hide();
-
+        $("#dialogRemoveConfirm").dialog("open");
-        if (!confirm("Remove it?")) {
-            return;
-        }
-
-        var request = newWideRequest();
-        request.path = wide.curNode.path;
-
-        $.ajax({
-            type: 'POST',
-            url: '/file/remove',
-            data: JSON.stringify(request),
-            dataType: "json",
-            success: function (data) {
-                if (!data.succ) {
-                    return false;
-                }
-				
-                tree.fileTree.removeNode(wide.curNode);
-
-                if ("ico-ztree-dir " !== wide.curNode.iconSkin) {
-                    // 是文件的话，查看 editor 中是否被打开，如打开则移除
-                    for (var i = 0, ii = editors.data.length; i < ii; i++) {
-                        if (editors.data[i].id === wide.curNode.tId) {
-                            $(".edit-header .tabs > div[data-index=" + wide.curNode.tId + "]").find(".ico-close").click();
-                            break;
-                        }
-                    }
-                } else {
-                    for (var i = 0, ii = editors.data.length; i < ii; i++) {
-                        if (tree._isParents(editors.data[i].id, wide.curNode.tId)) {
-                            $(".edit-header .tabs > div[data-index=" + editors.data[i].id + "]").find(".ico-close").click();
-                            i--;
-                            ii--;
-                        }
-                    }
-                }
-            }
-        });
     },
-    init: function () {
+    init: function() {
         var request = newWideRequest();
 
         $.ajax({
@@ -206,7 +83,7 @@ var tree = {
             url: '/files',
             data: JSON.stringify(request),
             dataType: "json",
-            success: function (data) {
+            success: function(data) {
                 if (data.succ) {
                     var dirRMenu = $("#dirRMenu");
                     var fileRMenu = $("#fileRMenu");
@@ -215,7 +92,7 @@ var tree = {
                             selectedMulti: false
                         },
                         callback: {
-                            onRightClick: function (event, treeId, treeNode) {
+                            onRightClick: function(event, treeId, treeNode) {
                                 if (treeNode) {
                                     wide.curNode = treeNode;
                                     if ("ico-ztree-dir " !== treeNode.iconSkin) { // 如果右击了文件
@@ -235,7 +112,7 @@ var tree = {
                                     }
                                 }
                             },
-                            onClick: function (event, treeId, treeNode, clickFlag) {
+                            onClick: function(event, treeId, treeNode, clickFlag) {
                                 tree._onClick(treeNode);
                             }
                         }
@@ -245,7 +122,7 @@ var tree = {
             }
         });
     },
-    _onClick: function (treeNode) {
+    _onClick: function(treeNode) {
         if (wide.curNode) {
             for (var i = 0, ii = editors.data.length; i < ii; i++) {
                 // 该节点文件已经打开
@@ -270,7 +147,7 @@ var tree = {
                 url: '/file',
                 data: JSON.stringify(request),
                 dataType: "json",
-                success: function (data) {
+                success: function(data) {
                     if (!data.succ) {
                         alert(data.msg);
 

static/js/wide.js

@@ -1,9 +1,9 @@
 var outputWS = new WebSocket(config.channel.output + '/output/ws?sid=' + config.wideSessionId);
-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);
 
@@ -20,10 +20,10 @@ outputWS.onmessage = function (e) {
             url: '/run',
             data: JSON.stringify(request),
             dataType: "json",
-            beforeSend: function (data) {
+            beforeSend: function(data) {
                 $('.bottom-window-group .output').text('');
             },
-            success: function (data) {
+            success: function(data) {
 
             }
         });
@@ -54,11 +54,11 @@ outputWS.onmessage = function (e) {
         $('.bottom-window-group .output').text($('.bottom-window-group .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);
 };
 
@@ -66,26 +66,201 @@ var wide = {
     curNode: undefined,
     curEditor: undefined,
     bottomWindowTab: undefined,
-    _initLayout: function () {
+    _initDialog: function() {
+        $("#dialogRemoveConfirm").dialog({
+            "height": 26,
+            "width": 260,
+            "title": config.label.delete,
+            "okText": config.label.delete,
+            "cancelText": config.label.cancel,
+            "afterOpen": function() {
+                $("#dialogRemoveConfirm > b").html('"' + wide.curNode.name + '"');
+            },
+            "ok": function() {
+                var request = newWideRequest();
+                request.path = wide.curNode.path;
+
+                $.ajax({
+                    type: 'POST',
+                    url: '/file/remove',
+                    data: JSON.stringify(request),
+                    dataType: "json",
+                    success: function(data) {
+                        if (!data.succ) {
+                            return false;
+                        }
+
+                        $("#dialogRemoveConfirm").dialog("close");
+                        tree.fileTree.removeNode(wide.curNode);
+
+                        if ("ico-ztree-dir " !== wide.curNode.iconSkin) {
+                            // 是文件的话，查看 editor 中是否被打开，如打开则移除
+                            for (var i = 0, ii = editors.data.length; i < ii; i++) {
+                                if (editors.data[i].id === wide.curNode.tId) {
+                                    $(".edit-header .tabs > div[data-index=" + wide.curNode.tId + "]").find(".ico-close").click();
+                                    break;
+                                }
+                            }
+                        } else {
+                            for (var i = 0, ii = editors.data.length; i < ii; i++) {
+                                if (tree._isParents(editors.data[i].id, wide.curNode.tId)) {
+                                    $(".edit-header .tabs > div[data-index=" + editors.data[i].id + "]").find(".ico-close").click();
+                                    i--;
+                                    ii--;
+                                }
+                            }
+                        }
+                    }
+                });
+            }
+        });
+
+        $("#dialogNewFilePrompt").dialog({
+            "height": 32,
+            "width": 260,
+            "title": config.label.create_file,
+            "okText": config.label.create,
+            "cancelText": config.label.cancel,
+            "afterOpen": function() {
+                $("#dialogNewFilePrompt > input").val('').focus();
+            },
+            "ok": function() {
+                var request = newWideRequest(),
+                        name = $("#dialogNewFilePrompt > input").val()
+                request.path = wide.curNode.path + '\\' + name;
+                request.fileType = "f";
+
+                $.ajax({
+                    type: 'POST',
+                    url: '/file/new',
+                    data: JSON.stringify(request),
+                    dataType: "json",
+                    success: function(data) {
+                        if (!data.succ) {
+                            return false;
+                        }
+                        $("#dialogNewFilePrompt").dialog("close");
+                        var suffix = name.split(".")[1],
+                                iconSkin = "ico-ztree-other ";
+                        switch (suffix) {
+                            case "html", "htm":
+                                iconSkin = "ico-ztree-html ";
+                                break;
+                            case "go":
+                                iconSkin = "ico-ztree-go ";
+                                break;
+                            case "css":
+                                iconSkin = "ico-ztree-css ";
+                                break;
+                            case "txt":
+                                iconSkin = "ico-ztree-text ";
+                                break;
+                            case "sql":
+                                iconSkin = "ico-ztree-sql ";
+                                break;
+                            case "properties":
+                                iconSkin = "ico-ztree-pro ";
+                                break;
+                            case "md":
+                                iconSkin = "ico-ztree-md ";
+                                break;
+                            case "js", "json":
+                                iconSkin = "ico-ztree-js ";
+                                break;
+                            case "xml":
+                                iconSkin = "ico-ztree-xml ";
+                                break;
+                            case "jpg", "jpeg", "bmp", "gif", "png", "svg", "ico":
+                                iconSkin = "ico-ztree-img ";
+                                break;
+                        }
+
+                        tree.fileTree.addNodes(wide.curNode, [{
+                                "name": name,
+                                "iconSkin": iconSkin,
+                                "path": request.path,
+                                "mode": data.mode
+                            }]);
+                    }
+                });
+            }
+        });
+
+        $("#dialogNewDirPrompt").dialog({
+            "height": 32,
+            "width": 260,
+            "title": config.label.create_dir,
+            "okText": config.label.create,
+            "cancelText": config.label.cancel,
+            "afterOpen": function() {
+                $("#dialogNewDirPrompt > input").val('').focus();
+            },
+            "ok": function() {
+                var name = $("#dialogNewDirPrompt > input").val(),
+                        request = newWideRequest();
+                request.path = wide.curNode.path + '\\' + name;
+                request.fileType = "d";
+
+                $.ajax({
+                    type: 'POST',
+                    url: '/file/new',
+                    data: JSON.stringify(request),
+                    dataType: "json",
+                    success: function(data) {
+                        if (!data.succ) {
+                            return false;
+                        }
+
+                        $("#dialogNewDirPrompt").dialog("close");
+
+                        tree.fileTree.addNodes(wide.curNode, [{
+                                "name": name,
+                                "iconSkin": "ico-ztree-dir ",
+                                "path": request.path
+                            }]);
+                    }
+                });
+            }
+        });
+
+        $("#dialogGoLinePrompt").dialog({
+            "height": 32,
+            "width": 260,
+            "title": config.label.goto_line,
+            "okText": config.label.goto,
+            "cancelText": config.label.cancel,
+            "afterOpen": function() {
+                $("#dialogGoLinePrompt > input").val('').focus();
+            },
+            "ok": function() {
+                var line = parseInt($("#dialogGoLinePrompt > input").val());
+
+                $("#dialogGoLinePrompt").dialog("close");
+                wide.curEditor.setCursor(CodeMirror.Pos(line - 1, 0));
+                wide.curEditor.focus();
+            }
+        });
+    },
+    _initLayout: function() {
         var mainH = $(window).height() - $(".menu").height() - $(".footer").height() - 2;
         $(".content, .ztree").height(mainH);
 
         $(".edit-panel").height(mainH - $(".bottom-window-group").height());
     },
-    _initBottomWindowGroup: function () {
+    _initBottomWindowGroup: function() {
         this.bottomWindowTab = new Tabs({
             id: ".bottom-window-group",
-            clickAfter: function (id) {
+            clickAfter: function(id) {
                 this._$tabsPanel.find("." + id).focus();
             }
         });
     },
-    init: function () {
+    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();
             }
@@ -101,8 +276,9 @@ var wide = {
             }
         });
 
+        this._initDialog();
     },
-    _save: function () {
+    _save: function() {
         var request = newWideRequest();
         request.file = $(".edit-header .current span:eq(0)").attr("title");
         request.code = wide.curEditor.getValue();
@@ -112,29 +288,32 @@ var wide = {
             url: '/file/save',
             data: JSON.stringify(request),
             dataType: "json",
-            success: function (data) {
+            success: function(data) {
             }
         });
     },
-    saveFile: function () {
+    saveFile: function() {
         // 格式化后会对文件进行保存
         this.fmt();
     },
-    saveAllFiles: function () {
+    saveAllFiles: function() {
-        // TODO: save all files
+        // TODO: save all open files
-        console.log("TODO: ssave all files");
+        for (var i = 0, ii = editors.data.length; i < ii; i++) {
+
+        }
+        console.log("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 = newWideRequest();
         request.file = $(".edit-header .current span:eq(0)").attr("title");
         request.code = wide.curEditor.getValue();
@@ -146,14 +325,14 @@ var wide = {
             url: '/build',
             data: JSON.stringify(request),
             dataType: "json",
-            beforeSend: function (data) {
+            beforeSend: function(data) {
                 $('.bottom-window-group .output').text('');
             },
-            success: function (data) {
+            success: function(data) {
             }
         });
     },
-    goget: function () {
+    goget: function() {
         var request = newWideRequest();
         request.file = $(".edit-header .current span:eq(0)").attr("title");
 
@@ -162,14 +341,14 @@ var wide = {
             url: '/go/get',
             data: JSON.stringify(request),
             dataType: "json",
-            beforeSend: function (data) {
+            beforeSend: function(data) {
                 $('.bottom-window-group .output').text('');
             },
-            success: function (data) {
+            success: function(data) {
             }
         });
     },
-    goinstall: function () {
+    goinstall: function() {
         var request = newWideRequest();
         request.file = $(".edit-header .current span:eq(0)").attr("title");
         request.code = wide.curEditor.getValue();
@@ -179,16 +358,16 @@ var wide = {
             url: '/go/install',
             data: JSON.stringify(request),
             dataType: "json",
-            beforeSend: function (data) {
+            beforeSend: function(data) {
                 $('.bottom-window-group .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;
+        var mode = wide.curEditor.getOption("mode");
 
         var request = newWideRequest();
         request.file = path;
@@ -203,7 +382,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);
                         }
@@ -217,7 +396,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);
                         }
@@ -246,7 +425,7 @@ var wide = {
     }
 };
 
-$(document).ready(function () {
+$(document).ready(function() {
     wide.init();
     tree.init();
     menu.init();

view/index.html

@@ -12,6 +12,7 @@
 
         <link rel="stylesheet" href="{{.conf.StaticServer}}/static/js/lib/ztree/zTreeStyle.css">
 
+        <link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/dialog.css?{{.conf.StaticResourceVersion}}">
         <link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/base.css?{{.conf.StaticResourceVersion}}">
         <link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/side.css?{{.conf.StaticResourceVersion}}">
     </head>
@@ -166,22 +167,42 @@
             <span class="notification-count" title="{{.i18n.unread_notification}}">Notification!</span>
         </div>
 
-        <script type="text/javascript">
+        <div id="dialogRemoveConfirm">
+            {{.i18n.isDelete}} <b></b>?
+        </div>
+        <div id="dialogNewFilePrompt">
+            <input/>
+        </div>
+        <div id="dialogNewDirPrompt">
+            <input/>
+        </div>
+        <div id="dialogGoLinePrompt">
+            <input/>
+        </div>
+        <script>
                     var config = {
-                    channel: {
+                    "label": {
-                    editor: {{.conf.EditorChannel}},
+                    "delete": "{{.i18n.delete}}",
-                            shell: {{.conf.ShellChannel}},
+                            "cancel": "{{.i18n.cancel}}",
-                            output: {{.conf.OutputChannel}},
+                            "goto_line": "{{.i18n.goto_line}}",
-                            session: {{.conf.SessionChannel}}
+                            "goto": "{{.i18n.goto}}",
+                            "create": "{{.i18n.create}}",
+                            "create_file": "{{.i18n.create_file}}",
+                            "create_dir": "{{.i18n.create_dir}}",
                     },
-                            wideSessionId: {{.session.Id}}
+                            "channel": {
+                            "editor": '{{.conf.EditorChannel}}',
+                                    "shell": '{{.conf.ShellChannel}}',
+                                    "output": '{{.conf.OutputChannel}}',
+                                    "session": '{{.conf.SessionChannel}}'
+                            },
+                            "wideSessionId": '{{.session.Id}}'
                     };
                     // 发往 Wide 的所有 AJAX 请求需要使用该函数创建请求参数.
                             function newWideRequest() {
                             var ret = {
                             sid: config.wideSessionId
                             }
-
                             return ret;
                             }
 
@@ -222,6 +243,7 @@
         <script type="text/javascript" src="{{.conf.StaticServer}}/static/js/lint/json-lint.js?{{.conf.StaticResourceVersion}}"></script>
         <script type="text/javascript" src="{{.conf.StaticServer}}/static/js/lint/go-lint.js?{{.conf.StaticResourceVersion}}"></script>
         <script type="text/javascript" src="{{.conf.StaticServer}}/static/js/tabs.js?{{.conf.StaticResourceVersion}}"></script>
+        <script type="text/javascript" src="{{.conf.StaticServer}}/static/js/dialog.js?{{.conf.StaticResourceVersion}}"></script>
         <script type="text/javascript" src="{{.conf.StaticServer}}/static/js/editor.js?{{.conf.StaticResourceVersion}}"></script>
         <script type="text/javascript" src="{{.conf.StaticServer}}/static/js/notification.js?{{.conf.StaticResourceVersion}}"></script>
         <script type="text/javascript" src="{{.conf.StaticServer}}/static/js/tree.js?{{.conf.StaticResourceVersion}}"></script>