Merge pull request #14166 from atom/mb-fix-creating-panels-with-markup

Ensure that atom-panel tags can be created via HTML

src/panel-container-element.js

@@ -34,7 +34,7 @@ class PanelContainerElement extends HTMLElement {
   getModel () { return this.model }
 
   panelAdded ({panel, index}) {
-    const panelElement = this.viewRegistry.getView(panel)
+    const panelElement = panel.getElement()
     panelElement.classList.add(this.model.getLocation())
     if (this.model.isModal()) {
       panelElement.classList.add('overlay', 'from-top')

src/panel-element.coffee

@@ -1,34 +0,0 @@
-{CompositeDisposable} = require 'event-kit'
-Panel = require './panel'
-
-class PanelElement extends HTMLElement
-  createdCallback: ->
-    @subscriptions = new CompositeDisposable
-
-  initialize: (@model, @viewRegistry) ->
-    @appendChild(@getItemView())
-
-    @classList.add(@model.getClassName().split(' ')...) if @model.getClassName()?
-    @subscriptions.add @model.onDidChangeVisible(@visibleChanged.bind(this))
-    @subscriptions.add @model.onDidDestroy(@destroyed.bind(this))
-    this
-
-  getModel: -> @model
-
-  getItemView: ->
-    @viewRegistry.getView(@getModel().getItem())
-
-  attachedCallback: ->
-    @visibleChanged(@getModel().isVisible())
-
-  visibleChanged: (visible) ->
-    if visible
-      @style.display = null
-    else
-      @style.display = 'none'
-
-  destroyed: ->
-    @subscriptions.dispose()
-    @remove()
-
-module.exports = PanelElement = document.registerElement 'atom-panel', prototype: PanelElement.prototype

src/panel.coffee

@@ -1,80 +0,0 @@
-{Emitter} = require 'event-kit'
-PanelElement = require './panel-element'
-
-# Extended: A container representing a panel on the edges of the editor window.
-# You should not create a `Panel` directly, instead use {Workspace::addTopPanel}
-# and friends to add panels.
-#
-# Examples: [status-bar](https://github.com/atom/status-bar)
-# and [find-and-replace](https://github.com/atom/find-and-replace) both use
-# panels.
-module.exports =
-class Panel
-  ###
-  Section: Construction and Destruction
-  ###
-
-  constructor: ({@item, @visible, @priority, @className}, @viewRegistry) ->
-    @emitter = new Emitter
-    @visible ?= true
-    @priority ?= 100
-
-  # Public: Destroy and remove this panel from the UI.
-  destroy: ->
-    @hide()
-    @emitter.emit 'did-destroy', this
-    @emitter.dispose()
-
-  getElement: ->
-    unless @element
-      @element = new PanelElement().initialize(this, @viewRegistry)
-    @element
-
-  ###
-  Section: Event Subscription
-  ###
-
-  # Public: Invoke the given callback when the pane hidden or shown.
-  #
-  # * `callback` {Function} to be called when the pane is destroyed.
-  #   * `visible` {Boolean} true when the panel has been shown
-  #
-  # Returns a {Disposable} on which `.dispose()` can be called to unsubscribe.
-  onDidChangeVisible: (callback) ->
-    @emitter.on 'did-change-visible', callback
-
-  # Public: Invoke the given callback when the pane is destroyed.
-  #
-  # * `callback` {Function} to be called when the pane is destroyed.
-  #   * `panel` {Panel} this panel
-  #
-  # Returns a {Disposable} on which `.dispose()` can be called to unsubscribe.
-  onDidDestroy: (callback) ->
-    @emitter.on 'did-destroy', callback
-
-  ###
-  Section: Panel Details
-  ###
-
-  # Public: Returns the panel's item.
-  getItem: -> @item
-
-  # Public: Returns a {Number} indicating this panel's priority.
-  getPriority: -> @priority
-
-  getClassName: -> @className
-
-  # Public: Returns a {Boolean} true when the panel is visible.
-  isVisible: -> @visible
-
-  # Public: Hide this panel
-  hide: ->
-    wasVisible = @visible
-    @visible = false
-    @emitter.emit 'did-change-visible', @visible if wasVisible
-
-  # Public: Show this panel
-  show: ->
-    wasVisible = @visible
-    @visible = true
-    @emitter.emit 'did-change-visible', @visible unless wasVisible

src/panel.js

@@ -0,0 +1,110 @@
+const {Emitter} = require('event-kit')
+
+// Extended: A container representing a panel on the edges of the editor window.
+// You should not create a `Panel` directly, instead use {Workspace::addTopPanel}
+// and friends to add panels.
+//
+// Examples: [status-bar](https://github.com/atom/status-bar)
+// and [find-and-replace](https://github.com/atom/find-and-replace) both use
+// panels.
+module.exports =
+class Panel {
+  /*
+  Section: Construction and Destruction
+  */
+
+  constructor ({item, visible, priority, className}, viewRegistry) {
+    this.destroyed = false
+    this.item = item
+    this.visible = visible
+    this.priority = priority
+    this.className = className
+    this.viewRegistry = viewRegistry
+    this.emitter = new Emitter()
+    if (this.visible == null) this.visible = true
+    if (this.priority == null) this.priority = 100
+  }
+
+  // Public: Destroy and remove this panel from the UI.
+  destroy () {
+    if (this.destroyed) return
+    this.destroyed = true
+    this.hide()
+    if (this.element) this.element.remove()
+    this.emitter.emit('did-destroy', this)
+    return this.emitter.dispose()
+  }
+
+  getElement () {
+    if (!this.element) {
+      this.element = document.createElement('atom-panel')
+      if (!this.visible) this.element.style.display = 'none'
+      if (this.className) this.element.classList.add(...this.className.split(' '))
+      this.element.appendChild(this.viewRegistry.getView(this.item))
+    }
+    return this.element
+  }
+
+  /*
+  Section: Event Subscription
+  */
+
+  // Public: Invoke the given callback when the pane hidden or shown.
+  //
+  // * `callback` {Function} to be called when the pane is destroyed.
+  //   * `visible` {Boolean} true when the panel has been shown
+  //
+  // Returns a {Disposable} on which `.dispose()` can be called to unsubscribe.
+  onDidChangeVisible (callback) {
+    return this.emitter.on('did-change-visible', callback)
+  }
+
+  // Public: Invoke the given callback when the pane is destroyed.
+  //
+  // * `callback` {Function} to be called when the pane is destroyed.
+  //   * `panel` {Panel} this panel
+  //
+  // Returns a {Disposable} on which `.dispose()` can be called to unsubscribe.
+  onDidDestroy (callback) {
+    return this.emitter.on('did-destroy', callback)
+  }
+
+  /*
+  Section: Panel Details
+  */
+
+  // Public: Returns the panel's item.
+  getItem () {
+    return this.item
+  }
+
+  // Public: Returns a {Number} indicating this panel's priority.
+  getPriority () {
+    return this.priority
+  }
+
+  getClassName () {
+    return this.className
+  }
+
+  // Public: Returns a {Boolean} true when the panel is visible.
+  isVisible () {
+    return this.visible
+  }
+
+  // Public: Hide this panel
+  hide () {
+    let wasVisible = this.visible
+    this.visible = false
+    if (this.element) this.element.style.display = 'none'
+    if (wasVisible) this.emitter.emit('did-change-visible', this.visible)
+  }
+
+  // Public: Show this panel
+  show () {
+    let wasVisible = this.visible
+    this.visible = true
+    if (this.element) this.element.style.display = null
+    if (!wasVisible) this.emitter.emit('did-change-visible', this.visible)
+  }
+}