balmet.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

index.js (3671B)

      1 import {__} from '@wordpress/i18n';
      2 import {Component, Fragment} from '@wordpress/element';
      3 
      4 var onClose, node, customizerNode, feedbackNode = null;
      5 
      6 export class Modal extends Component {
      7     constructor(props) {
      8         super(props)
      9         this.state = {
     10             afterOpen: false,
     11             beforeClose: false,
     12         }
     13     }
     14 
     15     close() {
     16         if (!this.props.onRequestClose || this.props.onRequestClose()) {
     17             if (customizerNode) ModalManager.closeCustomizer()
     18             else ModalManager.close()
     19         }
     20     }
     21 
     22     componentDidMount() {
     23         const {openTimeoutMS, closeTimeoutMS} = this.props
     24         setTimeout(() => this.setState({afterOpen: true}), openTimeoutMS ? openTimeoutMS : 150)
     25 
     26         onClose = (callback) => {
     27             this.setState({beforeClose: true}, () => {
     28                 this.closeTimer = setTimeout(callback, closeTimeoutMS ? closeTimeoutMS : 150)
     29             });
     30         };
     31     }
     32 
     33     componentWillUnmount() {
     34         onClose = null;
     35         clearTimeout(this.closeTimer)
     36     }
     37 
     38     render() {
     39 
     40         return (
     41             <Fragment>
     42                 <span onClick={e => {
     43                     this.close()
     44                 }} className={'redux-templates-pagelist-modal-overlay'}>&nbsp;</span>
     45                 <div className={ this.props.compactMode ? 'redux-templates-modal-inner' : 'redux-templates-pagelist-modal-inner'} onClick={e => e.stopPropagation()}>
     46                     {this.props.children}
     47                 </div>
     48             </Fragment>
     49         );
     50     }
     51 }
     52 
     53 
     54 export const ModalManager = {
     55     open(component) {
     56         if (onClose) {
     57             this.close();
     58             // throw __('There is already one modal.It must be closed before one new modal will be opened');
     59         }
     60         if (!node) {
     61             node = document.createElement('div')
     62             node.className = 'redux-templates-builder-modal'
     63             document.body.appendChild(node)
     64         }
     65         wp.element.render(component, node)
     66         document.body.classList.add('redux-templates-builder-modal-open')
     67     },
     68     close() {
     69         onClose && onClose(() => {
     70             wp.element.unmountComponentAtNode(node)
     71             document.body.classList.remove('redux-templates-builder-modal-open')
     72         });
     73     },
     74     openCustomizer(component) {
     75         if (!customizerNode) {
     76             customizerNode = document.createElement('div');
     77             document.body.appendChild(customizerNode);
     78         }
     79         wp.element.render(component, customizerNode);
     80     },
     81     closeCustomizer() {
     82         if (customizerNode) {
     83             wp.element.unmountComponentAtNode(customizerNode);
     84             customizerNode = false
     85         }
     86     },
     87     openFeedback(component) {
     88         feedbackNode = document.getElementsByClassName('feedback-wrapper');
     89         if (!feedbackNode || feedbackNode.length < 1) {
     90             feedbackNode = document.createElement('div');
     91             feedbackNode.className = 'feedback-wrapper';
     92             document.body.appendChild(feedbackNode);
     93         } else {
     94             feedbackNode = feedbackNode[0];
     95         }
     96         wp.element.render(component, feedbackNode);
     97     },
     98     closeFeedback() {
     99         if (feedbackNode) {
    100             wp.element.unmountComponentAtNode(feedbackNode);
    101             feedbackNode = false;
    102         }
    103     },
    104     isCustomizerOpened() {
    105         return customizerNode ? true : false;
    106     },
    107     hide () {
    108         document.body.classList.remove('redux-templates-builder-modal-open')
    109         node.classList.add('hidden')
    110     },
    111     show () {
    112         document.body.classList.add('redux-templates-builder-modal-open')
    113         if (node)
    114             node.classList.remove('hidden')
    115     }
    116 }