How do I properly add/remove text to the status bar?


#1

Currently I’m using

atom.workspaceView.statusBar?.appendLeft('<span>' + msg + '</span>')

to add a text but how can I remove that once it’s added? I only see append and preprend functions in the statusbar class. Want I’m trying to do is set some text and then remove it after a few seconds.


#2

For that you’ll need to get a reference to the DOM node you created. You’ll find various ways to do that below:

Using the good old createElement method:

span = document.createElement('span')
span.textContent = msg
atom.workspaceView.statusBar?.appendLeft(span)

# And to remove it
span.parentNode.removeChild(span)

Using jQuery and a specific class:

atom.workspaceView.statusBar?.appendLeft('<span class="my-specific-class">' + msg + '</span>')

# And to remove it
atom.workspaceView.statusBar?.find('.my-specific-class').remove()

Using a space-pen view:

{View} = require 'atom'
class MyView extends View
  @content: -> @span class: 'my-view-class'
  initialize: (msg) -> @text msg

# When you want to add it
view = new MyView(msg)
atom.workspaceView.statusBar?.appendLeft(view)

# And to remove it
view.detach() # Use detach if you want to reattach the same instance later, use remove otherwise

#3

@abe thanks a million for this. I have a much better understand of what I’m working with now.


#4

For any new viewers of this…

Things have changed a bit:

Note, you don’t have to do the on activated in that manner, if you know the statusBar is there. You can do statusBar?.whatever

Also, note the item property in the new method needs to be one of 3 types, but not just a plain ole string.