From 8a1f98024291bf4b222b22dc3418f7dbf9eb86b7 Mon Sep 17 00:00:00 2001
From: Zachary Klosko <kloskoz@vcu.edu>
Date: Sun, 24 May 2020 10:32:25 -0400
Subject: [PATCH] Added scroll to top button on docs

---
 docs/_data/nav.yml            |  6 ++++
 docs/_layouts/docs.html       | 47 ++++++++++++++++++++++++++++
 docs/css/creative.min.css     | 59 +++++++++++++++++++++++++++++++++++
 docs/history-templates.md     |  4 ---
 docs/playlists-smartblocks.md |  8 +++++
 docs/podcasts-webstreams.md   |  7 +++++
 docs/settings.md              | 10 ++++++
 7 files changed, 137 insertions(+), 4 deletions(-)
 delete mode 100644 docs/history-templates.md

diff --git a/docs/_data/nav.yml b/docs/_data/nav.yml
index 2c9eb8227..29fd7cfaf 100644
--- a/docs/_data/nav.yml
+++ b/docs/_data/nav.yml
@@ -32,8 +32,14 @@ docsnav:
     url: preparing-media
   - page: Scheduling Shows
     url: scheduling-shows
+  - page: Playlists and Smartblocks
+    url: playlists-smartblocks
+  - page: Podcasts and Webstreams
+    url: podcasts-webstreams
   - page: Broadcasting Live
     url: live-broadcast
+  - page: LibreTime Settings
+    url: settings
   - page: Managing Users
     url: users
   - page: Listen To Your Stream
diff --git a/docs/_layouts/docs.html b/docs/_layouts/docs.html
index 216112162..18d29d3bc 100644
--- a/docs/_layouts/docs.html
+++ b/docs/_layouts/docs.html
@@ -58,6 +58,15 @@ layout: default
       </div>
     </nav>
     
+    <!-- Scroll to Top link -->
+    
+    <a class="top-link hide" href="" id="js-top">
+      <svg class="bi bi-arrow-up-circle-fill" width="4em" height="4em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-10.646.354a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 6.207V11a.5.5 0 0 1-1 0V6.207L5.354 8.354z"/>
+      </svg>
+      <span class="screen-reader-text">Back to top</span>
+    </a>
+    
     <!-- Sidebar -->
     
     <nav id="sidebar">
@@ -103,5 +112,43 @@ layout: default
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
+    
+    <!-- For Scroll to Top text; from https://getflywheel.com/layout/sticky-back-to-top-button-tutorial/ -->
+    <script>
+      // Set a variable for our button element.
+      const scrollToTopButton = document.getElementById('js-top');
+      
+      const scrollFunc = () => {
+        // Get the current scroll value
+        let y = window.scrollY;
+         
+        // If the scroll value is greater than the window height, let's add a class to the scroll-to-top button to show it!
+        if (y > 0) {
+          scrollToTopButton.className = "top-link show";
+        } else {
+          scrollToTopButton.className = "top-link hide";
+        }
+      };
+      window.addEventListener("scroll", scrollFunc);
+      const scrollToTop = () => {
+        // Let's set a variable for the number of pixels we are from the top of the document.
+        const c = document.documentElement.scrollTop || document.body.scrollTop;
+         
+        // If that number is greater than 0, we'll scroll back to 0, or the top of the document.
+        // We'll also animate that scroll with requestAnimationFrame:
+        // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
+        if (c > 0) {
+          window.requestAnimationFrame(scrollToTop);
+          // ScrollTo takes an x and a y coordinate.
+          // Increase the '10' value to get a smoother/slower scroll!
+          window.scrollTo(0, c - c / 10);
+        }
+      };
+      // When the button is clicked, run our ScrolltoTop function above!
+      scrollToTopButton.onclick = function(e) {
+        e.preventDefault();
+        scrollToTop();
+      }
+    </script>
   </body>
 </html>
diff --git a/docs/css/creative.min.css b/docs/css/creative.min.css
index 4d6bdea03..b7fce4ebb 100755
--- a/docs/css/creative.min.css
+++ b/docs/css/creative.min.css
@@ -243,4 +243,63 @@ padding: 10px 20px;
  width: 20%;
  height: 100%;
  background-color: #fff
+}
+
+/* Scroll to Top */
+.top-link {
+  transition: all .25s ease-in-out;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  display: inline-flex;
+   
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  margin: 0 3em 3em 0;
+  border-radius: 50%;
+  padding: .25em;
+  width: 80px;
+  height: 80px;
+  background-color: #F8F8F8;
+}
+
+.show {
+  visibility: visible;
+  opacity: 1;
+}
+ 
+.hide {
+  visibility: hidden;
+  opacity: 0;
+}
+
+.screen-reader-text {
+    position: absolute;
+    clip-path: inset(50%);
+    margin: -1px;
+    border: 0;
+    padding: 0;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    word-wrap: normal !important;
+    clip: rect(1px, 1px, 1px, 1px);
+ 
+    &:focus {
+        display: block;
+        top: 5px;
+        left: 5px;
+        z-index: 100000; // Above WP toolbar
+        clip-path: none;
+        background-color: #eee;
+        padding: 15px 23px 14px;
+        width: auto;
+        height: auto;
+        text-decoration: none;
+        line-height: normal;
+        color: #444;
+        font-size: 1em;
+        clip: auto !important;
+    }
 }
\ No newline at end of file
diff --git a/docs/history-templates.md b/docs/history-templates.md
deleted file mode 100644
index f13db36b9..000000000
--- a/docs/history-templates.md
+++ /dev/null
@@ -1,4 +0,0 @@
-History Templates
------------------
-
-Coming soon.
\ No newline at end of file
diff --git a/docs/playlists-smartblocks.md b/docs/playlists-smartblocks.md
index 7209a7d95..148863595 100644
--- a/docs/playlists-smartblocks.md
+++ b/docs/playlists-smartblocks.md
@@ -3,6 +3,12 @@ layout: docs
 title: Playlists and Smartblocks
 ---
 
+> Quick Links:
+- [Playlists](#playlists)
+- [Smartblocks](#smartblocks)
+
+# Playlists {#playlists}
+
 ## Creating a new playlist
 
 You can create a new playlist on the toolbar of the **Playlists** page.
@@ -43,6 +49,8 @@ If you want to edit the playlist content or metadata later, you can find it by *
 
 ![](img/Screenshot501-Edit_playlist_240.png)
 
+# Smartblocks {#smartblocks}
+
 ## Creating a Smartblock
 
 Smart blocks are automatically filled with media files from the LibreTime library, according to the criteria that you specify. This feature is intended to save staff time, compared to selecting items for a playlist manually, and can be used to schedule shows that operate in a consistent format.
diff --git a/docs/podcasts-webstreams.md b/docs/podcasts-webstreams.md
index 996d087ee..99ff8ec45 100644
--- a/docs/podcasts-webstreams.md
+++ b/docs/podcasts-webstreams.md
@@ -2,6 +2,11 @@
 layout: docs
 title: Podcasts and Webstreams
 ---
+> Quick Links:
+- [Podcasts](#podcasts)
+- [Webstreams](#webstreams)
+
+# Podcasts   {#podcasts}
 
 The Podcasts page allows you add subscriptions to podcasts which are often used to syndicated audio files using a URL called a RSS feed. This allows your LibreTime instance to automatically download new shows from the web.
 
@@ -33,6 +38,8 @@ A search box is available to search for episodes within the feed.
 - To delete an episode from LibreTime, select the episode and click on the red trash can on the toolbar.
 - If you would like LibreTime to automatically download the latest episodes of a podcast, make sure *Download latest episodes* is checked. This can be used in conjunction with Smartblocks and Playlists to automate downloading and scheduling shows that are received via podcast feed.
 
+# Webstreams   {#webstreams}
+
 ## Adding a webstream
 A web stream URL and metadata can be added to the LibreTime library, so that a remote stream can be searched for and scheduled to be *pulled* into a show. For example, at the top of the hour your station may pull a news report from journalists working in another studio. This is a different concept from **Master Source** and **Show Source** remote streams which are *pushed* into the LibreTime playout schedule.
 
diff --git a/docs/settings.md b/docs/settings.md
index 0a7fb10b5..d2cc85eb6 100644
--- a/docs/settings.md
+++ b/docs/settings.md
@@ -93,6 +93,11 @@ their username on the right side of the menu bar.
 
 ----
 
+> Quick Links:
+- [General Settings](#general)
+- [Stream Settings](#stream)
+- [LibreTime Status](#status)
+
 # Stream Settings      {#stream}
 
 Global settings
@@ -176,6 +181,11 @@ Any connection problems between Liquidsoap and Icecast or SHOUTcast are shown on
 
 ------
 
+> Quick Links:
+- [General Settings](#general)
+- [Stream Settings](#stream)
+- [LibreTime Status](#status)
+
 # The Status page    {#status}
 
 On the **Settings** menu, the **Status** page provides an overview of the health and resource usage of the various