ᓚᘏᗢ
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
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;
}`
})
})
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"
}
})
})
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"
})
})
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
}
})
})
Input Form
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")
})