Рефакторинг, промежуточный коммит

This commit is contained in:
Book Pauk
2019-01-15 19:01:13 +07:00
parent 5198e3f7ba
commit 859849b66c
3 changed files with 105 additions and 111 deletions

View File

@@ -42,8 +42,9 @@
</el-header>
<el-main>
{{ bookPos }}
<keep-alive>
<component ref="page" :is="pageActive" @load-book="loadBook" @parse-book="parseBook"></component>
<component ref="page" :is="pageActive" @load-book="loadBook" @book-pos-changed="bookPosChanged"></component>
</keep-alive>
</el-main>
</el-container>
@@ -66,9 +67,27 @@ export default @Component({
TextPage,
ProgressPage
},
watch: {
bookPos: function(newValue) {
if (newValue !== undefined && this.pageActive == 'TextPage') {
const textPage = this.$refs.page;
if (textPage.bookPos != newValue) {
textPage.bookPos = newValue;
this.commit('reader/setOpenedBook', Object.assign({}, this.lastOpenedBook, {bookPos: newValue}));
}
}
},
routeParamPos: function(newValue) {
if (newValue !== undefined && newValue != this.bookPos) {
this.bookPos = newValue;
}
},
},
})
class Reader extends Vue {
loaderActive = false;
progressActive = false;
bookPos = null;
created() {
this.commit = this.$store.commit;
@@ -76,18 +95,38 @@ class Reader extends Vue {
this.reader = this.$store.state.reader;
this.$root.addKeyHook(this.keyHook);
this.lastActivePage = false;
}
mounted() {
/*while (this.lastOpenedBook) {
this.commit('reader/delOpenedBook', this.lastOpenedBook);
}*/
if (this.$root.rootRoute == '/reader' && this.routeParamUrl && this.routeParamUrl != this.lastOpenedBook.url) {
this.commit('reader/setLoaderActive', true);
this.loadBook({url: this.routeParamUrl});
const lastUrl = (this.lastOpenedBook ? this.lastOpenedBook.url : '');
if (this.$root.rootRoute == '/reader' && this.routeParamUrl && this.routeParamUrl != lastUrl) {
this.loaderActive = true;
this.loadBook({url: this.routeParamUrl, bookPos: this.routeParamPos});
}
}
get routeParamPos() {
let result = undefined;
const q = this.$route.query;
if (q['__p']) {
result = q['__p'];
if (Array.isArray(result))
result = result[0];
}
return (result ? parseInt(result, 10) || 0 : result);
}
updateRoute() {
const pos = (this.bookPos != undefined ? `__p=${this.bookPos}&` : '');
this.$router.replace(`/reader?${pos}url=${this.lastOpenedBook.url}`);
}
get routeParamUrl() {
let result = '';
const path = this.$route.fullPath;
@@ -99,8 +138,9 @@ class Reader extends Vue {
return decodeURIComponent(result);
}
get loaderActive() {
return this.reader.loaderActive;
bookPosChanged(event) {
this.bookPos = event.bookPos;
this.updateRoute();
}
get fullScreenActive() {
@@ -113,16 +153,11 @@ class Reader extends Vue {
buttonClick(button) {
switch (button) {
case 'loader': this.commit('reader/setLoaderActive', !this.loaderActive); this.resetRoute(); break;
case 'loader': this.loaderActive = !this.loaderActive; break;
case 'fullscreen': this.commit('reader/setFullScreenActive', !this.fullScreenActive); break;
}
}
resetRoute() {
if (this.loaderActive)
this.$router.replace('/reader');
}
buttonActiveClass(button) {
const classActive = { 'tool-button-active': true, 'tool-button-active:hover': true };
switch (button) {
@@ -143,7 +178,7 @@ class Reader extends Vue {
result = 'TextPage';
if (!result) {
this.commit('reader/setLoaderActive', true);
this.loaderActive = true;
result = 'LoaderPage';
}
@@ -151,6 +186,29 @@ class Reader extends Vue {
this.$root.$emit('set-app-title');
}
if (this.lastActivePage != result && result == 'TextPage') {
//акивируем страницу с текстом
this.$nextTick(async() => {
const last = this.lastOpenedBook;
const isParsed = await bookManager.hasBookParsed(last);
if (!isParsed) {
this.$root.$emit('set-app-title');
this.loadBook({url: last.url, bookPos: last.bookPos});
return;
} else {
this.bookPos = last.bookPos;
}
const textPage = this.$refs.page;
textPage.lastBook = last;
textPage.bookPos = (this.bookPos !== undefined ? this.bookPos : 0);
textPage.showBook();
});
}
this.lastActivePage = result;
return result;
}
@@ -158,10 +216,26 @@ class Reader extends Vue {
this.progressActive = true;
this.$nextTick(async() => {
const progress = this.$refs.page;
progress.show();
progress.setState({totalSteps: 5});
try {
progress.show();
progress.setState({state: 'parse'});
const bookParsed = await bookManager.getBook({url: opts.url}, (prog) => {
progress.setState({progress: prog});
});
if (bookParsed) {
this.commit('reader/setOpenedBook', bookManager.metaOnly(bookParsed));
this.bookPos = bookParsed.bookPos;
this.updateRoute();
this.loaderActive = false;
progress.hide(); this.progressActive = false;
return;
}
progress.setState({totalSteps: 5});
const book = await readerApi.loadBook(opts.url, (state) => {
progress.setState(state);
});
@@ -172,43 +246,15 @@ class Reader extends Vue {
});
this.commit('reader/setOpenedBook', bookManager.metaOnly(addedBook));
this.commit('reader/setLoaderActive', false);
this.bookPos = opts.bookPos;
this.updateRoute();
this.loaderActive = false;
progress.hide(); this.progressActive = false;
} catch (e) {
progress.hide(); this.progressActive = false;
this.commit('reader/setLoaderActive', true);
this.resetRoute();
this.$alert(e.message, 'Ошибка', {type: 'error'});
}
});
}
parseBook(meta) {
this.progressActive = true;
this.$nextTick(async() => {
if (bookManager.hasBookParsed(meta)) {
this.progressActive = false;
return;
}
const progress = this.$refs.page;
progress.show();
progress.setState({state: 'parse'});
try {
const isParsed = await bookManager.getBook(meta, (prog) => {
progress.setState({progress: prog});
});
progress.hide(); this.progressActive = false;
if (!isParsed) {
this.loadBook({url: meta.url});
}
} catch (e) {
progress.hide(); this.progressActive = false;
this.commit('reader/setLoaderActive', true);
this.resetRoute();
this.loaderActive = true;
this.$alert(e.message, 'Ошибка', {type: 'error'});
}
});

View File

@@ -1,9 +1,8 @@
<template>
<div ref="main" class="main">
<pre>{{ this.lastOpenedBook }}</pre>
<pre>{{ meta }}</pre>
<pre>{{ bookPos }}</pre>
<pre>{{ $route.query }}</pre>
<pre>{{ lastBook }}</pre>
<pre>{{ meta }}</pre>
</div>
</template>
@@ -18,18 +17,13 @@ import bookManager from '../share/bookManager';
export default @Component({
watch: {
bookPos: function(newValue) {
this.updateRoute(newValue);
this.commit('reader/setOpenedBook', Object.assign({}, this.lastOpenedBook, {bookPos: newValue}));
this.$emit('book-pos-changed', {bookPos: newValue});
this.drawPage();
},
routeParamPos: function(newValue) {
if (newValue !== undefined && newValue != this.bookPos) {
this.bookPos = newValue;
}
},
},
})
class TextPage extends Vue {
lastBook = null;
meta = null;
fb2 = null;
bookPos = 0;
@@ -39,30 +33,23 @@ class TextPage extends Vue {
this.dispatch = this.$store.dispatch;
this.config = this.$store.state.config;
this.reader = this.$store.state.reader;
this.lastOpenTry = '';
}
activated() {
showBook() {
this.$refs.main.focus();
this.book = null;
this.meta = null;
this.fb2 = null;
let last = this.lastOpenedBook;
this.drawPage();//пока не загрузили, очистим канвас
if (last && !(this.routeParamUrl && this.routeParamUrl != last.url)) {
if (this.lastBook) {
(async() => {
const isParsed = await bookManager.hasBookParsed(last);
const isParsed = await bookManager.hasBookParsed(this.lastBook);
if (!isParsed) {
this.$root.$emit('set-app-title');
if (this.lastOpenTry != last.url) {
this.$emit('parse-book', last);
this.lastOpenTry = last.url;
}
return;
}
this.book = await bookManager.getBook(last);
this.book = await bookManager.getBook(this.lastBook);
this.meta = bookManager.metaOnly(this.book);
this.fb2 = this.meta.fb2;
@@ -74,48 +61,13 @@ class TextPage extends Vue {
this.fb2.bookTitle
]).join(' '));
this.bookPos = (this.routeParamPos !== undefined ? this.routeParamPos : last.bookPos || 0);
this.updateRoute(this.bookPos);
this.drawPage();
})();
}
}
get lastOpenedBook() {
return this.$store.getters['reader/lastOpenedBook'];
}
get routeParamUrl() {
let result = '';
const path = this.$route.fullPath;
const i = path.indexOf('url=');
if (i >= 0) {
result = path.substr(i + 4);
}
return decodeURIComponent(result);
}
get routeParamPos() {
let result = undefined;
const q = this.$route.query;
if (q['__p']) {
result = q['__p'];
if (Array.isArray(result))
result = result[0];
}
return (result ? parseInt(result, 10) || 0 : result);
}
updateRoute(newPos) {
if (this.book)
this.$router.replace(`/reader?__p=${newPos}&url=${this.lastOpenedBook.url}`);
}
drawPage() {
const last = this.lastOpenedBook;
if (!last)
if (!this.lastBook)
return;
//пустой канвас

View File

@@ -2,7 +2,6 @@ import Vue from 'vue';
// initial state
const state = {
loaderActive: false,
fullScreenActive: false,
openedBook: {},
};
@@ -28,9 +27,6 @@ const actions = {};
// mutations
const mutations = {
setLoaderActive(state, value) {
state.loaderActive = value;
},
setFullScreenActive(state, value) {
state.fullScreenActive = value;
},