Работа над двухстраничным режимом

client/components/Reader/SettingsPage/include/ViewTab/Mode.inc

@@ -90,4 +90,11 @@
         </div>
     </div>
 
+    <div class="item row">
+        <div class="label-2">Ширина тени</div>
+        <div class="col row">
+            <NumInput class="col-left" v-model="dualDivShadowWidth" :min="0" :max="100"/>
+        </div>
+    </div>    
+
 </div>

client/components/Reader/TextPage/DrawHelper.js

@@ -132,7 +132,7 @@ export default class DrawHelper {
         const boxH = this.h + (isScrolling ? this.lineHeight : 0);
         let out = `<div class="row no-wrap" style="width: ${this.boxW}px; height: ${boxH}px;` + 
             ` position: absolute; top: ${this.fontSize*this.textShift}px; color: ${this.textColor}; font: ${font}; ${justify}` +
-            ` line-height: ${this.lineHeight}px; white-space: nowrap; vertical-align: middle;">`;
+            ` line-height: ${this.lineHeight}px; white-space: nowrap;">`;
 
         let imageDrawn1 = new Set();
         let imageDrawn2 = new Set();
@@ -182,7 +182,7 @@ export default class DrawHelper {
             //разделитель
             out += `<div style="width: ${this.dualIndentLR*2}px; top: ${-this.fontSize*this.textShift}px; position: relative">` +
                 `<div class="fit row justify-center items-center">` +
-                    `<div style="height: ${Math.round(boxH*this.dualDivHeight/100)}px; width: ${this.dualDivWidth}px;` + 
+                    `<div style="height: ${Math.round(boxH*this.dualDivHeight/100)}px; width: ${this.dualDivWidth}px; box-shadow: 0 0 ${this.dualDivShadowWidth}px ${this.dualDivColor}; ` + 
                         `background-image: url(&quot;data:image/svg+xml;utf8,<svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'>` +
                             //`<rect width='100%' height='100%' style='fill: none; stroke: white; stroke-width: 4; stroke-dasharray: 5 20'/>` +
                             `<line x1='0' y1='0' x2='0' y2='100%' stroke='${this.dualDivColor}' stroke-width='100%' stroke-dasharray='${this.dualDivStrokeFill} ${this.dualDivStrokeGap}'/>` +

client/components/Reader/TextPage/TextPage.css

@@ -0,0 +1,54 @@
+.paper1 {
+    background: url("images/paper1.jpg") center;
+    background-size: cover;
+}
+
+.paper2 {
+    background: url("images/paper2.jpg") center;
+    background-size: cover;
+}
+
+.paper3 {
+    background: url("images/paper3.jpg") center;
+    background-size: cover;
+}
+
+.paper4 {
+    background: url("images/paper4.jpg") center;
+    background-size: cover;
+}
+
+.paper5 {
+    background: url("images/paper5.jpg") center;
+    background-size: cover;
+}
+
+.paper6 {
+    background: url("images/paper6.jpg") center;
+    background-size: cover;
+}
+
+.paper7 {
+    background: url("images/paper7.jpg") center;
+    background-size: cover;
+}
+
+.paper8 {
+    background: url("images/paper8.jpg") center;
+    background-size: cover;
+}
+
+.paper9 {
+    background: url("images/paper9.jpg");
+}
+
+@keyframes page1-animation-thaw {
+    0%   { opacity: 0; }
+    100% { opacity: 1; }
+}
+
+@keyframes page2-animation-thaw {
+    0%   { opacity: 1; }
+    100% { opacity: 0; }
+}
+

client/components/Reader/TextPage/TextPage.vue

@@ -27,7 +27,7 @@
         <div v-show="!clickControl && showStatusBar && statusBarClickOpen" class="layout" v-html="statusBarClickable" @mousedown.prevent.stop @touchstart.stop
             @click.prevent.stop="onStatusBarClick">
         </div>
-        <!-- невидимым делать нельзя, вовремя не подгружаютя шрифты -->
+        <!-- невидимым делать нельзя (display: none), вовремя не подгружаютя шрифты -->
         <canvas ref="offscreenCanvas" class="layout" style="visibility: hidden"></canvas>
         <div ref="measureWidth" style="position: absolute; visibility: hidden"></div>
     </div>
@@ -40,6 +40,8 @@ import Component from 'vue-class-component';
 import {loadCSS} from 'fg-loadcss';
 import _ from 'lodash';
 
+import './TextPage.css';
+
 import * as utils from '../../../share/utils';
 import bookManager from '../share/bookManager';
 import DrawHelper from './DrawHelper';
@@ -200,6 +202,7 @@ class TextPage extends Vue {
         this.drawHelper.dualDivColor = this.hex2rgba(this.textColor || '#000000', this.dualDivColorAlpha);
         this.drawHelper.dualDivStrokeFill = this.dualDivStrokeFill;
         this.drawHelper.dualDivStrokeGap = this.dualDivStrokeGap;
+        this.drawHelper.dualDivShadowWidth = this.dualDivShadowWidth;
 
         this.drawHelper.backgroundColor = this.backgroundColor;
         this.drawHelper.statusBarColor = this.statusBarColor;
@@ -1190,60 +1193,3 @@ class TextPage extends Vue {
 }
 
 </style>
-
-<style>
-.paper1 {
-    background: url("images/paper1.jpg") center;
-    background-size: cover;
-}
-
-.paper2 {
-    background: url("images/paper2.jpg") center;
-    background-size: cover;
-}
-
-.paper3 {
-    background: url("images/paper3.jpg") center;
-    background-size: cover;
-}
-
-.paper4 {
-    background: url("images/paper4.jpg") center;
-    background-size: cover;
-}
-
-.paper5 {
-    background: url("images/paper5.jpg") center;
-    background-size: cover;
-}
-
-.paper6 {
-    background: url("images/paper6.jpg") center;
-    background-size: cover;
-}
-
-.paper7 {
-    background: url("images/paper7.jpg") center;
-    background-size: cover;
-}
-
-.paper8 {
-    background: url("images/paper8.jpg") center;
-    background-size: cover;
-}
-
-.paper9 {
-    background: url("images/paper9.jpg");
-}
-
-@keyframes page1-animation-thaw {
-    0%   { opacity: 0; }
-    100% { opacity: 1; }
-}
-
-@keyframes page2-animation-thaw {
-    0%   { opacity: 1; }
-    100% { opacity: 0; }
-}
-
-</style>

client/store/modules/reader.js

@@ -228,11 +228,12 @@ const settingDefaults = {
 
     dualPageMode: false,
     dualIndentLR: 10,// px, отступ слева и справа внутри страницы в двухстраничном режиме
-    dualDivWidth: 4,// px, ширина разделителя
-    dualDivHeight: 96,// процент, высота разделителя
-    dualDivColorAlpha: 1,// прозрачность разделителя
+    dualDivWidth: 2,// px, ширина разделителя
+    dualDivHeight: 100,// процент, высота разделителя
+    dualDivColorAlpha: 0.7,// прозрачность разделителя
     dualDivStrokeFill: 1,// px, заполнение пунктира
     dualDivStrokeGap: 1,// px, промежуток пунктира
+    dualDivShadowWidth: 0,// px, ширина тени
 
     showStatusBar: true,
     statusBarTop: false,// top, bottom