Skip to content

Instantly share code, notes, and snippets.

@A-gambit
Created July 11, 2015 10:26
Show Gist options
  • Save A-gambit/6f36d95a00bf013c77df to your computer and use it in GitHub Desktop.
Save A-gambit/6f36d95a00bf013c77df to your computer and use it in GitHub Desktop.
import React from 'react'
import {addons} from 'react/addons'
import getId from '../tools/get_id'
import htmlParser from '../tools/html_parser'
import checkText from '../tools/get_text'
import getFile from '../tools/get_file'
import cn from '../tools/class_name'
let LiveView = React.createClass({
mixins: [addons.PureRenderMixin],
getInitialState() {
let id = getId(),
url = `https://docs.google.com/feeds/download/documents/export/Export?id=${id}&exportFormat=html`,
src = 'https://localhost:5555/iframe'
/*
Add settings for archieml-drive app:
settings.clientDevServerEnabled = false
settings.clientDevServerUrlsEnabled = false
settings.webpackDevServerClientEnabled = false
settings.webpackUglifyEnabled = false
settings.wapCssDoNotUglifyClassnames = true
settings.serverPort = 5555
settings.serverHttpsEnabled = true
*/
return {id, url, content: null, src, error: false, full: false}
},
componentWillMount() {
this.textUpdate()
},
textUpdate() {
setInterval(() => {
let isUpdate = (checkText() || !this.state.content) && !this.state.error
if (isUpdate) {
this.getFile()
}
}, 200)
},
getFile() {
let iframe = this.refs.iframe
getFile(this.props.access, this.state.url, (res) => {
let htmlResult = htmlParser.parse(res)
let isError = JSON.stringify(htmlResult.html) == '{}'
if (isError) return this.handleError()
this.setState({content: htmlResult.html})
if (iframe) iframe.getDOMNode().contentWindow.postMessage(htmlResult.html, this.state.src)
})
},
handleError() {
if (!this.state.error) {
this.setState({error: true})
this.props.remove(this.props.changeLabel)
}
},
render() {
let content = this.state.content
let full = this.state.full
return (
<div className='grammarly-view-main'>
<div className={cn(content && 'grammarly-view', !content && 'grammarly-view-none')}>
<div className='grammarly-screen'>
<div className={cn(full && 'grammarly-exit', !full && 'grammarly-open')}></div>
</div>
<iframe src={this.state.src} style={this.style()} ref='iframe'/>
</div>
{
content &&
<div className='grammarly-view-load'>
<div className='grammarly-view-spiner'></div>
</div>
}
</div>
)
},
style() {
let height = (
this.state.full
? (window.screen.height - 200) / 0.6
: window.screen.height - 120
)
return {
height,
width: '100%',
border: 'none',
marginBottom: '-6px',
}
}
})
export default LiveView
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment