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

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

107 lines 1.7 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	} = wp.element;
16
17	const {
18	Placeholder,
19	Disabled,
20	} = wp.components;
21
22	/**
23	* Component
24	*/
25	export default class PinterestBoardBlockEdit extends Component {
26	constructor() {
27	super( ...arguments );
28
29	this.state = {
30	pinApi: false,
31	};
32
33	this.maybeFindGlobalPinObj = this.maybeFindGlobalPinObj.bind( this );
34	this.maybeInit = debounce( 300, this.maybeInit.bind( this ) );
35	}
36
37	componentDidMount() {
38	this.maybeInit();
39	}
40
41	componentDidUpdate() {
42	this.maybeInit();
43	}
44
45	/**
46	* Try to find global Pinterest object.
47	*/
48	maybeFindGlobalPinObj() {
49	Object.keys( window ).forEach( ( k ) => {
50	if ( /^PIN_\d+$/.test( k ) && window[ k ].f && window[ k ].f.build ) {
51	this.setState( {
52	pinApi: k,
53	} );
54	}
55	} );
56	}
57
58	maybeInit() {
59	if ( ! this.state.pinApi ) {
60	this.maybeFindGlobalPinObj();
61	return;
62	}
63
64	window[ this.state.pinApi ].f.build();
65	}
66
67	render() {
68	let {
69	className,
70	} = this.props;
71
72	const {
73	href,
74	canvasClassName,
75	} = this.props.attributes;
76
77	className = classnames(
78	'pinterest-board-wrapper pk-block-pinterest-board',
79	canvasClassName,
80	className
81	);
82
83	return (
84	<Fragment>
85	{ href ? (
86	<Disabled>
87	<div
88	className={ className }
89	key={ `pin-board-${ href }` }
90	>
91	<a
92	data-pin-do="embedBoard"
93	data-pin-board-width="100%"
94	href={ href }
95	/>
96	</div>
97	</Disabled>
98	) : (
99	<Placeholder>
100	{ __( 'Please, enter Pinterest Board URL.' ) }
101	</Placeholder>
102	) }
103	</Fragment>
104	);
105	}
106	}
107