fix: update lib

rfoel · Nov 27, 2020 · e2f2c04 · e2f2c04
1 parent 129a606
commit e2f2c04
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 68 deletions.
diff --git 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
@@ -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
@@ -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')