Merge pull request #30 from mickelsonmichael/dev

Add center positioning and transition speed options

README.md

@@ -27,9 +27,10 @@ To customize a Snackbar, pass the function a JS object with any of the following
 | status      | `string`             |                 | Possible statuses include "success", "green", "warning", "alert", "orange", "danger", "error", "red." All other values will default to the blue "info" status|
 | actions     | `array`              | `[]`            | See [Actions](#actions)|
 | fixed       | `boolean`            | `false`         | `true` indicates a `positioning:fixed;` be added to the container|
-| position    | `string`             | `"br"`          | Possible values are "br", "tr", "tl", or "bl"|
+| position    | `string`             | `"br"`          | Possible values are `"br"`, `"tr"`, `"tc"`, `"tm"`, `"bc"`, `"bm"`, `"tl"`, or `"bl"` |
 | container   | `DOMNode` or `string`| `document.body` | If a string is provided, the string is passed to `querySelector` to find the container|
-| width       | `string`             |                 | Any valid CSS value for width |
+| width       | `string`             |                 | Any valid CSS value for `width` |
+| speed       | `string` or `number` |                 | Any valid CSS value for `transition-duration` or a duration in milliseconds |
 
 ### Actions
 

dist/js-snackbar.css

@@ -17,6 +17,14 @@
     left: 0;
 }
 
+.js-snackbar-container--top-center {
+    top: 0;
+    bottom: unset;
+    left: 50%;
+    right: unset;
+    transform: translateX(-50%);
+}
+
 .js-snackbar-container--top-right {
     bottom: unset;
     right: 0;
@@ -31,6 +39,14 @@
     top: unset;
 }
 
+.js-snackbar-container--bottom-center {
+    bottom: 0;
+    right: unset;
+    left: 50%;
+    top: unset;
+    transform: translateX(-50%);
+}
+
 .js-snackbar-container--fixed {
     position: fixed;
 }
@@ -43,10 +59,12 @@
     overflow: hidden;
     height: auto;
     margin: 0;
-    transition: all ease .5s;
     border-radius: 3px;
     display: flex;
     min-width: auto;
+    transition-property: all;
+    transition-timing-function: ease;
+    transition-duration: 0.5s;
 }
 
 .js-snackbar {

dist/js-snackbar.js

@@ -37,7 +37,8 @@ function SnackBar(userOptions) {
       fixed: userOptions?.fixed ?? false,
       position: userOptions?.position ?? "br",
       container: userOptions?.container ?? document.body,
-      width: userOptions?.width
+      width: userOptions?.width,
+      speed: userOptions?.speed
     };
   }
 
@@ -110,6 +111,7 @@ function SnackBar(userOptions) {
       outerElement.style.marginTop = "0px";
       outerElement.style.marginBottom = "0px";
       setWidth(outerElement);
+      setSpeed(outerElement);
       return outerElement;
     }
 
@@ -218,6 +220,22 @@ function SnackBar(userOptions) {
       if (!_Options.width) return;
       element.style.width = _Options.width;
     }
+
+    function setSpeed(element) {
+      const {
+        speed
+      } = _Options;
+
+      switch (typeof speed) {
+        case "number":
+          element.style.transitionDuration = speed + "ms";
+          break;
+
+        case "string":
+          element.style.transitionDuration = speed;
+          break;
+      }
+    }
   }
 
   function _getPositionClass() {
@@ -231,6 +249,14 @@ function SnackBar(userOptions) {
       case "tr":
         return "js-snackbar-container--top-right";
 
+      case "tc":
+      case "tm":
+        return "js-snackbar-container--top-center";
+
+      case "bc":
+      case "bm":
+        return "js-snackbar-container--bottom-center";
+
       default:
         return "js-snackbar-container--bottom-right";
     }