How to know if my widget is on screen ?

[GuillaumeArnaud]

Hi,

I make a widget to complete the map with some graphics item (it search an adress and draw travel to go to a place). I need to place this widget will be place in a bookmarks.

I need to draw this graphics only when this bookmarks is visible. Is there a mean to know the state of visibility of it or to create an onhide function ?

Thanks.

Guillaume

[GuillaumeArnaud · Accepted solution]

Hi,

To do this, I add this part to my code (after render() is load) :

//Observer to know if the dom is on screen
var observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.intersectionRatio > 0) {
console.log("Widget is on screen");
} else {
console.log("Widget is NOT on screen");
}
});
}, { root: document.documentElement });
//Launch it
if (this.rootNode) {
observer.observe(this.rootNode);
}

In a dom of my render i propose this ref :

render() {
return (
<React.Fragment>
<div className='text-primary widget_itineraire_root' ref={(f) => { this.rootNode = f; }}>
As you want...
</div>
</React.Fragment>
);
}

If something can be include directly in the state of widget it will be easier.

Thanks.

Guillaume