diff options
| -rw-r--r-- | src/client/views/nodes/WebBox.tsx | 23 |
1 files changed, 12 insertions, 11 deletions
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 1edb4d826..e3b6e1c05 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -1,11 +1,10 @@ import "./WebBox.scss"; import React = require("react"); -import { WebField } from '../../../fields/WebField'; import { FieldViewProps, FieldView } from './FieldView'; -import { FieldWaiting } from '../../../fields/Field'; import { observer } from "mobx-react"; import { computed } from 'mobx'; -import { KeyStore } from '../../../fields/KeyStore'; +import { HtmlField } from "../../../new_fields/HtmlField"; +import { URLField } from "../../../new_fields/URLField"; @observer export class WebBox extends React.Component<FieldViewProps> { @@ -16,8 +15,6 @@ export class WebBox extends React.Component<FieldViewProps> { super(props); } - @computed get html(): string { return this.props.Document.GetHtml(KeyStore.Data, ""); } - _ignore = 0; onPreWheel = (e: React.WheelEvent) => { this._ignore = e.timeStamp; @@ -36,14 +33,18 @@ export class WebBox extends React.Component<FieldViewProps> { } } render() { - let field = this.props.Document.Get(this.props.fieldKey); - let path = field === FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" : - field instanceof WebField ? field.Data.href : "https://crossorigin.me/" + "https://cs.brown.edu"; - + let field = this.props.Document[this.props.fieldKey]; + let view; + if (field instanceof HtmlField) { + view = <span id="webBox-htmlSpan" dangerouslySetInnerHTML={{ __html: field.html }} /> + } else if (field instanceof URLField) { + view = <iframe src={field.url.href} style={{ position: "absolute", width: "100%", height: "100%" }} /> + } else { + view = <iframe src={"https://crossorigin.me/https://cs.brown.edu"} style={{ position: "absolute", width: "100%", height: "100%" }} /> + } let content = <div style={{ width: "100%", height: "100%", position: "absolute" }} onWheel={this.onPostWheel} onPointerDown={this.onPostPointer} onPointerMove={this.onPostPointer} onPointerUp={this.onPostPointer}> - {this.html ? <span id="webBox-htmlSpan" dangerouslySetInnerHTML={{ __html: this.html }} /> : - <iframe src={path} style={{ position: "absolute", width: "100%", height: "100%" }} />} + {view} </div>; return ( |