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

Added ShowPrompt

Browse Source
This commit is contained in:
Ray 2023-08-21 01:43:47 +01:00
parent 4d39ae903c
commit 102a3d1c01
3 changed files with 95 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
bs4-test.html
View File

@ -20,6 +20,7 @@
<body class="py-5">
<div class="container">
<div class="row mb-3 border-bottom">
<div class="col-12">
@ -69,6 +70,30 @@
</div>
</div>
<div class="row mb-3 border-bottom">
<div class="col-12">
<p><b>Example Five</b></p>
<p>Launch a prompt modal</p>
<div class="alert alert-secondary">
let result = await BSDialog.ShowPrompt({<br />
&nbsp;&nbsp;&nbsp;&nbsp;Title: "Prompt",<br />
&nbsp;&nbsp;&nbsp;&nbsp;Message: "This is a prompt",<br />
&nbsp;&nbsp;&nbsp;&nbsp;Size: "md",<br />
&nbsp;&nbsp;&nbsp;&nbsp;Buttons: [<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ Label: "Yes", Value: "Yes", Colour: "primary" },<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ Label: "No", Value: "No", Colour: "secondary" },<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ Label: "Cancel", Value: "Cancel", Colour: "secondary" }<br />
&nbsp;&nbsp;&nbsp;&nbsp;]<br />
});<br />
<br />
alert(result);<br />
</div>
<p><button id="button5" type="button" class="btn btn-primary">Launch Modal</button></p>
</div>
</div>
</div>
<script>
@ -96,6 +121,17 @@ $(document).ready(function(){
BSDialog.ShowToast('abc123456', 'My Modal Box 123.567', 'Help! I\'m a second toast.', 'md');
});
$("#button5").on('click', async function(){
let result = await BSDialog.ShowPrompt({
Title: "Prompt",
Message: "This is a prompt",
Size: "md",
PromptType: "YesNoCancel"
});
alert(result);
});
});

59
bsdialog4.js
View File

@ -1,6 +1,6 @@
/**
* BSDialog4
* @version v0.1.1.026 (2023/08/19 12:58)
* @version v0.1.2.043 (2023/08/20 00:39)
*/
var BSDialog = {
Create: async function (id, title, url, size) {
@ -136,6 +136,61 @@ var BSDialog = {
this.Create(id, title, null, size);
this.UpdateBody(id, message);
},
ShowPrompt: async function (options) {
let a = this;
let id = "prompt" + Math.floor(Math.random() * 10000) + 1000;
const _options = Object.assign(a.DefaultPromptOptions, options);
return await new Promise((resolve, reject) => {
a.Create(id, _options.Title, _options.Message, _options.Size);
let html = '';
_options.Buttons.forEach(function(e) {
html += '<button type="button" class="btn btn-' + e.Colour + '" data-prompt-value="' + e.Value + '">' + e.Label + '</button>';
});
a.UpdateFooter(id, html);
const modal = a.Find(id);
modal.Footer[0].querySelectorAll("button").forEach(function(button) {
button.addEventListener("click", function(e){
e.stopPropagation();
e.preventDefault();
const value = button.getAttribute("data-prompt-value");
a.Close(id);
resolve(value);
});
});
modal.Close.forEach(function(sender) {
sender.addEventListener("click", function(e){
e.stopPropagation();
e.preventDefault();
a.Close(id);
resolve("");
});
});
});
},
DefaultPromptOptions: {
Title: "",
Message: "",
Size: "md",
Buttons: [
{ Label: "Yes", Value: "Yes", Colour: "primary" },
{ Label: "No", Value: "No", Colour: "secondary" },
{ Label: "Cancel", Value: "Cancel", Colour: "secondary" }
]
},
addBackdrop: function () {
let a = this;
@ -190,7 +245,7 @@ var BSDialog = {
html += ' </div>';
html += ' <div class="modal-footer">';
html += ' <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>';
html += ' <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>';
html += ' </div>';
html += ' </div>';
html += ' </div>';

4
bsdialog4.min.js vendored
View File

File diff suppressed because one or more lines are too long