https://github.com/foxt/toaster
The simple and modern toast library for JS
https://github.com/foxt/toaster
Last synced: 3 months ago
JSON representation
The simple and modern toast library for JS
- Host: GitHub
- URL: https://github.com/foxt/toaster
- Owner: foxt
- License: gpl-3.0
- Created: 2019-06-12T08:55:25.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-06-12T11:56:21.000Z (almost 6 years ago)
- Last Synced: 2025-01-02T23:24:55.415Z (5 months ago)
- Language: JavaScript
- Homepage: https://thelmgn.com/Toaster
- Size: 86.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Toaster
The simple and modern toast library for JS
*https://thelmgn.com/Toaster*
---
# CDN
toaster.js: https://cdn.jsdelivr.net/gh/thelmgn/toaster/toaster.js (minified: https://cdn.jsdelivr.net/gh/thelmgn/toaster/toaster.min.js)
bulma.toaster.js: https://cdn.jsdelivr.net/gh/thelmgn/toaster/styles/bulma.toaster.js (minified: https://cdn.jsdelivr.net/gh/thelmgn/toaster/styles/bulma.toaster.min.js)
---
# Toaster Documentation
## 'Toast' class
This class represents a toast.
### Properties
|Property|Type|Default|Description |
|---|---|---|---|
|title|string|""|The title of the toast|
|description|string|""|The main information of the toast|
|style|string|"fallback"|The style. See the styles documentation below|
|timeout|int|5000|The time it takes for the toast to disappear, in milliseconds. 0, -1 or any < 1 value will make the toast never disappear|
|closable|bool|true|Decides if the toast will show a close button on the notification|
|dom|HTMLDivElement|undefined|The DOM element the toast is contained in|
### Functions
#### toast.show(options)
This creates the DOM element and then shows the toast, The show also allows an options object and will be applied like the constructor. This isn't recommended.
#### constructor(options)
The constructor takes an object, and applies the configuration to the toast object. For example, the following code will create a toast object with the title 'Hi'
```js
new Toast({
title: "Hello, world!",
})
```
## _toaster
This object contains the valid styles and the breadbag.
### _toaster.styles
This is an object of functions, that take one argument that is simply a toast object, and return a HTMLDivElement. By default, toaster comes with no styles, except the basic 'fallback' demo style. If you would like to create your own style, load a JS file after Toaster with the following code, which is the fallback style. Modify however you see fit. **Styles should not have any positioning code, this should be applied to the breadbag**
```js
// Create style function for Toaster.
_toaster.styles["my_style"] = function(toast) {
// Create the DOM element
var dom = document.createElement("div");
// Give it a class
dom.className = "toaster fallback-toast"
// Give it a black background and white text colour
dom.style = "background: #000;color: #fff"
// Set the innerHTML of the toast
dom.innerHTML = `
${toast.title}
${toast.description}`
// Make the toast closable
if (toast.closable) {
// Add close button
dom.innerHTML += "Close"
// Make it do something
dom.querySelector("a#toastClose").onclick = function() {
dom.remove()
}
}
// Return the DOM element back to Toaster
return dom
}
```
### _toaster.breadbag
The breadbag is the container of all the toasts. It is a HTMLDivElement, and contains the placement of the toasts. To move it, run the following code after loading Toaster.
```js
// Make sure the breadbag exists before trying to move it
_toaster.createBreadBag()
// Move it to top left
_toaster.breadbag.style = "position: fixed;top: 0;right: 0;"
```