Adds demo page

codewithkyle · Jul 5, 2019 · e89b439 · e89b439
1 parent ce974c7
commit e89b439
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 2 deletions.
diff --git a/Notify.js b/Notify.js
diff --git a/Notify.js.map b/Notify.js.map
diff --git a/docs/assets/Notify.js b/docs/assets/Notify.js
diff --git a/docs/index.html b/docs/index.html
@@ -28,6 +28,8 @@
             overflow-y: scroll;
             overflow-x: hidden;
             display: block;
+            font-family: sans-serif;
+            font-size: 16px;
         }
 
         main{
@@ -52,9 +54,10 @@
             text-transform: uppercase;
             background-color: rgb(106, 90, 205);
             outline: none;
+            font-weight: 600;
             border: none;
             cursor: pointer;
-            transition: all 150ms ease;
+            transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
             height: 36px;
             color: #ffffff;
             line-height: 36px;
@@ -69,6 +72,86 @@
             transform: translateY(2px);
             box-shadow: 0 1px 3px rgba(0,0,0,0.15);
         }
+
+        p{
+            padding: 0;
+            margin: 0;
+        }
+
+        user-notification{
+            position: fixed;
+            bottom: 32px;
+            left: 50%;
+            transform: translateX(-50%) scale(0.87);
+            opacity: 0;
+            transform-origin: center bottom;
+            padding: 0 16px;
+            border-radius: 4px;
+            min-width: 340px;
+            max-width: calc(100vw - 64px);
+            box-shadow: 0 1px 3px rgba(0,0,0, 0.15), 0 2px 6px rgba(0,0,0, 0.15);
+            animation: popNotification 4000ms cubic-bezier(0.0, 0.0, 0.2, 1);
+            background-color: rgb(51, 51, 51);
+            color: rgba(255,255,255, 0.87);
+            font-size: 14px;
+            line-height: 48px;
+            height: 48px;
+            z-index: 9999;
+        }
+
+        user-notification.is-infinite{
+            animation: popInNotification 150ms cubic-bezier(0.0, 0.0, 0.2, 1) forwards;
+        }
+
+        user-notification button{
+            display: inline-block;
+            height: 36px;
+            line-height: 34px;
+            margin: 0;
+            padding: 0 16px;
+            border: none;
+            outline: none;
+            box-shadow: none;
+            border-radius: 2px;
+            position: absolute;
+            font-size: 14px;
+            text-transform: uppercase;
+            user-select: none;
+            top: 6px;
+            right: 6px;
+            transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
+        }
+
+        user-notification button:active{
+            transform: none;
+        }
+
+        @keyframes popInNotification{
+            from{
+                transform: translateX(-50%) scale(0.87);
+                opacity: 0;
+            }
+            to{
+                transform: translateX(-50%) scale(1);
+                opacity: 1;
+            }
+        }
+
+        @keyframes popNotification{
+            0%{
+                transform: translateX(-50%) scale(0.87);
+                opacity: 0;
+            }
+            3.75%, 96.25%{
+                transform: translateX(-50%) scale(1);
+                opacity: 1;
+            }
+            100%{
+                transform: translateX(-50%) scale(1);
+                animation-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
+                opacity: 0;
+            }
+        }
     </style>
 </head>
 <body>
@@ -79,5 +162,26 @@
         </div>
     </main>
     <script src="assets/Notify.js" defer="defer"></script>
+    <script defer="defer">
+        const sample1 = document.body.querySelector('.js-sample-1');
+        const sample2 = document.body.querySelector('.js-sample-2');
+
+        sample1.addEventListener('click', ()=>{
+            new exports['Notify'].prototype.constructor({
+                message: 'Sample snackbar notification message'
+            });
+        });
+
+        sample2.addEventListener('click', ()=>{
+            new exports['Notify'].prototype.constructor({
+                message: 'Sample interactive snackbar notification message',
+                duration: Infinity,
+                action: {
+                    label: 'Close',
+                    callback: ()=>{}
+                }
+            }); 
+        });
+    </script>
 </body>
 </html>
diff --git a/src/Notify.ts b/src/Notify.ts
@@ -99,6 +99,7 @@ export class Notify{
         const button = document.body.querySelector('user-notification button');
         if(button){
             button.addEventListener('click', this.handleAction);
+            notification.style.paddingRight = `${ button.scrollWidth + 12 }px`;
         }
     }
 }