From 9e68af0222b4e3ca92dd076bd53d7f7e0c35d327 Mon Sep 17 00:00:00 2001 From: Jeff Date: Sun, 29 May 2016 22:09:38 -0600 Subject: [PATCH] iframing things up --- package.json | 3 +++ src/Container.js | 4 ++-- src/components.js | 57 +++++++++++++++++++++++++++++++++++++++-------- src/style.less | 4 ++++ 4 files changed, 57 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index 7c3f4b2..d2b9ab8 100644 --- 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 index 878c31d..c4f5694 100644 --- a/src/Container.js +++ b/src/Container.js @@ -49,7 +49,7 @@ export default class Container extends Component { :
{map(namespaces, (namespace, key) => ( - + { key } @@ -62,7 +62,7 @@ export default class Container extends Component { } renderNavCard(routes, ns) { return ( - +
home  /  diff --git a/src/components.js b/src/components.js index b3632d0..45eea3f 100644 --- 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) => (
) -export const Card = (props) => ( -
- {props.title ? {props.title} : null} - {props.doc ? {props.doc} : null} - {props.children} -
+export const MarkdownCard = (props) => ( + {props.children} ) -export const MarkdownCard = (props) => - {props.children} +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 = ` + + +
+ ` + return ( +
+ {props.title ? {props.title} : null} + {props.doc ? {props.doc} : null} + {props.noframe ? +
{props.children}
: + + {props.children} + + } +
+ ); + } +} diff --git a/src/style.less b/src/style.less index 4a74948..436bc3b 100644 --- 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) {