-
-
- create file.... -
- create dir.... -
- delete it.... -
-
+
- create file.... +
- create dir.... +
- delete it.... +
-
+
- delete it.... +
-
-
- delete it.... -
diff --git a/static/css/base.css b/static/css/base.css index d9b7327..9630131 100644 --- a/static/css/base.css +++ b/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% } @@ -75,4 +83,19 @@ ul { .shellOutput { height: 80px; -} \ No newline at end of file +} + +/* start tabs */ +.tabs > div { + background-color: #FFF; + float: left; +} + +.tabs > div.current { + background-color: #EEEEEE; +} + +.tabs .ico-close { + cursor: pointer; +} +/* end tabs */ \ No newline at end of file diff --git a/static/js/editor.js b/static/js/editor.js index cb58add..e4a45f2 100644 --- a/static/js/editor.js +++ b/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"), - $tabs = $(".edit-panel .tabs"); - - $tabs.children("span").removeClass("current"); - $tabsPanel.children("div").hide(); - - $tabsPanel.append('
'); - $tabs.append('' + wide.curNode.name + ''); + editors.tabs.add({ + id: id, + title: '' + wide.curNode.name + '', + content: '' + }); 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); diff --git a/static/js/tabs.js b/static/js/tabs.js index b381b46..2176396 100644 --- a/static/js/tabs.js +++ b/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, { - add: function () { - - }, - remove: function () { - - } +$.extend(Tabs.prototype, { + _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(); + }); + }, + 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('