How to detect visibility change in widget?

support
1

Hi,

I’m currently working on a dropdown menu to show news from my other website, a Blender news platform. I’m using jQuery to build this menu and add it to the menu that I created using the decorateWidget API:

api.decorateWidget('home-logo:after', helper => {

This all works fine except for one specific situation: if you scroll down on a topic page, the menu disappears from view. When you scroll back up, the menu re-appears but my inserted HTML is no longer available in the DOM tree. What is the recommended way to detect this visibility change so I can re-populate the menu?

Thanks!

2

Would this do the trick?

const showExtraInfo = helper.attrs.topic;
  if(!showExtraInfo) {
    
  }

showExtraInfo is the scrolled state with the title in the header

Full example using decorateWidget here

3 Likes
3

Ah! I was already using that, but your comment made me re-examine this mechanism and it now works correctly. You can test on blenderartists.org if you like. I’m using an asynchronous job to load the json and render the HTML. This is cached in the browser and then inserted into the menu whenever needed. I refresh the cached data every 5 minutes to update the ‘notification count’ on the news menu as needed.

The code is still not my finest, but once I’ve cleaned it up I’m happy to share it if anyone is interested.