CHIEFSOFT\ameye
153 lines
2.9 KiB
React
153 lines
2.9 KiB
React
/**
|
|
* External dependencies
|
|
*/
|
|
import classnames from 'classnames';
|
|
import { debounce } from 'throttle-debounce';
|
|
|
|
/**
|
|
* WordPress dependencies
|
|
*/
|
|
const { __ } = wp.i18n;
|
|
|
|
const {
|
|
Component,
|
|
Fragment,
|
|
createRef,
|
|
} = wp.element;
|
|
|
|
const {
|
|
Placeholder,
|
|
Disabled,
|
|
} = wp.components;
|
|
|
|
/**
|
|
* Component
|
|
*/
|
|
export default class FacebookFanpageBlockEdit extends Component {
|
|
constructor() {
|
|
super( ...arguments );
|
|
|
|
this.fbRef = createRef();
|
|
|
|
this.maybeInit = debounce( 300, this.maybeInit.bind( this ) );
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.maybeInit();
|
|
}
|
|
|
|
componentDidUpdate() {
|
|
this.maybeInit();
|
|
}
|
|
|
|
maybeInit() {
|
|
const {
|
|
href,
|
|
} = this.props.attributes;
|
|
|
|
if ( ! this.fbRef || ! this.fbRef.current ) {
|
|
return;
|
|
}
|
|
|
|
if ( ! href || ! window.FB || ! window.FB.XFBML ) {
|
|
return;
|
|
}
|
|
|
|
const $ref = this.fbRef.current;
|
|
|
|
let {
|
|
showCover,
|
|
showFacepile,
|
|
showPosts,
|
|
smallHeader,
|
|
} = this.props.attributes;
|
|
|
|
const hideCover = showCover ? 'false' : 'true';
|
|
showFacepile = showFacepile ? 'true' : 'false';
|
|
showPosts = showPosts ? 'true' : 'false';
|
|
smallHeader = smallHeader ? 'true' : 'false';
|
|
|
|
// check if already rendered
|
|
const $query = $ref.getAttribute( 'fb-iframe-plugin-query' );
|
|
if ( $query ) {
|
|
let queryObj = false;
|
|
|
|
try {
|
|
// thanks https://stackoverflow.com/questions/8648892/convert-url-parameters-to-a-javascript-object
|
|
queryObj = JSON.parse('{"' + decodeURIComponent( $query ).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}');
|
|
} catch( e ) {
|
|
queryObj = false;
|
|
}
|
|
|
|
if (
|
|
queryObj &&
|
|
queryObj.href === href &&
|
|
queryObj.hide_cover === hideCover &&
|
|
queryObj.show_facepile === showFacepile &&
|
|
queryObj.show_posts === showPosts &&
|
|
queryObj.small_header === smallHeader
|
|
) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
// try to re-render
|
|
if ( $ref.attributes['fb-xfbml-state'] ) {
|
|
$ref.attributes['fb-xfbml-state'] = 're-rendering';
|
|
}
|
|
|
|
FB.XFBML.parse( $ref.parentNode );
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
setAttributes,
|
|
} = this.props;
|
|
|
|
let {
|
|
className,
|
|
} = this.props;
|
|
|
|
const {
|
|
href,
|
|
showCover,
|
|
showFacepile,
|
|
showPosts,
|
|
smallHeader,
|
|
canvasClassName,
|
|
} = this.props.attributes;
|
|
|
|
className = classnames(
|
|
'fb-page-wrapper',
|
|
canvasClassName,
|
|
className
|
|
);
|
|
|
|
return (
|
|
<Fragment>
|
|
{ href ? (
|
|
<Disabled>
|
|
<div
|
|
className={ className }
|
|
>
|
|
<div className="fb-page"
|
|
ref={ this.fbRef }
|
|
data-href={ href }
|
|
data-hide-cover={ showCover ? 'false' : 'true' }
|
|
data-show-facepile={ showFacepile ? 'true' : 'false' }
|
|
data-show-posts={ showPosts ? 'true' : 'false' }
|
|
data-small-header={ smallHeader ? 'true' : 'false' }
|
|
data-adapt-container-width="true"
|
|
/>
|
|
</div>
|
|
</Disabled>
|
|
) : (
|
|
<Placeholder>
|
|
{ __( 'Please, enter Facebook Fanpage URL.' ) }
|
|
</Placeholder>
|
|
) }
|
|
</Fragment>
|
|
);
|
|
}
|
|
}
|