213 lines
9.3 KiB
JavaScript
213 lines
9.3 KiB
JavaScript
(function (wpI18n, wpBlocks, wpElement, wpEditor, wpBlockEditor, wpComponents) {
|
|
const {__} = wpI18n;
|
|
const {Component, Fragment} = wpElement;
|
|
const {registerBlockType} = wpBlocks;
|
|
const {InspectorControls, MediaUpload, BlockControls} = wpBlockEditor;
|
|
const {PanelBody, SelectControl, ToolbarGroup, TextControl, Button, IconButton, Placeholder} = wpComponents;
|
|
const $ = jQuery;
|
|
|
|
class wpmfPdfEmbed extends Component {
|
|
constructor() {
|
|
super(...arguments);
|
|
}
|
|
|
|
componentDidMount() {
|
|
const {attributes, clientId} = this.props;
|
|
const {id, embed, target, width, height} = attributes;
|
|
this.doPdfEmbed(id, embed, target, width, height, clientId);
|
|
}
|
|
|
|
componentDidUpdate(prevProps) {
|
|
const {attributes, clientId} = this.props;
|
|
const {id, embed, target, width, height} = attributes;
|
|
if (attributes.embed != prevProps.attributes.embed || attributes.id != prevProps.attributes.id || attributes.width != prevProps.attributes.width || attributes.height != prevProps.attributes.height) {
|
|
this.doPdfEmbed(id, embed, target, width, height, clientId);
|
|
}
|
|
}
|
|
|
|
doPdfEmbed(id, embed, target, width, height, clientId) {
|
|
let $container = $(`#block-${clientId} .wpmf_block_pdf_wrap`);
|
|
fetch(wpmf_pdf_blocks.vars.ajaxurl + `?action=wpmf_load_pdf_embed&id=${id}&embed=${embed}&target=${target}&width=${width}&height=${height}&wpmf_nonce=${wpmf_pdf_blocks.vars.wpmf_nonce}`)
|
|
.then(res => res.json())
|
|
.then(
|
|
(result) => {
|
|
if (result.status) {
|
|
$container.html(result.html);
|
|
if($container.find('.wpmf-pdfemb-viewer').length) {
|
|
$container.find('.wpmf-pdfemb-viewer').pdfEmbedder();
|
|
}
|
|
}
|
|
},
|
|
// errors
|
|
(error) => {
|
|
}
|
|
);
|
|
}
|
|
|
|
render() {
|
|
const {attributes, setAttributes, className} = this.props;
|
|
const {id, embed, target, width, height} = attributes;
|
|
const controls = (
|
|
<BlockControls>
|
|
{id !== 0 && (
|
|
<ToolbarGroup>
|
|
<MediaUpload
|
|
onSelect={(file) => setAttributes({id: parseInt(file.id)})}
|
|
accept="application/pdf"
|
|
allowedTypes={'application/pdf'}
|
|
render={({open}) => (
|
|
<IconButton
|
|
className="components-toolbar__control wpmf-pdf-button"
|
|
label={__('Edit', 'wpmf')}
|
|
icon="edit"
|
|
onClick={open}
|
|
/>
|
|
)}
|
|
/>
|
|
</ToolbarGroup>
|
|
)}
|
|
</BlockControls>
|
|
);
|
|
|
|
let pdf_shortcode = '[wpmfpdf';
|
|
pdf_shortcode += ' id="' + id + '"';
|
|
pdf_shortcode += ' embed="' + embed + '"';
|
|
pdf_shortcode += ' target="' + target + '"';
|
|
if (width !== '') {
|
|
pdf_shortcode += ' width="' + width + '"';
|
|
}
|
|
if (height !== '') {
|
|
pdf_shortcode += ' height="' + height + '"';
|
|
}
|
|
pdf_shortcode += ']';
|
|
|
|
if (id == 0) {
|
|
return (
|
|
<Placeholder
|
|
icon="pdf"
|
|
label={__('WP Media Folder PDF Embed', 'wpmf')}
|
|
instructions={__('Select a PDF file from your media library.', 'wpmf')}
|
|
className={className}
|
|
>
|
|
<MediaUpload
|
|
onSelect={(file) => setAttributes({id: parseInt(file.id)})}
|
|
accept="application/pdf"
|
|
allowedTypes={'application/pdf'}
|
|
render={({open}) => (
|
|
<Button
|
|
islarge="true"
|
|
className="is-tertiary editor-media-placeholder__button wpmfLibrary"
|
|
onClick={open}
|
|
>
|
|
{__('Add PDF', 'wpmf')}
|
|
</Button>
|
|
)}
|
|
/>
|
|
</Placeholder>
|
|
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Fragment>
|
|
<div className="wp-block-shortcode">
|
|
{
|
|
(id !== 0) && <div className="wpmf-pdf-block">
|
|
<InspectorControls>
|
|
<PanelBody title={__('PDF Settings', 'wpmf')}>
|
|
<SelectControl
|
|
label={__('Embed', 'wpmf')}
|
|
value={embed}
|
|
options={[
|
|
{label: __('On', 'wpmf'), value: 1},
|
|
{label: __('Off', 'wpmf'), value: 0}
|
|
]}
|
|
onChange={(value) => setAttributes({embed: parseInt(value)})}
|
|
/>
|
|
|
|
<SelectControl
|
|
label={__('Target', 'wpmf')}
|
|
value={target}
|
|
options={[
|
|
{label: __('Same Window', 'wpmf'), value: ''},
|
|
{label: __('New Window', 'wpmf'), value: '_blank'}
|
|
]}
|
|
onChange={(value) => setAttributes({target: value})}
|
|
/>
|
|
<TextControl
|
|
label={__('Width', 'wpmf')}
|
|
value={ width }
|
|
onChange={ ( value ) => setAttributes({width: value})}
|
|
/>
|
|
<TextControl
|
|
className="wpmf_pdf_embed_shortcode_input"
|
|
label={__('Height', 'wpmf')}
|
|
value={ height }
|
|
onChange={ ( value ) => setAttributes({height: value})}
|
|
/>
|
|
</PanelBody>
|
|
</InspectorControls>
|
|
<TextControl
|
|
value={pdf_shortcode}
|
|
className="wpmf_pdf_value"
|
|
autoComplete="off"
|
|
readOnly
|
|
/>
|
|
{
|
|
(id !== 0) && <div className="wpmf_block_pdf_wrap"></div>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
{controls}
|
|
</Fragment>
|
|
);
|
|
}
|
|
}
|
|
|
|
registerBlockType(
|
|
'wpmf/pdfembed', {
|
|
title: wpmf_pdf_blocks.l18n.block_pdf_title,
|
|
icon: 'media-code',
|
|
category: 'wp-media-folder',
|
|
attributes: {
|
|
id: {
|
|
type: 'number',
|
|
default: 0
|
|
},
|
|
embed: {
|
|
type: 'number',
|
|
default: 1,
|
|
},
|
|
target: {
|
|
type: 'string',
|
|
default: '',
|
|
},
|
|
width: {
|
|
type: 'string',
|
|
default: ''
|
|
},
|
|
height: {
|
|
type: 'string',
|
|
default: ''
|
|
}
|
|
},
|
|
edit: wpmfPdfEmbed,
|
|
save: ({attributes}) => {
|
|
const {id, embed, target, width, height} = attributes;
|
|
let pdf_shortcode = '[wpmfpdf';
|
|
pdf_shortcode += ' id="' + id + '"';
|
|
pdf_shortcode += ' embed="' + embed + '"';
|
|
pdf_shortcode += ' target="' + target + '"';
|
|
if (width !== '') {
|
|
pdf_shortcode += ' width="' + width + '"';
|
|
}
|
|
if (height !== '') {
|
|
pdf_shortcode += ' height="' + height + '"';
|
|
}
|
|
pdf_shortcode += ']';
|
|
return pdf_shortcode;
|
|
}
|
|
}
|
|
);
|
|
})(wp.i18n, wp.blocks, wp.element, wp.editor, wp.blockEditor, wp.components); |