Add top-center position

Glagan · Sep 1, 2019 · 47f3c72 · 47f3c72
1 parent 93f16f0
commit 47f3c72
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -139,6 +139,7 @@ <h2 class="title is-2">Custom Notification</h2>
                                     <div class="select">
                                         <select name="position" id="position">
                                             <option value="top-left">top-left</option>
+                                            <option value="top-center">top-center</option>
                                             <option value="top-right" selected>top-right (default)</option>
                                             <option value="bottom-left">bottom-left</option>
                                             <option value="bottom-center">bottom-center</option>

diff --git a/src/simpleNotification.css b/src/simpleNotification.css
@@ -27,6 +27,17 @@
     }
 }
 
+@keyframes insert-top {
+    from {
+        transform: rotateX(70deg);
+        transform-origin: top;
+    }
+    to {
+        transform: rotateX(0deg);
+        transform-origin: top;
+    }
+}
+
 @keyframes insert-bottom {
     from {
         transform: rotateX(-70deg);
@@ -73,6 +84,11 @@
     top: 0;
     right: 0;
 }
+.gn-top-center {
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+}
 .gn-top-left {
     top: 0;
     left: 0;
@@ -124,6 +140,9 @@
     animation-name: insert-right;
 }
 
+.gn-top-center .gn-insert {
+    animation-name: insert-top;
+}
 .gn-bottom-center .gn-insert {
     animation-name: insert-bottom;
 }

diff --git a/src/simpleNotification.js b/src/simpleNotification.js
@@ -250,7 +250,8 @@ class SimpleNotification {
                 this.close(false);
             } else if (event.animationName == 'insert-left' ||
                 event.animationName == 'insert-right' ||
-                event.animationName == 'insert-bottom') {
+                event.animationName == 'insert-bottom' ||
+                event.animationName == 'insert-top') {
                 this.node.classList.remove('gn-insert');
             }
         });
@@ -468,7 +469,8 @@ class SimpleNotification {
         let startOnInsertFinish = event => {
             if (event.animationName == 'insert-left' ||
                 event.animationName == 'insert-right' ||
-                event.animationName == 'insert-bottom') {
+                event.animationName == 'insert-bottom' ||
+                event.animationName == 'insert-top') {
                 // Set the time before removing the notification
                 this.progressBar.style.animationDuration = [this.duration, 'ms'].join('');
                 if (document.hasFocus()) {