Back to top button added

This commit is contained in:
Alexander I. Chebykin 2019-06-29 20:22:16 +03:00
parent fe13c19a3b
commit c0b6e35430
9 changed files with 148 additions and 126 deletions

View File

@ -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 -->

View File

@ -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>

View File

@ -48,9 +48,11 @@
<script>
export default {
data: () => ({
items: []
}),
data () {
return {
items: []
}
},
methods: {
authorClick (val) { this.$emit("author_selected", val); }

View File

@ -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: {

View File

@ -67,11 +67,13 @@
<script>
export default {
data: () => ({
authorName: "",
authorImg: "",
items: []
}),
data () {
return {
authorName: "",
authorImg: "",
items: []
}
},
methods: {
bookClick (val) {

View File

@ -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")

View File

@ -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)

View File

@ -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",
})

View File

@ -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)
}
})
}