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

client/components/Reader/SettingsPage/SettingsPage.vue

@@ -130,6 +130,10 @@ export default @Component({
             if (newValue != '' && this.pageChangeAnimation == 'flip')
                 this.pageChangeAnimation = '';
         },
+        dualPageMode(newValue) {
+            if (newValue && this.pageChangeAnimation == 'flip' || this.pageChangeAnimation == 'rightShift')
+                this.pageChangeAnimation = '';
+        },
         textColor: function(newValue) {
             this.textColorFiltered = newValue;
         },
@@ -282,13 +286,15 @@ class SettingsPage extends Vue {
         let result = [
             {label: 'Нет', value: ''},
             {label: 'Вверх-вниз', value: 'downShift'},
-            {label: 'Вправо-влево', value: 'rightShift'},
+            (!this.dualPageMode ? {label: 'Вправо-влево', value: 'rightShift'} : null),
             {label: 'Протаивание', value: 'thaw'},
             {label: 'Мерцание', value: 'blink'},
             {label: 'Вращение', value: 'rotate'},
-        ];
+            (this.wallpaper == '' && !this.dualPageMode ? {label: 'Листание', value: 'flip'} : null),
-        if (this.wallpaper == '')
+        ];        
-            result.push({label: 'Листание', value: 'flip'});
+
+        result = result.filter(v => v);
+
         return result;
     }
 

client/components/Reader/TextPage/DrawHelper.js

@@ -180,16 +180,7 @@ export default class DrawHelper {
             out += '</div>';
 
             //разделитель
-            out += `<div style="width: ${this.dualIndentLR*2}px; top: ${-this.fontSize*this.textShift}px; position: relative">` +
+            out += `<div style="width: ${this.dualIndentLR*2}px;"></div>`;
-                `<div class="fit row justify-center items-center">` +
-                    `<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}'/>` +
-                        `</svg>&quot;);">` +
-                    `</div>` +
-                `</div>` +
-            `</div>`;
 
             //правая страница
             out += `<div style="width: ${this.w}px; margin-right: ${this.dualIndentLR}px; position: relative;">`;
@@ -250,7 +241,7 @@ export default class DrawHelper {
 
         out += this.fillTextShift(this.fittingString(title, this.realWidth/2 - fontSize - 3, font), fontSize, 2, font, fontSize);
 
-        out += this.drawPercentBar(this.realWidth/2, 2, this.realWidth/2 - timeW - 2*fontSize, statusBarHeight, font, fontSize, bookPos, textLength, imageNum, imageLength);
+        out += this.drawPercentBar(this.realWidth/2 + fontSize, 2, this.realWidth/2 - timeW - 3*fontSize, statusBarHeight, font, fontSize, bookPos, textLength, imageNum, imageLength);
         
         out += '</div>';
         return out;

client/components/Reader/TextPage/TextPage.vue

@@ -1,8 +1,8 @@
 <template>
     <div ref="main" class="main">
         <div class="layout back" @wheel.prevent.stop="onMouseWheel">
-            <div v-html="background"></div>
+            <div class="absolute" v-html="background"></div>
-            <!-- img -->
+            <div class="absolute" v-html="pageDivider"></div>
         </div>
         <div ref="scrollBox1" class="layout over-hidden" @wheel.prevent.stop="onMouseWheel">
             <div ref="scrollingPage1" class="layout over-hidden" @transitionend="onPage1TransitionEnd" @animationend="onPage1AnimationEnd">
@@ -76,6 +76,7 @@ class TextPage extends Vue {
     clickControl = true;
 
     background = null;
+    pageDivider = null;
     page1 = null;
     page2 = null;
     statusBar = null;
@@ -112,7 +113,11 @@ class TextPage extends Vue {
 
         this.debouncedDrawStatusBar = _.throttle(() => {
             this.drawStatusBar();
-        }, 60);        
+        }, 60);
+
+        this.debouncedDrawPageDividerAndOrnament = _.throttle(() => {
+            this.drawPageDividerAndOrnament();
+        }, 65);
 
         this.debouncedLoadSettings = _.debounce(() => {
             this.loadSettings();
@@ -185,6 +190,7 @@ class TextPage extends Vue {
         this.$refs.statusBar.style.top = (this.statusBarTop ? 1 : this.realHeight - this.statusBarHeight) + 'px';
 
         this.statusBarColor = this.hex2rgba(this.textColor || '#000000', this.statusBarColorAlpha);
+        this.dualDivColor = this.hex2rgba(this.textColor || '#000000', this.dualDivColorAlpha);
 
         //drawHelper
         this.drawHelper.realWidth = this.realWidth;
@@ -197,12 +203,12 @@ class TextPage extends Vue {
 
         this.drawHelper.dualPageMode = this.dualPageMode;
         this.drawHelper.dualIndentLR = this.dualIndentLR;
-        this.drawHelper.dualDivWidth = this.dualDivWidth;
+        /*this.drawHelper.dualDivWidth = this.dualDivWidth;
         this.drawHelper.dualDivHeight = this.dualDivHeight;
-        this.drawHelper.dualDivColor = this.hex2rgba(this.textColor || '#000000', this.dualDivColorAlpha);
+        this.drawHelper.dualDivColor = this.dualDivColor;
         this.drawHelper.dualDivStrokeFill = this.dualDivStrokeFill;
         this.drawHelper.dualDivStrokeGap = this.dualDivStrokeGap;
-        this.drawHelper.dualDivShadowWidth = this.dualDivShadowWidth;
+        this.drawHelper.dualDivShadowWidth = this.dualDivShadowWidth;*/
 
         this.drawHelper.backgroundColor = this.backgroundColor;
         this.drawHelper.statusBarColor = this.statusBarColor;
@@ -640,6 +646,7 @@ class TextPage extends Vue {
         if (!this.pageChangeAnimation)
             this.debouncedPrepareNextPage();
         this.debouncedDrawStatusBar();
+        this.debouncedDrawPageDividerAndOrnament();
 
         if (this.book && this.linesDown && this.linesDown.length < this.pageLineCount) {
             this.doEnd(true);
@@ -779,6 +786,25 @@ class TextPage extends Vue {
         }
     }
 
+    drawPageDividerAndOrnament() {
+        if (this.dualPageMode) {
+            this.pageDivider = `<div class="layout" style="width: ${this.realWidth}px; height: ${this.scrollHeight}px; ` + 
+                `top: ${(this.showStatusBar && this.statusBarTop ? this.statusBarHeight + 1 : 0)}px; position: relative;">` +
+                `<div class="fit row justify-center items-center">` +
+                    `<div style="height: ${Math.round(this.scrollHeight*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}'/>` +
+                        `</svg>&quot;);">` +
+                    `</div>` +
+                `</div>` +
+            `</div>`;
+        } else {
+            this.pageDivider = null;
+        }
+    }
+
     blinkCachedLoadMessage(state) {
         if (state === 'finish') {
             this.statusBarMessage = '';