diff --git a/README.md b/README.md index 3311043..f51fa7e 100644 --- a/README.md +++ b/README.md @@ -11,9 +11,9 @@ Bulma's pure JavaScript extension to display toasts. Basically a Bulma's [notifi ## Options -The plugin comes with 5 options to be used as a JavaScript object: +The plugin comes with the following options: -- `message`: The actual message to be displayed. It can be a string, a template string, or a DOM node. [See examples](#examples). +- `message`: The actual message to be displayed. It can be a string, a template string, or a DOM node. [See examples](#examples). This is **required**. - `type`: Essentially a Bulma's css class. It can be `is-primary`, `is-link`, `is-info`, `is-success`, `is-warning`, `is-danger`, or any other custom class. Default is a whitesmoke background with dark text as shown [here](https://bulma.io/documentation/elements/notification). - `duration`: Duration of the notification in milliseconds. Default is `2000` milliseconds. - `position`: Position where the notification will be shown. The default is `top-right`, so if you want it to be on the top-left just add `top-left` to this option. The available options are: `top-left`, `top-center`, `top-right`, `center`, `bottom-left`, `bottom-center`, and `bottom-right`. @@ -25,10 +25,14 @@ The plugin comes with 5 options to be used as a JavaScript object: ## Install -#### [npm](https://www.npmjs.com/package/bulma-toast) +``` + npm install bulma-toast +``` + +or ``` - npm install --save bulma-toast + yarn add bulma-toast ``` ## Quick Start @@ -46,14 +50,6 @@ bulmaToast.toast({ message: 'Hello There' }) bulmaToast.toast({ message: 'General Kenobi', type: 'is-danger' }) ``` -## Change document context - -```js -bulmaToast.setDoc(window.document) -``` - -This can be changed before each toast call and can be set to eny element. - ## ES Modules ```js @@ -71,20 +67,42 @@ toast({ }) ``` -## The Defaults +## Default config A simple default object to prevent errors. Your options will be merged with these and the defaults will be used if the fields are not provided. +```json +{ + "duration": 2000, + "position": "top-right", + "closeOnClick": true, + "opacity": 1, + "single": false, + "offsetTop": 0, + "offsetBottom": 0, + "offsetLeft": 0, + "offsetRight": 0 +} +``` + +The default config can be updated using the funcion `setDefaults`. Also, it's possible to reset to the default config using `resetDefaults` + ```js - { - message: "Your message here", - duration: 2000, - position: "top-right", - closeOnClick: true, - opacity: 1 - } +bulmaToast.setDefaults({ + duration: 1000, + position: 'top-left', + closeOnClick: false, +}) +``` + +## Change document context + +```js +bulmaToast.setDoc(window.document) ``` +This can be changed before each toast call and can be set to eny element. + ## Animate Bulma Toast supports [animate.css](https://daneden.github.io/animate.css/) (and maybe others?). You MUST include [animate.css](https://daneden.github.io/animate.css/) on your document's `<head>` @@ -165,10 +183,8 @@ toast({ ## Contributing -Can you make this plugin better? Clean the mess I made? Feel free to do so! +Issues and pull requests are welcome. + +## License -1. Fork it ( https://github.com/rfoel/bulma-toast/fork ) -2. Create your feature branch (`git checkout -b my_new_feature`) -3. Commit your changes (`git commit -am 'Add some feature'`) -4. Push to the branch (`git push origin my_new_feature`) -5. Create a new Pull Request +[MIT](https://github.com/rfoell/bulma-toast/blob/master/LICENSE) diff --git a/index.html b/index.html index 8053f8f..4483101 100644 --- a/index.html +++ b/index.html @@ -107,12 +107,8 @@ </div> <div id="navbarMenuHeroC" class="navbar-menu"> <div class="navbar-end"> - <a href="#top" class="navbar-item"> - Home - </a> - <a href="#doc" class="navbar-item"> - Documentation - </a> + <a href="#top" class="navbar-item"> Home </a> + <a href="#doc" class="navbar-item"> Documentation </a> <span class="navbar-item"> <a href="https://github.com/rfoel/bulma-toast" @@ -194,9 +190,7 @@ <h1 class="title"> </a> <p> Made by - <a href="https://rfoel.com"> - Rafael Franco - </a> + <a href="https://rfoel.com"> Rafael Franco </a> </p> </footer> diff --git a/src/index.js b/src/index.js index 2953a1c..3b54f23 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,4 @@ - - const baseConfig = { - message: 'Your message here', duration: 2000, position: 'top-right', closeOnClick: true, @@ -12,13 +9,19 @@ const baseConfig = { offsetLeft: 0, offsetRight: 0, } - -let defaults = { ...baseConfig }; - +let defaults = { ...baseConfig } +let containers = {} +let doc = document const COMMON_STYLES = 'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;' -const CONTAINER_STYLES = (position, offsetTop, offsetBottom, offsetLeft, offsetRight) => { +const CONTAINER_STYLES = ( + position, + offsetTop, + offsetBottom, + offsetLeft, + offsetRight, +) => { switch (position) { case 'top-left': return `left:${offsetLeft};top:${offsetTop};text-align:left;align-items:flex-start;` @@ -37,24 +40,51 @@ const CONTAINER_STYLES = (position, offsetTop, offsetBottom, offsetLeft, offsetR } } -let containers = {} -let doc = document - -function findOrCreateContainer(position, offsetTop, offsetBottom, offsetLeft, offsetRight) { +function findOrCreateContainer( + position, + offsetTop, + offsetBottom, + offsetLeft, + offsetRight, +) { if (containers.position) return containers.position const container = doc.createElement('div') - container.setAttribute('style', COMMON_STYLES + CONTAINER_STYLES(position, offsetTop, offsetBottom, offsetLeft, offsetRight)) - + container.setAttribute( + 'style', + COMMON_STYLES + + CONTAINER_STYLES( + position, + offsetTop, + offsetBottom, + offsetLeft, + offsetRight, + ), + ) doc.body.appendChild(container) - containers.position = container - return container } +export function setDefaults(params) { + defaults = { ...baseConfig, ...params } +} + +export function resetDefaults() { + defaults = { ...baseConfig } +} + +export function setDoc(newDoc) { + for (const key in containers) { + containers[key].remove() + } + containers = {} + doc = newDoc +} + export function toast(params) { + if (!params.message) throw new Error('message is required') const options = { ...defaults, ...params } const toast = new Toast(options) @@ -77,24 +107,6 @@ export function toast(params) { container.appendChild(toast.element) } -export function setDefaults(params) { - defaults = { ...baseConfig, ...params }; -} - -export function resetDefaults() { - defaults = { ...baseConfig }; -} - -export function setDoc(newDoc) { - for (const key in containers) { - containers[key].remove() - } - - containers = {} - - doc = newDoc -} - class Toast { constructor(options) { this.element = doc.createElement('div')