I'm working on a browser extension that injects an iframe into the webpage. Now the iframe elements are not responding to drag and drop events for webpage's elements though it is responding to drag and drop events from it's(iframe's) elements only. I've tried almost every solution but they didn't work. Can you give me any clue on how to fix this?
The iframe is built using reactjs
Related
I have a sortable collection of TinyMce editors and when an editor is moved, this one doesn't work anymore.
The TinyMCE editor iframe turn empty after drag end event but I don't understand why.
The editor toolbar is here but doesn't work and the content disappear without possibility of typing in it again.
Is there a way to reinitialize the dragged editor with his initial content after drag end event.
I'm using Reactjs and #dnd-kit/sortable.
Moving the iFrame editor around the DOM is not supported. If you want to move the editor you can achieve this by removing the editor with remove() and reinitializing it with init() once it has been moved.
https://www.tiny.cloud/docs/tinymce/6/apis/tinymce.root/#remove
https://www.tiny.cloud/docs/tinymce/6/apis/tinymce.root/#init
The other alternative is to run TinyMCE in inline mode:
https://www.tiny.cloud/docs/tinymce/6/use-tinymce-inline/
I'm creating a third-party app, which is loaded through an iframe.
The iframe creates a draggable element in side it.
On first page load (before scrolling the page), the draggable (slider) works fine.
But after scrolling the page behind the iframe, it's hard to get the slider to slide again.
(Note that this is a mobile issue, safari on iOS especially, but also chrome on iOS)
In the following demo I have used the GSAP Draggable library with react to create the draggable element but have also tried to code it in plain react with no luck.
Here is a demo: https://unfjl.csb.app/
I have tried a lot of different things (css, touchevents etc), but cannot get it to work...
What could cause this behaviour?
Update (no iframe example)
Demo no iframe: https://p5cu9.csb.app/
Same example with slider as above, but in this example the draggable is rendered directly in the DOM and not in an iframe. The problem still occurs. I suspect it has something to do with the fixed css position of the slider...
This is gonna sound really strange, but a bug in iOS Safari causes that and the only way I know of to get around it (which I discovered today via Googling) is to add a "touchstart" listener to the of the top-level page (not the iframe)!
document.getElementsByTagName("body")[0].addEventListener("touchstart",function(){});
That isn't something I can add to Draggable because it wouldn't be able to access the parent document (outside the iframe) to add that properly (security restrictions in the browser).
You could also add a touchforcechange listener that prevents the default behavior (I'll be adding that to Draggable itself too):
yourDraggableElement.addEventListener("touchforcechange", function(event) {
event.preventDefault();
});
Browser bugs are fun, aren't they?! ;)
(Originally answered in the GreenSock forums at https://greensock.com/forums/topic/21450-draggable-in-iframe-on-mobile-is-buggy/?tab=comments#comment-101225)
I noticed that Polymer "consumes" gestures on my own web components.
I have 2 web components on my page: google-map (Polymer based) and animated button (native one, written by myself, not using any frameworks).
They are imported in this way:
google-map folder has the following structure:
Angular ng-click is defined on animated button:
<animated-button-web-component ng-click="fireEvent('click');" data-src="" data-src-click="" data-src-hover="" data-text="foo" class=""></animated-button-web-component>
When I use Chrome in regular mode click event is fired as expected but when I use Chrome in the device mode the similar touch event is not fired from the animated button. If I remove google-map completely from the page it starts working.
Do you have any idea how to "isolate" Polymer so it doesn't interfere with the events in the document?
Thank you,
Alex
this is my bottom-sheet its working properly in pc's browser and swipe-down event is doing well in it but in mobile's browser it starts reloading and I have to click out side for closing bottom sheet is there any other way to handle this situation?
Ok I got it Bottom-sheet will work properly if you add overflow-y to none in body element so it will prevent pull-to-refresh event !
I am creating a simple app with the ionic framework, and I want to run a function on each of the swipe events or drag events.
like this :
When user swipe up/drag up arrow, it will open it ( like open notifications smarthphone ).
swipe down or drag down, it will close it.
Can anyone help provide sample HTML & JS to listen to gesture event?
Regarding gesture events handlers you can check the Ionic docs, for example:
http://ionicframework.com/docs/api/directive/onDragUp/
AFAIK no official component fits with your requirement (the most similar is ionSlides but works horizontally). However there are some 3rd party directives or demos like the following you may adapt to your needs:
https://github.com/bramus/ion-drawer-vertical
https://github.com/darylrowland/ionic-contrib-swipe-cards
http://www.idangero.us/swiper/demos/#.VrxDjfnhC71