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

client/components/Reader/Reader.vue

@@ -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) {
+        const lastUrl = (this.lastOpenedBook ? this.lastOpenedBook.url : '');
-            this.commit('reader/setLoaderActive', true);
+        if (this.$root.rootRoute == '/reader' && this.routeParamUrl && this.routeParamUrl != lastUrl) {
-            this.loadBook({url: this.routeParamUrl});
+            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() {
+    bookPosChanged(event) {
-        return this.reader.loaderActive;
+        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.loaderActive = 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.$alert(e.message, 'Ошибка', {type: 'error'});
             }
         });

client/components/Reader/TextPage/TextPage.vue

@@ -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,51 +17,39 @@ import bookManager from '../share/bookManager';
 export default @Component({
     watch: {
         bookPos: function(newValue) {
-            this.updateRoute(newValue);
+            this.$emit('book-pos-changed', {bookPos: newValue});
-            this.commit('reader/setOpenedBook', Object.assign({}, this.lastOpenedBook, {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;
+    bookPos = 0;    
 
     created() {
         this.commit = this.$store.commit;
         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 (!this.lastBook)
-        if (!last)
             return;
 
         //пустой канвас

client/store/modules/reader.js

@@ -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;
     },