iframing things up

jhicken · jhicken · commit 9e68af0222b4 · 2016-05-29T22:13:05.000-06:00
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "less": "^2.7.1",
     "less-loader": "^2.2.3",
     "mocha": "^2.4.5",
+    "raw-loader": "^0.5.1",
     "sinon": "^1.17.4",
     "style-loader": "^0.13.1",
     "tape": "^4.5.1",
@@ -33,10 +34,12 @@
     "enzyme": "^2.3.0",
     "history": "^2.1.1",
     "lodash": "^4.12.0",
+    "iframe-resizer": "^3.5.3",
     "myro": "^0.6.2",
     "react": "^15.0.2",
     "react-addons-test-utils": "^15.0.2",
     "react-dom": "^15.0.2",
+    "react-frame-component": "^0.6.1",
     "react-hot-loader": "^3.0.0-alpha.8",
     "showdown": "^1.3.0"
   }
diff --git a/src/Container.js b/src/Container.js
@@ -49,7 +49,7 @@ export default class Container extends Component {
                 : <div className="react-cards-menu">
                     <CardList>
                     {map(namespaces, (namespace, key) => (
-                        <Card key={key}>
+                        <Card key={key} noframe>
                             <a className={style.nav} href={ routes.namespace({ namespace: key }) }>
                                 { key }
                             </a>
@@ -62,7 +62,7 @@ export default class Container extends Component {
     }
     renderNavCard(routes, ns) {
       return (
-        <Card key='navcard'>
+        <Card key='navcard' noframe>
           <div className={style.navCrumbs}>
             <a href={ routes.index() }>home</a>
             &nbsp;/&nbsp;
diff --git a/src/components.js b/src/components.js
@@ -1,6 +1,10 @@
-import React from 'react'
+import React ,{Component} from 'react'
+import ReactDOM from 'react-dom'
 import showdown from 'showdown'
 import style from './style.less'
+import Frame from 'react-frame-component'
+import {iframeResizer} from 'iframe-resizer'
+import iframeResizerContentWindow from 'raw!iframe-resizer/js/iframeResizer.contentWindow.min'
 
 const markdownToHtml = str => {
   const conv = new showdown.Converter()
@@ -20,13 +24,48 @@ export const CardList = (props) => (
   </div>
 )
 
-export const Card = (props) => (
-  <div className={"reactcards-card "+style.card}>
-  {props.title ? <CardHeader>{props.title}</CardHeader> : null}
-  {props.doc ? <Markdown className={style.markdownDoc}>{props.doc}</Markdown> : null}
-  {props.children}
-  </div>
+export const MarkdownCard = (props) => (
+  <Card><Markdown>{props.children}</Markdown></Card>
 )
 
-export const MarkdownCard = (props) =>
-  <Card><Markdown>{props.children}</Markdown></Card>
+export class Card extends Component {
+  constructor(props) {
+      super(props)
+  }
+
+  componentDidMount() {
+    if (!this.props.noframe) {
+      this.iframeNode = ReactDOM.findDOMNode(this.refs.iframe)
+      iframeResizer({checkOrigin:false},this.iframeNode)
+    }
+  }
+
+  componentWillUnmount(){
+    if (!this.props.noframe) {
+      this.iframeNode.iFrameResizer.close()
+    }
+  }
+
+  render() {
+    const props = this.props;
+    const iframeContent = `<!DOCTYPE html>
+      <html>
+        <head><script>${iframeResizerContentWindow}</script></head>
+        <body><div id="content"></div></body>
+      </html>`
+    return (
+      <div className={"reactcards-card "+style.card}>
+        {props.title ? <CardHeader>{props.title}</CardHeader> : null}
+        {props.doc ? <Markdown className={style.markdownDoc}>{props.doc}</Markdown> : null}
+        {props.noframe ?
+          <div>{props.children}</div> :
+          <Frame ref="iframe"
+            initialContent={iframeContent}
+            mountTarget="#content">
+            {props.children}
+          </Frame>
+        }
+      </div>
+    );
+  }
+}
diff --git a/src/style.less b/src/style.less
@@ -24,6 +24,10 @@ body {
   border-radius:2px;
   font-family:sans-serif;
   background-color:white;
+  iframe {
+    width: 100%;
+    border: none;
+  }
 }
 
 :local(.cardHeader) {
