Merge pull request 'Added support for movable modals' (#8) from release/0.2.2.003 into master

Reviewed-on: #8
This commit is contained in:
Ray 2024-01-22 20:58:19 +00:00
commit 38473c3861
2 changed files with 84 additions and 52 deletions

View File

@ -1,6 +1,6 @@
/**
* BSDialog5
* @version v0.2.1.068 (2023/11/14 2028)
* @version v0.2.2.003 (2024/01/22 2037)
*/
class BSDialog05 {
@ -8,48 +8,6 @@ class BSDialog05 {
}
get Options() {
return {
ShowModal: {
ID: null,
Title: "",
Message: "",
URL: null,
Size: "md",
Colour: "secondary",
ShowFooter: true,
EasyClose: true
},
ShowPrompt: {
Type: "button",
Title: "",
Message: "",
Size: "md",
EasyClose: true,
Buttons: [
{ Label: "Yes", Value: "Yes", Colour: "primary" },
{ Label: "No", Value: "No", Colour: "secondary" },
{ Label: "Cancel", Value: "Cancel", Colour: "secondary" }
],
Textbox: {
Label: "",
LabelSize: 4,
Placeholder: "",
Value: "",
BoxSize: 8
}
},
UpdateModal: {
ID: null,
Title: null,
Body: null,
URL: null,
Footer: null,
Size: null
}
};
}
get #prefix() {
return "bsdia5_";
}
@ -71,9 +29,19 @@ class BSDialog05 {
async Show(options) {
const a = this;
const _options = Object.assign(a.Options.ShowModal, options);
const _options = Object.assign({
ID: null,
Title: "",
Message: "",
URL: null,
Size: "md",
Colour: "secondary",
ShowFooter: true,
EasyClose: true,
IsMovable: true
}, options);
a.#addModal(_options.ID, _options.Title, _options.Size, _options.ShowFooter, _options.Colour);
a.#addModal(_options.ID, _options.Title, _options.Size, _options.ShowFooter, _options.IsMovable, _options.Colour);
(new bootstrap.Modal(document.getElementById(a.#prefix + _options.ID), {
backdrop: _options.EasyClose
@ -89,7 +57,26 @@ class BSDialog05 {
async Prompt(options) {
const a = this;
const id = "prompt" + Math.floor(Math.random() * 10000) + 1000;
const _options = Object.assign(a.Options.ShowPrompt, options);
const _options = Object.assign({
Type: "button",
Title: "",
Message: "",
Size: "md",
EasyClose: true,
IsMovable: true,
Buttons: [
{ Label: "Yes", Value: "Yes", Colour: "primary" },
{ Label: "No", Value: "No", Colour: "secondary" },
{ Label: "Cancel", Value: "Cancel", Colour: "secondary" }
],
Textbox: {
Label: "",
LabelSize: 4,
Placeholder: "",
Value: "",
BoxSize: 8
}
}, options);
switch (_options.Type) {
case "textbox":
@ -133,7 +120,14 @@ class BSDialog05 {
async Update(options) {
const a = this;
let _options = Object.assign(a.Options.UpdateModal, options);
let _options = Object.assign({
ID: null,
Title: null,
Body: null,
URL: null,
Footer: null,
Size: null
}, options);
const modal = a.Find(_options.ID);
if (modal === null) {
@ -206,7 +200,7 @@ class BSDialog05 {
}
#addModal(id, title, size, showFooter, closeColour) {
#addModal(id, title, size, showFooter, isMovable, closeColour) {
const a = this;
// don't allow duplicates
@ -262,6 +256,42 @@ class BSDialog05 {
a.#toggleSize(id);
});
if (isMovable) {
const panel = modal.Modal.querySelectorAll(".modal-dialog")[0];
let isMovable = false;
let currentPos = { X: 0, Y: 0 };
let movePos = { X: 0, Y: 0 };
modal.Title.addEventListener("mousedown", function(e) {
if ((e.buttons == 1) && !isMovable) {
movePos = { X: e.clientX, Y: e.clientY };
currentPos = {
X: (a.#isNullOrWhitespace(panel.style.left) ? 0 : parseInt(panel.style.left.replace("px", ""))),
Y: (a.#isNullOrWhitespace(panel.style.top) ? 0 : parseInt(panel.style.top.replace("px", "")))
};
isMovable = true;
modal.Title.style.cursor = "move";
e.preventDefault();
}
});
document.addEventListener("mouseup", function(e) {
if (isMovable) {
isMovable = false;
modal.Title.style.cursor = "default";
}
});
document.addEventListener("mousemove", function(e) {
if ((e.buttons == 1) && isMovable) {
panel.style.left = ((e.clientX - movePos.X) + currentPos.X) + 'px';
panel.style.top = ((e.clientY - movePos.Y) + currentPos.Y) + 'px';
}
});
}
}
async #showButtonPrompt(id, options) {
@ -273,7 +303,8 @@ class BSDialog05 {
Title: options.Title,
Message: options.Message,
Size: options.Size,
EasyClose: options.EasyClose
EasyClose: options.EasyClose,
IsMovable: options.IsMovable
});
let html = '';
@ -325,7 +356,8 @@ class BSDialog05 {
Title: options.Title,
Message: options.Message,
Size: options.Size,
EasyClose: options.EasyClose
EasyClose: options.EasyClose,
IsMovable: options.IsMovable
});
let body = '';

4
bsdialog5.min.js vendored

File diff suppressed because one or more lines are too long