static/toastify.html

<style>
    /*!
 * Toastify js 1.12.0
 * https://github.com/apvarun/toastify-js
 * @license MIT licensed
 *
 * Copyright (C) 2018 Varun A P
 */

    .toastify {
        padding: 12px 20px;
        color: #ffffff;
        display: inline-block;
        box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);
        background: -webkit-linear-gradient(315deg, #73a5ff, #5477f5);
        background: linear-gradient(135deg, #73a5ff, #5477f5);
        position: fixed;
        opacity: 0;
        transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
        border-radius: 2px;
        cursor: pointer;
        text-decoration: none;
        max-width: calc(50% - 20px);
        z-index: 2147483647;
    }

    .toastify.on {
        opacity: 1;
    }

    .toast-close {
        background: transparent;
        border: 0;
        color: white;
        cursor: pointer;
        font-family: inherit;
        font-size: 1em;
        opacity: 0.4;
        padding: 0 5px;
    }

    .toastify-right {
        right: 15px;
    }

    .toastify-left {
        left: 15px;
    }

    .toastify-top {
        top: -150px;
    }

    .toastify-bottom {
        bottom: -150px;
    }

    .toastify-rounded {
        border-radius: 25px;
    }

    .toastify-avatar {
        width: 1.5em;
        height: 1.5em;
        margin: -7px 5px;
        border-radius: 2px;
    }

    .toastify-center {
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        max-width: fit-content;
        max-width: -moz-fit-content;
    }

    @media only screen and (max-width: 360px) {
        .toastify-right, .toastify-left {
            margin-left: auto;
            margin-right: auto;
            left: 0;
            right: 0;
            max-width: fit-content;
        }
    }
</style>

<script>
    /*!
 * Toastify js 1.12.0
 * https://github.com/apvarun/toastify-js
 * @license MIT licensed
 *
 * Copyright (C) 2018 Varun A P
 */
    (function(root, factory) {
        if (typeof module === "object" && module.exports) {
            module.exports = factory();
        } else {
            root.Toastify = factory();
        }
    })(this, function(global) {
        // Object initialization
        var Toastify = function(options) {
                // Returning a new init object
                return new Toastify.lib.init(options);
            },
            // Library version
            version = "1.12.0";

        // Set the default global options
        Toastify.defaults = {
            oldestFirst: true,
            text: "Toastify is awesome!",
            node: undefined,
            duration: 3000,
            selector: undefined,
            callback: function () {
            },
            destination: undefined,
            newWindow: false,
            close: false,
            gravity: "toastify-top",
            positionLeft: false,
            position: '',
            backgroundColor: '',
            avatar: "",
            className: "",
            stopOnFocus: true,
            onClick: function () {
            },
            offset: {x: 0, y: 0},
            escapeMarkup: true,
            ariaLive: 'polite',
            style: {background: ''}
        };

        // Defining the prototype of the object
        Toastify.lib = Toastify.prototype = {
            toastify: version,

            constructor: Toastify,

            // Initializing the object with required parameters
            init: function(options) {
                // Verifying and validating the input object
                if (!options) {
                    options = {};
                }

                // Creating the options object
                this.options = {};

                this.toastElement = null;

                // Validating the options
                this.options.text = options.text || Toastify.defaults.text; // Display message
                this.options.node = options.node || Toastify.defaults.node;  // Display content as node
                this.options.duration = options.duration === 0 ? 0 : options.duration || Toastify.defaults.duration; // Display duration
                this.options.selector = options.selector || Toastify.defaults.selector; // Parent selector
                this.options.callback = options.callback || Toastify.defaults.callback; // Callback after display
                this.options.destination = options.destination || Toastify.defaults.destination; // On-click destination
                this.options.newWindow = options.newWindow || Toastify.defaults.newWindow; // Open destination in new window
                this.options.close = options.close || Toastify.defaults.close; // Show toast close icon
                this.options.gravity = options.gravity === "bottom" ? "toastify-bottom" : Toastify.defaults.gravity; // toast position - top or bottom
                this.options.positionLeft = options.positionLeft || Toastify.defaults.positionLeft; // toast position - left or right
                this.options.position = options.position || Toastify.defaults.position; // toast position - left or right
                this.options.backgroundColor = options.backgroundColor || Toastify.defaults.backgroundColor; // toast background color
                this.options.avatar = options.avatar || Toastify.defaults.avatar; // img element src - url or a path
                this.options.className = options.className || Toastify.defaults.className; // additional class names for the toast
                this.options.stopOnFocus = options.stopOnFocus === undefined ? Toastify.defaults.stopOnFocus : options.stopOnFocus; // stop timeout on focus
                this.options.onClick = options.onClick || Toastify.defaults.onClick; // Callback after click
                this.options.offset = options.offset || Toastify.defaults.offset; // toast offset
                this.options.escapeMarkup = options.escapeMarkup !== undefined ? options.escapeMarkup : Toastify.defaults.escapeMarkup;
                this.options.ariaLive = options.ariaLive || Toastify.defaults.ariaLive;
                this.options.style = options.style || Toastify.defaults.style;
                if(options.backgroundColor) {
                    this.options.style.background = options.backgroundColor;
                }

                // Returning the current object for chaining functions
                return this;
            },

            // Building the DOM element
            buildToast: function() {
                // Validating if the options are defined
                if (!this.options) {
                    throw "Toastify is not initialized";
                }

                // Creating the DOM object
                var divElement = document.createElement("div");
                divElement.className = "toastify on " + this.options.className;

                // Positioning toast to left or right or center
                if (!!this.options.position) {
                    divElement.className += " toastify-" + this.options.position;
                } else {
                    // To be depreciated in further versions
                    if (this.options.positionLeft === true) {
                        divElement.className += " toastify-left";
                        console.warn('Property `positionLeft` will be depreciated in further versions. Please use `position` instead.')
                    } else {
                        // Default position
                        divElement.className += " toastify-right";
                    }
                }

                // Assigning gravity of element
                divElement.className += " " + this.options.gravity;

                if (this.options.backgroundColor) {
                    // This is being deprecated in favor of using the style HTML DOM property
                    console.warn('DEPRECATION NOTICE: "backgroundColor" is being deprecated. Please use the "style.background" property.');
                }

                // Loop through our style object and apply styles to divElement
                for (var property in this.options.style) {
                    divElement.style[property] = this.options.style[property];
                }

                // Announce the toast to screen readers
                if (this.options.ariaLive) {
                    divElement.setAttribute('aria-live', this.options.ariaLive)
                }

                // Adding the toast message/node
                if (this.options.node && this.options.node.nodeType === Node.ELEMENT_NODE) {
                    // If we have a valid node, we insert it
                    divElement.appendChild(this.options.node)
                } else {
                    if (this.options.escapeMarkup) {
                        divElement.innerText = this.options.text;
                    } else {
                        divElement.innerHTML = this.options.text;
                    }

                    if (this.options.avatar !== "") {
                        var avatarElement = document.createElement("img");
                        avatarElement.src = this.options.avatar;

                        avatarElement.className = "toastify-avatar";

                        if (this.options.position == "left" || this.options.positionLeft === true) {
                            // Adding close icon on the left of content
                            divElement.appendChild(avatarElement);
                        } else {
                            // Adding close icon on the right of content
                            divElement.insertAdjacentElement("afterbegin", avatarElement);
                        }
                    }
                }

                // Adding a close icon to the toast
                if (this.options.close === true) {
                    // Create a span for close element
                    var closeElement = document.createElement("button");
                    closeElement.type = "button";
                    closeElement.setAttribute("aria-label", "Close");
                    closeElement.className = "toast-close";
                    closeElement.innerHTML = "&#10006;";

                    // Triggering the removal of toast from DOM on close click
                    closeElement.addEventListener(
                        "click",
                        function(event) {
                            event.stopPropagation();
                            this.removeElement(this.toastElement);
                            window.clearTimeout(this.toastElement.timeOutValue);
                        }.bind(this)
                    );

                    //Calculating screen width
                    var width = window.innerWidth > 0 ? window.innerWidth : screen.width;

                    // Adding the close icon to the toast element
                    // Display on the right if screen width is less than or equal to 360px
                    if ((this.options.position == "left" || this.options.positionLeft === true) && width > 360) {
                        // Adding close icon on the left of content
                        divElement.insertAdjacentElement("afterbegin", closeElement);
                    } else {
                        // Adding close icon on the right of content
                        divElement.appendChild(closeElement);
                    }
                }

                // Clear timeout while toast is focused
                if (this.options.stopOnFocus && this.options.duration > 0) {
                    var self = this;
                    // stop countdown
                    divElement.addEventListener(
                        "mouseover",
                        function(event) {
                            window.clearTimeout(divElement.timeOutValue);
                        }
                    )
                    // add back the timeout
                    divElement.addEventListener(
                        "mouseleave",
                        function() {
                            divElement.timeOutValue = window.setTimeout(
                                function() {
                                    // Remove the toast from DOM
                                    self.removeElement(divElement);
                                },
                                self.options.duration
                            )
                        }
                    )
                }

                // Adding an on-click destination path
                if (typeof this.options.destination !== "undefined") {
                    divElement.addEventListener(
                        "click",
                        function(event) {
                            event.stopPropagation();
                            if (this.options.newWindow === true) {
                                window.open(this.options.destination, "_blank");
                            } else {
                                window.location = this.options.destination;
                            }
                        }.bind(this)
                    );
                }

                if (typeof this.options.onClick === "function" && typeof this.options.destination === "undefined") {
                    divElement.addEventListener(
                        "click",
                        function(event) {
                            event.stopPropagation();
                            this.options.onClick();
                        }.bind(this)
                    );
                }

                // Adding offset
                if(typeof this.options.offset === "object") {

                    var x = getAxisOffsetAValue("x", this.options);
                    var y = getAxisOffsetAValue("y", this.options);

                    var xOffset = this.options.position == "left" ? x : "-" + x;
                    var yOffset = this.options.gravity == "toastify-top" ? y : "-" + y;

                    divElement.style.transform = "translate(" + xOffset + "," + yOffset + ")";

                }

                // Returning the generated element
                return divElement;
            },

            // Displaying the toast
            showToast: function() {
                // Creating the DOM object for the toast
                this.toastElement = this.buildToast();

                // Getting the root element to with the toast needs to be added
                var rootElement;
                if (typeof this.options.selector === "string") {
                    rootElement = document.getElementById(this.options.selector);
                } else if (this.options.selector instanceof HTMLElement || (typeof ShadowRoot !== 'undefined' && this.options.selector instanceof ShadowRoot)) {
                    rootElement = this.options.selector;
                } else {
                    rootElement = document.body;
                }

                // Validating if root element is present in DOM
                if (!rootElement) {
                    throw "Root element is not defined";
                }

                // Adding the DOM element
                var elementToInsert = Toastify.defaults.oldestFirst ? rootElement.firstChild : rootElement.lastChild;
                rootElement.insertBefore(this.toastElement, elementToInsert);

                // Repositioning the toasts in case multiple toasts are present
                Toastify.reposition();

                if (this.options.duration > 0) {
                    this.toastElement.timeOutValue = window.setTimeout(
                        function() {
                            // Remove the toast from DOM
                            this.removeElement(this.toastElement);
                        }.bind(this),
                        this.options.duration
                    ); // Binding `this` for function invocation
                }

                // Supporting function chaining
                return this;
            },

            hideToast: function() {
                if (this.toastElement.timeOutValue) {
                    clearTimeout(this.toastElement.timeOutValue);
                }
                this.removeElement(this.toastElement);
            },

            // Removing the element from the DOM
            removeElement: function(toastElement) {
                // Hiding the element
                // toastElement.classList.remove("on");
                toastElement.className = toastElement.className.replace(" on", "");

                // Removing the element from DOM after transition end
                window.setTimeout(
                    function() {
                        // remove options node if any
                        if (this.options.node && this.options.node.parentNode) {
                            this.options.node.parentNode.removeChild(this.options.node);
                        }

                        // Remove the element from the DOM, only when the parent node was not removed before.
                        if (toastElement.parentNode) {
                            toastElement.parentNode.removeChild(toastElement);
                        }

                        // Calling the callback function
                        this.options.callback.call(toastElement);

                        // Repositioning the toasts again
                        Toastify.reposition();
                    }.bind(this),
                    400
                ); // Binding `this` for function invocation
            },
        };

        // Positioning the toasts on the DOM
        Toastify.reposition = function() {

            // Top margins with gravity
            var topLeftOffsetSize = {
                top: 15,
                bottom: 15,
            };
            var topRightOffsetSize = {
                top: 15,
                bottom: 15,
            };
            var offsetSize = {
                top: 15,
                bottom: 15,
            };

            // Get all toast messages on the DOM
            var allToasts = document.getElementsByClassName("toastify");

            var classUsed;

            // Modifying the position of each toast element
            for (var i = 0; i < allToasts.length; i++) {
                // Getting the applied gravity
                if (containsClass(allToasts[i], "toastify-top") === true) {
                    classUsed = "toastify-top";
                } else {
                    classUsed = "toastify-bottom";
                }

                var height = allToasts[i].offsetHeight;
                classUsed = classUsed.substr(9, classUsed.length-1)
                // Spacing between toasts
                var offset = 15;

                var width = window.innerWidth > 0 ? window.innerWidth : screen.width;

                // Show toast in center if screen with less than or equal to 360px
                if (width <= 360) {
                    // Setting the position
                    allToasts[i].style[classUsed] = offsetSize[classUsed] + "px";

                    offsetSize[classUsed] += height + offset;
                } else {
                    if (containsClass(allToasts[i], "toastify-left") === true) {
                        // Setting the position
                        allToasts[i].style[classUsed] = topLeftOffsetSize[classUsed] + "px";

                        topLeftOffsetSize[classUsed] += height + offset;
                    } else {
                        // Setting the position
                        allToasts[i].style[classUsed] = topRightOffsetSize[classUsed] + "px";

                        topRightOffsetSize[classUsed] += height + offset;
                    }
                }
            }

            // Supporting function chaining
            return this;
        };

        // Helper function to get offset.
        function getAxisOffsetAValue(axis, options) {

            if(options.offset[axis]) {
                if(isNaN(options.offset[axis])) {
                    return options.offset[axis];
                }
                else {
                    return options.offset[axis] + 'px';
                }
            }

            return '0px';

        }

        function containsClass(elem, yourClass) {
            if (!elem || typeof yourClass !== "string") {
                return false;
            } else if (
                elem.className &&
                elem.className
                    .trim()
                    .split(/\s+/gi)
                    .indexOf(yourClass) > -1
            ) {
                return true;
            } else {
                return false;
            }
        }

        // Setting up the prototype for the init object
        Toastify.lib.init.prototype = Toastify.lib;

        // Returning the Toastify function to be assigned to the window object/module
        return Toastify;
    });
</script>