From df1805df5b45a63876a023ebad6e2438a6976c08 Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Wed, 30 Jan 2019 17:01:10 +0700
Subject: [PATCH] =?UTF-8?q?=D0=92=D1=8B=D0=B4=D0=B5=D0=BB=D0=B8=D0=BB=20ba?=
 =?UTF-8?q?ckground=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Reader/TextPage/DrawHelper.js  |  2 +-
 .../components/Reader/TextPage/TextPage.vue   | 40 ++++++++++---------
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/client/components/Reader/TextPage/DrawHelper.js b/client/components/Reader/TextPage/DrawHelper.js
index 01796a1d..75030bb8 100644
--- a/client/components/Reader/TextPage/DrawHelper.js
+++ b/client/components/Reader/TextPage/DrawHelper.js
@@ -35,7 +35,7 @@ export default class DrawHelper {
 
         let out = `<div class="layout" style="` + 
             `width: ${this.realWidth}px; height: ${statusBarHeight}px; ` + 
-            `color: ${this.statusBarColor}; background-color: ${this.backgroundColor}">`;
+            `color: ${this.statusBarColor}">`;
 
         const fontSize = statusBarHeight*0.75;
         const font = 'bold ' + this.fontBySize(fontSize);
diff --git a/client/components/Reader/TextPage/TextPage.vue b/client/components/Reader/TextPage/TextPage.vue
index a82105fd..bffb960d 100644
--- a/client/components/Reader/TextPage/TextPage.vue
+++ b/client/components/Reader/TextPage/TextPage.vue
@@ -1,15 +1,17 @@
 <template>
     <div ref="main" class="main">
-        <div class="background">
-            <div v-show="toggleLayout" class="layout">
-                <div v-html="page1"></div>
-            </div>
-            <div v-show="!toggleLayout" class="layout">
-                <div v-html="page2"></div>
-            </div>
-            <div v-show="showStatusBar" ref="statusBar" class="layout">
-                <div v-html="statusBar"></div>
-            </div>
+        <div class="layout back">
+            <div v-html="background"></div>
+            <!-- img -->
+        </div>
+        <div v-show="toggleLayout" class="layout">
+            <div v-html="page1"></div>
+        </div>
+        <div v-show="!toggleLayout" class="layout">
+            <div v-html="page2"></div>
+        </div>
+        <div v-show="showStatusBar" ref="statusBar" class="layout">
+            <div v-html="statusBar"></div>
         </div>
         <div ref="layoutEvents" class="layout events" @mousedown.prevent.stop="onMouseDown" @mouseup.prevent.stop="onMouseUp"
             @wheel.prevent.stop="onMouseWheel"
@@ -51,6 +53,7 @@ export default @Component({
 class TextPage extends Vue {
     toggleLayout = false;
     showStatusBar = false;
+    background = null;
     page1 = null;
     page2 = null;
     statusBar = null;
@@ -281,7 +284,7 @@ class TextPage extends Vue {
             parsed.force = true;
             while (i < 10) {
                 await sleep(1000);
-                if (!this.parsed)
+                if (this.parsed != parsed)
                     break;
                 this.draw();
                 i++;
@@ -352,10 +355,13 @@ class TextPage extends Vue {
     }
 
     setBackground() {
+        this.background = `<div class="layout" style="width: ${this.realWidth}px; height: ${this.realHeight}px;` + 
+            ` background-color: ${this.backgroundColor}"></div>`;
     }
 
     onResize() {
         this.calcDrawProps();
+        this.setBackground();
         this.draw();
     }
 
@@ -440,7 +446,7 @@ class TextPage extends Vue {
             return '';
 
         let out = `<div class="layout" style="width: ${this.realWidth}px; height: ${this.realHeight}px;` + 
-            ` color: ${this.textColor}; background-color: ${this.backgroundColor}">`;
+            ` color: ${this.textColor}">`;
 
         if (!this.book || !lines || !this.parsed.textLength) {
             out += '</div>';
@@ -884,13 +890,6 @@ class TextPage extends Vue {
     min-width: 200px;
 }
 
-.background {
-    margin: 0;
-    padding: 0;
-    position: relative;
-    z-index: 5;
-}
-
 .layout {
     margin: 0;
     padding: 0;
@@ -898,6 +897,9 @@ class TextPage extends Vue {
     z-index: 10;
 }
 
+.back {
+    z-index: 5;
+}
 .events {
     z-index: 20;
     background-color: rgba(0,0,0,0);