From f8a55959fe5047ced0392b000b9f070bb9fc684e Mon Sep 17 00:00:00 2001
From: Avris <andre@avris.it>
Date: Fri, 4 Sep 2020 17:51:26 +0200
Subject: [PATCH] #42 scroll up button

---
 components/ScrollButton.vue | 47 +++++++++++++++++++++++++++++++++++++
 pages/_.vue                 |  2 ++
 pages/index.vue             |  2 ++
 pages/literatura.vue        |  2 ++
 pages/neutratywy.vue        |  2 ++
 5 files changed, 55 insertions(+)
 create mode 100644 components/ScrollButton.vue

diff --git a/components/ScrollButton.vue b/components/ScrollButton.vue
new file mode 100644
index 00000000..6095da66
--- /dev/null
+++ b/components/ScrollButton.vue
@@ -0,0 +1,47 @@
+<template>
+    <div class="scroll-btn" @click.prevent="scroll" :style="`opacity: ${shown ? 1 : 0}`">
+        <SquareButton link="#" :colour="colour">
+            <Icon v="arrow-alt-up"/>
+        </SquareButton>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            colour: { 'default': null },
+        },
+        data() {
+            return {
+                shown: false,
+            }
+        },
+        mounted() {
+            if (process.client) {
+                this.updateShown();
+                window.addEventListener('scroll', _ => { this.updateShown(); });
+            }
+        },
+        methods: {
+            scroll() {
+                document.body.scrollTop = 0;
+                document.querySelector('html').scrollTop = 0;
+            },
+            updateShown() {
+                const st = document.body.scrollTop || document.querySelector('html').scrollTop;
+                this.shown = st > 300;
+            }
+        },
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import "assets/style";
+
+    .scroll-btn {
+        position: fixed;
+        bottom: $spacer;
+        right: $spacer;
+        transition: all .5s ease-in-out;
+    }
+</style>
diff --git a/pages/_.vue b/pages/_.vue
index 1f88c6f6..f66b15d6 100644
--- a/pages/_.vue
+++ b/pages/_.vue
@@ -116,6 +116,8 @@
             <About/>
             <Homepage align="center"/>
         </section>
+
+        <ScrollButton/>
     </div>
 </template>
 
diff --git a/pages/index.vue b/pages/index.vue
index 2de12a5c..22034c3f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -251,6 +251,8 @@
                 </li>
             </ul>
         </section>
+
+        <ScrollButton/>
     </div>
 </template>
 
diff --git a/pages/literatura.vue b/pages/literatura.vue
index 2a7c8a6c..bf67474d 100644
--- a/pages/literatura.vue
+++ b/pages/literatura.vue
@@ -106,6 +106,8 @@
                 </li>
             </ul>
         </section>
+
+        <ScrollButton/>
     </div>
 </template>
 
diff --git a/pages/neutratywy.vue b/pages/neutratywy.vue
index 598ebbbf..e53c5a41 100644
--- a/pages/neutratywy.vue
+++ b/pages/neutratywy.vue
@@ -229,6 +229,8 @@
         <Separator icon="plus" colour="nouns"/>
 
         <NounSubmitForm ref="form" :secret="secret"/>
+
+        <ScrollButton colour="#0F3974"/>
     </div>
 </template>