Ray/bsdialog4
Ray/bsdialog4
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added movable support #11

Merged
Ray merged 1 commits from release/0.1.7.022 into master 2024-01-21 18:57:41 +00:00
Conversation 0 Commits 1 Files Changed 2 +80 -51
2 changed files with 80 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 462f69f221 - Show all commits

127
bsdialog4.js
View File

@ -1,54 +1,11 @@
/** /**
* BSDialog4 * BSDialog4
* @version v0.1.6.015 (2023/12/08 22:04) * @version v0.1.7.022 (2024/01/21 03:40)
*/ */
class BSDialog4 { class BSDialog4 {
constructor() { constructor() {
} }
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 "bsdia4_"; return "bsdia4_";
} }
@ -70,9 +27,19 @@ class BSDialog4 {
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);
$("#" + a.#prefix + _options.ID).modal({ $("#" + a.#prefix + _options.ID).modal({
backdrop: _options.EasyClose, backdrop: _options.EasyClose,
@ -91,7 +58,26 @@ class BSDialog4 {
async Prompt(options) { async Prompt(options) {
const a = this; const a = this;
const id = Math.floor(Math.random() * 10000) + 1000; const id = 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":
@ -146,7 +132,14 @@ class BSDialog4 {
async Update(options) { async Update(options) {
const a = this; const a = this;
let _options = Object.assign(a.Options.UpdateModal, options); const _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) {
@ -210,7 +203,7 @@ class BSDialog4 {
} }
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
@ -269,6 +262,42 @@ class BSDialog4 {
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) {

4
bsdialog4.min.js vendored
View File

File diff suppressed because one or more lines are too long