|
@@ -1,5 +1,6 @@
|
|
|
import * as React from "react";
|
|
|
import * as ReactDOM from 'react-dom';
|
|
|
+import { Inspector } from '../../../../../inspector';
|
|
|
|
|
|
interface IPopupComponentProps {
|
|
|
id: string,
|
|
@@ -11,36 +12,9 @@ interface IPopupComponentProps {
|
|
|
|
|
|
export class PopupComponent extends React.Component<IPopupComponentProps, { isComponentMounted: boolean, blockedByBrowser: boolean }> {
|
|
|
|
|
|
- private _container: HTMLDivElement;
|
|
|
+ private _container: HTMLDivElement | null;
|
|
|
private _window: Window | null;
|
|
|
|
|
|
- private _CopyStyles(sourceDoc: HTMLDocument, targetDoc: HTMLDocument) {
|
|
|
- for (var index = 0; index < sourceDoc.styleSheets.length; index++) {
|
|
|
- var styleSheet: any = sourceDoc.styleSheets[index];
|
|
|
- try {
|
|
|
- if (styleSheet.cssRules) { // for <style> elements
|
|
|
- const newStyleEl = sourceDoc.createElement('style');
|
|
|
-
|
|
|
- for (var cssRule of styleSheet.cssRules) {
|
|
|
- // write the text of each rule into the body of the style element
|
|
|
- newStyleEl.appendChild(sourceDoc.createTextNode(cssRule.cssText));
|
|
|
- }
|
|
|
-
|
|
|
- targetDoc.head!.appendChild(newStyleEl);
|
|
|
- } else if (styleSheet.href) { // for <link> elements loading CSS from a URL
|
|
|
- const newLinkEl = sourceDoc.createElement('link');
|
|
|
-
|
|
|
- newLinkEl.rel = 'stylesheet';
|
|
|
- newLinkEl.href = styleSheet.href;
|
|
|
- targetDoc.head!.appendChild(newLinkEl);
|
|
|
- }
|
|
|
- } catch (e) {
|
|
|
- console.log(e);
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
constructor(props: IPopupComponentProps) {
|
|
|
super(props);
|
|
|
|
|
@@ -60,28 +34,16 @@ export class PopupComponent extends React.Component<IPopupComponentProps, { isCo
|
|
|
}
|
|
|
|
|
|
openPopup() {
|
|
|
- const { title, size, onOpen, onClose } = this.props
|
|
|
|
|
|
- const windowCreationOptionsList = {
|
|
|
- width: size.width,
|
|
|
- height: size.height,
|
|
|
- top: (window.innerHeight - size.width) / 2 + window.screenY,
|
|
|
- left: (window.innerWidth - size.height) / 2 + window.screenX
|
|
|
- };
|
|
|
+ const { title, size, onClose, onOpen } = this.props;
|
|
|
|
|
|
- var windowCreationOptions = Object.keys(windowCreationOptionsList)
|
|
|
- .map(
|
|
|
- (key) => key + '=' + (windowCreationOptionsList as any)[key]
|
|
|
- )
|
|
|
- .join(',');
|
|
|
+ let windowVariableName = `window_${title}`;
|
|
|
|
|
|
- this._window = window.open("", title, windowCreationOptions);
|
|
|
+ this._container = Inspector._CreatePopup(title, windowVariableName, size.width, size.height);
|
|
|
+
|
|
|
+ this._window = (Inspector as any)[windowVariableName];
|
|
|
|
|
|
if (this._window) {
|
|
|
- this._window.document.title = title;
|
|
|
- this._CopyStyles(window.document, this._window.document);
|
|
|
- this._window.document.body.innerHTML = "";
|
|
|
- this._window.document.body.appendChild(this._container);
|
|
|
onOpen(this._window);
|
|
|
this._window.addEventListener('beforeunload', () => this._window && onClose(this._window));
|
|
|
|
|
@@ -106,8 +68,9 @@ export class PopupComponent extends React.Component<IPopupComponentProps, { isCo
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
- if (!this.state.isComponentMounted) return null
|
|
|
- return ReactDOM.createPortal(this.props.children, this._container)
|
|
|
+ if (!this.state.isComponentMounted || this._container === null) return null
|
|
|
+ return ReactDOM.createPortal(this.props.children, this._container);
|
|
|
+
|
|
|
}
|
|
|
|
|
|
|