├── .gitignore
├── .gitattributes
├── package.json
├── LICENSE
├── README.md
├── index.html
└── src
    └── bootstrap-show-toast.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .idea
3 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | src/bootstrap-show-toast.js linguist-vendored=false
2 | index.html linguist-documentation
3 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "bootstrap-show-toast",
 3 |   "version": "1.2.2",
 4 |   "description": "A Bootstrap 5 plugin to show toasts with pure JavaScript",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/shaack/bootstrap-show-toast.git"
12 |   },
13 |   "keywords": [
14 |     "Bootstrap",
15 |     "HTML"
16 |   ],
17 |   "author": "shaack.com",
18 |   "license": "MIT",
19 |   "bugs": {
20 |     "url": "https://github.com/shaack/bootstrap-show-toast/issues"
21 |   },
22 |   "homepage": "https://github.com/shaack/bootstrap-show-toast#readme"
23 | }
24 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Stefan Haack
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # bootstrap-show-toast
 2 | 
 3 | A Bootstrap 5 plugin for [Bootstrap Toasts](https://getbootstrap.com/docs/5.3/components/toasts/), to show them with pure JS, no HTML needed.
 4 | 
 5 | ## References
 6 | 
 7 | - [Demo page](https://shaack.com/projekte/bootstrap-show-toast)
 8 | - [GitHub repository](https://github.com/shaack/bootstrap-show-toast)
 9 | - [npm package](https://www.npmjs.com/package/bootstrap-show-toast)
10 | 
11 | ## Installation
12 | 
13 | ```sh
14 | npm install bootstrap-show-toast
15 | ```
16 | 
17 | ## Usage
18 | 
19 | ```js
20 | // simple example
21 | bootstrap.showToast({body: "Hello Toast!"})
22 | 
23 | // type danger
24 | bootstrap.showToast({
25 |     header: "Alert",
26 |     body: "Red Alert!",
27 |     toastClass: "text-bg-danger"
28 | })
29 | 
30 | // more complex toast with header and buttons
31 | const toast = bootstrap.showToast({
32 |     header: "Information",
33 |     headerSmall: "just now",
34 |     body: "<p>This notification has a headline and more text than the previous one.</p><div><button class='btn btn-primary me-1 btn-sm'>Click me</button><button class='btn btn-secondary btn-sm' data-bs-dismiss='toast'>Close</button></div>",
35 |     delay: 20000
36 | })
37 | toast.element.querySelector(".btn-primary").addEventListener("click", () => {
38 |     bootstrap.showToast({
39 |         body: "Thank you for clicking", direction: "append", 
40 |         toastClass: "text-bg-success", closeButtonClass: "btn-close-white"
41 |     })
42 | })
43 | 
44 | // type secondary and sticky
45 | bootstrap.showToast({
46 |     body: "This notification will stay", 
47 |     toastClass: "text-bg-secondary", closeButtonClass: "btn-close-white", 
48 |     delay: Infinity // delay of `Infinity` to make it sticky
49 | })
50 | ```
51 | 
52 | ## Props (defaults)
53 | 
54 | ```js
55 | this.props = {
56 |     header: "", // the header text
57 |     headerSmall: "", // additional text in the header, aligns right
58 |     body: "", // the body text of the toast
59 |     closeButton: true, // show a close button
60 |     closeButtonLabel: "close", // the label of the close button
61 |     closeButtonClass: "", // set to "btn-close-white" for dark backgrounds
62 |     toastClass: "", // the appearance
63 |     animation: true, // apply a CSS fade transition to the toast
64 |     delay: 5000, //	delay in milliseconds before hiding the toast, set delay to `Infinity` to make it sticky
65 |     position: "top-0 end-0", // top right
66 |     direction: "append", // or "prepend", the stack direction
67 |     ariaLive: "assertive"
68 | }
69 | ```
70 | 
71 | ---
72 | 
73 | Find more high quality modules from [shaack.com](https://shaack.com)
74 | on [our projects page](https://shaack.com/works).
75 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>bootstrap-show-modal</title>
 6 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1"/>
 8 | </head>
 9 | <body>
10 | <section class="container py-5">
11 |     <h1>bootstrap-show-toast</h1>
12 |     <p>
13 |         A Bootstrap plugin, to create toasts (also called notifications) dynamically in JavaScript.
14 |     </p>
15 |     <h2>Examples</h2>
16 |     <p>
17 |         <button type="button" id="button-show-simple" class="btn btn-primary">Show a simple toast</button>
18 |     </p>
19 |     <p>
20 |         <button type="button" id="button-show-info" class="btn btn-info">Show a complex toast with header and buttons
21 |         </button>
22 |     </p>
23 |     <p>
24 |         <button type="button" id="button-show-danger" class="btn btn-danger">Show a danger-toast</button>
25 |     </p>
26 |     <p>
27 |         <button type="button" id="button-show-sticky" class="btn btn-secondary">Show a sticky toast with infinite duration</button>
28 |     </p>
29 |     <h2>Repository and Documentation</h2>
30 |     <a href="https://github.com/shaack/bootstrap-show-toast">Repository and documentation on GitHub</a>
31 |     <div class="card my-5 border-info">
32 |         <a href="https://shaack.com/works">
33 |             <div class="card-body">
34 |                 <h4 class="mb-2">More Bootstrap Components (from shaack.com)</h4>
35 |                 You may want to check out our further Bootstrap extensions.
36 |             </div>
37 |         </a>
38 |     </div>
39 | </section>
40 | <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
41 | <script type="module">
42 |     import "./src/bootstrap-show-toast.js"
43 | 
44 |     document.getElementById("button-show-simple").addEventListener("click", function () {
45 |         bootstrap.showToast({body: "Hello Toast!"})
46 |     })
47 |     document.getElementById("button-show-info").addEventListener("click", function () {
48 |         const toast = bootstrap.showToast({
49 |             header: "Information",
50 |             headerSmall: "just now",
51 |             body: "<p>This notification has a headline and more text than the previous one.</p><div><button class='btn btn-primary me-1 btn-sm'>Click me</button><button class='btn btn-secondary btn-sm' data-bs-dismiss='toast'>Close</button></div>",
52 |             delay: 20000
53 |         })
54 |         toast.element.querySelector(".btn-primary").addEventListener("click", () => {
55 |             bootstrap.showToast({
56 |                 body: "Thank you for clicking", direction: "append",
57 |                 toastClass: "text-bg-success", closeButtonClass: "btn-close-white"
58 |             })
59 |         })
60 |     })
61 |     document.getElementById("button-show-danger").addEventListener("click", function () {
62 |         bootstrap.showToast({
63 |             header: "Alert",
64 |             body: "Red Alert!",
65 |             toastClass: "text-bg-danger"
66 |         })
67 |     })
68 |     document.getElementById("button-show-sticky").addEventListener("click", function () {
69 |         bootstrap.showToast({
70 |             body: "This notification will stay", toastClass: "text-bg-secondary", closeButtonClass: "btn-close-white", delay: Infinity
71 |         })
72 |     })
73 | </script>
74 | </body>
75 | </html>
76 | 


--------------------------------------------------------------------------------
/src/bootstrap-show-toast.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Author and copyright: Stefan Haack (https://shaack.com)
 3 |  * Repository: https://github.com/shaack/bootstrap-show-toast
 4 |  * License: MIT, see file 'LICENSE'
 5 |  */
 6 | ;(function (bootstrap) {
 7 |     "use strict"
 8 | 
 9 |     function createElement(html) {
10 |         const template = document.createElement('template')
11 |         template.innerHTML = html.trim()
12 |         return template.content.firstChild
13 |     }
14 | 
15 |     function Toast(props) {
16 |         // see https://getbootstrap.com/docs/5.2/components/toasts/
17 |         this.props = {
18 |             header: "", // the header text
19 |             headerSmall: "", // additional text in the header, aligns right
20 |             body: "", // the body text of the toast
21 |             closeButton: true, // show a close button
22 |             closeButtonLabel: "close", // the label of the close button "x"
23 |             closeButtonClass: "", // e.g. set to "btn-close-white" for a white "x" on a dark background
24 |             toastClass: "", // the class of the toast, may be "text-bg-danger", see the bootstrap documentation
25 |             animation: true, // apply a CSS fade transition to the toast
26 |             delay: 5000, //	delay in milliseconds before hiding the toast, set delay to `Infinity` to make it sticky
27 |             position: "top-0 end-0", // top right
28 |             direction: "append", // or "prepend", the stack direction
29 |             ariaLive: "assertive" // the "aria-live" attribute, for accessibility
30 |         }
31 |         for (let prop in props) {
32 |             this.props[prop] = props[prop]
33 |         }
34 |         this.containerId = "bootstrap-show-toast-container-" + this.props.position.replaceAll(" ", "_")
35 |         const cssClass = ("toast " + this.props.toastClass).trim()
36 |         let toastHeader = ""
37 |         const showHeader = this.props.header || this.props.headerSmall
38 |         if (showHeader) {
39 |             toastHeader = `<div class="toast-header">
40 |                             <strong class="me-auto">${this.props.header}</strong>
41 |                             ${this.props.headerSmall ? `<small>${this.props.headerSmall}</small>` : ""}
42 |                             ${this.props.closeButton ? `<button type="button" class="btn-close ${this.props.closeButtonClass}" data-bs-dismiss="toast" aria-label="${this.props.closeButtonLabel}"></button>` : ""}
43 |                           </div>`
44 |         }
45 |         this.template =
46 |             `<div class="${cssClass}" role="alert" aria-live="${this.props.ariaLive}" aria-atomic="true">
47 |               ${toastHeader}
48 |               <div class="d-flex">
49 |                   <div class="toast-body">
50 |                     ${this.props.body}
51 |                   </div>
52 |                   ${(!showHeader && this.props.closeButton) ? `<button type="button" class="btn-close me-2 mx-auto ${this.props.closeButtonClass}" style="margin-top: 0.69rem" data-bs-dismiss="toast" aria-label="${this.props.closeButtonLabel}"></button>` : ""}
53 |               </div>
54 |             </div>`
55 |         this.container = document.getElementById(this.containerId)
56 |         if (!this.container) {
57 |             this.container = document.createElement("div")
58 |             this.container.id = this.containerId
59 |             this.container.setAttribute("class", "toast-container position-fixed p-3 " + this.props.position)
60 |             document.body.appendChild(this.container)
61 |         }
62 |         this.element = createElement(this.template)
63 |         this.toast = this.showToast(this.element)
64 |     }
65 | 
66 |     Toast.prototype.showToast = function (toastElement) {
67 |         if (this.props.direction === "prepend") {
68 |             this.container.prepend(toastElement)
69 |         } else {
70 |             this.container.append(toastElement)
71 |         }
72 |         this.toast = new bootstrap.Toast(toastElement, {
73 |             animation: this.props.animation,
74 |             autohide: this.props.delay !== Infinity,
75 |             delay: this.props.delay
76 | 
77 |         })
78 |         this.toast.show()
79 |         // remove on close, see https://github.com/shaack/bootstrap-show-toast/pull/3
80 |         toastElement.addEventListener('hidden.bs.toast', () => {
81 |             toastElement.remove()
82 |             if (this.container.children.length === 0) {
83 |                 this.container.remove()
84 |             }
85 |         })
86 |         return toastElement
87 |     }
88 | 
89 |     bootstrap.showToast = function (props) {
90 |         return new Toast(props)
91 |     }
92 | 
93 | }(bootstrap))
94 | 


--------------------------------------------------------------------------------