377 lines
8.9 KiB
HTML
377 lines
8.9 KiB
HTML
<!doctype html>
|
|
<html lang="en-GB">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="content-type" content="text/html" charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="description" content="" />
|
|
<meta name="keyword" content="" />
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
|
|
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
|
|
|
|
<script src="dist/tw4dialog.dist.js"></script>
|
|
<title></title>
|
|
|
|
<style>
|
|
|
|
p {
|
|
margin: 0 0 1em 0;
|
|
}
|
|
|
|
.text-sm {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
<body class="py-5">
|
|
<div class="container mx-auto mt-4">
|
|
|
|
<div class="grid grid-cols-3 gap-2 divide-x divide-solid divide-base-300 mb-5">
|
|
<div class="col-span-1 pr-2">
|
|
<p><b>Example. Simple Text Modal</b></p>
|
|
<p>Launch a modal with a text body.</p>
|
|
|
|
<p><button id="buttonL1" type="button" class="btn btn-primary">Launch Modal</button></p>
|
|
|
|
<script>
|
|
document.querySelector("#buttonL1").addEventListener("click", async function(e){
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
|
|
TW4Dialog.Show({
|
|
Title: "Modal Example",
|
|
Content: "Hello Momo!",
|
|
Size: "md"
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</div>
|
|
<div class="col-span-2">
|
|
|
|
<div class="mockup-code w-full px-5 text-sm">
|
|
<pre><code>
|
|
TW4Dialog.Show({
|
|
Title: "Modal Example",
|
|
Content: "Hello Momo!",
|
|
Size: "md"
|
|
});
|
|
</code></pre>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-3 gap-2 divide-x divide-solid divide-base-300 mb-5">
|
|
<div class="col-span-1 pr-2">
|
|
<p><b>Example. Basic Modal</b></p>
|
|
<p>Launch a modal and fetch a html body from a URL.</p>
|
|
|
|
<p><button id="buttonL11" type="button" class="btn btn-primary">Launch Modal</button></p>
|
|
|
|
<script>
|
|
document.querySelector("#buttonL11").addEventListener("click", async function(e){
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
|
|
TW4Dialog.Show({
|
|
Title: "Modal Fetch Example",
|
|
Content: "Loading...",
|
|
Url: "https://cdn.hiimray.co.uk/sample/hellomomo.txt",
|
|
Size: "lg"
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</div>
|
|
<div class="col-span-2">
|
|
|
|
<div class="mockup-code w-full px-5 text-sm">
|
|
<pre><code>
|
|
TW4Dialog.Show({
|
|
Title: "Modal Fetch Example",
|
|
Content: "Loading...",
|
|
Url: "https://cdn.hiimray.co.uk/sample/hellomomo.txt",
|
|
Size: "lg"
|
|
});
|
|
</code></pre>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-3 gap-2 divide-x divide-solid divide-base-300 mb-5">
|
|
<div class="col-span-1 pr-2">
|
|
|
|
<p><b>Example. Update Modal</b></p>
|
|
<p>Make changes (title, body, size or footer) to a modal.</p>
|
|
|
|
<p><button id="buttonR1" type="button" class="btn btn-primary">Launch Modal</button></p>
|
|
<script>
|
|
document.querySelector("#buttonR1").addEventListener("click", function(e){
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
|
|
TW4Dialog.Show({
|
|
Id: "modalR1",
|
|
Title: "Modal Title",
|
|
Content: "Hello Momo!",
|
|
Url: null,
|
|
Size: "md"
|
|
});
|
|
|
|
TW4Dialog.Update({
|
|
Id: "modalR1",
|
|
Title: "Modal Changed Title",
|
|
Content: "Hello momo again!",
|
|
Url: null,
|
|
Size: "sm",
|
|
ShowFooter: false
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</div>
|
|
<div class="col-span-2">
|
|
|
|
<div class="mockup-code w-full px-5 text-sm">
|
|
<pre><code>
|
|
TW4Dialog.Show({
|
|
Id: "modalR1",
|
|
Title: "Modal Title",
|
|
Content: "Hello Momo!",
|
|
Url: null,
|
|
Size: "md"
|
|
});
|
|
|
|
TW4Dialog.Update({
|
|
Id: "modalR1",
|
|
Title: "Modal Changed Title",
|
|
Content: "Hello momo again!",
|
|
Url: null,
|
|
Size: "sm",
|
|
ShowFooter: false
|
|
});
|
|
</code></pre>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-3 gap-2 divide-x divide-solid divide-base-300 mb-5 border-b border-solid border-base-400 pb-5">
|
|
<div class="col-span-1 pr-2">
|
|
|
|
<p><b>Example. Multiple Modals (Stack)</b></p>
|
|
<p>Launch multiple modals, stacked on top of each other.</p>
|
|
|
|
<p><button id="buttonL3" type="button" class="btn btn-primary">Launch Modal</button></p>
|
|
<script>
|
|
document.querySelector("#buttonL3").addEventListener("click", function(e){
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
|
|
TW4Dialog.Show({
|
|
Id: "modalL3a",
|
|
Title: "Modal A Title",
|
|
Content: "First!",
|
|
Url: null,
|
|
Size: "md"
|
|
});
|
|
|
|
TW4Dialog.Show({
|
|
Id: "modalL3b",
|
|
Title: "Modal B Title",
|
|
Content: "Second!",
|
|
Url: null,
|
|
Size: "md"
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
</div>
|
|
<div class="col-span-2">
|
|
|
|
<div class="mockup-code w-full px-5 text-sm">
|
|
<pre><code>
|
|
TW4Dialog.Show({
|
|
Id: "modalL3a",
|
|
Title: "Modal A Title",
|
|
Content: "First!",
|
|
Url: null,
|
|
Size: "md"
|
|
});
|
|
|
|
TW4Dialog.Show({
|
|
Id: "modalL3b",
|
|
Title: "Modal B Title",
|
|
Content: "Second!",
|
|
Url: null,
|
|
Size: "md"
|
|
});
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-3 gap-2 divide-x divide-solid divide-base-300 mb-5 border-b border-solid border-base-400 pb-5">
|
|
<div class="col-span-1 pr-2">
|
|
|
|
<p><b>Example. MessageBox Example (Button Prompts)</b></p>
|
|
<p>Launch a modal with a prompt of several buttons. Modal waits for a response from one of the buttons or on closing.</p>
|
|
|
|
<p><button id="buttonL2" type="button" class="btn btn-primary">Launch Modal</button></p>
|
|
<script>
|
|
document.querySelector("#buttonL2").addEventListener("click", async function(e){
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
|
|
const result = await TW4MessageBox.Show({
|
|
Title: "MessageBox Example 1",
|
|
Content: "Click a button!",
|
|
Buttons: [
|
|
{ Label: "Yes", Value: "Yes" },
|
|
{ Label: "No", Value: "No" },
|
|
{ Label: "Cancel", Value: "Cancel" }
|
|
]
|
|
});
|
|
|
|
TW4Dialog.Show({
|
|
Title: "MessageBox Result",
|
|
Content: result
|
|
});
|
|
|
|
});
|
|
</script>
|
|
</div>
|
|
<div class="col-span-2">
|
|
|
|
<div class="mockup-code w-full px-5 text-sm">
|
|
<pre><code>
|
|
const result = await TW4MessageBox.Show({
|
|
Title: "MessageBox Example 1",
|
|
Content: "Click a button!",
|
|
Buttons: [
|
|
{ Label: "Yes", Value: "Yes" },
|
|
{ Label: "No", Value: "No" },
|
|
{ Label: "Cancel", Value: "Cancel" }
|
|
]
|
|
});
|
|
|
|
TW4Dialog.Show({
|
|
Title: "MessageBox Result",
|
|
Content: result
|
|
});
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-3 gap-2 divide-x divide-solid divide-base-300 mb-5 border-b border-solid border-base-400 pb-5">
|
|
<div class="col-span-1 pr-2">
|
|
|
|
<p><b>Example. PromptBox (Text Prompt)</b></p>
|
|
<p>Launch a modal with a text prompt. Modal waits for a response from the textbox.</p>
|
|
|
|
<p><button id="buttonL2a" type="button" class="btn btn-primary">Launch Modal</button></p>
|
|
<script>
|
|
document.querySelector("#buttonL2a").addEventListener("click", async function(e){
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
|
|
const result = await TW4PromptBox.Show({
|
|
Title: "PromptBox Example 1",
|
|
Content: "Enter text!",
|
|
Placeholder: "Text me",
|
|
Value: ""
|
|
});
|
|
|
|
TW4Dialog.Show({
|
|
Title: "PromptBox Result",
|
|
Content: JSON.stringify(result)
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
</div>
|
|
<div class="col-span-2">
|
|
|
|
<div class="mockup-code w-full px-5 text-sm">
|
|
<pre><code>
|
|
const result = await TW4PromptBox.Show({
|
|
Title: "PromptBox Example 1",
|
|
Content: "Enter text!",
|
|
Placeholder: "Text me",
|
|
Value: ""
|
|
});
|
|
|
|
TW4Dialog.Show({
|
|
Title: "PromptBox Result",
|
|
Content: JSON.stringify(result)
|
|
});
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-3 gap-2 divide-x divide-solid divide-base-300 mb-5">
|
|
<div class="col-span-1 pr-2">
|
|
|
|
<p><b>Example. Close Modal</b></p>
|
|
<p>Close a modal using its identifier</p>
|
|
<p><button id="buttonR2" type="button" class="btn btn-primary">Launch Modal</button></p>
|
|
<script>
|
|
document.querySelector("#buttonR2").addEventListener("click", function(e){
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
|
|
TW4Dialog.Close("modalR1");
|
|
});
|
|
</script>
|
|
|
|
</div>
|
|
<div class="col-span-2">
|
|
|
|
<div class="mockup-code w-full px-5 text-sm">
|
|
<pre><code>
|
|
TW4Dialog.Close("modalR1");
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-3 gap-2 divide-x divide-solid divide-base-300 mb-5">
|
|
<div class="col-span-1 pr-2">
|
|
|
|
<p><b>Example. Clear Modal</b></p>
|
|
<p>Close all modals</p>
|
|
<p><button id="buttonR3" type="button" class="btn btn-primary">Launch Modal</button></p>
|
|
<script>
|
|
document.querySelector("#buttonR3").addEventListener("click", function(e){
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
|
|
TW4Dialog.Clear();
|
|
});
|
|
</script>
|
|
|
|
</div>
|
|
<div class="col-span-2">
|
|
|
|
<div class="mockup-code w-full px-5 text-sm">
|
|
<pre><code>
|
|
TW4Dialog.Clear();
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html> |