Рефакторинг

client/components/Reader/LoaderPage/LoaderPage.vue

@@ -19,7 +19,6 @@
             <span class="bottom-span clickable" @click="openHelp">Справка</span>
             <span class="bottom-span">{{ version }}</span>
         </div>
-        <ProgressPage ref="progress"></ProgressPage>
     </div>
 </template>
 
@@ -28,13 +27,7 @@
 import Vue from 'vue';
 import Component from 'vue-class-component';
 
-import ProgressPage from '../ProgressPage/ProgressPage.vue';
-import readerApi from '../../../api/reader';
-
 export default @Component({
-    components: {
-        ProgressPage
-    }
 })
 class LoaderPage extends Vue {
     bookUrl = null;
@@ -67,18 +60,7 @@ class LoaderPage extends Vue {
 
     async submitUrl() {
         if (this.bookUrl) {
-            this.progress.show();
+            this.$emit('load-book', this.bookUrl);
-            this.progress.setState({totalSteps: 4});
-            try {
-                const book = await readerApi.loadBook(this.bookUrl, (state) => {
-                    this.progress.setState(state);
-                });
-                this.progress.hide();
-            } catch (e) {
-                this.progress.hide();
-                this.$refs.input.blur();
-                this.$alert(e.message, 'Ошибка', {type: 'error'});
-            }
         }
     }
 

client/components/Reader/ProgressPage/ProgressPage.vue

@@ -11,6 +11,7 @@
 //-----------------------------------------------------------------------------
 import Vue from 'vue';
 import Component from 'vue-class-component';
+import {sleep} from '../../../share/utils';
 
 const ruMessage = {
     'start': ' ',
@@ -32,7 +33,7 @@ class ProgressPage extends Vue {
     progress = 0;
     visible = false;
 
-    show() {
+    async show() {
         this.$el.style.width = this.$parent.$el.offsetWidth + 'px';
         this.$el.style.height = this.$parent.$el.offsetHeight + 'px';
         this.text = '';
@@ -41,12 +42,14 @@ class ProgressPage extends Vue {
         this.progress = 0;
 
         this.visible = true;
+        await sleep(1);
+        return true;
     }
 
-    hide() {
+    async hide() {
-        setTimeout(() => {
+        await sleep(350);
-            this.visible = false;
+        this.visible = false;
-        }, 350);
+        return false;
     }
 
     setState(state) {

client/components/Reader/Reader.vue

@@ -43,7 +43,7 @@
 
         <el-main>
             <keep-alive>
-                <component ref="page" :is="pageActive"></component>
+                <component ref="page" :is="pageActive" @load-book="loadBook"></component>
             </keep-alive>
         </el-main>
     </el-container>
@@ -55,14 +55,21 @@ import Vue from 'vue';
 import Component from 'vue-class-component';
 import LoaderPage from './LoaderPage/LoaderPage.vue';
 import TextPage from './TextPage/TextPage.vue';
+import ProgressPage from './ProgressPage/ProgressPage.vue';
+
+import bookManager from './share/bookManager';
+import readerApi from '../../api/reader';
 
 export default @Component({
     components: {
         LoaderPage,
-        TextPage
+        TextPage,
+        ProgressPage
     },
 })
 class Reader extends Vue {
+    progressActive = false;
+
     created() {
         this.commit = this.$store.commit;
         this.dispatch = this.$store.dispatch;
@@ -102,10 +109,12 @@ class Reader extends Vue {
     get pageActive() {
         let result = '';
 
-        if (this.lastOpenedBook)
+        if (this.progressActive)
-            result = 'TextPage';
+            result = 'ProgressPage';
-        if (this.loaderActive)
+        else if (this.loaderActive)
             result = 'LoaderPage';
+        else if (this.lastOpenedBook)
+            result = 'TextPage';
 
         if (!result) {
             //this.commit('reader/setLoaderActive', true);
@@ -114,6 +123,27 @@ class Reader extends Vue {
         return result;
     }
 
+    loadBook(url) {
+        this.progressActive = true;
+        this.$nextTick(async() => {
+            const progress = this.$refs.page;
+            await progress.show();
+            progress.setState({totalSteps: 4});
+            try {
+                const book = await readerApi.loadBook(url, (state) => {
+                    progress.setState(state);
+                });
+
+                await bookManager.add(book);
+
+                this.progressActive = await progress.hide();
+            } catch (e) {
+                this.progressActive = await progress.hide();
+                this.$alert(e.message, 'Ошибка', {type: 'error'});
+            }
+        });
+    }
+
     keyHook(event) {
         if (this.$root.rootRoute == '/reader') {
             if (this.$refs.page && this.$refs.page.keyHook)

client/components/Reader/share/BookManager.js

@@ -1,2 +0,0 @@
-export default class BookManager {
-}

client/components/Reader/share/bookManager.js

@@ -0,0 +1,8 @@
+import 'localforage';
+
+class BookManager {
+    async add() {
+    }
+}
+
+export default new BookManager();