🐛 Fix plugin generation view

It’s now a custom element as the rest of the views.
The `createPluginInDevMode` settings was added to control the plugins
creation mode.
There’s also new messages displayed in the view during the generation
process.

lib/main.coffee

@@ -2,7 +2,7 @@
 
 PluginManagement = require './mixins/plugin-management'
 
-[Minimap, MinimapElement, MinimapPluginGeneratorView, deprecate, semver] = []
+[Minimap, MinimapElement, MinimapPluginGeneratorElement, deprecate, semver] = []
 
 # Public: The `Minimap` package provides an eagle-eye view of text buffers.
 #
@@ -80,6 +80,9 @@ class Main
       type: 'boolean'
       default: false
       description: "If this option is enabled then when you click the minimap it will scroll to the destination with animation"
+    createPluginInDevMode:
+      type: 'boolean'
+      default: false
 
   # Internal: The activation state of the minimap package.
   active: false
@@ -143,8 +146,9 @@ class Main
 
   # Opens the plugin generation view.
   generatePlugin: ->
-    MinimapPluginGeneratorView ?= require './minimap-plugin-generator-view'
-    view = new MinimapPluginGeneratorView()
+    MinimapPluginGeneratorElement ?= require './minimap-plugin-generator-element'
+    view = new MinimapPluginGeneratorElement()
+    view.attach()
 
   # Calls the `callback` when the minimap package have been activated.
   #

lib/minimap-plugin-generator-view.coffee → lib/minimap-plugin-generator-element.coffee

@@ -1,55 +1,75 @@
-path = require 'path'
 _ = require 'underscore-plus'
-{$, BufferedProcess, TextEditorView, View} = require 'atom'
 fs = require 'fs-plus'
+path = require 'path'
+{TextEditor, BufferedProcess} = require 'atom'
+{CompositeDisposable} = require 'event-kit'
 
 module.exports =
-class MinimapPluginGeneratorView extends View
+class MinimapPluginGeneratorElement extends HTMLElement
   previouslyFocusedElement: null
   mode: null
 
-  @content: ->
-    @div class: 'minimap-plugin-generator overlay from-top', =>
-      @subview 'miniEditor', new TextEditorView(mini: true)
-      @div class: 'error', outlet: 'error'
-      @div class: 'message', outlet: 'message'
-
-  initialize: ->
-    @miniEditor.hiddenInput.on 'focusout', => @detach()
-    @on 'core:confirm', => @confirm()
-    @on 'core:cancel', => @detach()
-    @attach('plugin')
-
-  attach: (@mode) ->
-    @previouslyFocusedElement = $(':focus')
-    @message.text("Enter #{mode} path")
-    atom.views.getView(atom.workspace).appendChild(@element)
+  createdCallback: ->
+    @classList.add('minimap-plugin-generator')
+    @classList.add('overlay')
+    @classList.add('from-top')
+
+    @editor = new TextEditor(mini: true)
+    @editorElement = atom.views.getView(@editor)
+
+    @error = document.createElement('div')
+    @error.classList.add('error')
+
+    @message = document.createElement('div')
+    @message.classList.add('message')
+
+    @appendChild(@editorElement)
+    @appendChild(@error)
+    @appendChild(@message)
+
+  attachedCallback: ->
+    @previouslyFocusedElement = document.activeElement
+    @message.textContent = "Enter plugin path"
     @setPathText("my-minimap-plugin")
-    @miniEditor.focus()
+    @editorElement.focus()
+
+  attach: ->
+    atom.views.getView(atom.workspace).appendChild(this)
 
   setPathText: (placeholderName, rangeToSelect) ->
-    {editor} = @miniEditor
     rangeToSelect ?= [0, placeholderName.length]
     packagesDirectory = @getPackagesDirectory()
-    editor.setText(path.join(packagesDirectory, placeholderName))
-    pathLength = editor.getText().length
+    @editor.setText(path.join(packagesDirectory, placeholderName))
+    pathLength = @editor.getText().length
     endOfDirectoryIndex = pathLength - placeholderName.length
-    editor.setSelectedBufferRange([[0, endOfDirectoryIndex + rangeToSelect[0]], [0, endOfDirectoryIndex + rangeToSelect[1]]])
+    @editor.setSelectedBufferRange([[0, endOfDirectoryIndex + rangeToSelect[0]], [0, endOfDirectoryIndex + rangeToSelect[1]]])
 
   detach: ->
-    return unless @hasParent()
+    return unless @parentNode?
     @previouslyFocusedElement?.focus()
-    super
+    @parentNode.removeChild(this)
 
   confirm: ->
     if @validPackagePath()
+      @removeChild(@editorElement)
+      @message.innerHTML = """
+        <span class='loading loading-spinner-tiny inline-block'></span>
+        Generate plugin at <span class="text-primary">#{@getPackagePath()}</span>
+      """
       @createPackageFiles =>
         packagePath = @getPackagePath()
-        atom.open(pathsToOpen: [packagePath])
-        @detach()
+        atom.open(pathsToOpen: [packagePath], devMode: atom.config.get('minimap.createPluginInDevMode'))
+
+        @message.innerHTML = """
+          <span class="text-success">Plugin successfully generated, opening it now...</span>
+        """
+
+        setTimeout =>
+          @detach()
+        , 2000
 
   getPackagePath: ->
-    packagePath = @miniEditor.getText()
+    packagePath = @editor.getText()
     packageName = _.dasherize(path.basename(packagePath))
     path.join(path.dirname(packagePath), packageName)
 
@@ -60,8 +80,8 @@ class MinimapPluginGeneratorView extends View
 
   validPackagePath: ->
     if fs.existsSync(@getPackagePath())
-      @error.text("Path already exists at '#{@getPackagePath()}'")
-      @error.show()
+      @error.textContent = "Path already exists at '#{@getPackagePath()}'"
+      @error.style.display = 'block'
       false
     else
       true
@@ -72,7 +92,7 @@ class MinimapPluginGeneratorView extends View
 
   linkPackage: (packagePath, callback) ->
     args = ['link']
-    args.push('--dev') if atom.config.get('package-generator.createInDevMode')
+    args.push('--dev') if atom.config.get('minimap.createPluginInDevMode')
     args.push packagePath.toString()
 
     @runCommand(atom.packages.getApmPath(), args, callback)
@@ -103,3 +123,11 @@ class MinimapPluginGeneratorView extends View
 
   runCommand: (command, args, exit, options={}) ->
     new BufferedProcess({command, args, exit, options})
+
+
+module.exports = MinimapPluginGeneratorElement = document.registerElement 'minimap-plugin-generator', prototype: MinimapPluginGeneratorElement.prototype
+
+atom.commands.add 'minimap-plugin-generator', {
+  'core:confirm': -> @confirm()
+  'core:cancel': -> @detach()
+}