[Super WIP] iFrame/ShadowDOM support #202
Conversation
|
Its amazing, man! |
|
Interesting. I thought iframes were basically immutable for security reasons? Or maybe that just applies to cross-domain stuff. |
@smileytechguy This can be the case when the iframe contents are on a different origin (cross-origin). Access to the iframes document will be a requirement for using draggable with iframes. I'll make sure to add that to the docs 👍 |
|
Alright, wasn't sure. This is super cool! 👍 |
| @@ -1,15 +0,0 @@ | |||
| # editorconfig.org | |||
There was a problem hiding this comment.
Are we deleting this because we don't find any value in it?
There was a problem hiding this comment.
Was just temporary, because it was messing up some formatting for me
|
@tsov when your ready to return to this PR, lets chat so I can better understand what you want to achieve with the Example - I can then take over the example portion of this PR. |
beefchimi
added
feature-request
|
@beefchimi absolutely! As you may have seen, I need to create a new layout to serve through an iframe, but we can chat IRL about it. Would love to finish this up soon |
|
I don't know why it says I closed this... I definitely didn't |
|
@tsov any idea if it's possible to do the drag the other way around? (from inside to outsite) The event handler on the main host is not triggered on Calling |
|
|
||
| if (this.startedInsideIframe && (clientX < 0 || clientY < 0)) { | ||
| const iframeElements = [...document.querySelectorAll('iframe')]; | ||
| const iframeElement = iframeElements.find((iframe) => iframe.contentDocument === currentHost); |
There was a problem hiding this comment.
what about using event.view.frameElement?
|
|
||
| let target; | ||
|
|
||
| if (this.startedInsideIframe && (clientX < 0 || clientY < 0)) { |
There was a problem hiding this comment.
clientX might be outside the iframe on the right side. You can check the upper limit using iframe's width or using elementFromPoint
const frameRect = frameElement.getBoundingClientRect()
const globalX = clientX + frameRect.left
const globalY = clientY + frameRect.top
const elementFromPoint = document.elementFromPoint(globalX, globalY)
return elementFromPoint === frameElement
This will work even if there are some elements displayed over the iframe element.
|
I figured it out. You are using |
|
Why is this closed? |
|
I believe it was an accident. We are still planning to add ShadowDOM and iFrame support, but are currently focusing on getting keyboard support for draggable out. That way we can make sure this code works for all sensors that draggable provides (touch, mouse, keyboard, force touch) Stay tuned |
|
Hi, @tsov. Are there any updates on dragging between iFrames? |
|
Just checking in again, is iFrame support still planned? Are there any updates on this? cc: @beefchimi @tsov |
|
@StephenEsser @tsov probably won't reply - I would say that iFrame support is not going to be happening 😢 |
|
Dang, I went ahead and started implementing this and I had no idea this PR even existed. Anyways, the PR I started working on #348 implements ShadowDOM support without a I personally think it makes more sense to just have it work around the shadowDOMs rather than having the user specify them all... like in the scenario where the containers are shadowDOM components and are added dynamically, or nested draggable components, etc. I haven't looked into Iframe support yet. |
|
Hi, The gif shows I didn't find in the example page |
|
I believe this is affecting my end-to-end. I am running tests inside Cypress.js which uses iframes to show your tests running. We are using draggable to simulate a drag and drop. This error message is seen when the
Please comment or provide a workaround. I think the issue is line 173 I should add I am running Ubuntu. Update: 15 Aug 2019 |
|
Will this ever be part of draggable? |
WIP