dynamo

class RMIPopup{
    constructor(element){
        this.element = element;
        this.close = '.updated-rmi__form-close';
        this.init();
    }

    init(){
        let clickAnchor = this.element.querySelector('a');
        this.attachListener(clickAnchor);
    }
    attachListener(element){
        let self = this;
        let closeButton = document.querySelector(self.close);
        element.addEventListener('click', () =>{
            self.expandModal();
        });
    }
    expandModal(){
        let self = this;
        let bodyElement = document.querySelector('body');
        if(bodyElement.classList.contains('rmi-modal-active')){
            bodyElement.classList.remove('rmi-modal-active')
        } else {
            bodyElement.classList.add('rmi-modal-active');
            self.createModal();
        }
    }
    closeModal(){
        let self = this;
        let bodyElement = document.querySelector('body');
        let closeButton = document.querySelector(self.close);
        closeButton.addEventListener('click', () => {
            bodyElement.classList.remove('rmi-modal-active')
            bodyElement.querySelector('.updated-rmi').remove();
        })

    }
    triggerClose(){
        bodyElement.classList.remove('rmi-modal-active')
        bodyElement.querySelector('.updated-rmi').remove();
    }
    createModal(){
        //Use document fragment
        let self = this;
        let bodyElement = document.querySelector('body');
        let fragment = document.createDocumentFragment();
        let rmiModal = ``
        bodyElement.insertAdjacentHTML('afterbegin', rmiModal);
        self.closeModal();
    }

}

module.exports = function rmipopup(selector) {
	[...document.querySelectorAll(selector)].forEach(element => new RMIPopup(element));
};