Dialog.js

Tue, 06/27/2023 - 16:19
A wrapper to simplify using the HTML dialog tag.
                  ᓚᘏᗢ

The dialog tag is a simple solution to add popups natively in the browser. It is kind of limited in it's features; no support for border radius and it's not possible to animate the transition in and and out but it does automatically provide a dialog in the middle of the stage and does not allow the user to interact with any other element of the web page as long as the dialog is active. I thought it would fun to build a simple class to simplify usage of this new tool.

The structure of the call for most of the methods is similar. The first parameter is typically a string for the title and the second is an object.

From here you can add initial logic to a callback that runs as soon as the button is clicked. Parameters can be passed directly to that callback. Then there is typically the standard OK or close  

Dialog.Alert(string: txt, object: p = null) : void
 
                                
document.getElementById("alert").addEventListener("click",(e)=>{
    e.preventDefault() 
    Dialog.Alert("This is a test",{
        callback: function(p) {
            console.log("immediate callback", p)
            document.getElementById("alert_immediate").value = JSON.stringify(p)
        },
        callback_params: {
            a:"foo",
            b:"bar"
        },
        callback_ok: function(p) {
            console.log("ok callback", p)
            document.getElementById("alert_ok_callback").value = JSON.stringify(p)
        },
        callback_ok_params: {
            a:"foo foo",
            b:"bar bar"
        },
        style: `
        button.ok {
            text-align: center;
            min-width: 50px;
            margin: 10px 0 0 0;
        }`
    })
})
Dialog.Confirm(string: txt, object: p = null) : void
 
                    
document.getElementById("confirm").addEventListener("click",(e)=>{
    e.preventDefault() 
    Dialog.Confirm("Are you sure you want to do this?",{
        callback: function(p) {
            console.log("immediate callback", p)
            document.getElementById("confirm_immediate").value = JSON.stringify(p)
        },
        callback_params: {
            a:"foo",
            b:"bar"
        },
        callback_ok: function(p) {
            console.log("ok callback", p)
            document.getElementById("confirm_ok_callback").value = JSON.stringify(p)
        },
        callback_ok_params: {
            a:"foo foo",
            b:"bar bar"
        }
    })
})
Dialog.Prompt(string: txt, object: p = null) : void
 
 
        					
document.getElementById("prompttext").addEventListener("click",(e)=>{
    e.preventDefault() 
    Dialog.Prompt("Enter a number between 1-10",{
        callback: function(p) {
            console.log("immediate callback", p)
            document.getElementById("prompttext_immediate").value = JSON.stringify(p)
        },
        callback_params: {
            a:"foo",
            b:"bar"
        },
        callback_ok: function(answer, p) {
            console.log("ok callback", answer, p)
            document.getElementById("prompttext_ok_callback").value = JSON.stringify(p)
            document.getElementById("prompttext_answer_callback").value = JSON.stringify(p)
        },
        callback_ok_params: {
            a:"foo foo",
            b:"bar bar"
        },
        type:"text"
    })
})
Dialog.Prompt(string: txt, object: p = null) : void
 
 
                
document.getElementById("promptrange").addEventListener("click",(e)=>{
    e.preventDefault() 
    Dialog.Prompt("Enter a number between 1-10",{
        callback: function(p) {
            console.log("immediate callback", p)
            document.getElementById("promptrange_immediate").value = JSON.stringify(p)
        },
        callback_params: {
            a:"foo",
            b:"bar"
        },
        callback_ok: function(answer, p) {
            console.log("ok callback", answer, p)
            document.getElementById("promptrange_ok_callback").value = JSON.stringify(p)
            document.getElementById("promptrange_answer_callback").value = JSON.stringify(p)
        },
        callback_ok_params: {
            a:"foo foo",
            b:"bar bar"
        },
        type:"range",
        attr:{
            min:1,
            max:10  
        }
    })
})
Dialog.Container(string: title, string: template_id, object: p = null) : void

This method uses the HTML template tag. Pass the ID of the template tag to the method using template_id.

		        
<template id="tcontainer">
    <h3>
        Input Form
    </h3>
    <form method="get">
        <div class="flex">
            <div class="c1">
                First Name
            </div>
            <div class="c1">
                <input type="text">
            </div>
        </div>
        <div class="flex">
            <div class="c1">
                Last Name
            </div>
            <div class="c1">
                <input type="text">
            </div>
        </div>
        <div class="flex">
            <div class="c1">
                Phone
            </div>
            <div class="c1">
                <input type="phone">
            </div>
        </div>
        <div class="flex">
            <div class="c3"></div>
            <button class="c1" type="submit">Submit</button>
            <div class="c3"></div>
        </div>
    </form>   
</template>
		        
		    
		        
document.getElementById("container").addEventListener("click",(e)=>{
    e.preventDefault()
    Dialog.Container("Test Title","tcontainer")
})

 

Category