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

2021-02-09 17:47:10 +07:00
parent 65c66e0feb
commit dacbd05911
3 changed files with 44 additions and 21 deletions
--- a/client/components/Reader/SettingsPage/SettingsPage.vue
+++ b/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'},
-        ];
-        if (this.wallpaper == '')
-            result.push({label: 'Листание', value: 'flip'});
+            (this.wallpaper == '' && !this.dualPageMode ? {label: 'Листание', value: 'flip'} : null),
+        ];        
+
+        result = result.filter(v => v);
+
        return result;
    }

--- a/client/components/Reader/TextPage/DrawHelper.js
+++ b/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">` +
-                `<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.dualIndentLR*2}px;"></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;
--- a/client/components/Reader/TextPage/TextPage.vue
+++ b/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>
-            <!-- img -->
+            <div class="absolute" v-html="background"></div>
+            <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 = '';