Initial commit
This commit is contained in:
Ray
commit
907199a05e
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
/dist
|
||||
/node_modules
|
||||
377
demo.html
Normal file
377
demo.html
Normal file
@ -0,0 +1,377 @@
|
||||
<!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>
|
||||
3498
package-lock.json
generated
Normal file
3498
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
16
package.json
Normal file
16
package.json
Normal file
@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "twdialog4",
|
||||
"version": "0.1.0.201",
|
||||
"devDependencies": {
|
||||
"css-loader": "^7.1.2",
|
||||
"sass": "^1.77.8",
|
||||
"sass-loader": "^16.0.0",
|
||||
"style-loader": "^4.0.0",
|
||||
"webpack": "^5.93.0",
|
||||
"webpack-cli": "^5.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "webpack",
|
||||
"watch": "webpack --watch"
|
||||
}
|
||||
}
|
||||
8
src/index.js
Normal file
8
src/index.js
Normal file
@ -0,0 +1,8 @@
|
||||
import TWDialog4 from "./twdialog4.js"
|
||||
import TWMessageBox4 from "./twmessagebox4.js"
|
||||
import TWPromptBox4 from "./twpromptbox4.js"
|
||||
|
||||
|
||||
window.TW4Dialog = new TWDialog4();
|
||||
window.TW4MessageBox = new TWMessageBox4();
|
||||
window.TW4PromptBox = new TWPromptBox4();
|
||||
481
src/twdialog4.js
Normal file
481
src/twdialog4.js
Normal file
@ -0,0 +1,481 @@
|
||||
class TWDialog4 {
|
||||
#elName = {};
|
||||
#modalSizes = [
|
||||
"md",
|
||||
"xl",
|
||||
"4xl",
|
||||
"screen",
|
||||
];
|
||||
|
||||
|
||||
constructor() {
|
||||
const a = this;
|
||||
const prefix = "twdia4";
|
||||
|
||||
a.#elName = {
|
||||
prefix: prefix,
|
||||
container: prefix + "-container",
|
||||
backdrop: prefix + "-backdrop",
|
||||
modal: prefix + "-modal",
|
||||
header: prefix + "-header",
|
||||
title: prefix + "-h1",
|
||||
body: prefix + "-body",
|
||||
footer: prefix + "-footer"
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
get DefaultOptions() {
|
||||
return {
|
||||
Id: null,
|
||||
Title: "",
|
||||
Content: "",
|
||||
Url: null,
|
||||
Size: "md",
|
||||
ShowFooter: true,
|
||||
// EasyClose: true,
|
||||
EnableMovement: true,
|
||||
EnableResize: true,
|
||||
CloseButton: {
|
||||
colour: "bg-white hover:bg-gray-50 text-gray-700"
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
get #documentBody() {
|
||||
return document.getElementsByTagName("body")[0];
|
||||
}
|
||||
|
||||
|
||||
async Show(options) {
|
||||
const a = this;
|
||||
const newOptions = a.#loadOptions(options);
|
||||
|
||||
a.#addBackdrop();
|
||||
|
||||
const modal = a.Find(newOptions.Id);
|
||||
if (modal == null) {
|
||||
await a.#addModal(newOptions);
|
||||
} else {
|
||||
await a.Update(newOptions);
|
||||
}
|
||||
}
|
||||
|
||||
Clear() {
|
||||
const a = this;
|
||||
const container = a.#findNode("." + a.#elName.container);
|
||||
|
||||
if (container != null) {
|
||||
a.#removeNode(container);
|
||||
}
|
||||
}
|
||||
|
||||
Close(id) {
|
||||
const a = this;
|
||||
const modalId = a.#elName.prefix + "-" + id;
|
||||
|
||||
const container = a.#findNode("." + a.#elName.container);
|
||||
if (container == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
const modal = a.#findNode("#" + modalId);
|
||||
if (modal != null) {
|
||||
a.#removeNode(modal);
|
||||
}
|
||||
|
||||
const foundModals = a.#documentBody.querySelectorAll("." + a.#elName.modal);
|
||||
if (foundModals.length <= 0) {
|
||||
a.#removeNode(container);
|
||||
|
||||
a.#documentBody.classList.remove('overflow-hidden');
|
||||
}
|
||||
}
|
||||
|
||||
Exists(id) {
|
||||
return (this.Find(id) !== null);
|
||||
}
|
||||
|
||||
Find(id) {
|
||||
const a = this;
|
||||
const modalId = a.#elName.prefix + "-" + id;
|
||||
|
||||
const modal = a.#findNode("#" + modalId);
|
||||
if (modal == null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
Header: modal.querySelector("." + a.#elName.header),
|
||||
Title: modal.querySelector("." + a.#elName.title),
|
||||
Body: modal.querySelector("." + a.#elName.body),
|
||||
Footer: modal.querySelector("." + a.#elName.footer),
|
||||
Modal: modal
|
||||
};
|
||||
}
|
||||
|
||||
SetSize(id, size) {
|
||||
const a = this;
|
||||
|
||||
const modal = a.Find(id);
|
||||
if (modal == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
const childNode = modal.Modal.firstElementChild;
|
||||
|
||||
for (let i=0; i<a.#modalSizes.length; i++) {
|
||||
if (childNode.classList.contains("w-" + a.#modalSizes[i])) {
|
||||
childNode.classList.remove("w-" + a.#modalSizes[i]);
|
||||
}
|
||||
}
|
||||
|
||||
childNode.classList.add("w-" + size);
|
||||
}
|
||||
|
||||
async Update(options) {
|
||||
const a = this;
|
||||
const newOptions = a.#loadOptions(options);
|
||||
|
||||
const modal = a.Find(newOptions.Id);
|
||||
if (modal == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.#isNullOrWhitespace(newOptions.Title)) {
|
||||
modal.Title.innerHTML = newOptions.Title;
|
||||
}
|
||||
|
||||
if (!this.#isNullOrWhitespace(newOptions.Content)) {
|
||||
modal.Body.innerHTML = newOptions.Content;
|
||||
}
|
||||
|
||||
if (newOptions.ShowFooter) {
|
||||
modal.Footer.classList.remove('hidden');
|
||||
} else {
|
||||
modal.Footer.classList.add('hidden');
|
||||
}
|
||||
|
||||
if (!this.#isNullOrWhitespace(newOptions.Size)) {
|
||||
a.SetSize(newOptions.Id, newOptions.Size);
|
||||
}
|
||||
|
||||
// Load content from url
|
||||
if (!this.#isNullOrWhitespace(newOptions.Url)) {
|
||||
const html = await a.#fetchHtml(newOptions.Url);
|
||||
|
||||
modal.Body.innerHTML = html ?? "";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#addBackdrop() {
|
||||
const a = this;
|
||||
|
||||
// Don't allow multiple backdrops
|
||||
if (a.#findNode("." + a.#elName.container) != null) {
|
||||
return;
|
||||
}
|
||||
|
||||
const html = `
|
||||
<div class="` + a.#elName.container + ` fixed inset-0 z-50 hidden">
|
||||
<!-- Backdrop -->
|
||||
<div class="` + a.#elName.backdrop + ` absolute inset-0 bg-black/60"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
a.#appendHtml(a.#documentBody, html);
|
||||
|
||||
// const backdrop = a.#findNode("." + a.#elName.backdrop);
|
||||
// if (backdrop == null) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// // Attach close event
|
||||
// backdrop.addEventListener("click", function(e){
|
||||
// e.stopPropagation();
|
||||
// e.preventDefault();
|
||||
|
||||
// a.Clear();
|
||||
// });
|
||||
}
|
||||
|
||||
async #addModal(options) {
|
||||
const a = this;
|
||||
const modalId = a.#elName.prefix + "-" + options.Id;
|
||||
|
||||
const container = a.#findNode("." + a.#elName.container);
|
||||
if (container == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Don't allow duplicates
|
||||
let modal = a.Find(options.Id);
|
||||
if (modal != null) {
|
||||
return;
|
||||
}
|
||||
|
||||
let html = `
|
||||
<div id="` + modalId + `" class="` + a.#elName.modal + ` absolute z-10 flex items-start justify-center h-full w-screen p-8">
|
||||
<div class="bg-white max-h-[90vh] max-w-[90vw] w-` + options.Size + ` rounded-lg shadow-xl overflow-y-auto">
|
||||
` + a.#generateModalHeader(options) + `
|
||||
<div class="` + a.#elName.body + ` p-4">
|
||||
` + options.Content + `
|
||||
</div>
|
||||
` + a.#generateModalFooter(options) + `
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
a.#appendHtml(container, html);
|
||||
|
||||
// Fix viewport
|
||||
container.classList.remove('hidden');
|
||||
a.#documentBody.classList.add('overflow-hidden');
|
||||
|
||||
modal = a.Find(options.Id);
|
||||
if (modal === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle close
|
||||
modal.Modal.querySelectorAll("[aria-label='Close']").forEach(e => {
|
||||
e.addEventListener("click", function(e2){
|
||||
e2.stopPropagation();
|
||||
e2.preventDefault();
|
||||
|
||||
a.Close(options.Id);
|
||||
});
|
||||
});
|
||||
|
||||
// Handle other options
|
||||
if (options.EnableResize) {
|
||||
a.#attachResize(modal.Modal, modal.Title);
|
||||
}
|
||||
|
||||
if (options.EnableMovement) {
|
||||
a.#attachMovable(modal.Modal, modal.Title);
|
||||
}
|
||||
|
||||
// Load content from url
|
||||
if (!this.#isNullOrWhitespace(options.Url)) {
|
||||
const html = await a.#fetchHtml(options.Url);
|
||||
|
||||
modal.Body.innerHTML = html ?? "";
|
||||
}
|
||||
}
|
||||
|
||||
#generateModalHeader(options) {
|
||||
const a = this;
|
||||
|
||||
const html = `
|
||||
<div class="` + a.#elName.header + ` border-b border-solid border-base-300 py-3 px-4 flex items-center justify-between">
|
||||
<span class="` + a.#elName.title + ` text-xl font-semibold select-none">` + options.Title + `</span>
|
||||
<a class="text-gray-600 hover:text-gray-900 ml-4 cursor-pointer" aria-label="Close">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
#generateModalFooter(options) {
|
||||
const a = this;
|
||||
|
||||
const html = `
|
||||
<div class="` + a.#elName.footer + ` ` + (options.ShowFooter ? "" : "hidden") + ` border-t border-solid border-base-300 py-3 px-4 items-center text-right bg-base-100">
|
||||
<button class="px-4 py-2 text-sm font-medium ` + options.CloseButton.colour + ` border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 cursor-pointer" aria-label="Close">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
#attachResize(panel, el) {
|
||||
const a = this;
|
||||
|
||||
el.addEventListener("dblclick", function(e) {
|
||||
const childNode = panel.firstElementChild;
|
||||
|
||||
let n = 0;
|
||||
for (let i=0; i<a.#modalSizes.length; i++) {
|
||||
n = i;
|
||||
|
||||
if (childNode.classList.contains("w-" + a.#modalSizes[i])) {
|
||||
childNode.classList.remove("w-" + a.#modalSizes[i]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
n++;
|
||||
|
||||
if (n >= a.#modalSizes.length) {
|
||||
n = 0;
|
||||
}
|
||||
|
||||
childNode.classList.add("w-" + a.#modalSizes[n]);
|
||||
});
|
||||
}
|
||||
|
||||
#attachMovable(panel, el) {
|
||||
const a = this;
|
||||
|
||||
let isMovable = false;
|
||||
let currentPos = { X: 0, Y: 0 };
|
||||
let movePos = { X: 0, Y: 0 };
|
||||
|
||||
el.addEventListener("mousedown", function(e) {
|
||||
if ((e.buttons == 1) && !isMovable) {
|
||||
movePos = { X: e.clientX, Y: e.clientY };
|
||||
currentPos = {
|
||||
X: a.#parsePixels(panel.style.left),
|
||||
Y: a.#parsePixels(panel.style.top)
|
||||
};
|
||||
isMovable = true;
|
||||
|
||||
el.style.cursor = "move";
|
||||
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener("mouseup", function(e) {
|
||||
if (isMovable) {
|
||||
isMovable = false;
|
||||
el.style.cursor = "default";
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener("mousemove", function(e) {
|
||||
if ((e.buttons == 1) && isMovable) {
|
||||
let x = (e.clientX - movePos.X) + currentPos.X;
|
||||
let y = (e.clientY - movePos.Y) + currentPos.Y;
|
||||
|
||||
if (x <= 0) x = 0;
|
||||
if (y <= 0) y = 0;
|
||||
|
||||
panel.style.left = x + 'px';
|
||||
panel.style.top = y + 'px';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
#loadOptions(options) {
|
||||
const a = this;
|
||||
const newOptions = Object.assign(a.DefaultOptions, options);
|
||||
|
||||
if (a.#isNullOrWhitespace(newOptions.Id)) {
|
||||
newOptions.Id = a.#randomN(30001, 99999);
|
||||
}
|
||||
|
||||
switch (newOptions.Size) {
|
||||
case "xs":
|
||||
case "sm":
|
||||
newOptions.Size = "md";
|
||||
break;
|
||||
case "md":
|
||||
newOptions.Size = "xl";
|
||||
break;
|
||||
case "lg":
|
||||
newOptions.Size = "4xl";
|
||||
break;
|
||||
case "xl":
|
||||
case "xxl":
|
||||
case "xxxl":
|
||||
newOptions.Size = "screen";
|
||||
break;
|
||||
default:
|
||||
newOptions.Size = "xl";
|
||||
break;
|
||||
}
|
||||
|
||||
return newOptions;
|
||||
}
|
||||
|
||||
|
||||
#appendHtml(el, html) {
|
||||
let node = document.createElement('template');
|
||||
node.innerHTML = html.trim();
|
||||
|
||||
node = node.content.firstChild;
|
||||
|
||||
el.appendChild(node);
|
||||
}
|
||||
|
||||
async #fetchHtml(url) {
|
||||
let html = "";
|
||||
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
|
||||
html = await response.text();
|
||||
} catch (err) {
|
||||
html = err;
|
||||
}
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
#findNode(selector) {
|
||||
return this.#documentBody.querySelector(selector);
|
||||
}
|
||||
|
||||
#isNullOrWhitespace(e) {
|
||||
if (typeof (e) == "undefined") {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (e == null) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (e == false) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return (e?.toString().trim()?.length <= 0);
|
||||
}
|
||||
|
||||
#parsePixels(value) {
|
||||
const a = this;
|
||||
|
||||
if (a.#isNullOrWhitespace(value)) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
const result = parseInt(value.replace("px", ""), 10);
|
||||
|
||||
return Number.isNaN(result) ? 0 : result;
|
||||
}
|
||||
|
||||
#randomN(min, max) {
|
||||
min = Math.ceil(min);
|
||||
max = Math.floor(max);
|
||||
|
||||
return Math.floor(Math.random() * (max - min) + min);
|
||||
}
|
||||
|
||||
#removeNode(node) {
|
||||
if (node == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof(node.parentNode) == "undefined") {
|
||||
return;
|
||||
}
|
||||
|
||||
node.parentNode.removeChild(node);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// window.TW4Dialog = new TWDialog4();
|
||||
export default TWDialog4;
|
||||
98
src/twmessagebox4.js
Normal file
98
src/twmessagebox4.js
Normal file
@ -0,0 +1,98 @@
|
||||
import TWDialog4 from "./twdialog4.js"
|
||||
|
||||
|
||||
class TWMessageBox4 {
|
||||
#defaultButtonColour = "bg-white hover:bg-gray-50 text-gray-700";
|
||||
|
||||
|
||||
constructor() {
|
||||
}
|
||||
|
||||
|
||||
get DefaultOptions() {
|
||||
const a = this;
|
||||
|
||||
return {
|
||||
Id: a.#randomN(30001, 99999),
|
||||
Title: "",
|
||||
Content: "",
|
||||
// Url: null,
|
||||
Size: "md",
|
||||
// ShowFooter: true,
|
||||
// EasyClose: true,
|
||||
EnableMovement: true,
|
||||
EnableResize: true,
|
||||
Buttons: [
|
||||
{ Label: "Yes", Value: "Yes", Colour: a.#defaultButtonColour },
|
||||
{ Label: "No", Value: "No", Colour: a.#defaultButtonColour },
|
||||
{ Label: "Cancel", Value: "Cancel", Colour: a.#defaultButtonColour }
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
async Show(options) {
|
||||
const a = this;
|
||||
const newOptions = Object.assign(a.DefaultOptions, options);
|
||||
|
||||
let html = "";
|
||||
newOptions.Buttons.forEach(el => {
|
||||
html += a.#generateButton(el.Label, el.Value, el.Colour);
|
||||
});
|
||||
|
||||
await TW4Dialog.Show(newOptions);
|
||||
|
||||
const modal = TW4Dialog.Find(newOptions.Id);
|
||||
modal.Footer.innerHTML = html;
|
||||
|
||||
return await new Promise(async (resolve, reject) => {
|
||||
modal.Footer.querySelectorAll("button").forEach(el => {
|
||||
el.addEventListener("click", (e) => {
|
||||
e?.stopPropagation();
|
||||
e?.preventDefault();
|
||||
|
||||
const value = el.getAttribute("data-prompt-value");
|
||||
|
||||
TW4Dialog.Close(newOptions.Id);
|
||||
|
||||
resolve(value);
|
||||
});
|
||||
});
|
||||
|
||||
modal.Modal.querySelectorAll("[aria-label='Close']").forEach(el => {
|
||||
el.addEventListener("click", (e) => {
|
||||
e?.stopPropagation();
|
||||
e?.preventDefault();
|
||||
|
||||
TW4Dialog.Close(newOptions.Id);
|
||||
|
||||
resolve("");
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
#generateButton(label, value, colour) {
|
||||
const html = `
|
||||
<button class="px-4 py-2 text-sm font-medium ` + colour + ` border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 cursor-pointer" data-prompt-value="` + value + `">
|
||||
` + label + `
|
||||
</button>
|
||||
`;
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
#randomN(min, max) {
|
||||
min = Math.ceil(min);
|
||||
max = Math.floor(max);
|
||||
|
||||
return Math.floor(Math.random() * (max - min) + min);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// window.TW4MessageBox = new TWMessageBox4();
|
||||
export default TWMessageBox4;
|
||||
123
src/twpromptbox4.js
Normal file
123
src/twpromptbox4.js
Normal file
@ -0,0 +1,123 @@
|
||||
import TWDialog4 from "./twdialog4.js"
|
||||
|
||||
|
||||
class TWPromptBox4 {
|
||||
#defaultButtonColour = "bg-white hover:bg-gray-50 text-gray-700";
|
||||
|
||||
|
||||
constructor() {
|
||||
}
|
||||
|
||||
|
||||
get DefaultOptions() {
|
||||
const a = this;
|
||||
|
||||
return {
|
||||
Id: a.#randomN(30001, 99999),
|
||||
Title: "",
|
||||
Content: "",
|
||||
Size: "sm",
|
||||
// ShowFooter: true,
|
||||
// EasyClose: true,
|
||||
EnableMovement: true,
|
||||
EnableResize: true,
|
||||
Placeholder: "",
|
||||
Value: "",
|
||||
Style: {
|
||||
Label: "mb-1 inline-block",
|
||||
Textbox: "block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
|
||||
BoxType: "text"
|
||||
},
|
||||
Buttons: [
|
||||
{ Label: "OK", Value: "OK", Colour: a.#defaultButtonColour },
|
||||
{ Label: "Cancel", Value: "Cancel", Colour: a.#defaultButtonColour }
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
async Show(options) {
|
||||
const a = this;
|
||||
const newOptions = Object.assign(a.DefaultOptions, options);
|
||||
newOptions.Url = null;
|
||||
|
||||
let html = "";
|
||||
newOptions.Buttons.forEach(el => {
|
||||
html += a.#generateButton(el.Label, el.Value, el.Colour);
|
||||
});
|
||||
|
||||
await TW4Dialog.Show(newOptions);
|
||||
|
||||
const modal = TW4Dialog.Find(newOptions.Id);
|
||||
modal.Body.innerHTML = a.#generateFormGroup(newOptions);
|
||||
modal.Footer.innerHTML = html;
|
||||
|
||||
return await new Promise(async (resolve, reject) => {
|
||||
modal.Footer.querySelectorAll("button").forEach(el => {
|
||||
el.addEventListener("click", (e) => {
|
||||
e?.stopPropagation();
|
||||
e?.preventDefault();
|
||||
|
||||
const text = modal.Body.querySelector("input")?.value ?? "";
|
||||
const value = el.getAttribute("data-prompt-value");
|
||||
|
||||
TW4Dialog.Close(newOptions.Id);
|
||||
|
||||
resolve({ Value: text, Button: value });
|
||||
});
|
||||
});
|
||||
|
||||
modal.Modal.querySelectorAll("[aria-label='Close']").forEach(el => {
|
||||
el.addEventListener("click", (e) => {
|
||||
e?.stopPropagation();
|
||||
e?.preventDefault();
|
||||
|
||||
TW4Dialog.Close(newOptions.Id);
|
||||
|
||||
resolve({ Value: "", Button: "" });
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
#generateFormGroup(options) {
|
||||
const a = this;
|
||||
const id = "prompt-" + a.#randomN(30001, 99999);
|
||||
|
||||
const html = `
|
||||
<div class="mb-4">
|
||||
<label for="` + id + `" class="` + options.Style.Label + `">
|
||||
` + options.Content + `
|
||||
</label>
|
||||
<input id="` + id + `" type="` + options.Style.BoxType + `" placeholder="` + options.Placeholder + `" value="` + options.Value + `" class="` + options.Style.Textbox + `" />
|
||||
</div>
|
||||
`;
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
#generateButton(label, value, colour) {
|
||||
const html = `
|
||||
<button class="px-4 py-2 text-sm font-medium ` + colour + ` border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 cursor-pointer" data-prompt-value="` + value + `">
|
||||
` + label + `
|
||||
</button>
|
||||
`;
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
#randomN(min, max) {
|
||||
min = Math.ceil(min);
|
||||
max = Math.floor(max);
|
||||
|
||||
return Math.floor(Math.random() * (max - min) + min);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// window.TW4PromptBox = new TWPromptBox4();
|
||||
export default TWPromptBox4;
|
||||
59
webpack.config.js
Normal file
59
webpack.config.js
Normal file
@ -0,0 +1,59 @@
|
||||
const path = require('path');
|
||||
const { version } = require('./package.json');
|
||||
const webpack = require('webpack');
|
||||
|
||||
|
||||
class PrependVersionPlugin {
|
||||
apply(compiler) {
|
||||
compiler.hooks.emit.tapAsync('PrependVersionPlugin', (compilation, callback) => {
|
||||
Object.keys(compilation.assets).forEach((filename) => {
|
||||
if (filename.endsWith('.js')) {
|
||||
const asset = compilation.assets[filename];
|
||||
|
||||
const headerText = `/*!\n * TWDialog4 v${version}\n * Copyright 2025-2025 Ray Lam (https://www.hiimray.co.uk/bootstrap-js-bstoast4)\n *\n */\n`;
|
||||
|
||||
const newContent = headerText + asset.source();
|
||||
|
||||
compilation.assets[filename] = {
|
||||
source: () => newContent,
|
||||
size: () => newContent.length,
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
callback();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
tw4dialog: './src/index.js'
|
||||
},
|
||||
output: {
|
||||
filename: `[name].dist.js`,
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
clean: true,
|
||||
libraryTarget: 'global'
|
||||
},
|
||||
mode: 'production',
|
||||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
'process.env.VERSION': JSON.stringify(version)
|
||||
}),
|
||||
new PrependVersionPlugin()
|
||||
],
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.scss$/,
|
||||
use: [
|
||||
'style-loader',
|
||||
'css-loader',
|
||||
'sass-loader'
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user