109 lines
3.1 KiB
JavaScript
109 lines
3.1 KiB
JavaScript
import React, { PropTypes } from 'react';
|
|
import CopyToClipboard from './../../components/CopyToClipboard';
|
|
import { Popover, OverlayTrigger } from 'react-bootstrap';
|
|
|
|
const propTypes = {
|
|
slice: PropTypes.object.isRequired,
|
|
};
|
|
|
|
export default class EmbedCodeButton extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
height: '400',
|
|
width: '600',
|
|
};
|
|
this.handleInputChange = this.handleInputChange.bind(this);
|
|
}
|
|
|
|
handleInputChange(e) {
|
|
const value = e.currentTarget.value;
|
|
const name = e.currentTarget.name;
|
|
const data = {};
|
|
data[name] = value;
|
|
this.setState(data);
|
|
}
|
|
|
|
generateEmbedHTML() {
|
|
const srcLink = window.location.origin + this.props.slice.data.standalone_endpoint;
|
|
/* eslint max-len: 0 */
|
|
return `
|
|
<iframe
|
|
src="${srcLink}"
|
|
width="${this.state.width}"
|
|
height="${this.state.height}"
|
|
seamless frameBorder="0" scrolling="no">
|
|
</iframe>`;
|
|
}
|
|
|
|
renderPopover() {
|
|
const html = this.generateEmbedHTML();
|
|
return (
|
|
<Popover id="embed-code-popover">
|
|
<div>
|
|
<div className="row">
|
|
<div className="col-sm-10">
|
|
<textarea name="embedCode" value={html} rows="4" readOnly className="form-control input-sm"></textarea>
|
|
</div>
|
|
<div className="col-sm-2">
|
|
<CopyToClipboard
|
|
shouldShowText={false}
|
|
text={html}
|
|
copyNode={<i className="fa fa-clipboard" title="Copy to clipboard"></i>}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<br />
|
|
<div className="row">
|
|
<div className="col-md-6 col-sm-12">
|
|
<div className="form-group">
|
|
<small>
|
|
<label className="control-label" htmlFor="embed-height">Height</label>
|
|
</small>
|
|
<input
|
|
className="form-control input-sm"
|
|
type="text"
|
|
defaultValue={this.state.height}
|
|
name="height"
|
|
onChange={this.handleInputChange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="col-md-6 col-sm-12">
|
|
<div className="form-group">
|
|
<small>
|
|
<label className="control-label" htmlFor="embed-width">Width</label>
|
|
</small>
|
|
<input
|
|
className="form-control input-sm"
|
|
type="text"
|
|
defaultValue={this.state.width}
|
|
name="width"
|
|
onChange={this.handleInputChange}
|
|
id="embed-width"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Popover>
|
|
);
|
|
}
|
|
render() {
|
|
return (
|
|
<OverlayTrigger
|
|
trigger="click"
|
|
rootClose
|
|
placement="left"
|
|
overlay={this.renderPopover()}
|
|
>
|
|
<span className="btn btn-default btn-sm">
|
|
<i className="fa fa-code"></i>
|
|
</span>
|
|
</OverlayTrigger>
|
|
);
|
|
}
|
|
}
|
|
|
|
EmbedCodeButton.propTypes = propTypes;
|