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

Changed with rewrite for proper global and webpack build #1

Merged
Ray merged 1 commits from release/0.2.0 into master 2025-10-19 17:37:24 +00:00
Conversation 0 Commits 1 Files Changed 7 +2943 -157
7 changed files with 2943 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
/dist
/node_modules

150
bs4-test.html
View File

@ -13,23 +13,157 @@
<script src="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/4.6.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="bstoast4.js"></script>
<title></title>
<script src="dist/bstoast4.dist.js"></script>
<script>
function LaunchToast() {
BSToast4.Create({ Title: 'Hello', Time: 'Some time ago', Message: '<div>Hello momo</div>' });
}
function PushToast() {
BSToast4.Push({ Title: 'Hello 2', Time: 'Now', Message: '<div>Hello momo<br>Test</div>' });
}
</script>
<title></title>
</head>
<body class="py-5">
<div class="container">
<div class="row mb-3">
<div class="col-12">
<button type="button" class="btn btn-primary" onclick="BSToast4.Create({ Title: 'Hello', Time: 'Some time ago', Message: 'Hello momo' })">
Launch Toast 1
</button>
<div class="row mb-3 border-bottom">
<div class="col-sm-4 border-right">
<p><b>Example. Simple New Toast</b></p>
<p>Launch a simple toast with a text body.</p>
<p><button id="buttonL1" type="button" class="btn btn-primary">Launch Toast</button></p>
<script>
$(document).ready(function(){
$("#buttonL1").on('click', function(){
BSToast4.Create({
Title: 'Hello',
Time: 'Now',
Message: '<div>Hello momo</div>'
});
});
});
</script>
</div>
<div class="col-sm-8">
<div class="alert alert-secondary text-sm">
<pre>
BSToast4.Create({
Title: &#x27;Hello&#x27;,
Time: &#x27;Now&#x27;,
Message: &#x27;&#x3C;div&#x3E;Hello momo&#x3C;/div&#x3E;&#x27;
});
</pre>
</div>
</div>
</div>
<div class="row mb-3 border-bottom">
<div class="col-sm-4 border-right">
<p><b>Example. Append Toast</b></p>
<p>Launch a simple toast or append to the last exist toast.</p>
<p><button id="buttonL2" type="button" class="btn btn-primary">Push Toast</button></p>
<script>
$(document).ready(function(){
$("#buttonL2").on('click', function(){
BSToast4.Push({
Title: 'Hello (2)',
Time: 'Now',
Message: '<div>Hello, again</div>'
});
});
});
</script>
</div>
<div class="col-sm-8">
<div class="alert alert-secondary text-sm">
<pre>
BSToast4.Push({
Title: &#x27;Hello (2)&#x27;,
Time: &#x27;Now&#x27;,
Message: &#x27;&#x3C;div&#x3E;Hello, again&#x3C;/div&#x3E;&#x27;
});
</pre>
</div>
</div>
</div>
<div class="row mb-3 border-bottom">
<div class="col-sm-4 border-right">
<p><b>Example. Full Toast</b></p>
<p>Launch a toast with all options.</p>
<p><button id="buttonL3" type="button" class="btn btn-primary">Launch Toast</button></p>
<script>
$(document).ready(function(){
$("#buttonL3").on('click', function(){
BSToast4.Create({
Icon: "",
Title: "Greetings",
Time: "Now",
Message: "Toast Body",
Footer: "Toast Footer",
Animation: true,
AutoHide: true,
Delay: 6000,
Position: "position:fixed; top:0; right:80px; margin:20px;",
MinWidth: 320,
MinHeight: 200,
HeaderClass: "bg-light",
FooterClass: "bg-light text-center"
});
});
});
</script>
</div>
<div class="col-sm-8">
<div class="alert alert-secondary text-sm">
<pre>
BSToast4.Create({
Icon: &#x22;&#x22;,
Title: &#x22;Greetings&#x22;,
Time: &#x22;Now&#x22;,
Message: &#x22;Toast Body&#x22;,
Footer: &#x22;Toast Footer&#x22;,
Animation: true,
AutoHide: true,
Delay: 6000,
Position: &#x22;position:fixed; top:0; right:80px; margin:20px;&#x22;,
MinWidth: 320,
MinHeight: 200,
HeaderClass: &#x22;bg-light&#x22;,
FooterClass: &#x22;bg-light text-center&#x22;
});
</pre>
</div>
</div>
</div>
</div>
</body>
</html>

147
bstoast4.js
View File

@ -1,147 +0,0 @@
/**
* BSToast4
* @version v0.1.0.012 (2023/08/15 0056)
*/
var BSToast4 = {
Create: async function (options) {
var a = this;
a.Options = Object.assign(a.DefaultOptions, options);
a.pfx = "bstoa4_";
a.id = Math.floor(Math.random() * 100000) + 10000;
a.body = document.getElementsByTagName("body")[0];
a.addBackdrop();
a.addToast(a.Options);
},
DefaultOptions: {
Icon: null,
Title: "",
Time: "",
Message: "",
Animation: true,
AutoHide: true,
Delay: 2000,
Position: "top:0; right:0; margin:20px;"
},
Clear: function () {
this.body.querySelectorAll(".toast").forEach(function(e) {
e.parentNode.removeChild(e);
});
this.removeBackdrop();
},
Close: function (id) {
var a = this;
// Close this toast
a.body.querySelectorAll("#" + a.pfx + id + ".toast").forEach(function(e) {
if (typeof(e.parentNode) == "undefined") {
return;
}
e.parentNode.removeChild(e);
});
// Clean-up all closed toasts
a.body.querySelectorAll(".toast.hide").forEach(function(e) {
if (typeof(e.parentNode) == "undefined") {
return;
}
e.parentNode.removeChild(e);
});
if (a.body.querySelectorAll(".toast").length <= 0) {
let backdrop = a.body.querySelectorAll(".toast-backdrop")[0];
if (typeof(backdrop) == "undefined") {
return;
}
if (typeof(backdrop.parentNode) == "undefined") {
return;
}
backdrop.parentNode.removeChild(backdrop);
}
},
addBackdrop: async function () {
let a = this;
// don't allow duplicates
if (a.body.querySelectorAll(".toast-backdrop").length > 0) {
return;
}
a.appendHtml(a.body, '<div class="toast-backdrop" aria-live="polite" aria-atomic="true" style="position:static; min-height:200px; z-index:8;"><div style="position:absolute; ' + a.Options.Position + '" class="toast-backdrop-body"></div></div>');
},
addToast: function (options) {
var a = this;
if (a.body.querySelectorAll(".toast-backdrop-body").length <= 0) {
return;
}
let html = "";
html += '<div id="' + a.pfx + a.id + '" class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="min-width:200px;">';
html += ' <div class="toast-header">';
if (!a.isNullOrWhitespace(options.Icon)) {
html += options.Icon;
}
html += ' <strong class="mr-auto">' + options.Title + '</strong>';
html += ' <small>' + options.Time + '</small>';
html += ' <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">';
html += ' <span aria-hidden="true">&times;</span>';
html += ' </button>';
html += ' </div>';
html += ' <div class="toast-body">' + options.Message + '</div>';
html += '</div>';
a.appendHtml(a.body.querySelectorAll(".toast-backdrop-body")[0], html);
jQuery("#" + a.pfx + a.id + ".toast").toast({
animation: options.Animation,
autohide: options.AutoHide,
delay: options.Delay
}).toast("show");
jQuery("#" + a.pfx + a.id + ".toast").on('hidden.bs.toast', function () {
a.Close(a.id);
})
},
appendHtml: function (el, html) {
let node = document.createElement('template');
node.innerHTML = html.trim();
node = node.content.firstChild;
el.appendChild(node);
},
isNullOrWhitespace: function(e) {
if (typeof (e) == "undefined") {
return true;
}
if (e == null) {
return true;
}
if (e == false) {
return true;
}
return (e.trim().length <= 0);
},
removeBackdrop: function () {
if (this.body.querySelectorAll(".toast-backdrop").length <= 0) {
return;
}
let backdrop = this.body.querySelectorAll(".toast-backdrop")[0];
backdrop.parentNode.removeChild(backdrop);
}
};

2343
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

16
package.json Normal file
View File

@ -0,0 +1,16 @@
{
"name": "bstoast4",
"version": "0.2.0.059",
"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"
}
}

379
src/bstoast4.js Normal file
View File

@ -0,0 +1,379 @@
class BSToast04 {
pfx = "bstoa4_";
constructor() {
}
async Create(options) {
const a = this;
const newOptions = Object.assign(a.DefaultOptions, options);
a.#addBackdrop(newOptions.Position);
a.#addToast(newOptions);
}
get DefaultOptions() {
return {
Icon: "",
Title: "",
Time: "",
Message: "",
Footer: "",
Animation: true,
AutoHide: true,
Delay: 6000,
Position: "position:fixed; top:0; right:80px; margin:20px;",
MinWidth: 320,
MinHeight: 100,
HeaderClass: "bg-light",
FooterClass: "bg-light text-center"
};
}
get #documentBody() {
return document.getElementsByTagName("body")[0];
}
get #backdrop() {
const a = this;
const result = a.#documentBody.querySelectorAll(".toast-backdrop");
if (result.length <= 0) {
return null;
}
return result[0];
}
get #backdropBody() {
const a = this;
const result = a.#documentBody.querySelectorAll(".toast-backdrop-body");
if (result.length <= 0) {
return null;
}
return result[0];
}
Clear() {
const a = this;
a.#documentBody.querySelectorAll(".toast").forEach(function(e) {
a.#removeNode(e);
});
a.#removeBackdrop();
}
Close(id) {
const a = this;
const toastId = a.pfx + id;
// Close this toast
a.#documentBody.querySelectorAll("#" + toastId + ".toast").forEach(function(e) {
a.#removeNode(e);
});
// Clean-up closed toasts
a.#documentBody.querySelectorAll(".toast.hide").forEach(function(e) {
a.#removeNode(e);
});
// Clean-up backdrops
if (a.#documentBody.querySelectorAll(".toast").length <= 0) {
a.#removeBackdrop();
}
}
GetList() {
const a = this;
const result = a.#documentBody.querySelectorAll(".toast");
if (result.length <= 0) {
return [];
}
let response = [];
for (let i=0; i<result.length; i++) {
let id = result[i].getAttribute("id");
if (id.startsWith(a.pfx)) {
id = id.slice(a.pfx.length);
}
response.push(id);
}
return response;
}
GetLastId() {
const a = this;
const result = a.GetList();
if (result.length <= 0) {
return null;
}
return result[(result.length - 1)];
}
Find(id) {
const a = this;
const toastId = a.pfx + id;
let result = a.#documentBody.querySelectorAll("#" + toastId + ".toast");
if (result.length <= 0) {
return null;
}
return result[0];
}
FindBody(id) {
const a = this;
const toast = a.Find(id);
if (toast == null) {
return null;
}
return toast.querySelector(".toast-body");
}
FindHeader(id) {
const a = this;
const toast = a.Find(id);
if (toast == null) {
return null;
}
return toast.querySelector("div[class^='toast-header']");
}
FindFooter(id) {
const a = this;
const toast = a.Find(id);
if (toast == null) {
return null;
}
return toast.querySelector("div[class^='toast-footer']");
}
async Push(options) {
const a = this;
const newOptions = Object.assign(a.DefaultOptions, options);
// Create new toast
const lastId = a.GetLastId();
if (lastId == null) {
await a.Create(newOptions);
return;
}
// Append to existing toast
a.Update(lastId, newOptions, true);
}
Update(id, options, append) {
const a = this;
const toast = a.Find(id);
if (toast == null) {
return;
}
a.#attachEvents(toast, id);
a.UpdateHeader(id, options);
a.UpdateBody(id, options.MinWidth, options.MinHeight, options.Message, append);
a.UpdateFooter(id, options.Footer);
a.#show(toast, options.Animation, options.AutoHide, options.Delay);
}
UpdateHeader(id, options) {
const a = this;
const el = a.FindHeader(id);
if (el == null) {
return;
}
el.innerHTML = a.#generateToastHeader(options);
}
UpdateBody(id, minWidth, minHeight, html, append) {
const a = this;
const el = a.FindBody(id);
if (el == null) {
return;
}
el.style.minWidth = (minWidth > 0 ? minWidth + "px" : "auto");
el.style.minHeight = (minHeight > 0 ? minHeight + "px" : "auto");
if (append) {
a.#appendHtml(el, html);
} else {
el.innerHTML = html;
}
}
UpdateFooter(id, html) {
const a = this;
const el = a.FindFooter(id);
if (el == null) {
return;
}
el.style.display = (!a.#isNullOrWhitespace(html) ? '' : 'none');
el.innerHTML = html;
}
async #addBackdrop(position) {
const a = this;
// Don't allow duplicates
if (a.#backdrop != null) {
return;
}
const html = `
<div class="toast-backdrop" aria-live="polite" aria-atomic="true" style="z-index:8;">
<div class="toast-backdrop-body" style="` + position + `"></div>
</div>'
`;
a.#appendHtml(a.#documentBody, html);
}
#addToast(options) {
const a = this;
const id = Math.floor(Math.random() * 100000) + 10000;
const toastId = a.pfx + id;
const backdropBody = a.#backdropBody;
if (backdropBody == null) {
return;
}
const html = `
<div id="` + toastId + `" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header ` + options.HeaderClass + `"></div>
<div class="toast-body"></div>
<div class="toast-footer py-2 ` + options.FooterClass + `"></div>
</div>
`;
a.#appendHtml(backdropBody, html);
const newToast = a.Find(id);
if (newToast == null) {
return;
}
a.#attachEvents(newToast, id);
a.Update(id, options, false);
}
#attachEvents(el, id) {
const a = this;
jQuery(el).on('hidden.bs.toast', function () {
a.Close(id);
})
}
#generateToastHeader(options) {
const a = this;
const html = `
` + (a.#isNullOrWhitespace(options.Icon) ? "" : options.Icon) + `
<strong class="mr-auto" style="cursor: default">` + options.Title + `</strong>
<small style="cursor: default">` + options.Time + `</small>
<button type="button" class="ml-2 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
`;
return html;
}
#removeBackdrop() {
const a = this;
const backdrop = a.#backdrop;
if (backdrop == null) {
return;
}
a.#removeNode(backdrop);
}
#show(el, animation, autoHide, delay) {
jQuery(el).toast({
animation: animation,
autohide: autoHide,
delay: delay
}).toast("show");
}
#removeNode(node) {
if (node == null) {
return;
}
if (typeof(node.parentNode) == "undefined") {
return;
}
node.parentNode.removeChild(node);
}
#appendHtml(el, html) {
let node = document.createElement('template');
node.innerHTML = html.trim();
node = node.content.firstChild;
el.appendChild(node);
}
#isNullOrWhitespace(value) {
const a = this;
if (typeof (value) == "undefined") {
return true;
}
if (value == null) {
return true;
}
if (typeof(value) == "string") {
return (value.trim().length <= 0);
} else {
return (value.toString().trim().length <= 0);
}
}
}
// export default BSToast04;
window.BSToast4 = new BSToast04();

59
webpack.config.js Normal file
View 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 * BSToast4 v${version}\n * Copyright 2023-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: {
bstoast4: './src/bstoast4.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'
]
}
]
}
};