Remove atom-space-pen-views and custom elements

lib/add-dialog.coffee

@@ -23,6 +23,12 @@ class AddDialog extends Dialog
       select: false
       iconClass: if isCreatingFile then 'icon-file-add' else 'icon-file-directory-create'
 
+  onDidCreateFile: (callback) ->
+    @emitter.on('did-create-file', callback)
+
+  onDidCreateDirectory: (callback) ->
+    @emitter.on('did-create-directory', callback)
+
   onConfirm: (newPath) ->
     newPath = newPath.replace(/\s+$/, '') # Remove trailing whitespace
     endsWithDirectorySeparator = newPath[newPath.length - 1] is path.sep
@@ -44,11 +50,11 @@ class AddDialog extends Dialog
         else
           fs.writeFileSync(newPath, '')
           repoForPath(newPath)?.getPathStatus(newPath)
-          @trigger 'file-created', [newPath]
+          @emitter.emit('did-create-file', newPath)
           @close()
       else
         fs.makeTreeSync(newPath)
-        @trigger 'directory-created', [newPath]
+        @emitter.emit('did-create-directory', newPath)
         @cancel()
     catch error
       @showError("#{error.message}.")

lib/dialog.coffee

@@ -1,48 +1,69 @@
-{$, TextEditorView, View} = require 'atom-space-pen-views'
+{TextEditor, CompositeDisposable, Disposable, Emitter, Range, Point} = require 'atom'
 path = require 'path'
 
 module.exports =
-class Dialog extends View
-  @content: ({prompt} = {}) ->
-    @div class: 'tree-view-dialog', =>
-      @label prompt, class: 'icon', outlet: 'promptText'
-      @subview 'miniEditor', new TextEditorView(mini: true)
-      @div class: 'error-message', outlet: 'errorMessage'
-
-  initialize: ({initialPath, select, iconClass} = {}) ->
-    @promptText.addClass(iconClass) if iconClass
+class Dialog
+  constructor: ({initialPath, select, iconClass, prompt} = {}) ->
+    @emitter = new Emitter()
+    @disposables = new CompositeDisposable()
+
+    @element = document.createElement('div')
+    @element.classList.add('tree-view-dialog')
+
+    @promptText = document.createElement('label')
+    @promptText.classList.add('icon')
+    @promptText.classList.add(iconClass) if iconClass
+    @promptText.textContent = prompt
+    @element.appendChild(@promptText)
+
+    @miniEditor = new TextEditor({mini: true})
+    blurHandler = =>
+      @close() if document.hasFocus()
+    @miniEditor.element.addEventListener('blur', blurHandler)
+    @disposables.add(new Disposable(=> @miniEditor.element.removeEventListener('blur', blurHandler)))
+    @disposables.add(@miniEditor.onDidChange => @showError())
+    @element.appendChild(@miniEditor.element)
+
+    @errorMessage = document.createElement('div')
+    @errorMessage.classList.add('error-message')
+    @element.appendChild(@errorMessage)
+
     atom.commands.add @element,
       'core:confirm': => @onConfirm(@miniEditor.getText())
       'core:cancel': => @cancel()
-    @miniEditor.on 'blur', => @close() if document.hasFocus()
-    @miniEditor.getModel().onDidChange => @showError()
-    @miniEditor.getModel().setText(initialPath)
+
+    @miniEditor.setText(initialPath)
 
     if select
       extension = path.extname(initialPath)
       baseName = path.basename(initialPath)
+      selectionStart = initialPath.length - baseName.length
       if baseName is extension
         selectionEnd = initialPath.length
       else
         selectionEnd = initialPath.length - extension.length
-      range = [[0, initialPath.length - baseName.length], [0, selectionEnd]]
-      @miniEditor.getModel().setSelectedBufferRange(range)
+      @miniEditor.setSelectedBufferRange(Range(Point(0, selectionStart), Point(0, selectionEnd)))
 
   attach: ->
-    @panel = atom.workspace.addModalPanel(item: this.element)
-    @miniEditor.focus()
-    @miniEditor.getModel().scrollToCursorPosition()
+    @panel = atom.workspace.addModalPanel(item: this)
+    @miniEditor.element.focus()
+    @miniEditor.scrollToCursorPosition()
 
   close: ->
     panelToDestroy = @panel
     @panel = null
     panelToDestroy?.destroy()
+    @emitter.dispose()
+    @disposables.dispose()
+    @miniEditor.destroy()
     atom.workspace.getActivePane().activate()
 
   cancel: ->
     @close()
-    $('.tree-view').focus()
+    document.querySelector('.tree-view')?.focus()
 
   showError: (message='') ->
-    @errorMessage.text(message)
-    @flashError() if message
+    @errorMessage.textContent = message
+    if message
+      @element.classList.add('error')
+      window.setTimeout((=> @element.classList.remove('error')), 300)

lib/directory-view.coffee

@@ -3,13 +3,16 @@ Directory = require './directory'
 FileView = require './file-view'
 {repoForPath} = require './helpers'
 
-class DirectoryView extends HTMLElement
-  initialize: (@directory) ->
+module.exports =
+class DirectoryView
+  constructor: (@directory) ->
     @subscriptions = new CompositeDisposable()
     @subscriptions.add @directory.onDidDestroy => @subscriptions.dispose()
     @subscribeToDirectory()
 
-    @classList.add('directory', 'entry',  'list-nested-item',  'collapsed')
+    @element = document.createElement('li')
+    @element.setAttribute('is', 'tree-view-directory')
+    @element.classList.add('directory', 'entry',  'list-nested-item',  'collapsed')
 
     @header = document.createElement('div')
     @header.classList.add('header', 'list-item')
@@ -44,23 +47,36 @@ class DirectoryView extends HTMLElement
       @directoryName.title = @directory.name
       @directoryName.textContent = @directory.name
 
-    @appendChild(@header)
+    @element.appendChild(@header)
     @header.appendChild(@directoryName)
-    @appendChild(@entries)
+    @element.appendChild(@entries)
 
     if @directory.isRoot
-      @classList.add('project-root')
+      @element.classList.add('project-root')
       @header.classList.add('project-root-header')
     else
-      @draggable = true
+      @element.draggable = true
       @subscriptions.add @directory.onDidStatusChange => @updateStatus()
       @updateStatus()
 
     @expand() if @directory.expansionState.isExpanded
 
+    @element.collapse = @collapse.bind(this)
+    @element.expand = @expand.bind(this)
+    @element.toggleExpansion = @toggleExpansion.bind(this)
+    @element.reload = @reload.bind(this)
+    @element.isExpanded = @isExpanded
+    @element.updateStatus = @updateStatus.bind(this)
+    @element.isPathEqual = @isPathEqual.bind(this)
+    @element.getPath = @getPath.bind(this)
+    @element.directory = @directory
+    @element.header = @header
+    @element.entries = @entries
+    @element.directoryName = @directoryName
+
   updateStatus: ->
-    @classList.remove('status-ignored', 'status-modified', 'status-added')
-    @classList.add("status-#{@directory.status}") if @directory.status?
+    @element.classList.remove('status-ignored', 'status-modified', 'status-added')
+    @element.classList.add("status-#{@directory.status}") if @directory.status?
 
   subscribeToDirectory: ->
     @subscriptions.add @directory.onDidAddEntries (addedEntries) =>
@@ -73,9 +89,9 @@ class DirectoryView extends HTMLElement
 
         insertionIndex = entry.indexInParentDirectory
         if insertionIndex < numberOfEntries
-          @entries.insertBefore(view, @entries.children[insertionIndex])
+          @entries.insertBefore(view.element, @entries.children[insertionIndex])
         else
-          @entries.appendChild(view)
+          @entries.appendChild(view.element)
 
         numberOfEntries++
 
@@ -87,14 +103,13 @@ class DirectoryView extends HTMLElement
 
   createViewForEntry: (entry) ->
     if entry instanceof Directory
-      view = new DirectoryElement()
+      view = new DirectoryView(entry)
     else
-      view = new FileView()
-    view.initialize(entry)
+      view = new FileView(entry)
 
     subscription = @directory.onDidRemoveEntries (removedEntries) ->
       for removedName, removedEntry of removedEntries when entry is removedEntry
-        view.remove()
+        view.element.remove()
         subscription.dispose()
         break
     @subscriptions.add(subscription)
@@ -110,27 +125,26 @@ class DirectoryView extends HTMLElement
   expand: (isRecursive=false) ->
     unless @isExpanded
       @isExpanded = true
-      @classList.add('expanded')
-      @classList.remove('collapsed')
+      @element.isExpanded = @isExpanded
+      @element.classList.add('expanded')
+      @element.classList.remove('collapsed')
       @directory.expand()
 
     if isRecursive
-      for entry in @entries.children when entry instanceof DirectoryView
+      for entry in @entries.children when entry.classList.contains('directory')
         entry.expand(true)
 
     false
 
   collapse: (isRecursive=false) ->
     @isExpanded = false
+    @element.isExpanded = false
 
     if isRecursive
       for entry in @entries.children when entry.isExpanded
         entry.collapse(true)
 
-    @classList.remove('expanded')
-    @classList.add('collapsed')
+    @element.classList.remove('expanded')
+    @element.classList.add('collapsed')
     @directory.collapse()
     @entries.innerHTML = ''
-
-DirectoryElement = document.registerElement('tree-view-directory', prototype: DirectoryView.prototype, extends: 'li')
-module.exports = DirectoryElement

lib/file-view.coffee

@@ -2,18 +2,19 @@
 FileIcons = require './file-icons'
 
 module.exports =
-class FileView extends HTMLElement
-  initialize: (@file) ->
+class FileView
+  constructor: (@file) ->
     @subscriptions = new CompositeDisposable()
     @subscriptions.add @file.onDidDestroy => @subscriptions.dispose()
 
-    @draggable = true
-
-    @classList.add('file', 'entry', 'list-item')
+    @element = document.createElement('li')
+    @element.setAttribute('is', 'tree-view-file')
+    @element.draggable = true
+    @element.classList.add('file', 'entry', 'list-item')
 
     @fileName = document.createElement('span')
     @fileName.classList.add('name', 'icon')
-    @appendChild(@fileName)
+    @element.appendChild(@fileName)
     @fileName.textContent = @file.name
     @fileName.title = @file.name
     @fileName.dataset.name = @file.name
@@ -28,14 +29,18 @@ class FileView extends HTMLElement
     @subscriptions.add @file.onDidStatusChange => @updateStatus()
     @updateStatus()
 
+    @element.getPath = @getPath.bind(this)
+    @element.isPathEqual = @isPathEqual.bind(this)
+    @element.file = @file
+    @element.fileName = @fileName
+    @element.updateStatus = @updateStatus.bind(this)
+
   updateStatus: ->
-    @classList.remove('status-ignored', 'status-modified',  'status-added')
-    @classList.add("status-#{@file.status}") if @file.status?
+    @element.classList.remove('status-ignored', 'status-modified',  'status-added')
+    @element.classList.add("status-#{@file.status}") if @file.status?
 
   getPath: ->
     @fileName.dataset.path
 
   isPathEqual: (pathToCompare) ->
     @file.isPathEqual(pathToCompare)
-
-module.exports = document.registerElement('tree-view-file', prototype: FileView.prototype, extends: 'li')