From dfb13e29552d93a78545e05a5c792ed8f45bea5a Mon Sep 17 00:00:00 2001
From: Chris Kankiewicz <Chris@ChrisKankiewicz.com>
Date: Mon, 17 Feb 2020 11:31:15 -0700
Subject: [PATCH] Moved scroll to top javascript code into the vue mounted
 method

---
 app/resources/js/app.js                 | 20 ++++++++++----------
 app/views/components/scroll-to-top.twig |  4 ++--
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/app/resources/js/app.js b/app/resources/js/app.js
index 4820962..b250184 100644
--- a/app/resources/js/app.js
+++ b/app/resources/js/app.js
@@ -3,7 +3,7 @@ window.Vue = require('vue');
 Vue.component('file-info-modal', require('./components/file-info-modal.vue').default);
 
 const app = new Vue({
-    el: "#app",
+    el: '#app',
     data: function() {
         return {
             search: ''
@@ -19,17 +19,17 @@ const app = new Vue({
     },
     mounted: function() {
         window.addEventListener('keyup', e => e.keyCode == 191 && this.$refs.searchInput.focus());
+
+        let scrollToTop = this.$refs.scrollToTop;
+        window.addEventListener('scroll', function() {
+            if (window.scrollY > 10) {
+                scrollToTop.classList.remove('hidden');
+            } else {
+                scrollToTop.classList.add('hidden');
+            }
+        });
     }
 });
 
 let hljs = require('highlight.js');
 hljs.initHighlightingOnLoad();
-
-let link = document.getElementById('scroll-to-top');
-window.addEventListener('scroll', function() {
-    if (window.scrollY > 10) {
-        link.classList.remove('hidden');
-    } else {
-        link.classList.add('hidden');
-    }
-});
diff --git a/app/views/components/scroll-to-top.twig b/app/views/components/scroll-to-top.twig
index b5393d7..f562ff8 100644
--- a/app/views/components/scroll-to-top.twig
+++ b/app/views/components/scroll-to-top.twig
@@ -1,10 +1,10 @@
 <div class="fixed bottom-0 left-0 right-0 pointer-events-none">
     <div class="container flex justify-end mx-auto px-4 py-10">
-        <a id="scroll-to-top"
+        <button id="scroll-to-top" ref="scrollToTop"
             class="flex justify-center items-center w-12 h-12 right-0 rounded-full shadow-lg bg-blue-600 text-white cursor-pointer pointer-events-auto hover:bg-blue-700 hidden"
             onclick="window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });" title="Scroll to Top"
         >
             <i class="fas fa-arrow-up fa-lg"></i>
-        </a>
+        </button>
     </div>
 </div>