Commit 22c6774a authored by Imran Salam's avatar Imran Salam
Browse files

refine how custom events are used for browser interactions

parent 00f76571
......@@ -14,7 +14,7 @@ class BrowserImage extends PureComponent<BrowserImageProps> {
}
public componentDidMount() {
const currentEl = this.browserCanvas.current;
const currentEl = this.browserCanvas.current as HTMLElement;
this.activateIfPossible(currentEl);
}
......@@ -22,7 +22,7 @@ class BrowserImage extends PureComponent<BrowserImageProps> {
return <div className={styles.browserStage} ref={this.browserCanvas} />;
}
private activateIfPossible(currentEl: HTMLElement | null) {
private activateIfPossible(currentEl: HTMLElement) {
const activateEvent = new CustomEvent('bpane-activate', {
bubbles: true,
detail: {
......@@ -33,20 +33,18 @@ class BrowserImage extends PureComponent<BrowserImageProps> {
let done = false;
if (currentEl && currentEl.ownerDocument) {
const browserEl = currentEl.ownerDocument.querySelector(
'.' + styles.browserStage
const bodyEl = currentEl.ownerDocument.querySelector(
'body'
) as HTMLBodyElement;
const bodyEl = currentEl.ownerDocument.querySelector('body');
if (bodyEl && bodyEl.classList.contains('browser-app-ready')) {
browserEl.dispatchEvent(activateEvent);
if (bodyEl.classList.contains('browser-app-ready')) {
currentEl.dispatchEvent(activateEvent);
done = true;
}
}
if (!done) {
setTimeout(() => this.activateIfPossible(currentEl), 50);
setTimeout(() => this.activateIfPossible(currentEl), 250);
}
}
}
......
......@@ -2,7 +2,8 @@ import React, { FunctionComponent, memo } from 'react';
import { BrowserNavItem } from '../browserConfig';
import styles from './BrowserNavIcon.scss';
import iconStyles from './BrowserNavIcon.scss';
import imageStyles from '../browser-image/BrowserImage.scss';
type BrowserNavIconProps = {
browserNavItem: BrowserNavItem;
......@@ -18,7 +19,9 @@ const BrowserNavIcon: FunctionComponent<BrowserNavIconProps> = memo(
detail
});
const browserCanvas = document.querySelector('.bpane-canv') as Element;
const browserCanvas = document.querySelector(
`.${imageStyles.browserStage}`
) as HTMLElement;
browserCanvas.dispatchEvent(navEvent);
};
......@@ -26,7 +29,7 @@ const BrowserNavIcon: FunctionComponent<BrowserNavIconProps> = memo(
const { browserNavItem } = props;
return (
<dd className={styles.browserNavIcon}>
<dd className={iconStyles.browserNavIcon}>
<button title={browserNavItem.description} onClick={navigateBrowser}>
<img src={browserNavItem.icon.on} alt={browserNavItem.description} />
</button>
......
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