fix position for reference node inside an iframe and popper outside

[yairEO]

reposition(
    /* reference: */ document.querySelector('.btn'),
    /* popper: */ document.querySelector('.dropdown'),
    /* We're using the default options */
)

I have situation where an element inside an iframe injects a popup outside of the iframe and shows it, and I need to position this popup near the element which triggered it, but nanopop cannot position it:

https://jsbin.com/duwohoz/2/edit?html,js,output

the click event data is unhelpful because it is relative to the iframe document, but I think nanopop can try and check if the reference element is inside an iframe (of course same-origin one) and if so, get the iframe position

In my demo above I show how to find the correct iframe which hosts the reference node and through that, find the iframes position on the parent document and now nanopop should theoretically detect all that and offset the position of the popper accordingly

Thanks for this awesome lightweight script!

---

This is for my open-source knobs project which is encapsulated inside an iframe but I am adding a color picker that should open outside (there's no visual space for it inside the iframe)

[yairEO]

It would be good to add a third parameter, offset so I could manually adjust the popper element using my own calculations. Currently I am using the <iframe> element itself as the reference node, instead of the button due to the complexity mentioned.

I know I can manually adjust the top & left after the reposition fired, but it would be nice if I could do it in as few repaints as possible

[yairEO]

Actually, it proves more difficult than I thought to get the offset of the button within the iframe:

https://jsbin.com/nopaciy/2/edit?css,js,output

getBoundingClientRect is not working as expected