ember-wormhole

ember-wormhole copied to clipboard

Hi, I'd like to use ember-wormhole in a part of the DOM that is not always rendered (i.e. a dropdown). But that doesn't work as it throws an "element is not in the DOM" error when the component is not shown.

Is there an option to fail silently and render only if the DOM element with the specified id is actually inside the DOM?

Thank you.

Hi @schlesingermatthias, there is no option for this currently. I would be open to considering a PR that added such an option. An implementer would need to consult the value of this new boolean in the component's _appendToDestination method.

@lukemelia Hi, I will do that. Any preferences regarding the name? allowMissingId?

Edit: I'm not sure that this will work as the part of the template that contains the content of the wormhole needs to be rerendered when the part of the template that contains the wormhole becomes visible. And there's no way I can think of to force that rerender across components (or even engines).

@schlesingermatthias Agreed, I don't think automatic rerendering would be easy to get working. If you decide to pursue without support for that, I think errorOnMissingDestination with a default value of true would be clearest.

I've implemented a simple version of this using a strict=true/false option. The wormhole doesn't attempt to re-wormhole on DOM updates, it just suppresses the error and I toggle the wormhole separately. I can open a PR using errorOnMissingDestination instead, but is automatic re-wormholing a necessary feature?

I'd like to help out with this as i the same use case of dropdowns where elements need to be populated dynamically by which components are shown in another section.

It looks like unless there is an ember function to watch for DOM changes that is public, MutationObserver is the way to go. Unfortunately its only supported in IE 11 and up.

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

I can't see a clear and fast way to support older browsers. There's a CSS hack that supports IE 10+ but thats it. I'm still going to implement though as IE11 is the lowest supported version my app supports.

I know ember has to have a hook but i highly doubt it is public and i also highly doubt it will work down to 1.13 which this component supports.

Any thoughts or suggestions?