├── .gitattributes
├── .gitignore
├── LICENSE
├── README.md
├── favicon.ico
├── index.html
├── package-lock.json
├── package.json
├── src
    └── bootstrap-show-notification.js
└── test
    ├── Test.js
    └── index.html


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


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


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 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-notification
 2 | 
 3 | > This component is Bootstrap 4 only. For a Bootstrap 5 compatible
 4 | > component with similar functionality, see [bootstrap-show-toast](https://github.com/shaack/bootstrap-show-toast).
 5 | 
 6 | A jQuery plugin wrapper around Bootstrap 4 Alerts, to show them as toasts (also called notifications) dynamically from JavaScript.
 7 | 
 8 | ![bootstrap-show-notification Example](https://shaack.com/projekte/assets/img/bootstrap-show-notification-lg.png?v=2)
 9 | 
10 | => 
11 | - Responsive and mobile friendly
12 | - Needs no extra CSS
13 | 
14 | ## Try it
15 | 
16 | - [Demo Page](https://shaack.com/projekte/bootstrap-show-notification/)
17 | 
18 | ## Installation
19 | 
20 | - [npm package](https://www.npmjs.com/package/bootstrap-show-notification)
21 | 
22 | ```sh
23 | npm install bootstrap-show-notification
24 | ```
25 | 
26 | ## Usage
27 | 
28 | ```html
29 | <script src="./node_modules/bootstrap-show-notification/src/bootstrap-show-notification.js"></script>
30 | <script>
31 |     // simple example
32 |     $("#button-show-simple").click(function () {
33 |         $.showNotification({body: "Hello Notification!"})
34 |     })
35 |     // type info and more complex body
36 |     $("#button-show-info").click(function () {
37 |         $.showNotification({
38 |             body: "<h3>For your Info</h3>This notification has a title and a body and more text than the previous one.", type: "info"
39 |         })
40 |     })
41 |     // type danger
42 |     $("#button-show-danger").click(function () {
43 |         $.showNotification({
44 |             body: "Danger!", type: "danger"
45 |         })
46 |     })
47 |     // type secondary and sticky
48 |     $("#button-show-sticky").click(function () {
49 |         $.showNotification({
50 |             body: "This notification will stay", type: "secondary", duration: 0
51 |         })
52 |     })
53 | </script>
54 | ```
55 | 
56 | ## Props (defaults)
57 | 
58 | ```js
59 | this.props = {
60 |     body: "", // the text, shown
61 |     type: "primary", // the appearance
62 |     duration: 5500, // duration till auto-hide, set to `0` to disable auto-hide
63 |     maxWidth: "520px", // the notification maxWidth
64 |     shadow: "0 2px 6px rgba(0,0,0,0.2)", // the box-shadow
65 |     zIndex: 100,
66 |     margin: "1rem", // the margin (above maxWidth)
67 |     direction: "prepend" // or "append", the stack direction
68 | }
69 | ```
70 | 
71 | ## Documentation
72 | 
73 | - [Repository and documentation](https://github.com/shaack/bootstrap-show-notification)
74 | 
75 | ## More Bootstrap extensions
76 | 
77 | Check out my [further Bootstrap extensions](https://shaack.com/en/open-source-components)
78 | 


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shaack/bootstrap-show-notification/a16790bc693e91457c61b908d19b58590a11d7a0/favicon.ico


--------------------------------------------------------------------------------
/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@4.6.1/dist/css/bootstrap.min.css"
  7 |           integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"/>
  8 |     <!--<link rel="stylesheet" href="./node_modules/prismjs/themes/prism-tomorrow.css"/>-->
  9 |     <meta name="viewport" content="width=device-width, initial-scale=1"/>
 10 | </head>
 11 | <body>
 12 | <section class="container py-5">
 13 |     <h1>bootstrap-show-notification</h1>
 14 |     <p>
 15 |         A jQuery plugin wrapper around Bootstrap 4 Alerts, to create fixed Alerts (also called Notifications)
 16 |         dynamically in
 17 |         JavaScript.
 18 |     </p>
 19 |     <h2>Examples</h2>
 20 |     <p>
 21 |         <button type="button" id="button-show-simple" class="btn btn-primary">Show a simple notification</button>
 22 |     </p>
 23 |     <p>
 24 |         <button type="button" id="button-show-info" class="btn btn-info">Show a more complex info-notification with
 25 |             Button handling
 26 |         </button>
 27 |     </p>
 28 |     <p>
 29 |         <button type="button" id="button-show-danger" class="btn btn-danger">Show a danger-notification</button>
 30 |     </p>
 31 |     <p>
 32 |         <button type="button" id="button-show-sticky" class="btn btn-secondary">Show a sticky notification with infinite
 33 |             duration
 34 |         </button>
 35 |     </p>
 36 |     <h2>Usage</h2>
 37 |     <pre><code>
 38 | &lt;script src="./node_modules/bootstrap-show-notification/src/bootstrap-show-notification.js">&lt;/script>
 39 | &lt;script>
 40 |     $("#button-show-simple").click(function () {
 41 |         $.showNotification({body: "Hello Notification!"})
 42 |     })
 43 |     $("#button-show-info").click(function () {
 44 |         const notification = $.showNotification({
 45 |             body: "&lt;h3>For your Info&lt;/h3>&lt;p>This notification has a headline and more text than the previous one.&lt;/p>&lt;div>&lt;button class='btn btn-info mr-3'>Click me&lt;/button>&lt;button class='btn btn-outline-info'>Close this Notification&lt;/button>&lt;/div>",
 46 |             type: "info",
 47 |             duration: 20000
 48 |         })
 49 |         notification.$element[0].querySelector(".btn-info").addEventListener("click", () => {
 50 |             $.showNotification({
 51 |                 body: "Thank you for clicking", type: "success", direction: "append"
 52 |             })
 53 |         })
 54 |         notification.$element[0].querySelector(".btn-outline-info").addEventListener("click", () => {
 55 |             notification.$element.alert("close")
 56 |         })
 57 |     })
 58 |     $("#button-show-danger").click(function () {
 59 |         $.showNotification({
 60 |             body: "Danger!", type: "danger"
 61 |         })
 62 |     })
 63 |     $("#button-show-sticky").click(function () {
 64 |         $.showNotification({
 65 |             body: "This notification will stay", type: "secondary", duration: 0
 66 |         })
 67 |     })
 68 | &lt;/script>
 69 |     </code></pre>
 70 |     <h2>Repository and Documentation</h2>
 71 |     <a href="https://github.com/shaack/bootstrap-show-notification">Repository and documentation on GitHub</a>
 72 |     <div class="card my-5 border-info">
 73 |         <a href="https://shaack.com/works">
 74 |             <div class="card-body">
 75 |                 <h4 class="mb-2">More Bootstrap Components (from shaack.com)</h4>
 76 |                 You may want to check out our further Bootstrap extensions.
 77 |             </div>
 78 |         </a>
 79 |     </div>
 80 | </section>
 81 | <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
 82 |         integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
 83 |         crossorigin="anonymous"></script>
 84 | <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"
 85 |         integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
 86 |         crossorigin="anonymous"></script>
 87 | <script src="./src/bootstrap-show-notification.js"></script>
 88 | <script>
 89 |     $("#button-show-simple").click(function () {
 90 |         $.showNotification({body: "Hello Notification!"})
 91 |     })
 92 |     $("#button-show-info").click(function () {
 93 |         const notification = $.showNotification({
 94 |             body: "<h3>For your Info</h3><p>This notification has a headline and more text than the previous one.</p><div><button class='btn btn-info mr-3'>Click me</button><button class='btn btn-outline-info'>Close this Notification</button></div>",
 95 |             type: "info",
 96 |             duration: 20000
 97 |         })
 98 |         notification.$element[0].querySelector(".btn-info").addEventListener("click", () => {
 99 |             $.showNotification({
100 |                 body: "Thank you for clicking", type: "success", direction: "append"
101 |             })
102 |         })
103 |         notification.$element[0].querySelector(".btn-outline-info").addEventListener("click", () => {
104 |             notification.$element.alert("close")
105 |         })
106 |     })
107 |     $("#button-show-danger").click(function () {
108 |         $.showNotification({
109 |             body: "Danger!", type: "danger"
110 |         })
111 |     })
112 |     $("#button-show-sticky").click(function () {
113 |         $.showNotification({
114 |             body: "This notification will stay", type: "secondary", duration: 0
115 |         })
116 |     })
117 | </script>
118 | </body>
119 | </html>
120 | 


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "bootstrap-show-notification",
 3 |   "version": "1.2.0",
 4 |   "lockfileVersion": 2,
 5 |   "requires": true,
 6 |   "packages": {
 7 |     "": {
 8 |       "name": "bootstrap-show-notification",
 9 |       "version": "1.2.0",
10 |       "license": "MIT",
11 |       "dependencies": {
12 |         "teevi": "^2.1.10"
13 |       },
14 |       "devDependencies": {}
15 |     },
16 |     "node_modules/teevi": {
17 |       "version": "2.1.10",
18 |       "resolved": "https://registry.npmjs.org/teevi/-/teevi-2.1.10.tgz",
19 |       "integrity": "sha512-hjWaUkdyi0gjhEll3qaqIDtQHm/qNKW4WFoNOAXSkHOFxBbZwqL1QBCxZMZR4IcxGB0Kf/BTw5JXOxOcEb4Djg=="
20 |     }
21 |   },
22 |   "dependencies": {
23 |     "teevi": {
24 |       "version": "2.1.10",
25 |       "resolved": "https://registry.npmjs.org/teevi/-/teevi-2.1.10.tgz",
26 |       "integrity": "sha512-hjWaUkdyi0gjhEll3qaqIDtQHm/qNKW4WFoNOAXSkHOFxBbZwqL1QBCxZMZR4IcxGB0Kf/BTw5JXOxOcEb4Djg=="
27 |     }
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "bootstrap-show-notification",
 3 |   "version": "1.2.0",
 4 |   "description": "Shows Bootstrap 4 Alerts as notifications, fixed above the content.",
 5 |   "browser": "./src/boostrap-show-notification.js",
 6 |   "scripts": {
 7 |     "test": "tput setaf 4;echo open ./test/index.html in your browser for testing."
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/shaack/bootstrap-show-notification.git"
12 |   },
13 |   "keywords": [
14 |     "Bootstrap 4",
15 |     "Bootstrap",
16 |     "jQuery",
17 |     "Widget",
18 |     "Html",
19 |     "UI",
20 |     "UX"
21 |   ],
22 |   "author": "Stefan Haack (shaack.com)",
23 |   "license": "MIT",
24 |   "bugs": {
25 |     "url": "https://github.com/shaack/bootstrap-show-notification/issues"
26 |   },
27 |   "homepage": "https://shaack.com/en/open-source-components",
28 |   "dependencies": {
29 |     "teevi": "^2.1.10"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/src/bootstrap-show-notification.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Author and copyright: Stefan Haack (https://shaack.com)
 3 |  * Repository: https://github.com/shaack/bootstrap-show-notification
 4 |  * License: MIT, see file 'LICENSE'
 5 |  */
 6 | ;(function ($) {
 7 |     "use strict"
 8 | 
 9 |     function Notification(props) {
10 |         // see https://getbootstrap.com/docs/4.0/components/alerts/
11 |         this.props = {
12 |             body: "", // put here the text, shown
13 |             type: "primary", // the appearance
14 |             duration: 5500, // duration till auto-hide, set to `0` to disable auto-hide
15 |             maxWidth: "520px", // the notification maxWidth
16 |             minWidth: "320px", // the notification minWidth
17 |             shadow: "0 2px 6px rgba(0,0,0,0.2)", // the box-shadow
18 |             zIndex: 100,
19 |             margin: "1rem", // the margin (above maxWidth)
20 |             direction: "prepend" // or "append", the stack direction
21 |         }
22 |         this.containerId = "bootstrap-show-notification-container"
23 |         for (let prop in props) {
24 |             // noinspection JSUnfilteredForInLoop
25 |             this.props[prop] = props[prop]
26 |         }
27 |         const cssClass = "alert alert-" + this.props.type + " alert-dismissible fade"
28 |         this.id = "id-" + Math.random().toString(36).substr(2)
29 |         this.template =
30 |             "<div class='" + cssClass + "' role='alert'>" + this.props.body +
31 |             "   <button type='button' class='close' data-dismiss='alert' aria-label='close'>" +
32 |             "       <span aria-hidden='true'>&times;</span>" +
33 |             "   </button>" +
34 |             "</div>"
35 |         this.$container = $("#" + this.containerId)
36 |         if (!this.$container.length) {
37 |             this.$container = $("<div id='" + this.containerId + "'></div>")
38 |             $(document.body).append(this.$container)
39 |             const css = "#" + this.containerId + " {" +
40 |                 "position: fixed;" +
41 |                 "right: " + this.props.margin + ";" +
42 |                 "top: " + this.props.margin + ";" +
43 |                 "margin-left: " + this.props.margin + ";" +
44 |                 "z-index: " + this.props.zIndex + ";" +
45 |                 "}" +
46 |                 "#" + this.containerId + " .alert {" +
47 |                 "box-shadow: " + this.props.shadow + ";" +
48 |                 "max-width: " + this.props.maxWidth + ";" +
49 |                 "min-width: " + this.props.minWidth + ";" +
50 |                 "float: right; clear: right;" +
51 |                 "}" +
52 |                 "@media screen and (max-width: " + this.props.maxWidth + ") {" +
53 |                 "#" + this.containerId + " {min-width: 0; max-width: 100%; width: 100%; right: 0; top: 0;}" +
54 |                 "#" + this.containerId + " .alert {min-width: 0; margin-bottom: 0.25rem;width: auto;float: none;}" +
55 |                 "}"
56 |             const head = document.head || document.getElementsByTagName('head')[0]
57 |             const style = document.createElement('style')
58 |             head.appendChild(style)
59 |             style.appendChild(document.createTextNode(css))
60 |         }
61 |         this.$element = this.showNotification()
62 |     }
63 |     Notification.prototype.showNotification = function () {
64 |         const $notification = $(this.template)
65 |         if (this.props.direction === "prepend") {
66 |             this.$container.prepend($notification)
67 |         } else {
68 |             this.$container.append($notification)
69 |         }
70 |         $notification.addClass("show")
71 |         if(this.props.duration) {
72 |             setTimeout(function () {
73 |                 $notification.alert("close")
74 |             }, this.props.duration)
75 |         }
76 |         return $notification
77 |     }
78 |     $.extend({
79 |         showNotification: function (props) {
80 |             return new Notification(props)
81 |         }
82 |     })
83 | }(jQuery))
84 | 


--------------------------------------------------------------------------------
/test/Test.js:
--------------------------------------------------------------------------------
 1 | import {describe, it, assert} from "../node_modules/teevi/src/teevi.js"
 2 | 
 3 | describe('bootstrap-show-modal', function () {
 4 |     it('Should display notifications', function () {
 5 |         $.showNotification({body: "Hello Notification!"})
 6 |         $.showNotification({
 7 |             body: "<h3>For your Info</h3>This notification has a headline and more text than the previous one.", type: "info"
 8 |         })
 9 |         $.showNotification({
10 |             body: "Danger!", type: "danger"
11 |         })
12 |         $.showNotification({
13 |             body: "This notification will stay", type: "secondary", duration: 0
14 |         })
15 |     })
16 | })
17 | 


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 6 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
 7 |           integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"/>
 8 |     <title>bootstrap-input-spinner test</title>
 9 | </head>
10 | <body>
11 | <div id="testContainer"></div>
12 | <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
13 | <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
14 | <script src="../src/bootstrap-show-notification.js"></script>
15 | <script type="module">
16 |     import {teevi} from "../node_modules/teevi/src/teevi.js"
17 |     import "./Test.js"
18 |     teevi.run()
19 | </script>
20 | </body>
21 | </html>
22 | 


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