https://www.wenskaartenshop.be/themes/custom/wkshop_theme/node_mod…/src/bootstrap-show-toast.js?v=11.4.5

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))