Robust, plug & play generator for Bootstrap toasts.

Overview

Bootstrap Toaster

Robust, plug & play generator for Bootstrap toasts. Supports Bootstrap 4 and Bootstrap 5.

jsDelivr Download Stats CodeFactor deployment

Demo

A demo page is available at bootstraptoaster.peytongasink.dev for you to try out all the features Bootstrap Toaster has to offer!

Documentation

Full documentation is available in the Bootstrap Toaster Wiki.

Credits

Developed by Peyton Gasink

Bachelor of Software Engineering, Auburn University

License

Licensed under MIT License. For more information, refer to the LICENSE file within the GitHub repository.

Comments
  • Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

    Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

    Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

    Line: bootstrap-toaster.js:278

    Code: Toast.create("Warning", "Server was restarted.", TOAST_STATUS.WARNING);

    When I click on the Close "X" Button, the above error appears.

    opened by micavi1987 4
  • "undefined" as both title and message for all Toasts created

    <head lang="en">
        <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="node_modules/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
        <link rel="stylesheet" href="node_modules/bootstrap-toaster/css/bootstrap-toaster.min.css" />
        <link rel="stylesheet" href="./style.css">
    
        <script src="node_modules/jquery/dist/jquery.min.js" type="application/javascript"></script>
        <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" type="application/javascript"></script>
        <script src="node_modules/socket.io-client/dist/socket.io.min.js" type="application/javascript"></script>
    </head>
    <body>
        ...
        <script src="node_modules/bootstrap-toaster/js/bootstrap-toaster.min.js"></script>
        <script> window.onload = function() {
              Toast.create("Wow, that was easy!", "Just like that, this toast will appear on the page", TOAST_STATUS.SUCCESS, 5000);}
        </script>
    </body>
    

    image

    opened by eamonniknafs 4
  • ESM Module

    ESM Module

    Is your feature request related to a problem? Please describe. For the usage of tree shaking and bundles size and the usage in modules anyway it is recommended to bring Bootstrap Toaster as a esm module.

    Describe the solution you'd like Convert to esm module

    Describe alternatives you've considered Bring both

    opened by hummal 2
  • TypeScript - Stricter type checking

    TypeScript - Stricter type checking

    Hi,

    I tried to use this library in a typescript project using webpack. Unfortunately, the TypeScript (v4.4.4) compiler is throwing roughly 20 type check errors. Most of them are null/undefined related, e.g. Cannot assign type undefined to type number.

    Could you perhaps upgrade your version of TypeScript and fix these?

    opened by DevProLog 2
  • Added countdown timer to toast

    Added countdown timer to toast

    Hopefully this is useful for some. This adds a countdown timer in place of the moments ago timer. This was blindly added to the v5 branch, but I do have the same concept working in v4.

    opened by tmeers 2
  • Support for ES6 Modules

    Support for ES6 Modules

    Hi, would it be possible to add support for ES6 modules? i.e export Toast class and constants + import the boostrap Toaster using import { Toast } from "bootstrap"?

    Currently, I cannot use this lib with webpack and babel.

    opened by mamiksik 2
  • Library pollutes the global namespace even when unnecessary

    Library pollutes the global namespace even when unnecessary

    Describing the bug:

    Library pollutes the global namespace even when unnecessary

    Context

    There are multiple global variables set, even when unnecessary. For example: TOAST_STATUS could be changed toToast.STATUS instead.

    opened by PacSocks 1
  • Added countdown timer to toast

    Added countdown timer to toast

    Hopefully this is useful for some. This adds a countdown timer in place of the minutes ago timer. Added to v5 as well, but figured I should create a pull request for the v4 version, just in case it's accepted.

    opened by tmeers 1
  • 5.1.0

    5.1.0

    1. Project is now written in TypeScript.
    2. Changed the signatures of the configure and create methods to use new interfaces rather than multiple parameters. I'll re-add but deprecate the old signatures prior to merging.
    3. Added an opt-out toast queue system when more toasts than the max count are attempting to render.
    opened by PeytonRG 0
  • Version 5.0.0

    Version 5.0.0

    Will merge once Bootstrap 5 is released and I can verify that the 5.0.0 pre-releases have no issues with it. After that, the Bootstrap 4 skew under the 4.x line will be in its own side branch.

    opened by PeytonRG 0
  • v2 Toast Class

    v2 Toast Class

    Converts existing functions in the v1 API into static methods within a new Toast class, and renamed the methods to have more concise names. This will help differentiate toast code from other code in a developer's JavaScript.

    Deprecates the v1 API, but keeps its public functions around for now as wrappers to call the new class methods. This will ease the burden of upgrading considerably. The plan is to remove these functions entirely in v3. The old private functions (_setStatus and _renderToast) have already been removed, which should have no impact on proper implementations.

    opened by PeytonRG 0
  • Feature Request: Don't require global bootstrap & Don't inject into global space

    Feature Request: Don't require global bootstrap & Don't inject into global space

    Hey!

    Found your package today while working on new Bootstrap 5 project. I usually use the toastr npm package but wanted something that used the bootstrap 5 toasts. Glad to see a NPM for this! Thank you for your work!

    While implementing, I ran into a few little issues. I use meteor for my projects and each individual js / template / layout / etc allows you to import just what you need for that bit of code. Instead of having everything as globals, you can keep the global namespace clean and keep your includes / dynamic imports to the pages that need it only.

    My first instinct was to set up a layout like this:

    import Toast from 'bootstrap-toaster';
    
    Template.hello.onRendered(function() { 
        Toast.create({ title: 'Hello world!'});
    });
    

    This didn't work because the Toast package requires bootstrap to be global. It would be nice if the above example just worked.

    I managed to get it working by doing the following:

    bootstrap = require('bootstrap');
    import Toast from 'bootstrap-toaster';
    

    I'd love it if bootstrap wasn't global though!!

    Now the Toast is on every page and in global when it doesn't need to be.

    help wanted 
    opened by wreiske 1
Releases(v5.2.0-beta1)
  • v5.2.0-beta1(Jun 3, 2022)

    ESM Module Support

    You read that right, Bootstrap Toaster can finally be imported as an ESM module! For example, the following will allow you to use the Toast class and the enums for status, placement, theme, and timers.

    import { Toast, TOAST_STATUS } from "bootstrap-toaster";
    

    Quirks

    • Unfortunately, I couldn't figure out how to support existing users without making breaking API changes that would affect the UMD build, so ESM users will have to do an admittedly janky import below. Alternatively, you could just import Bootstrap's JS in an HTML script tag to get that global bootstrap variable that I use, but I'm sure many would rather go all-in on modules.
    import * as bootstrap from "bootstrap";
    ...
    window.bootstrap = bootstrap;
    
    • In supporting existing users via the UMD module without breaking changes, I had to make global variables for Toast, TOAST_STATUS, TOAST_PLACEMENT, TOAST_THEME, and TOAST_TIMERS. I believe this is necessary for UMD builds but they are technically globals in the ESM build as well, even though you obviously have to import them to be able to use them.

    Help Me!

    If you know how I could accomplish this better without the above quirks, please reach out! I used rollup.js to build the UMD and ESM modules, and this whole process is very new to me.

    Source code(tar.gz)
    Source code(zip)
  • v4.1.2(Sep 17, 2021)

    New Features

    1. Bootstrap Toaster is now written in TypeScript for proper type safety and access modifiers when used with other TS code.
    2. Toast timers now support a new option, countdown timers, in addition to elapsed timers and being disabled. A countdown timer simply displays how long in seconds until the toast disappears. Be aware that even with numbers greater than 60s, it will always display in seconds.
      • Elapsed timers are still the default setting.
    3. Toasts will now queue by default when the maximum toast count is reached, so that information in the queued toasts is not lost forever. This can be disabled to restore the previous behavior.

    Breaking Changes

    1. There are new interfaces and enums available in the TypeScript code, which are now used as the parameters to the configure, create, setPlacement, setTheme, enableTimers.
      • For regular JavaScript users, simply pass in an object with the same properties as the new interfaces. Once compiled, the enums behave identically to prior versions, so no issues should arise there.
      • To upgrade, either use the interfaces/objects, or use the new temporary shims, oldConfigure, oldCreate, and oldEnableTimers, which have the same signatures as in previous releases. Unfortunately, JavaScript has no concept of method overloads, so this isn't entirely painless.
        • These shims will all be removed in a future version.
    2. Apologies for completely changing the signatures of multiple methods, but I think it is ultimately a more elegant solution that scales better going forward.
    Source code(tar.gz)
    Source code(zip)
  • v5.1.0(Sep 13, 2021)

    New Features

    1. Bootstrap Toaster is now written in TypeScript for proper type safety and access modifiers when used with other TS code.
    2. Toast timers now support a new option, countdown timers, in addition to elapsed timers and being disabled. A countdown timer simply displays how long in seconds until the toast disappears. Be aware that even with numbers greater than 60s, it will always display in seconds.
      • Elapsed timers are still the default setting.
    3. Toasts will now queue by default when the maximum toast count is reached, so that information in the queued toasts is not lost forever. This can be disabled to restore the previous behavior.

    Breaking Changes

    1. There are new interfaces and enums available in the TypeScript code, which are now used as the parameters to the configure, create, setPlacement, setTheme, enableTimers.
      • For regular JavaScript users, simply pass in an object with the same properties as the new interfaces. Once compiled, the enums behave identically to prior versions, so no issues should arise there.
      • To upgrade, either use the interfaces/objects, or use the new temporary shims, oldConfigure, oldCreate, and oldEnableTimers, which have the same signatures as in previous releases. Unfortunately, JavaScript has no concept of method overloads, so this isn't entirely painless.
        • These shims will all be removed in a future version.
    2. Apologies for completely changing the signatures of multiple methods, but I think it is ultimately a more elegant solution that scales better going forward.
    Source code(tar.gz)
    Source code(zip)
  • v5.0.0(May 6, 2021)

    It's Finally Here!

    With Bootstrap 5 officially released, version 5.0.0 is ready to fly as well! This release includes huge changes over version 3.0.0, listed below. If you are on Bootstrap 4, I recommend version 4.x, which was created by porting this release to Bootstrap 4.

    New Features & Fixes

    1. There are now 9 options for toast placement rather than the original 4. They are
      • TOAST_PLACEMENT.TOP_LEFT
      • TOAST_PLACEMENT.TOP_CENTER
      • TOAST_PLACEMENT.TOP_RIGHT
      • TOAST_PLACEMENT.MIDDLE_LEFT
      • TOAST_PLACEMENT.MIDDLE_CENTER
      • TOAST_PLACEMENT.MIDDLE_RIGHT
      • TOAST_PLACEMENT.BOTTOM_LEFT
      • TOAST_PLACEMENT.BOTTOM_CENTER
      • TOAST_PLACEMENT.BOTTOM_RIGHT
    2. Greatly smoothed the edges of the toast box shadow effect with some reworked CSS on the toast container.

    Breaking Changes

    1. Version 5.x targets Bootstrap 5 rather than Bootstrap 4.
      • If updating from 4.x, assuming your website is upgraded to Bootstrap 5, the below information DOES NOT apply to you.
      • If updating from 3.0.0 or earlier, the below information DOES apply to you.
    2. To better align with Bootstrap's documentation, all references to "position" have been renamed to placement, so a find and replace will be necessary for the following:
      • TOAST_POSITION -> TOAST_PLACEMENT
      • Toast.setPosition -> Toast.setPlacement
    3. When adding the new placement options for toasts, the internal number values of the artificial TOAST_PLACEMENT enum were modified. If you were using those rather than their named equivalents (shame on you), you will need to update your code. If you used the named values, the above find and replace is all you need to update.
    4. Replaced Font Awesome 5 dependency with Bootstrap Icons for toast status icons.
      • For the icons to display, including a link tag for the Bootstrap Icons icon font stylesheet is required. View instructions on the Bootstrap Icons Docs.
    Source code(tar.gz)
    Source code(zip)
  • v4.0.2(Mar 16, 2021)

  • v4.0.1(Feb 19, 2021)

  • v4.0.0(Jan 24, 2021)

    This version is designed to back-port improvements made from version 5.0.0 to Bootstrap 4. As such, its features code improvements from that version while maintaining full compatibility with Bootstrap 4. Unlike previous versions, 4 and 5 will both be maintained as current releases.

    New Features & Fixes

    1. There are now 9 options for toast placement rather than the original 4. They are
      • TOAST_PLACEMENT.TOP_LEFT
      • TOAST_PLACEMENT.TOP_CENTER
      • TOAST_PLACEMENT.TOP_RIGHT
      • TOAST_PLACEMENT.MIDDLE_LEFT
      • TOAST_PLACEMENT.MIDDLE_CENTER
      • TOAST_PLACEMENT.MIDDLE_RIGHT
      • TOAST_PLACEMENT.BOTTOM_LEFT
      • TOAST_PLACEMENT.BOTTOM_CENTER
      • TOAST_PLACEMENT.BOTTOM_RIGHT
    2. Greatly smoothed the edges of the toast box shadow effect with some reworked CSS on the toast container.

    Breaking Changes

    1. To better align with Bootstrap's documentation, all references to "position" have been renamed to placement, so a find and replace will be necessary for the following:
      • TOAST_POSITION -> TOAST_PLACEMENT
      • Toast.setPosition -> Toast.setPlacement
    2. When adding the new placement options for toasts, the internal number values of the artificial TOAST_PLACEMENT enum were modified. If you were using those rather than their named equivalents (shame on you), you will need to update your code. If you used the named values, the above find and replace is all you need to update.
    3. Replaced Font Awesome 5 dependency with Bootstrap Icons for toast status icons.
      • For the icons to display, including a link tag for the Bootstrap Icons icon font stylesheet is required. View instructions on the Bootstrap Icons Docs.
    Source code(tar.gz)
    Source code(zip)
  • v3.0.0(Jan 2, 2021)

    Breaking Changes in 3.0.0

    1. This package is now officially named Bootstrap Toaster, and new versions will be published as bootstrap-toaster on npm rather than the previous bootstrap-toast.js. All old versions of the old package will be deprecated on npm.
    2. The CSS and JS files have been renamed to go along with the new package name. You will need to adjust your code like so:
      • bootstrap-toast.css -> bootstrap-toaster.css
      • bootstrap-toast.js -> bootstrap-toaster.js
    3. Removed the v1 API that was deprecated in v2.
    Source code(tar.gz)
    Source code(zip)
  • v2.0.2(Sep 1, 2020)

  • v1.0.9.1(Jun 1, 2020)

  • v1.0.1(May 3, 2020)

  • v1.0.0(May 3, 2020)

    Added documentation to the project and updated a few comments. No code changes from Beta 1.2.3, but this project is finally ready to fly!

    Source code(tar.gz)
    Source code(zip)
Makes Bootstrap 5.x Toasts easier to use

bootstrap5-toast Copied from https://github.com/Script47/Toast and updated to support Bootstrap 5.x https://getbootstrap.com/docs/5.0/components/toast

Chris Go 7 Jul 12, 2022
Plug-and-play, faster-than-native promise/callback event emitter

kNow Blazing-fast callback/promise-based events with a tiny footprint What is this? With kNow (pronounced "now"—the k's silent), JavaScript event mana

Elijah Bodden 25 Sep 11, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4.

Bootstrap Tooltip Custom Class Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4. Define you

Andrei Victor Bulearca 14 Feb 10, 2022
A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans.

bootstrap-validate A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans. ?? Support us with Developer Merchandise

null 138 Jan 2, 2023
A daily print-and-play roguelike adventure you can play offline.

Chronicles of Stampadia A print-and-play roguelike with a new adventure every day! Play today's adventure | Read the manual | Learn how to play | Disc

Francesco Cottone 36 Oct 15, 2022
Danger is near (play to earn game, gamefi on near chain testnet) - user play as a fireknight in a PIXELVERSE world who go to forest and kill monster.

Danger is near (play to earn game, gamefi on near chain testnet) - user play as a fireknight in a PIXELVERSE world who go to forest and kill monster. User can earn $DANGER token and score to compete with others user.

Jason Factor 21 Dec 30, 2022
Plug-in for Obsidian.md which will create Notes from JSON files

Import JSON This plug-in provides you with the tools to import your favourite JSON tables. A magnifying-glass icon will appear in the left margin when

Martin 33 Dec 31, 2022
Write and read comments on every page with a simple plug-in for your browser

Licom - comments on every webpage Licom is a simple plugin for your browser that adds the feature to leave comments on every page, even if it doesn't

Sebastian Korotkiewicz 45 Aug 4, 2022
A Hackable Markdown Note Application for Programmers. Version control, AI completion, mind map, documents encryption, code snippet running, integrated terminal, chart embedding, HTML applets, plug-in, and macro replacement.

Yank Note A hackable markdown note application for programmers Download | Try it Online >>> Not ecommended English | 中文说明 [toc]{level: [2]} Highlights

洋子 4.3k Dec 31, 2022
A lightweight tooltip plug-in library

popper-next 是一款轻量的 Tooltip 插件 vue、react安装使用 推荐yarn yarn add popper-next 或者 cnpm install popper-next -S 在html页面中如何使用 <script src="https://unpkg.com/pop

east-wzd 4 Dec 7, 2022
A jQuery plug-in to notify you of CSS, Attribute or Property changes in an element

selectWatch.js jQuery plug-in gives an opportunity to monitor changes of DOM element's CSS styles, attributes, properties, input element or select ele

Fatih Kazancı 3 Oct 28, 2022
A jQuery Plug-in to select the time with a clock inspired by the Android time picker.

Clock Timepicker Plugin for jQuery See a demo here A free jQuery Plug-in to select the time with a clock inspired by the Android time picker. This plu

Andy 51 Dec 22, 2022
Bootstrap Colorpicker is a modular color picker plugin for Bootstrap.

Bootstrap Colorpicker Bootstrap Colorpicker is a modular color picker plugin for Bootstrap 4. THIS PROJECT IS NOT MAINTAINED ANYMORE. After almost 10

Javi Aguilar 1.4k Dec 22, 2022
Fast & Robust Front-End Micro-framework based on modern standards

Chat on gitter Hello slim.js - your declarative web components library import { Slim } from 'slim-js'; import { tag, template } from 'slim-js/decorato

slim.js 942 Dec 30, 2022
Fast and robust triangle-triangle intersection test with high precision for cross and coplanar triangles based on the algorithm by Devillers & Guigue.

fast-triangle-triangle-intersection Fast and robust triangle-triangle intersection test with high precision for cross and coplanar triangles based on

Technology and knowledge for interaction 10 Nov 15, 2022