ToastE Notifier is a vanilla JS version of the existing jquery-toast-plugin made to comply with strict Content-Secrity-Policies and reduce dependencies.
All existing functionality found within the jquery-toast-plugin has been transpliled to pure JS.
As part of the transpiling, I included some minor changes, including:
-
Usage of
HTMLElement.innerHtmlandHTMLElement.outerHtmlto prevent potential XSS attacks -
SASS powered stylesheets with default integration for integrated theming with a sites pre-existing SASS
-
You can install the plugin via
npmnpm install --save toaste-notification
Or directly download the repository and place the content of
distwherever you can access them. -
Include the CSS and JS files.
-
Simply do
new ToastENotifier('Toast message to be shown')Of course it would be the world's simplest toast message but believe me you can do a lot more with the options.
To be written
-
Show different types of toasts i.e. informational, warning, errors and success
-
Custom toast background color and text color
-
Ability to hack the CSS to add your own thing
-
Text can be provided in the form of
- Array (It's elements will be changed to an un ordered list)
- Simple text
- HTML
-
Events support i.e.
beforeHide,afterHidden,beforeShow,afterShown -
FadeandSlideshow/hide transitions support (More to come) -
Supports showing the loader for the toast
- You can position the toast, wherever you want there is support for
top-left,top-rightbottom-leftand bottom-right,top-center,bottom-centerandmid-center...sighs! That's a whole lot of options, isn't it? No, you say. Ok then here is the most exciting thing, you can also introduce your own positioning just by passing a simple js object containing{ top: - , bottom: -, left: -, right: - }
- You can position the toast, wherever you want there is support for
-
Ability to add sticky toast
-
Optional stack length can be defined (i.e. maximum number of toasts that can be shown at once)
Please report any bugs or features you would like added.
MIT © Jacob Darker