Commit ca036e8c authored by Imran Salam's avatar Imran Salam
Browse files

add missing styling added by Dan for browser and refactor BrowserImage

parent dcb3c024
......@@ -6,6 +6,7 @@
.browserInnerWrapper {
@include flex;
height: calc(100% - 40px);
}
.browserImageWrapper {
......
.browserStage {
width: 100%;
height: calc(100% - 45px);
overflow: hidden;
}
import React, { PureComponent } from 'react';
import styles from './BrowserImage.scss';
type BrowserImageProps = {};
class BrowserImage extends PureComponent<BrowserImageProps> {
......@@ -11,7 +13,16 @@ class BrowserImage extends PureComponent<BrowserImageProps> {
this.browserCanvas = React.createRef();
}
activate_if_possible(currentEl: HTMLElement | null) {
public componentDidMount() {
const currentEl = this.browserCanvas.current;
this.activateIfPossible(currentEl);
}
public render() {
return <div className={styles.browserStage} ref={this.browserCanvas} />;
}
private activateIfPossible(currentEl: HTMLElement | null) {
const activateEvent = new CustomEvent('bpane-activate', {
bubbles: true,
detail: {
......@@ -20,30 +31,24 @@ class BrowserImage extends PureComponent<BrowserImageProps> {
});
let done = false;
if (currentEl && currentEl.ownerDocument) {
const browserEl = currentEl.ownerDocument.querySelector(
'.browser-stage'
) as HTMLBodyElement;
const bodyEl = currentEl.ownerDocument.querySelector('body');
if (bodyEl && bodyEl.classList.contains('browser-app-ready')) {
browserEl.dispatchEvent(activateEvent);
done = true;
}
}
if (!done) {
setTimeout(() => this.activate_if_possible(currentEl), 50);
setTimeout(() => this.activateIfPossible(currentEl), 50);
}
}
public componentDidMount() {
const currentEl = this.browserCanvas.current;
this.activate_if_possible(currentEl);
}
public render() {
return <div className="browser-stage" ref={this.browserCanvas} />;
}
}
export default BrowserImage;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment