Makes Bootstrap 5.x Toasts easier to use

Overview

bootstrap5-toast

Copied from https://github.com/Script47/Toast and updated to support Bootstrap 5.x https://getbootstrap.com/docs/5.0/components/toasts/ as a proof of concept (not complete)

About

  • Makes Bootstrap 5.x Toasts easier to use
  • Requires jQuery 3.x
  • TODO: Placement/Position is hardcoded to top-right top-0 start-0
  • TODO: Rounded square in the toast-header similar to Bootstrap documentation
  • TODO: Image
  • TODO: Investigate delay, does not seem to be working

Code for Rounded square in Header

<div class="toast-header">
  <svg class="rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg"   preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
    <rect fill="#007aff" width="100%" height="100%" />
  </svg>
  ...
</div>

Usage

  • Only need the JS file, all the CSS is from Bootstrap 5.x
<script src="src/toast.js"></script>

Globals (Not 100% Implemented)

Modify the global variables to apply specific rules/styles to all your toasts.

$.toastDefaults = {
    position: 'top-right', /** top-left/top-right/top-center/bottom-left/bottom-right/bottom-center - Where the toast will show up **/
    dismissible: true, /** true/false - If you want to show the button to dismiss the toast manually **/
    stackable: true, /** true/false - If you want the toasts to be stackable **/
    pauseDelayOnHover: true, /** true/false - If you want to pause the delay of toast when hovering over the toast **/
    style: {
        toast: '', /** Classes you want to apply separated my a space to each created toast element (.toast) **/
        info: '', /** Classes you want to apply separated my a space to modify the "info" type style  **/
        success: '', /** Classes you want to apply separated my a space to modify the "success" type style  **/
        warning: '', /** Classes you want to apply separated my a space to modify the "warning" type style  **/
        error: '', /** Classes you want to apply separated my a space to modify the "error" type style  **/
    }
};

Snack

A "snack" is a bitesized "toast".

$.snack(type, content, delay)

Note: The final argument delay is omitable. If omitted, the toast will remain forever.

Toast (Not 100% Implemented)

$.toast({
    type: 'info',
    title: 'Notice!',
    subtitle: '11 mins ago',
    content: 'Hello, world! This is a toast message.',
    delay: 5000,
    img: {
        src: 'https://via.placeholder.com/20',
        class: 'rounded-0', /**  Classes you want to apply separated my a space to modify the image **/
        alt: 'Image'
    }
});

Contributing

Feel free to contribute in any of the ways outlined:

  • Submit issues/pull requests
  • Tell us how you're using this plugin in your project
You might also like...

A Browser extension that not only makes your browsing experience safe but makes it optimized

A Browser extension that not only makes your browsing experience safe but makes it optimized

Sia Sia is a browser extension that not only makes your browsing experience safe but makes it optimized Table of Contents About The Project Built With

Feb 23, 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

Dec 22, 2022

An easy-to-use library to make your life easier when working with random numbers or random choices in javascript.

vrandom An easy-to-use library to make your life easier when working with random numbers or random choices in javascript. Table of contents Installati

Aug 16, 2022

An easy-to-use JavaScript library aimed at making it easier to draw on SVG elements.

svg-pen-sketch An easy-to-use JavaScript library aimed at making it easier to draw on SVG elements when using a digital pen (such as the Surface Pen).

Jul 27, 2022

Jaxit is an easy-to-use library that makes an interactive terminal for your programs.

Jaxit Jaxit is an easy-to-use library that makes an interactive terminal for your programs. Jaxit was made by Codeverse, so check on Codeverse's Profi

Dec 11, 2022

🖼️ Image proxy for Next.js. Makes it possible to use dynamic domains in next/image component.

Next.js Image Proxy Image proxy for Next.js. Makes it possible to use dynamic domains in next/image component. ❔ Motivation This library makes it poss

Dec 1, 2022

Lavanstax project - Makes it easy and fun to use İnstagram. Also first userbot for İnstagram

Lavanstax project - Makes it easy and fun to use İnstagram. Also first userbot for İnstagram

Lavanstax Lavanstax project - Makes it easy and fun to use İnstagram. Also first userbot for İnstagram | İnstagram | Telegram Channel | Telegram Group

Oct 15, 2022

A simple todo list app written in javascript and html with basic CSS styling This project makes use of webpack to bundle the code. I implemented 3 functionalities on the this project namely: Add task edit task delete task using Js

My To-Do List A simple todo list app written in javascript and html with basic CSS styling This project makes use of webpack to bundle the code. I imp

Nov 11, 2022
Comments
  • Delay not working because wrong attribute

    Delay not working because wrong attribute

    Maybe the delay shoule be more flexible.

    instead of:

        let delayOrAutohide = opts.delay ? `data-delay="${opts.delay}"` : `data-autohide="false"`;
    

    maybe:

        let delayOrAutohide = opts.delay ? `data-delay="${opts.delay}"` : `data-bs-autohide="false"`;
    
    opened by mxmihai 3
  • Add

    Add "primary" background

    Maybe should add the primary background too - in "render":

            case 'primary':
                classes.header.bg = $.toastDefaults.style.info || 'bg-primary';
                classes.header.fg = $.toastDefaults.style.info || 'text-white';
                break;
    
    opened by mxmihai 0
  • Toast is immediately hidden if `delay` is omitted

    Toast is immediately hidden if `delay` is omitted

    The doc implies that delay argument can be omitted, and the toast will stay until manually dismissed:

    Note: The final argument delay is omitable. If omitted, the toast will remain forever.

    This does not seem to be the case... For example:

    // This works, toast is shown and hidden after delay
    $.toast({type: "error", title: "Test", content: "test", delay: 3000})
    
    // This does not work - toast is hidden immediately after being shown (so it never even appears on screen)
    $.toast({type: "error", title: "Test", content: "test"})
    

    This piece of code runs right after the toast is shown:

    setTimeout(function () {
        if (!paused) {
            $(`#${id}`).toast('hide');
        }
    }, opts.delay);
    

    If delay is omitted, opts.delay here is undefined, so setTimeout fires immediarely, and as paused is false, the toast is immediately hidden...

    Even more confusingly, same code/bug is also present in the original library.. with the last commit years ago (.. how am I the first one discovering this?).

    opened by nirvana-msu 3
Owner
Chris Go
Chris Go
A jQuery plugin wrapper around Bootstrap Alerts, to create Notifications (Toasts)

bootstrap-show-notification A jQuery plugin wrapper around Bootstrap 4 Alerts, to show them as toasts (also called notifications) dynamically from Jav

Stefan Haack 10 Aug 22, 2022
A JavaScript module that shortens your code, makes life easier, and makes development faster!

Quxt A JavaScript module that shortens your code, makes life easier, and makes development faster! Installation npm install quxt Quick Start Check ind

Qux App 5 May 8, 2022
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
An extension that makes Scratching much easier!

ScratchTools An extension that makes Scratching much easier! Official Discord. v1.0 ScratchTools Version 1.0 had multiple bugs, making it impossible t

rgantzos 0 May 23, 2022
Node js package makes creating node jd dependincies files like Controllers,Entities and Repositories easier by executing a few instructions

Nodejs Studio Node js package makes creating node js project dependincies files like Controllers,Entities and Repositories easier by executing a few i

Syrian Open Source 9 Oct 12, 2022
A program that makes scripting videos easier.

QuickScript A program that makes scripting videos easier. Scripts can be written using only the keyboard. Installation Clone/fork the repository Insta

Samuel Albert 18 Jun 22, 2022
Boiler is a utility library that makes every day tasks in JavaScript easier by providing over 115 methods

Boiler is a utility library that makes every day tasks in JavaScript easier by providing over 115 methods that work on arrays, collections, functions, numbers, objects, and strings. It's the JavaScript equivalent of a Swiss Army Knife.

Wil 42 Nov 1, 2022
Mongo Strict is a TypeScript based smart MongoDB ORM, It makes the usage of MongoDB safer, easier and faster with a better performance...

mongo-strict mongo-strict is compatible with mongo >= 5 Mongo Strict is a TypeScript-based smart MongoDB ORM, It makes the usage of MongoDB safer, eas

Mohamed Kamel 4 Sep 22, 2022
All in one is a CLI to make your journey in web development less painful (it makes your life way easier).

All In One CLI (Aio) The Ultimate CLI for all your needs in web development. Description This is a CLI that has all the commands you need to do anythi

Я♡M...∞ 17 Sep 25, 2022