powerkit / modules / facebook / public / block / edit.jsx

edit.jsx in Powerkit – Supercharge your WordPress Site 2.2.9, at modules/facebook/public/block/edit.jsx

153 lines 2.9 KB

Raw Download Zip

1	/**
2	* External dependencies
3	*/
4	import classnames from 'classnames';
5	import { debounce } from 'throttle-debounce';
6
7	/**
8	* WordPress dependencies
9	*/
10	const { __ } = wp.i18n;
11
12	const {
13	Component,
14	Fragment,
15	createRef,
16	} = wp.element;
17
18	const {
19	Placeholder,
20	Disabled,
21	} = wp.components;
22
23	/**
24	* Component
25	*/
26	export default class FacebookFanpageBlockEdit extends Component {
27	constructor() {
28	super( ...arguments );
29
30	this.fbRef = createRef();
31
32	this.maybeInit = debounce( 300, this.maybeInit.bind( this ) );
33	}
34
35	componentDidMount() {
36	this.maybeInit();
37	}
38
39	componentDidUpdate() {
40	this.maybeInit();
41	}
42
43	maybeInit() {
44	const {
45	href,
46	} = this.props.attributes;
47
48	if ( ! this.fbRef \|\| ! this.fbRef.current ) {
49	return;
50	}
51
52	if ( ! href \|\| ! window.FB \|\| ! window.FB.XFBML ) {
53	return;
54	}
55
56	const $ref = this.fbRef.current;
57
58	let {
59	showCover,
60	showFacepile,
61	showPosts,
62	smallHeader,
63	} = this.props.attributes;
64
65	const hideCover = showCover ? 'false' : 'true';
66	showFacepile = showFacepile ? 'true' : 'false';
67	showPosts = showPosts ? 'true' : 'false';
68	smallHeader = smallHeader ? 'true' : 'false';
69
70	// check if already rendered
71	const $query = $ref.getAttribute( 'fb-iframe-plugin-query' );
72	if ( $query ) {
73	let queryObj = false;
74
75	try {
76	// thanks https://stackoverflow.com/questions/8648892/convert-url-parameters-to-a-javascript-object
77	queryObj = JSON.parse('{"' + decodeURIComponent( $query ).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}');
78	} catch( e ) {
79	queryObj = false;
80	}
81
82	if (
83	queryObj &&
84	queryObj.href === href &&
85	queryObj.hide_cover === hideCover &&
86	queryObj.show_facepile === showFacepile &&
87	queryObj.show_posts === showPosts &&
88	queryObj.small_header === smallHeader
89	) {
90	return;
91	}
92	}
93
94	// try to re-render
95	if ( $ref.attributes['fb-xfbml-state'] ) {
96	$ref.attributes['fb-xfbml-state'] = 're-rendering';
97	}
98
99	FB.XFBML.parse( $ref.parentNode );
100	}
101
102	render() {
103	const {
104	setAttributes,
105	} = this.props;
106
107	let {
108	className,
109	} = this.props;
110
111	const {
112	href,
113	showCover,
114	showFacepile,
115	showPosts,
116	smallHeader,
117	canvasClassName,
118	} = this.props.attributes;
119
120	className = classnames(
121	'fb-page-wrapper',
122	canvasClassName,
123	className
124	);
125
126	return (
127	<Fragment>
128	{ href ? (
129	<Disabled>
130	<div
131	className={ className }
132	>
133	<div className="fb-page"
134	ref={ this.fbRef }
135	data-href={ href }
136	data-hide-cover={ showCover ? 'false' : 'true' }
137	data-show-facepile={ showFacepile ? 'true' : 'false' }
138	data-show-posts={ showPosts ? 'true' : 'false' }
139	data-small-header={ smallHeader ? 'true' : 'false' }
140	data-adapt-container-width="true"
141	/>
142	</div>
143	</Disabled>
144	) : (
145	<Placeholder>
146	{ __( 'Please, enter Facebook Fanpage URL.' ) }
147	</Placeholder>
148	) }
149	</Fragment>
150	);
151	}
152	}
153