CHIEFSOFT\ameye
107 lines
1.7 KiB
React
107 lines
1.7 KiB
React
/**
|
|
* External dependencies
|
|
*/
|
|
import classnames from 'classnames';
|
|
import { debounce } from 'throttle-debounce';
|
|
|
|
/**
|
|
* WordPress dependencies
|
|
*/
|
|
const { __ } = wp.i18n;
|
|
|
|
const {
|
|
Component,
|
|
Fragment,
|
|
} = wp.element;
|
|
|
|
const {
|
|
Placeholder,
|
|
Disabled,
|
|
} = wp.components;
|
|
|
|
/**
|
|
* Component
|
|
*/
|
|
export default class PinterestBoardBlockEdit extends Component {
|
|
constructor() {
|
|
super( ...arguments );
|
|
|
|
this.state = {
|
|
pinApi: false,
|
|
};
|
|
|
|
this.maybeFindGlobalPinObj = this.maybeFindGlobalPinObj.bind( this );
|
|
this.maybeInit = debounce( 300, this.maybeInit.bind( this ) );
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.maybeInit();
|
|
}
|
|
|
|
componentDidUpdate() {
|
|
this.maybeInit();
|
|
}
|
|
|
|
/**
|
|
* Try to find global Pinterest object.
|
|
*/
|
|
maybeFindGlobalPinObj() {
|
|
Object.keys( window ).forEach( ( k ) => {
|
|
if ( /^PIN_\d+$/.test( k ) && window[ k ].f && window[ k ].f.build ) {
|
|
this.setState( {
|
|
pinApi: k,
|
|
} );
|
|
}
|
|
} );
|
|
}
|
|
|
|
maybeInit() {
|
|
if ( ! this.state.pinApi ) {
|
|
this.maybeFindGlobalPinObj();
|
|
return;
|
|
}
|
|
|
|
window[ this.state.pinApi ].f.build();
|
|
}
|
|
|
|
render() {
|
|
let {
|
|
className,
|
|
} = this.props;
|
|
|
|
const {
|
|
href,
|
|
canvasClassName,
|
|
} = this.props.attributes;
|
|
|
|
className = classnames(
|
|
'pinterest-board-wrapper pk-block-pinterest-board',
|
|
canvasClassName,
|
|
className
|
|
);
|
|
|
|
return (
|
|
<Fragment>
|
|
{ href ? (
|
|
<Disabled>
|
|
<div
|
|
className={ className }
|
|
key={ `pin-board-${ href }` }
|
|
>
|
|
<a
|
|
data-pin-do="embedBoard"
|
|
data-pin-board-width="100%"
|
|
href={ href }
|
|
/>
|
|
</div>
|
|
</Disabled>
|
|
) : (
|
|
<Placeholder>
|
|
{ __( 'Please, enter Pinterest Board URL.' ) }
|
|
</Placeholder>
|
|
) }
|
|
</Fragment>
|
|
);
|
|
}
|
|
}
|