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 @@ ...@@ -6,6 +6,7 @@
.browserInnerWrapper { .browserInnerWrapper {
@include flex; @include flex;
height: calc(100% - 40px);
} }
.browserImageWrapper { .browserImageWrapper {
......
.browserStage {
width: 100%;
height: calc(100% - 45px);
overflow: hidden;
}
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import styles from './BrowserImage.scss';
type BrowserImageProps = {}; type BrowserImageProps = {};
class BrowserImage extends PureComponent<BrowserImageProps> { class BrowserImage extends PureComponent<BrowserImageProps> {
...@@ -11,7 +13,16 @@ class BrowserImage extends PureComponent<BrowserImageProps> { ...@@ -11,7 +13,16 @@ class BrowserImage extends PureComponent<BrowserImageProps> {
this.browserCanvas = React.createRef(); 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', { const activateEvent = new CustomEvent('bpane-activate', {
bubbles: true, bubbles: true,
detail: { detail: {
...@@ -20,29 +31,23 @@ class BrowserImage extends PureComponent<BrowserImageProps> { ...@@ -20,29 +31,23 @@ class BrowserImage extends PureComponent<BrowserImageProps> {
}); });
let done = false; let done = false;
if (currentEl && currentEl.ownerDocument) { if (currentEl && currentEl.ownerDocument) {
const browserEl = currentEl.ownerDocument.querySelector( const browserEl = currentEl.ownerDocument.querySelector(
'.browser-stage' '.browser-stage'
) as HTMLBodyElement; ) as HTMLBodyElement;
const bodyEl = currentEl.ownerDocument.querySelector('body'); const bodyEl = currentEl.ownerDocument.querySelector('body');
if (bodyEl && bodyEl.classList.contains('browser-app-ready')) { if (bodyEl && bodyEl.classList.contains('browser-app-ready')) {
browserEl.dispatchEvent(activateEvent); browserEl.dispatchEvent(activateEvent);
done = true; done = true;
} }
} }
if (!done) {
setTimeout(() => this.activate_if_possible(currentEl), 50);
}
}
public componentDidMount() { if (!done) {
const currentEl = this.browserCanvas.current; setTimeout(() => this.activateIfPossible(currentEl), 50);
this.activate_if_possible(currentEl);
} }
public render() {
return <div className="browser-stage" ref={this.browserCanvas} />;
} }
} }
......
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