Compare commits
2 Commits
4a1a9f88ea
...
38473c3861
Author | SHA1 | Date | |
---|---|---|---|
38473c3861 | |||
|
0e79aa275b |
132
bsdialog5.js
132
bsdialog5.js
@ -1,6 +1,6 @@
|
|||||||
/**
|
/**
|
||||||
* BSDialog5
|
* BSDialog5
|
||||||
* @version v0.2.1.068 (2023/11/14 2028)
|
* @version v0.2.2.003 (2024/01/22 2037)
|
||||||
*/
|
*/
|
||||||
class BSDialog05 {
|
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() {
|
get #prefix() {
|
||||||
return "bsdia5_";
|
return "bsdia5_";
|
||||||
}
|
}
|
||||||
@ -71,9 +29,19 @@ class BSDialog05 {
|
|||||||
|
|
||||||
async Show(options) {
|
async Show(options) {
|
||||||
const a = this;
|
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), {
|
(new bootstrap.Modal(document.getElementById(a.#prefix + _options.ID), {
|
||||||
backdrop: _options.EasyClose
|
backdrop: _options.EasyClose
|
||||||
@ -89,7 +57,26 @@ class BSDialog05 {
|
|||||||
async Prompt(options) {
|
async Prompt(options) {
|
||||||
const a = this;
|
const a = this;
|
||||||
const id = "prompt" + Math.floor(Math.random() * 10000) + 1000;
|
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) {
|
switch (_options.Type) {
|
||||||
case "textbox":
|
case "textbox":
|
||||||
@ -133,7 +120,14 @@ class BSDialog05 {
|
|||||||
|
|
||||||
async Update(options) {
|
async Update(options) {
|
||||||
const a = this;
|
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);
|
const modal = a.Find(_options.ID);
|
||||||
if (modal === null) {
|
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;
|
const a = this;
|
||||||
|
|
||||||
// don't allow duplicates
|
// don't allow duplicates
|
||||||
@ -262,6 +256,42 @@ class BSDialog05 {
|
|||||||
|
|
||||||
a.#toggleSize(id);
|
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) {
|
async #showButtonPrompt(id, options) {
|
||||||
@ -273,7 +303,8 @@ class BSDialog05 {
|
|||||||
Title: options.Title,
|
Title: options.Title,
|
||||||
Message: options.Message,
|
Message: options.Message,
|
||||||
Size: options.Size,
|
Size: options.Size,
|
||||||
EasyClose: options.EasyClose
|
EasyClose: options.EasyClose,
|
||||||
|
IsMovable: options.IsMovable
|
||||||
});
|
});
|
||||||
|
|
||||||
let html = '';
|
let html = '';
|
||||||
@ -325,7 +356,8 @@ class BSDialog05 {
|
|||||||
Title: options.Title,
|
Title: options.Title,
|
||||||
Message: options.Message,
|
Message: options.Message,
|
||||||
Size: options.Size,
|
Size: options.Size,
|
||||||
EasyClose: options.EasyClose
|
EasyClose: options.EasyClose,
|
||||||
|
IsMovable: options.IsMovable
|
||||||
});
|
});
|
||||||
|
|
||||||
let body = '';
|
let body = '';
|
||||||
|
4
bsdialog5.min.js
vendored
4
bsdialog5.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user