From c0b6e3543029145c20b798295b6d36386260949a Mon Sep 17 00:00:00 2001
From: CAI79 <alex.chebykin@gmail.com>
Date: Sat, 29 Jun 2019 20:22:16 +0300
Subject: [PATCH] Back to top button added

---
 public/index.html            |   3 +-
 src/App.vue                  | 126 +++++++++++++++++++----------------
 src/components/Authors.vue   |   8 ++-
 src/components/Book.vue      |  33 ++++-----
 src/components/Books.vue     |  12 ++--
 src/main.js                  |  24 +++----
 src/plugins/i18n.js          |   4 +-
 src/plugins/vuetify.js       |   8 +--
 src/registerServiceWorker.js |  56 ++++++++--------
 9 files changed, 148 insertions(+), 126 deletions(-)
diff --git a/public/index.html b/public/index.html
index 6bb6643..f1c3361 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,7 +11,8 @@
   </head>
   <body>
     <noscript>
-      <strong>Извините, данное приложение не работает без JavaScript.</strong>
+      <strong>Извините, данное приложение не работает без JavaScript.</strong><br>
+      <strong>You need JavaScript to run this application.</strong>
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
diff --git a/src/App.vue b/src/App.vue
index 6066cad..8d12548 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -155,18 +155,33 @@
                 </v-list-tile>
             </v-list>
         </v-card>
+        <v-fab-transition>
+            <v-btn
+                class="to-top-button"
+                v-show="scrolled"
+                color="blue"
+                @click="scrollToTop"
+                dark
+                fixed
+                bottom
+                right
+                fab
+            >
+                <v-icon>keyboard_arrow_up</v-icon>
+            </v-btn>
+        </v-fab-transition>
         <MessageDialog ref="MessageDialog" />
     </v-app>
 </template>
 
 <script>
-    import Authors from './components/Authors'
-    import Books from './components/Books'
-    import Book from './components/Book'
-    import MessageDialog from './components/MessageDialog'
+    import Authors from "./components/Authors"
+    import Books from "./components/Books"
+    import Book from "./components/Book"
+    import MessageDialog from "./components/MessageDialog"
 
     export default {
-        name: 'App',
+        name: "App",
 
         components: {
             Authors,
@@ -179,56 +194,51 @@
             return {
                 appNet: "CAINet",
                 appName: "Аудиотека",
+                
                 activeTab: null,
                 autoBookmark: false,
                 darkTheme: false,
                 isLoading: false,
                 isMounted: false,
-                locale: { flag: 'ru', language: 'ru', title: 'Русский' },
+                locale: { flag: "ru", language: "ru", title: "Русский" },
                 locales: [
-                    { flag: 'us', language: 'en', title: 'English' },
-                    { flag: 'ru', language: 'ru', title: 'Русский' }
+                    { flag: "us", language: "en", title: "English" },
+                    { flag: "ru", language: "ru", title: "Русский" }
                 ],
+                scrolled: false,
                 volume: 5//,
                 //locale: []
             }
         },
 
+        created () {
+            window.addEventListener("scroll", this.onScroll);
+        },
+        
         mounted () {
             this.isMounted = true;
-            this.darkTheme = localStorage.darkTheme ? JSON.parse(localStorage.darkTheme) : false;
-            this.autoBookmark = localStorage.autoBookmark ? JSON.parse(localStorage.autoBookmark) : false;
-            this.volume = localStorage.volume ? JSON.parse(localStorage.volume) : 5;
+            this.darkTheme = localStorage.darkTheme 
+                ? JSON.parse(localStorage.darkTheme) 
+                : false;
+            this.autoBookmark = localStorage.autoBookmark 
+                ? JSON.parse(localStorage.autoBookmark) 
+                : false;
+            this.volume = localStorage.volume 
+                ? JSON.parse(localStorage.volume) 
+                : 5;
 
             this.isLoading = true;
 
-            let userLocale = navigator.language || navigator.userLanguage;
+            //let userLocale = navigator.language || navigator.userLanguage;
 
-            /*
-            this.axios.get("locales/locales.json")
-                .then(response => {
-                    let localeLoaded = false;
-                    response.data.forEach(element => {
-                        if (element.code == userLocale.toLowerCase()) {
-                            this.loadLocale(element.file);
-                            localeLoaded = true;
-                        }
-                    });
-                    if (!localeLoaded) { this.loadLocale("en"); }
-                })
-                .catch(error => {
-                    console.log(error);
-                    this.showMessage("Error", error);
-                });
-            */
             this.axios.get("config.json")
                 .then(response => {
                     this.appNet = response.data.AppNet;
                     this.appName = response.data.AppName;
                 })
                 .catch(error => {
-                    console.log(error);
                     this.showMessage(this.$t("error"), error);
+                    console.error(error);
                 });
 
             this.axios.get("lib/authors.json")
@@ -237,50 +247,52 @@
                     this.isLoading = false;
                 })
                 .catch(error => {
-                    console.log(error);
                     this.showMessage(this.$t("error"), error);
+                    console.error(error);
                 });
         },
 
+        destroyed () {
+            window.removeEventListener("scroll", this.onScroll);
+        },
+
         computed: {
             authorName () {
-                return !this.isMounted ? "" : this.$refs.Book.authorName;
+                return this.isMounted ? this.$refs.Book.authorName : "";
             },
 
             bookOpened () {
-                return !this.isMounted ? false : this.$refs.Book.items.length > 0;
+                return this.isMounted ? this.$refs.Book.items.length > 0 : false;
             },
 
             bookTitle () {
-                return !this.isMounted ? "" : this.$refs.Book.bookTitle;
+                return this.isMounted ? this.$refs.Book.bookTitle : "";
             },
 
             currentChapter () {
-                let curChapter = !this.isMounted
-                    ? ""
-                    : this.$refs.Book.items[this.$refs.Book.currentChapter];
+                let curChapter = this.isMounted ? this.$refs.Book.items[this.$refs.Book.currentChapter] : "";
                 return curChapter ? curChapter.title : "";
             },
 
             currentTime () {
-                return !this.isMounted ? "00:00" : this.$refs.Book.currentTime;
+                return this.isMounted ? this.$refs.Book.currentTime : "00:00";
             },
 
             duration () {
-                return !this.isMounted ? "00:00" : this.$refs.Book.duration;
+                return this.isMounted ? this.$refs.Book.duration : "00:00";
             },
 
             isOff () {
-                return !this.isMounted ? true : this.$refs.Book.isOff;
+                return this.isMounted ? this.$refs.Book.isOff : true;
             },
 
             isPlaying () {
-                return !this.isMounted ? false : this.$refs.Book.isPlaying;
+                return this.isMounted ? this.$refs.Book.isPlaying : false;
             },
 
             progress: {
                 get () {
-                    return !this.isMounted ? "" : this.$refs.Book.progress;
+                    return this.isMounted ? this.$refs.Book.progress : "";
                 },
 
                 set (newVal) {
@@ -307,20 +319,13 @@
                 return hash.toString(CryptoJS.enc.Hex);
             },
 
-            /*
-            loadLocale (langFile) {
-                this.axios.get("locales/" + langFile)
-                    .then(response => {
-                        this.locale = response.data;
-                    })
-                    .catch(error => {
-                        console.log(error);
-                        this.showMessage("Error", error);
-                    });
+            nextChapter () { 
+                this.$refs.Book.nextChapter(); 
             },
-            */
 
-            nextChapter () { this.$refs.Book.nextChapter(); },
+            onScroll () { 
+                this.scrolled = window.scrollY > 0; 
+            },
 
             openBook (val) {
                 this.$refs.Book.authorName = this.$refs.Books.authorName;
@@ -348,8 +353,8 @@
                     })
                     .catch(error => {
                         this.isLoading = false;
-                        console.log(error);
                         this.showMessage(this.$t("error"), error);
+                        console.error(error);
                     });
 
                 this.activeTab = 2;
@@ -368,8 +373,8 @@
                     })
                     .catch(error => {
                         this.isLoading = false;
-                        console.log(error);
                         this.showMessage(this.$t("error"), error);
+                        console.error(error);
                     });
             },
 
@@ -392,6 +397,14 @@
                 if (!silent) { this.showMessage(this.$t("information"), this.$t("bookmarkRemoved")); }
             },
 
+            scrollToTop () {
+                window.scrollTo({
+                    top: 0,
+                    left: 0,
+                    behavior: "smooth"
+                });
+            },
+            
             setBookmark (silent = true) {
                 if (this.$refs.Book.items.length == 0) { return; }
 
@@ -466,4 +479,5 @@
         width: 100%;
         margin: 0 0 -25px 0;
     }
+    .to-top-button { margin-bottom: 80px; }
 </style>
diff --git a/src/components/Authors.vue b/src/components/Authors.vue
index 66a8eb6..d6cdfd5 100644
--- a/src/components/Authors.vue
+++ b/src/components/Authors.vue
@@ -48,9 +48,11 @@
 
 <script>
     export default {
-        data: () => ({
-            items: []
-        }),
+        data () {
+            return {
+                items: []                
+            }
+        },
 
         methods: {
             authorClick (val) { this.$emit("author_selected", val); }
diff --git a/src/components/Book.vue b/src/components/Book.vue
index 2d58ea4..0b6344c 100644
--- a/src/components/Book.vue
+++ b/src/components/Book.vue
@@ -60,20 +60,22 @@
 
 <script>
     export default {
-        data: () => ({
-            audioElement: null,
-            authorName: "",
-            authorImg: "",
-            bookImg: "",
-            bookTitle: "",
-            currentChapter: 0,
-            currentTime: "00:00",
-            duration: "00:00",
-            items: [],
-            progress: 0,
-            status: 0, //this.statuses.stopped,
-            volume: 5
-        }),
+        data () {
+            return {
+                audioElement: null,
+                authorName: "",
+                authorImg: "",
+                bookImg: "",
+                bookTitle: "",
+                currentChapter: 0,
+                currentTime: "00:00",
+                duration: "00:00",
+                items: [],
+                progress: 0,
+                status: 0, //this.statuses.stopped,
+                volume: 5                
+            }
+        },
 
         computed: {
             isOff () {
@@ -94,7 +96,8 @@
         },
 
         watch: {
-            volume (val) { this.updateVolume(); }
+            //volume (val) { this.updateVolume(); }
+            volume () { this.updateVolume(); }
         },
 
         methods: {
diff --git a/src/components/Books.vue b/src/components/Books.vue
index 42e0267..80e9833 100644
--- a/src/components/Books.vue
+++ b/src/components/Books.vue
@@ -67,11 +67,13 @@
 
 <script>
     export default {
-        data: () => ({
-            authorName: "",
-            authorImg: "",
-            items: []
-        }),
+        data () {
+            return {
+                authorName: "",
+                authorImg: "",
+                items: []                
+            }
+        },
 
         methods: {
             bookClick (val) {
diff --git a/src/main.js b/src/main.js
index 36d7590..7887a13 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,14 +7,14 @@
  * @version   0.9
  */
 
-import '@mdi/font/css/materialdesignicons.css'
-import Vue from 'vue'
-import Axios from 'axios'
-import VueAxios from 'vue-axios'
-import './plugins/vuetify'
-import i18n from '@/plugins/i18n';
-import App from './App.vue'
-import './registerServiceWorker'
+import "@mdi/font/css/materialdesignicons.css"
+import Vue from "vue"
+import Axios from "axios"
+import VueAxios from "vue-axios"
+import "./plugins/vuetify"
+import i18n from "@/plugins/i18n";
+import App from "./App.vue"
+import "./registerServiceWorker"
 
 Vue.config.productionTip = false
 
@@ -24,12 +24,12 @@ Vue.use(VueAxios, Axios)
  * Audioplayer statuses
  */
 Vue.prototype.statuses = {
-    'stopped': 0,
-    'paused': 1,
-    'playing': 2
+    "stopped": 0,
+    "paused": 1,
+    "playing": 2
 };
 
 new Vue({
     i18n,
     render: h => h(App),
-}).$mount('#app')
+}).$mount("#app")
diff --git a/src/plugins/i18n.js b/src/plugins/i18n.js
index 6c807f2..6cbb7c6 100644
--- a/src/plugins/i18n.js
+++ b/src/plugins/i18n.js
@@ -1,5 +1,5 @@
-import Vue from 'vue'
-import VueI18n from 'vue-i18n'
+import Vue from "vue"
+import VueI18n from "vue-i18n"
 
 Vue.use(VueI18n)
 
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index 975696e..22230dd 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -1,7 +1,7 @@
-import Vue from 'vue'
-import Vuetify from 'vuetify/lib'
-import 'vuetify/src/stylus/app.styl'
+import Vue from "vue"
+import Vuetify from "vuetify/lib"
+import "vuetify/src/stylus/app.styl"
 
 Vue.use(Vuetify, {
-  iconfont: 'md',
+    iconfont: "md",
 })
diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js
index 76cede0..868b9a7 100644
--- a/src/registerServiceWorker.js
+++ b/src/registerServiceWorker.js
@@ -1,32 +1,32 @@
 /* eslint-disable no-console */
 
-import { register } from 'register-service-worker'
+import { register } from "register-service-worker"
 
-if (process.env.NODE_ENV === 'production') {
-  register(`${process.env.BASE_URL}service-worker.js`, {
-    ready () {
-      console.log(
-        'App is being served from cache by a service worker.\n' +
-        'For more details, visit https://goo.gl/AFskqB'
-      )
-    },
-    registered () {
-      console.log('Service worker has been registered.')
-    },
-    cached () {
-      console.log('Content has been cached for offline use.')
-    },
-    updatefound () {
-      console.log('New content is downloading.')
-    },
-    updated () {
-      console.log('New content is available; please refresh.')
-    },
-    offline () {
-      console.log('No internet connection found. App is running in offline mode.')
-    },
-    error (error) {
-      console.error('Error during service worker registration:', error)
-    }
-  })
+if (process.env.NODE_ENV === "production") {
+    register(`${process.env.BASE_URL}service-worker.js`, {
+        ready () {
+            console.log(
+                "App is being served from cache by a service worker.\n" +
+                "For more details, visit https://goo.gl/AFskqB"
+            )
+        },
+        registered () {
+            console.log("Service worker has been registered.")
+        },
+        cached () {
+            console.log("Content has been cached for offline use.")
+        },
+        updatefound () {
+            console.log("New content is downloading.")
+        },
+        updated () {
+            console.log("New content is available; please refresh.")
+        },
+        offline () {
+            console.log("No internet connection found. App is running in offline mode.")
+        },
+        error (error) {
+            console.error("Error during service worker registration:", error)
+        }
+    })
 }
