Tree view resonds to tree-view:add events

spec/extensions/tree-view-spec.coffee

@@ -302,6 +302,57 @@ describe "TreeView", ->
     afterEach ->
       fs.remove(rootDirPath) if fs.exists(rootDirPath)
 
+    describe "tree-view:add", ->
+      addDialog = null
+
+      beforeEach ->
+        fileElement.click()
+        treeView.trigger "tree-view:add"
+        addDialog = rootView.find(".add-dialog").view()
+
+      describe "when a file is selected", ->
+        it "opens an add dialog with the file's current directory path populated", ->
+          expect(addDialog).toExist()
+          expect(addDialog.prompt.text()).toBeTruthy()
+          expect(project.relativize(dirPath)).toMatch(/[^\/]$/)
+          expect(addDialog.miniEditor.getText()).toBe(project.relativize(dirPath) + "/")
+          expect(addDialog.miniEditor.getCursorBufferPosition().column).toBe addDialog.miniEditor.getText().length
+          expect(addDialog.miniEditor.isFocused).toBeTruthy()
+
+        describe "when the path without a trailing '/' is changed and confirmed", ->
+          it "add a file and closes the dialog", ->
+            newPath = fs.join(dirPath, "new-test-file.txt")
+            addDialog.miniEditor.insertText(fs.base(newPath))
+            addDialog.trigger 'tree-view:confirm'
+            expect(fs.exists(newPath)).toBeTruthy()
+            expect(fs.isFile(newPath)).toBeTruthy()
+            expect(addDialog.parent()).not.toExist()
+            expect(rootView.activeEditor().buffer.path).toBe newPath
+
+        describe "when the path with a trailing '/' is changed and confirmed", ->
+          it "adds a directory and closes the dialog", ->
+            newPath = fs.join(dirPath, "new-dir")
+            addDialog.miniEditor.insertText("new-dir/")
+            addDialog.trigger 'tree-view:confirm'
+            expect(fs.exists(newPath)).toBeTruthy()
+            expect(fs.isDirectory(newPath)).toBeTruthy()
+            expect(addDialog.parent()).not.toExist()
+            expect(rootView.activeEditor().buffer.path).not.toBe newPath
+
+        describe "when 'tree-view:cancel' is triggered on the add dialog", ->
+          it "removes the dialog and focuses the tree view", ->
+            treeView.attachToDom()
+            addDialog.trigger 'tree-view:cancel'
+            expect(addDialog.parent()).not.toExist()
+            expect(treeView).toMatchSelector(':focus')
+
+        describe "when the add dialog's editor loses focus", ->
+          it "removes the dialog and focuses root view", ->
+            rootView.attachToDom()
+            rootView.focus()
+            expect(addDialog.parent()).not.toExist()
+            expect(rootView.activeEditor().isFocused).toBeTruthy()
+
     describe "tree-view:move", ->
       describe "when a file is selected", ->
         moveDialog = null

src/app/keymaps/tree-view.coffee

@@ -3,7 +3,8 @@ window.keymap.bindKeys '.tree-view'
   'left': 'tree-view:collapse-directory'
   'enter': 'tree-view:open-selected-entry'
   'm': 'tree-view:move'
+  'a': 'tree-view:add'
 
-window.keymap.bindKeys '.move-dialog .mini.editor'
+window.keymap.bindKeys '.move-dialog .mini.editor, .add-dialog .mini.editor'
   'enter': 'tree-view:confirm'
   'escape': 'tree-view:cancel'

src/extensions/tree-view/add-dialog.coffee

@@ -0,0 +1,43 @@
+{View, $$} = require 'space-pen'
+Editor = require 'editor'
+fs = require 'fs'
+$ = require 'jquery'
+
+module.exports =
+class AddDialog extends View
+  miniEditor: null
+  rootView: null
+  path: null
+
+  @content: ->
+    @div class: 'add-dialog', =>
+      @div "Enter the path for the new file/dir. Dirs end with '/':", outlet: 'prompt'
+      @subview 'miniEditor', new Editor(mini: true)
+
+  initialize: (@rootView, @path) ->
+    @miniEditor.focus()
+    @on 'tree-view:confirm', => @confirm()
+    @on 'tree-view:cancel', => @cancel()
+    @miniEditor.on 'focusout', => @remove()
+
+    directoryPath = if fs.isFile(@path) then fs.directory(@path) else @path
+    relativePath = @rootView.project.relativize(directoryPath)
+    @miniEditor.setText(relativePath)
+
+  confirm: ->
+    relativePath = @miniEditor.getText()
+    endsWithDirectorySeperator = /\/$/.test(relativePath)
+    path = @rootView.project.resolve(relativePath)
+
+    if endsWithDirectorySeperator
+      fs.makeDirectory(path)
+    else
+      fs.write(path, "")
+      @rootView.open(path)
+
+    @remove()
+    $('#root-view').focus()
+
+  cancel: ->
+    @remove()
+    $('.tree-view').focus()

src/extensions/tree-view/tree-view.coffee

@@ -2,6 +2,7 @@
 Directory = require 'directory'
 DirectoryView = require 'tree-view/directory-view'
 MoveDialog = require 'tree-view/move-dialog'
+AddDialog = require 'tree-view/add-dialog'
 $ = require 'jquery'
 _ = require 'underscore'
 
@@ -28,6 +29,7 @@ class TreeView extends View
     @on 'tree-view:collapse-directory', => @collapseDirectory()
     @on 'tree-view:open-selected-entry', => @openSelectedEntry()
     @on 'tree-view:move', => @move()
+    @on 'tree-view:add', => @add()
     @rootView.on 'active-editor-path-change', => @selectActiveFile()
 
   deactivate: ->
@@ -75,6 +77,9 @@ class TreeView extends View
   move: ->
     @rootView.append(new MoveDialog(@rootView.project, @selectedEntry().attr('path')))
 
+  add: ->
+    @rootView.append(new AddDialog(@rootView, @selectedEntry().attr('path')))
+
   selectedEntry: ->
     @find('.selected')
 

static/tree-view.css

@@ -35,7 +35,7 @@
   color: black;
 }
 
-.move-dialog {
+.add-dialog, .move-dialog {
   position: absolute;
   bottom: 0;
   width: 100%;