I cannot drop elements onto iframe that is rendering my own components.
I'm trying to implement drag and drop functionality to a child iframe component.
After passing a dropRef, from a pareent, to a component rendering the iframe, dropping works only on components outside the iframe (IFrame is rendering my own components, not a separate website, so there is no CORS policy problem).
However, dropping does not work on the elements inside the iframe, even after passing the dropRef inside.
I checked this, and some other examples, but nothing seems to be working (Examples below seem to show wrong information in the alert).
https://codesandbox.io/examples/package/react-dnd-multi-iframe-backend
Is there any simple way to drop the draggable elements into the iframe?
Related
I'm relatively new to React (and Javascript, for that matter) so please bear with me.
To put my question shortly: how do i trigger a resize event on my window/component in React?
Now below is a little more context, which may actually prove that i'm asking a wrong question here.
I'm trying to create a small app with several tabs. The component is taken from BlueprintJS framework. The content of these tabs is loaded using a javascript API, which in turn uses RESTful requests to a remote application. The content that will be rendered in my tabs is some tables and charts.
Here is a caveat. The actual rendering of those tables and charts is performed by the javascript API i have to use, not by my React app. I have to pass an ID of a to the API, and it will render returned content into that .
The problem: Only the content of the default active tab is rendered correctly. If i switch to any other tab of my React application, the content is not rendered. HOWEVER if i resize the window the content is rendered instantly (i believe this is handled by the javascript API i'm using). Also if i update parameters of the currently active tab to make the API load updated content from the remote application, the content is also rendered in the active tab.
So i figured if i can simulate the resize event when switching between tabs i can get my content to render.
I tried setting a conditional class on my as depending on whether the current tab is active or not:
<div className={this.state.SelectedTabId === "tab1" ? "container" : "hidden"}>
where "container" and "hidden" have different width configured in CSS file, but this doesn't help. I also tried to directly manipulate the DOM (at least as a test) but even that didn't make a difference:
let e1 = document.getElementsByClassName('container')[0];
e1.width = e1.scrollWidth - 1;
renderedElement.resize(); //this is an API method which is supposed to re-render the content it returns
I'm using looker for a table visualisation.
I need the embedded iframe to communicate with parent window.
I'm using embedded Iframe events for some visualisations. And I'm receiving the default events
But I'm need to create and broadcast my own events.
For example, one cell in the table should broadcast user:clicked:icon which the parent window can than act upon.
Tried several methods through the LookML interface on the dimensions that I'm using (html, action etc) to even get something like page:changed to trigger, but with no success
Update
Found a current work around. Using an existing action (page:changed) on an html created dimension (a tag). I was able to intercept a navigation and accomplish some communication between the parent wrapper and looker iframe
Is it possible to control the rendering of an element in polymer? I do have multiple paper-tabs and I want to render only the visible content first and after that render it in the background or render it on visible. I want to optimize that, because I have a lot of elements in every tab and the rendering performance is not so good.
I'm using the latest polymer version 1.7
Edit: The hidden attribute of the web component doesn't effect the rendering.
Here are some ways in which you can achieve this
Include elements of each tab inside a dom-if and make dom-if true only when tab is selected
Move all the elements/UI inside each tab into a new element and lazy load those elements only when tab is selected. You can lazy load elements using importHref
I want to dynamically add menu items to an mdl menu. However, I have not figured out how to register the new items with mdl so that they work properly.
Here is a codepen showing the different behavior. Notably, the dynamic item does not have a ripple effect, or close the menu on click.
That code pen uses componentHandler.upgradeElement on both the newly created item, and the original menu element to no effect. I've noticed that the properly created menu items also have another class (mdl-js-ripple-effect) in addition to some other attributes, but manually adding that class, or trying to futz with element data resulted in a lot of errors in the mdl javascript. I assume that a few proper calls to componentHandler methods is all I need, but I haven't been able to find any documentation on its proper use with subelements.
This sadly is currently pretty complicated and doing it will in fact have performance issues due to bugs. Not recommended.
The best thing to do would be to destroy the menu and rebuild it on-the-fly.
MDL is meant for more static sites, Polymer is recommended for sites needing more complex controls and dynamic building.
You could also go the route of not using our JS and writing your own component for this need.
I wanted it to work in an Iframe but if I define the js. in the parent document it does not recognize the elements that should be "introduced" inside the iframe. If I use it inside the iframe the effect is not what I expect (the overlay covers only the iframe).
[Intro.js being used inside an iframe.png] https://dl.dropboxusercontent.com/u/6421243/Intro.js%20being%20used%20inside%20an%20iframe.png
Is there something I can do with the plugin code so that it searches the elements inside an iframe but still shows the overlay over the parent?
UPDATE: I would like the black overlay over the WHOLE page (so the border of the iframe would also be covered by it).
Run intro.js in both iFrame and the parent.
In the parent, remove the toolTip and just highlight the iframe
In the iframe, run whatever toolTips you need
To communication between the two, have a look at this: How to communicate between iframe and the parent site?
First of all you should know that if you define your JavaScript codes outside of iframe, it's no longer available in the inner iframe because you don't have access to them.
So, you should put your codes inside the iframe only.
Update:
So I think you put the container element wrongly so the IntroJs define the overlay wrong wrongly too. Update and change your element container and then you will don't have any problem with that.