import { Frame } from './frame' import { NodeWrapper } from '../node_wrapper'

export class Modal extends Frame {

static get name(){ return 'modal' }

constructor(...args){
    super(...args)
    this.on('click', '.modal-background, .modal-close', (event) => {
        event.stopPropagation()
        this.close()
    })
}

close(){
    this.remove()
    if(!this.document.find('body').pop().children.filter((child) => child.is('.modal')).length){
        this.document.find('html').pop().removeClass('is-clipped')
    }
}

patch(html){
    return super.patch(`
        <div class="modal-background"></div>
        <div class="modal-content">
            <div class="box">${html}</div>
        </div>
        <button class="modal-close is-large" aria-label="close"></button>
    `)
}

}

Modal.register()