javascript - modal return value when close

Question

I'm trying to make modal when i close it it will resolved/return a true value to make the timer continue and delete element if it isn't return false/reject, i don't know how to write it at all. I feel like i can make it somehow with Promise resolved and reject but i don't know how :( .

(to make the timer continue i need to set "timer.pause = false")

 class MODAL{
    constructor(){

        this.modal_container = document.createElement("div")
        this.modal_container.classList.add("modal")
        document.querySelector("body").appendChild(this.modal_container)

        this.overlay = document.createElement("div")
        this.overlay.classList.add("overlay")        
        this.modal_container.appendChild(this.overlay)

        this.content_container = document.createElement("div")
        this.content_container.classList.add("modal-content")        
        this.modal_container.appendChild(this.content_container)

        this.boxContent = document.createElement("div")
        this.boxContent.classList.add("modal-box")
        this.content_container.appendChild(this.boxContent)

        this.events()
    }

    close(){
        this.modal_container.parentNode.removeChild(this.modal_container);
    }    
    
    open(content){
        this.boxContent.appendChild(content);
    }


    // EVENTS
    events(){
        this.closeEvent()
        // need to add more
    }

    closeEvent(){
        this.modal_container.addEventListener("click", e =>{
            if(!e.target.closest(".modal-box")){
                this.close();
            }
        })
    }
}

function Open(issue){
        issue.addEventListener("click", () => {
            let content = document.createElement("div");
            content.classList.add("rows");
            let html = `
            
                TITLE
                      
            
                
                    
            
                
                    
            
                
                    
            
                
                    
            
                
                    
            
                
            
            `
            content.innerHTML = html
            timer.pause = true
            new MODAL().open(content) // when close continue timer (timer.pause = false)
                
        })
    }

user_11826301 · Answer

I think you can work with a callback. To give you some idea, something like:

From your Open(issue) function:

// pass the callback here to continue timer
new MODAL().open(content, () => timer.pause = false);

Then in your MODAL class:

open (content, callbackFn) {
  this.boxContent.appendChild(content);
  
  // referenced from your closeEvent() function
  this.modal_container.addEventListener("click", e => {
    if (!e.target.closest(".modal-box")) {
      this.close();
      callbackFn(); // trigger the callback function here.
    }
 });
}

Let me know if this satisfies what you're trying to do.

user_12209741 · Answer

open(issue) function:

    new MODAL().open(content)
    .then(value => {
        console.log(value);
    })
    .catch(value => {
        console.log(value);
    })

MODAL class:

open (content) {
    this.boxContent.appendChild(content);
    return new Promise((resolve, reject) => {
            this.modal_container.addEventListener("click", e => {

            if (!e.target.closest(".modal-box")) {
                this.close();
                reject(false)
            }   

            if (e.target.closest(".submit")) {
                this.close();
                resolve(true)
            }
        });
    })
}

javascript - modal return value when close

2 Answers