philipp-winterle / bs-toaster Goto Github PK
View Code? Open in Web Editor NEWA Bootstrap 5 Toast Framework - Easy to use. No other dependencies than Bootstrap itself.
License: MIT License
A Bootstrap 5 Toast Framework - Easy to use. No other dependencies than Bootstrap itself.
License: MIT License
I ended up adapting your code to the Below. Don’t laugh. But it works like a charm for a no module approach
function bsToaster(bsToasterTitle, bsToasterText, bsToasterIcon) {
const TOAST_CONTAINER_TEMLATE = `
<div data-bs-toaster="" class="toast-container position-fixed p-3"></div>
`;
const TOAST_TEMPLATE = `
<div class="toast align-items-center text-bg-dark border-0 bg-opacity-100" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header text-bg-dark">
<span class="bs-toaster-icon d-flex">%ICON%</span>
<strong class="bs-toaster-title me-auto"></strong>
<small class="text-white">Just Now</small>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="bs-toaster-text toast-body"></div>
</div>
`;
const DEFAULT_ICON_MARKUP = `
<i class="p-2 me-2 rounded %TYPE%"></i>
`;
iconMarkup = DEFAULT_ICON_MARKUP;
const position = "top-0 end-0";
const base64Position = btoa(position);
const existingToastContainer = document.querySelector(
`[data-bs-toaster="${base64Position}"]`
);
let containerNode = null;
if (
existingToastContainer === null ||
existingToastContainer instanceof HTMLDivElement === false
) {
containerNode = new DOMParser().parseFromString(
TOAST_CONTAINER_TEMLATE,
"text/html"
).body.childNodes[0];
containerNode.classList.add(...position.split(" "));
containerNode.dataset.bsToaster = base64Position;
} else {
containerNode = existingToastContainer;
}
templateNode = null;
toastContainer = null;
this.toastContainer = containerNode;
this.templateNode = new DOMParser().parseFromString(TOAST_TEMPLATE, "text/html").body.childNodes[0];
document.body.appendChild(this.toastContainer);
const toastNode = this.templateNode.cloneNode(true);
toastNode.dataset.bsAutohide = "true"
toastNode.dataset.bsDelay = "3000";
toastNode.dataset.bsAnimation = "true";
const iconNode = toastNode.querySelector(".bs-toaster-icon");
if (iconMarkup) {
iconMarkup = iconMarkup.replace("%TYPE%", bsToasterIcon);
iconNode.innerHTML = iconMarkup;
} else {
iconNode.remove();
}
toastNode.querySelector(".bs-toaster-title").innerHTML = bsToasterTitle;
toastNode.querySelector(".bs-toaster-text").innerHTML = bsToasterText;
this.toastContainer.appendChild(toastNode);
const toast = new bootstrap.Toast(toastNode);
toast.show();
`}```
Many thanks for the work on this project. Its exactly what I needed, exactly when I needed it...
When using the "shown.bs.modal" functionality described on the Boostrap Instruction page, bs-toaster creates a non-breaking error in the console. Using a pure JS or Jquery call to open the modal does not cause the error, just when using the "data-bs-toggle" built into bootstrap.
Example: test.html.zip
Error text: vt.getInstance(...) is null
To Reproduce
I'm not sure if possible, but if you could modify it so npm will allow me to add bs-toaster with bootstra 5.2.0-beta1 installed this would be great.
hello hummal
thanks for your wonderful work,
but can the ToasterType change the background color of the toaster?
I changed the type from your codepen demo but nothing work ,
https://codepen.io/hummal/pen/RwZOowY
We need a wrapper around the toast container which has position:relative and z-index: 999999 to be on top
Hello,
I was experimenting the bs-toaster
npm package in codepen to customize it a little-bit as per the my requirements, like adding custom icon, but when I used
defaultIconMarkup: '<i class=""></i>
then it's throwing any error, even I tried by removing the i
tag but still it's throwing an error.
please help me @hummal
The current implementation of bs-toaster
does not allow for the complete removal of the title bar in the toast notifications. This can be limiting in cases where a more minimalist design is desired.
I would like to have an option to completely remove the title bar from the toast notifications. This could be implemented as a configuration option when creating a new toast or probably when the first argument of create
is set to null
. Additionally, it would be beneficial to have the ability to add custom classes or color schemes to the toasts for better customization and integration with the rest of the application’s design.
https://getbootstrap.com/docs/5.3/components/toasts/#color-schemes
If these features are already implemented, please update the documentation for clarity
Describe the bug
Simple import of the "Toaster.bundle.js" as outlined in the readme causes an error in the console.
To Reproduce
Steps to reproduce the behavior:
<script src="{{ url_for('static', filename='base/Toaster.bundle.js') }}"></script>
Expected behavior
Clean load
Screenshots
https://imgur.com/a/6tQTgNe
Desktop (please complete the following information):
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.