(feat): toast notification on copied

Author: monab

src/js/cheatsheet.js

@@ -412,6 +412,14 @@ $(function(){
       $temp.text(element).trigger('select');
       document.execCommand("copy");
       $temp.remove();
+
+      var toastElList = [].slice.call(document.querySelectorAll('.notification .toast'))
+      var toastList = toastElList.map(function (toastEl) {
+        return new bootstrap.Toast(toastEl, {
+          autohide: true,
+          delay: 2000
+        }).show()
+      })
     }
 
     // copy attribute on icon click

src/scss/custom/_demo.scss

@@ -110,4 +110,12 @@
       text-transform: uppercase;
     }
   }
+  .notification {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    .toast{
+      width: 200px;
+    }
+  }
 }

src/template-builder/base.pug

@@ -23,12 +23,13 @@ html
           //- BEGIN: Content
           .container.bs-content
             include contents/filters.html
+            include contents/notification.html
             #grid.row
               block content
             include partials/no-items-found.html
             if showAlert
               include partials/alert-tip.html
-          // END: Content
+          //- END: Content
 
     //- BEGIN: Footer
     block footer

src/template-builder/contents/notification.html

@@ -0,0 +1,8 @@
+<div class="notification">
+  <div class="toast hide d-flex align-items-center text-white bg-info border-0" role="alert" aria-live="assertive" aria-atomic="true">
+    <div class="toast-body">
+      <span>Copied!!! 👍</span>
+    </div>
+    <button type="button" class="btn-close btn-close-white ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
+  </div>
+</div>