From 8e8bb6d148a42ac1c625701b1f1a2504affa87bd Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Tue, 9 Jan 2018 14:50:18 +0200
Subject: [PATCH] Updated web script

Used emoji for clipboard icons, added persistent scroll to top button with proper smooth scrolling.
---
 docs/mini/flavor.scss         | 17 +++++++++++++++++
 scripts/web.js                |  4 ++--
 static-parts/index-end.html   |  2 +-
 static-parts/index-start.html | 10 ++++++++++
 4 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/docs/mini/flavor.scss b/docs/mini/flavor.scss
index b3e3f11c0..59775783e 100644
--- a/docs/mini/flavor.scss
+++ b/docs/mini/flavor.scss
@@ -437,3 +437,20 @@ code[class*="language-"]::selection, code[class*="language-"] ::selection {
 .token.entity {
   cursor: help;
 }
+
+button.scroll-to-top {
+  border-radius: 100%;
+  font-size: 1.5rem;
+  line-height: 1;
+  box-sizing: border-box;
+  width: 2.75rem;
+  height: 2.75rem;
+  position: fixed;
+  bottom: 1rem;
+  right: 2rem;
+  background: var(#{$back-color-var});
+  box-shadow: 0 .25rem .25rem 0 rgba(0,0,0,0.125),0 .125rem .125rem -.125rem rgba(0,0,0,0.25);
+  &:hover, &:focus {
+    background: var(#{$secondary-back-color-var});
+  }
+}
diff --git a/scripts/web.js b/scripts/web.js
index 6b86c7683..36864f989 100644
--- a/scripts/web.js
+++ b/scripts/web.js
@@ -169,7 +169,7 @@ try {
             .replace(/<\/h3>/g, `${taggedSnippet[1].includes('advanced')?'<mark class="tag">advanced</mark>':''}</h3>`)
             .replace(/<pre><code class="language-js">([^\0]*?)<\/code><\/pre>/gm, (match, p1) => `<pre class="language-js">${Prism.highlight(unescapeHTML(p1), Prism.languages.javascript)}</pre>`)
             .replace(/<\/pre>\s+<pre/g, '</pre><label class="collapse">Show examples</label><pre') +
-          '<button class="primary clipboard-copy"><img src="clipboard.svg" alt="clipboard">&nbsp;Copy to clipboard</button>' +
+          '<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button>' +
           '</div></div>';
     } else {
       output += md
@@ -185,7 +185,7 @@ try {
             .replace(/<\/h3>/g, '</h3><div class="section double-padded">')
             .replace(/<pre><code class="language-js">([^\0]*?)<\/code><\/pre>/gm, (match, p1) => `<pre class="language-js">${Prism.highlight(unescapeHTML(p1), Prism.languages.javascript)}</pre>`)
             .replace(/<\/pre>\s+<pre/g, '</pre><label class="collapse">Show examples</label><pre') +
-          '<button class="primary clipboard-copy"><img src="clipboard.svg" alt="clipboard">&nbsp;Copy to clipboard</button>' +
+          '<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button>' +
           '</div></div>';
     }
   }
diff --git a/static-parts/index-end.html b/static-parts/index-end.html
index d7aef2012..a977f3cb7 100644
--- a/static-parts/index-end.html
+++ b/static-parts/index-end.html
@@ -1,6 +1,6 @@
+        <button class="scroll-to-top">&uarr;</button>
         <footer>
           <p style="display: inline-block;"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a> license.<br/>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a>.<br/>Ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed by <a href="https://opensource.org/licenses/MIT">The MIT License</a><br/>Built with the <a href="https://minicss.org">mini.css framework</a>.</p>
-          <a href="#top"><span style="display: inline-block;float: right;padding-right: 2em;">Back to top</span></a>
         </footer>
       </main>
     </div>
diff --git a/static-parts/index-start.html b/static-parts/index-start.html
index 00bbe441b..e5c0702d1 100644
--- a/static-parts/index-start.html
+++ b/static-parts/index-start.html
@@ -27,6 +27,13 @@
           x.style.display = matchingTags.includes(x.innerText.toLowerCase()) ? '' : 'none';
         })
       }
+      function scrollToTop(){
+        const c = document.querySelector('main').scrollTop;
+        if (c > 0) {
+          window.requestAnimationFrame(scrollToTop);
+          document.querySelector('main').scrollTo(0, c - c / 4);
+        }
+      };
       function loader() {
         registerClickListener();
       }
@@ -54,6 +61,9 @@
               },300);
             },1700);
           }
+          else if (event.target.classList.contains('scroll-to-top')){
+            scrollToTop();
+          }
         }, false);
       }
     </script>