From 1afd4a18abfd96d57a3a72718695cfd8ee6cb449 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Thu, 4 Jan 2018 13:54:42 +0200
Subject: [PATCH] Added toast for copy to clipboard

Shows a toast message for 2 seconds after copying to clipboard.
---
 docs/mini/flavor.scss         |  9 +++++++++
 static-parts/index-start.html | 17 ++++++++++-------
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/docs/mini/flavor.scss b/docs/mini/flavor.scss
index 53fe7db60..c400fdde5 100644
--- a/docs/mini/flavor.scss
+++ b/docs/mini/flavor.scss
@@ -131,6 +131,9 @@ $_drawer-right: false;
 
 @import 'navigation';
 
+
+$toast-back-color:       #212121;
+
 $mark-back-color-var:         '--mrk-b-col';
 $mark-fore-color-var:         '--mrk-f-col';
 $toast-back-color-var:        '--tst-b-col';
@@ -154,6 +157,12 @@ $_include-collapse: false;
 
 @import 'contextual';
 
+.#{$toast-name} {
+  bottom: calc(var(#{$universal-margin-var}) / 2);
+  opacity: 1;
+  transition: opacity 0.3s ease-in-out;
+}
+
 /*
   Custom elements for contextual background elements, toasts and tooltips.
 */
diff --git a/static-parts/index-start.html b/static-parts/index-start.html
index 02d98001f..66e981ad9 100644
--- a/static-parts/index-start.html
+++ b/static-parts/index-start.html
@@ -14,17 +14,11 @@
     <link rel="icon" type="image/png" href="favicon.png">
     <script>
       const search = (node) => {
-        // Hide non-query-matching snippets
         Array.from(node.parentElement.parentElement.getElementsByTagName('a')).forEach(x => {
           x.style.display = x.getAttribute("href").toUpperCase().indexOf(node.value.toUpperCase()) + 1  ? '' : 'none'
         });
         Array.from( node.parentElement.parentElement.children )
-        // Filter out the hidden links
         .filter( x => !( x.tagName == 'A' && x.style.display == 'none' ) )
-        // set the display for each element based on if it's a H3
-        // If it's the last element and an H3, hide it
-        // Otherwise if it's and H3 and the next element is an H3, hide it
-        // Otherwise display it
         .forEach( ( element, index, source) => {
            element.style.display = (element.tagName == 'H3' && index + 1 == source.length ? 'none' : element.tagName == 'H3' && source[index + 1].tagName == 'H3' ? 'none'  : '')
         })
@@ -42,10 +36,19 @@
             const textArea = document.createElement("textarea");
             textArea.value = text.trim();
             document.body.appendChild(textArea);
-            console.log(textArea.innerText);
             textArea.select();
             document.execCommand("Copy");
             document.body.removeChild(textArea);
+            let tst = document.createElement('div');
+            tst.classList = 'toast';
+            tst.innerHTML = 'Snippet copied to clipboard!';
+            document.body.appendChild(tst);
+            setTimeout(function() {
+              tst.style.opacity = 0;
+              setTimeout(function() {
+                document.body.removeChild(tst);
+              },300);
+            },1700);
           }
         }, false);
       }