Make window & document references iframe-aware

[acusti]

This PR uses the DOM element’s ownerDocument rather than the global document or window to make react-draggable work across iframes. In our use case, we have an app being rendered into an iframe with React Frame Component, so the DOM elements are in a separate document from the document where the React elements are being executed.

I chose to replace the instanceOf Node check with a simple duck-typing check (https://github.com/mzabriskie/react-draggable/compare/master...Brandcast:iframe?expand=1#diff-9f4a38358e68eff5cf48eda850801a7aL190), which could be adapted to whatever type of conditional. It would even do the same check, but to work across iframes, it would need to first find the window object relative to e.target. Let me know if you want me to change or update that.

[STRML]

Interesting - thanks for this PR!

Could you please remove the built files? I prefer PRs to be source-only, then I will rebuild and release in the same commit as the tag.

Regarding the Node check, could we not use domNode.ownerDocument.defaultView.Node as well?

[acusti]

Yeah, that’s what I alluded to in the PR comment. I’ll make that change, squash, and force update with that change. Also, I’ll remove the built files.

[acusti]

Quick question: what kind of browser support do you aim for? document.defaultView is only available in IE 9 and greater (ref). To support IE 8, I would need to add a fallback to use the non-standard parentWindow (ref), like:

var doc = el.ownerDocument;
var win = 'defaultView' in doc ? doc.defaultView : doc.parentWindow;

[STRML]

I don't care for IE8 at this point. Some Babel transforms are beginning to break IE8 as well. I don't see the need.

[acusti]

Ok, so I removed the built files and updated the Node check to use the window relative to domNode.

By the way, in our use case, we are also running into #170. But I noticed that #173, which attempts to resolve that issue, relies on the global document.body, which in the interests of keeping draggable compatible across iframes would need to become node.ownerDocument.body.

[acusti]

Do you want me to have a go at writing a few tests for this behavior? It should be trivial to pull in the react-frame-component package for the tests and just duplicate some of the draggable tests for components being rendered into the iframe. It might even be enough to just validate the should render with style translate() for DOM nodes test across iframes.

[acusti]

Also, I’ll rebase.

[STRML]

Actually wait a bit - I was actually going to push a few updates to this in just a moment.

[acusti]

Sure thing. And thanks!

[STRML]

Closed in #180 - thought it was easier to do so now with all the changes going through.

Would love a working test though - could you make a new PR for that based off master?

Thanks for the help.

[acusti]

Definitely. How do you feel about adding the devDependency on react-frame-component? I’d peg it to 0.6.2 to make sure updates to the component couldn’t break your tests.

[STRML]

Yeah that's fine as a devDep.