%PDF-
%PDF-
Mini Shell
Mini Shell
// @codingStandardsIgnoreFile
/**
* Preview
*
* Handles the slideshow preview.
* It renders an iframe, a transparent overlay to trigger the block selection and a loading state.
*/
import icon from './metaslider-icon'
const wp = window.wp
const React = window.React
const { Placeholder, Spinner } = wp.components
const { __ } = wp.i18n
const { apiRequest } = wp
/**
* Custom iframe component to leverage events
*/
class MetaSliderPreview extends React.Component {
/**
* Custom_Iframe component
*
* @param object props Properties
* @return void
*/
constructor(props) {
super(props)
this.state = {
height: 200,
previewIsLoading: true,
slideshowId: null,
html: '',
previewErrorMessage: ''
}
this.handleOnLoad = this.handleOnLoad.bind(this)
this.setHeight = this.setHeight.bind(this)
this.getPreview = this.getPreview.bind(this)
this.handleResize = this.handleResize.bind(this)
this.iframe = React.createRef()
} // end constructor()
/**
* componentDidMount: Fires when the dom element is inserted
*/
componentDidMount() {
this.getPreview()
window.addEventListener('resize', this.handleResize)
if (this.props.componentDidMount) {
this.props.componentDidMount(this)
}
} // end componentDidMount()
/**
* componentWillUnmount - Fires just before the dom element is removed
*/
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize)
if (this.props.componentWillUnmount) {
this.props.componentWillUnmount()
}
} // end componentWillUnmount()
/**
* ComponentDidUpdate
* When some props have been updated, before the component re-renders
*/
componentDidUpdate(prevProps) {
// if the source changes, change loaded status
if (this.props.slideshowId !== prevProps.slideshowId || this.props.refresh !== prevProps.refresh) {
this.setHeight(200)
this.getPreview()
this.iframe.current.contentDocument.location.reload(true)
}
}
/**
* handleOnLoad - The iframe onLoad event handler
*
* @param {Event} e - Event
*/
handleOnLoad(e) {
if (this.state.html) {
this.iframe.current.contentDocument.editor_block = this
setTimeout(() => {
clearInterval(this.loadInterval)
this.setHeight(this.iframe.current.contentDocument.body.clientHeight)
}, 50)
this.setState({previewIsLoading: false})
}
} // end handleOnLoad()
/**
* Handle window resize event
*
* @param {Event} e
*/
handleResize(e) {
// console.log('ss', this.iframe.current.contentDocument.body.clientHeight, this.iframe.current.contentDocument.body, this.iframe.current.contentDocument, this.iframe)
this.setHeight(this.iframe.current.contentDocument.body.clientHeight)
}
/**
* Sets iframe Height with a minimum of 200 if below 100
* Sometimes it shrinks on resize, so 200 looks best.
*
* @param {int} height
*/
setHeight(height) {
this.setState({height: height > 200 ? height : 200})
}
/**
* Get Preview - fetches the iframe's content
*/
getPreview() {
try {
this.setState({
html: '',
previewIsLoading: true,
previewErrorMessage: ''
})
apiRequest(
{
path: '/metaslider/v1/slideshow/preview',
data: {
action: 'ms_get_preview',
slideshow_id: this.props.slideshowId,
override_preview_style: true
}
}
).then(response => {
// Update the html inside the preview and set the height
this.setState({html: response.data})
this.setHeight(this.iframe.current.contentDocument.body.clientHeight)
}).fail(error => {
// Update the iframe but show an error that this slideshow no longer exists
if (410 === error.status) {
this.setState({
previewIsLoading: false,
previewErrorMessage: error.responseJSON.data.message
})
console.error('MetaSlider (Gutenberg): Slideshow not found:', error)
} else {
console.error('MetaSlider (Gutenberg): Could not load the preview:', error)
}
})
} catch (error) {
console.error('MetaSlider (Gutenberg): A general error occured:', error)
}
}
/**
* Render - React render function
*
* @return dom object
*/
render() {
return <div className={this.props.className + (this.state.previewIsLoading ? '' : ' loading') + ' ms-preview'}>
<iframe
key="preview-iframe"
height={this.state.height}
srcDoc={this.state.html || ''}
onLoad={this.handleOnLoad}
ref={this.iframe}
/>
<div key="trigger" className="ms-preview__trigger"></div>
{this.state.previewIsLoading && <Placeholder
key="ms-loader"
className="ms-loader"
label={[icon, ' MetaSlider']}>
<Spinner/> {__('Loading slideshow', 'ml-slider')}
</Placeholder>}
{(this.state.previewErrorMessage) && <Placeholder
key="ms-preview-empty"
className="ms-loader"
label={[icon, ' MetaSlider']}>
{this.state.previewErrorMessage}
</Placeholder>}
</div>
} // end render()
}
export default MetaSliderPreview
Zerion Mini Shell 1.0