How to add onDidChangeVisble with callback to a panel


#1

I’m a newbie.
I’m looking at these documents https://atom.io/docs/api/v1.12.7/Panel and I’m trying to create a custom callback for the onDidChangeVisible event. I’ve googled the hell out of this and I can’t figure it out. I’m making my plugin with vanilla JS.
My code in main where I’m trying to register the callback looks like this:

this.subscriptions = new CompositeDisposable();
this.subscriptions.add(this.rightPanelView.onDidChangeVisible(function(visible) {alert('i am visible')}));

This throws the following error: this.rightPanelView.onDidChangeVisible is not a function


#2

I’ve worked on this for the past few days and I’ve answered my own question. My #1 problem was that I’m a newbie and had some fundamental misunderstandings about JavaScript, CoffeScript, and Atom.io.

Here is the updated code that works in plain JS:

this.subscriptions = new CompositeDisposable();
this.subscriptions.add(this.rightPanel.onDidChangeVisible((visible) =>{
      alert(visible);
    }));

What I learned:

  • Originally I was setting the onDidChangeVisible event subscription to this.rightPanelView but my view doesn’t inherit from the panel class, so this function didn’t exist (duh!!). In the updated code, I add onDidChangeVisible the this.rightPanel, which inherits from the Panel class and has this function.
  • => misunderstanding. In CoffeeScript => can be used to define a function and bind this. I misunderstood that and thought the arrow was just defining a function, so when I read the Atom.io source code I read it wrong. My updated code uses the JS6 function arrow to assign this properly to the callback alert() function. For a great read on JS=> http://javascriptplayground.com/blog/2014/04/real-life-es6-arrow-fn/

Hope this helps somebody out there.