Positioning (#26)

Introduces positioning for top-center and bottom-center.

README.md

@@ -17,7 +17,7 @@ Modify the global variables to apply specific rules/styles to all your toasts.
 
 ```javascript
 $.toastDefaults = {
-    position: 'top-right', /** top-left/top-right/bottom-left/bottom-right - Where the toast will show up **/
+    position: 'top-right', /** top-left/top-right/top-center/bottom-left/bottom-right/bottom-center - Where the toast will show up **/
     dismissible: true, /** true/false - If you want to show the button to dismiss the toast manually **/
     stackable: true, /** true/false - If you want the toasts to be stackable **/
     pauseDelayOnHover: true, /** true/false - If you want to pause the delay of toast when hovering over the toast **/

example/index.html

@@ -163,9 +163,9 @@ <h3 class="text-center">A jQuery plugin for Bootstrap 4.2+</h3>
             'warning': 'It\'s all about to go wrong',
             'error': 'It all went wrong.'
         },
-        POSITION = ['top-right', 'top-left', 'bottom-right', 'bottom-left'];
+        POSITION = ['top-right', 'top-left', 'top-center', 'bottom-right', 'bottom-left', 'bottom-center'];
 
-    $.toastDefaults.position = POSITION[Math.floor(Math.random() * POSITION.length)];
+    $.toastDefaults.position = 'bottom-center';
     $.toastDefaults.dismissible = true;
     $.toastDefaults.stackable = true;
     $.toastDefaults.pauseDelayOnHover = true;

package.json

@@ -1,6 +1,6 @@
 {
     "name": "bs4-toast",
-    "version": "1.0.0",
+    "version": "1.1.0",
     "description": "Toast - A Bootstrap 4.2+ jQuery plugin for the toast component",
     "main": "dist/toast.min.js",
     "repository": {

src/css/toast.css

@@ -1,7 +1,7 @@
 /**
  * @author Script47 (https://github.com/Script47/Toast)
  * @description Toast - A Bootstrap 4.2+ jQuery plugin for the toast component
- * @version 1.0.0
+ * @version 1.1.0
  **/
 .toast-container {
     position: fixed;
@@ -19,6 +19,12 @@
     left: 0;
 }
 
+.top-center {
+    transform: translateX(-50%);
+    top: 0;
+    left: 50%;
+}
+
 .bottom-right {
     right: 0;
     bottom: 0;
@@ -29,6 +35,12 @@
     bottom: 0;
 }
 
+.bottom-center {
+    transform: translateX(-50%);
+    bottom: 0;
+    left: 50%;
+}
+
 .toast-container > .toast {
     min-width: 150px;
     background: transparent;

src/js/toast.js

@@ -1,7 +1,7 @@
 /**
  * @author Script47 (https://github.com/Script47/Toast)
  * @description Toast - A Bootstrap 4.2+ jQuery plugin for the toast component
- * @version 1.0.0
+ * @version 1.1.0
  **/
 (function ($) {
     const TOAST_CONTAINER_HTML = `<div id="toast-container" class="toast-container" aria-live="polite" aria-atomic="true"></div>`;
@@ -29,7 +29,7 @@
     function render(opts) {
         /** No container, create our own **/
         if (!$('#toast-container').length) {
-            const position = ['top-right', 'top-left', 'bottom-right', 'bottom-left'].includes($.toastDefaults.position) ? $.toastDefaults.position : 'top-right';
+            const position = ['top-right', 'top-left', 'top-center', 'bottom-right', 'bottom-left', 'bottom-center'].includes($.toastDefaults.position) ? $.toastDefaults.position : 'top-right';
 
             $('body').prepend(TOAST_CONTAINER_HTML);
             $('#toast-container').addClass(position);