File Manager
import React from 'react';
const body = document.body;
class NGGModal extends React.Component {
constructor(props) {
super(props)
this.closeModal = this.closeModal.bind(this);
this.background_layer = document.createElement('div');
this.background_layer.setAttribute('id', 'add-ngg-gallery-modal-background');
}
componentDidMount() {
body.style.overflow = 'hidden';
body.appendChild(this.background_layer);
const self = this;
const iframe = document.getElementById('add-ngg-gallery-block-iframe');
iframe.addEventListener('NGG_Iframe_Ready', function() {
document.getElementById("add-ngg-gallery-modal-spinner").classList.add("add-ngg-gallery-modal-spinner-hidden");
});
iframe.addEventListener('NGG_Insert_Gallery', function(event) {
self.props.onInsertGallery(event.detail.shortcode);
})
iframe.addEventListener('NGG_Close_Modal', function() {
self.props.onCloseModal();
})
}
componentWillUnmount() {
body.style.overflow = 'auto';
body.removeChild(this.background_layer);
}
closeModal() {
this.props.onCloseModal();
}
render() {
let attach_to_post_url = window.igw.url + '&origin=block';
attach_to_post_url += '&nonce=' + window.add_ngg_gallery_block_i18n.nonce;
if (this.props.content) {
attach_to_post_url += '&shortcode=';
let shortcode = this.props.content.replace(/\\"/g, '"');
shortcode = shortcode.replace(/^\[ngg_images/, '');
shortcode = shortcode.replace(/^\[ngg/, '');
shortcode = shortcode.replace(/]$/, '');
attach_to_post_url += Base64.encode(shortcode);
}
// use createPortal to insert the modal div as a child of <body> to prevent the WP-Admin sidebar
// menu from getting in the way and causing annoying z-index issues
return ReactDOM.createPortal(
<div id="add-ngg-gallery-modal">
<a href='#'
id='add-ngg-gallery-modal-close'
onClick={this.closeModal}>
<span className="dashicons dashicons-no"/>
</a>
<div id="add-ngg-gallery-modal-spinner">
<i className="fa fa-spin fa-spinner"/>
</div>
<iframe src={attach_to_post_url}
tabIndex="-1"
name="add-ngg-gallery-block-iframe"
id="add-ngg-gallery-block-iframe"/>
</div>,
body
);
}
}
export default class NGGEditor extends React.Component {
constructor(props) {
super(props)
this.state = {
open: false
}
this.openIGW = this.openIGW.bind(this);
this.closeIGW = this.closeIGW.bind(this);
this.removeGallery = this.removeGallery.bind(this);
}
hasGallery() {
return this.props.content && this.props.content.length > 0
}
removeGallery() {
this.props.onInsertGallery('');
}
closeIGW() {
this.setState({
open: false
});
}
openIGW() {
this.setState({
open: true
});
}
render() {
return (
<div className="add-ngg-gallery-parent">
{this.state.open ?
<NGGModal content={this.props.content}
onCloseModal={this.closeIGW}
onInsertGallery={this.props.onInsertGallery}/>
: ''
}
{this.hasGallery() ?
<div className="add-ngg-gallery-block">
<h3>{add_ngg_gallery_block_i18n.h3}</h3>
<button className="add-ngg-gallery-button"
onClick={this.openIGW}>
{add_ngg_gallery_block_i18n.edit}
</button>
<button className="add-ngg-gallery-button"
onClick={this.removeGallery}>
{add_ngg_gallery_block_i18n.delete}
</button>
</div>
:
<div className="add-ngg-gallery-block">
<div className="add-ngg-gallery-button"
onClick={this.openIGW}>
{add_ngg_gallery_block_i18n.create}
</div>
</div>
}
</div>
)
}
}
File Manager Version 1.0, Coded By Lucas
Email: hehe@yahoo.com