philipp-winterle / bs-toaster Goto Github PK

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

1. Open the attached file in a browser
2. Click on the "Launch Modal" button with your console open.

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:

1. Downloaded package from github
2. Unzipped
3. Took the "Toaster.bundle.js" file and copied it to my static folder (flask project)
4. imported with <script src="{{ url_for('static', filename='base/Toaster.bundle.js') }}"></script>
5. Got this error in the firefox console: "Uncaught SyntaxError: export declarations may only appear at top level of a module"

Expected behavior
Clean load

Screenshots
https://imgur.com/a/6tQTgNe

Desktop (please complete the following information):

• OS: Linux mint
• Browser: Firefox