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

client/components/Reader/TextPage/DrawHelper.js

@@ -20,7 +20,20 @@ export default class DrawHelper {
     }
 
     drawLine(line, lineIndex, sel, imageDrawn) {
-        let out = '';
+        /* line:
+        {
+            begin: Number,
+            end: Number,
+            first: Boolean,
+            last: Boolean,
+            parts: array of {
+                style: {bold: Boolean, italic: Boolean, center: Boolean},
+                image: {local: Boolean, inline: Boolean, id: String, imageLine: Number, lineCount: Number, paraIndex: Number},
+                text: String,
+            }            
+        }*/
+
+        let out = '<div>';
 
         let lineText = '';
         let center = false;
@@ -104,7 +117,7 @@ export default class DrawHelper {
         if (line.last || center)
             lineText = `<span style="display: inline-block; ${centerStyle}">${lineText}</span>`;
 
-        out += (lineIndex > 0 ? '<br>' : '') + lineText;
+        out += lineText + '</div>';
 
         return out;
     }
@@ -116,7 +129,8 @@ export default class DrawHelper {
         const font = this.fontByStyle({});
         const justify = (this.textAlignJustify ? 'text-align: justify; text-align-last: justify;' : '');
 
-        let out = `<div style="width: ${this.w}px; height: ${this.h + (isScrolling ? this.lineHeight : 0)}px;` + 
+        const boxH = this.h + (isScrolling ? this.lineHeight : 0);
+        let out = `<div 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;">`;
 
@@ -125,43 +139,47 @@ export default class DrawHelper {
         const lineCount = this.pageLineCount + (isScrolling ? 1 : 0);
         len = (len > lineCount ? lineCount : len);
 
-        for (let i = 0; i < len; i++) {
+        //поиск
-            const line = lines[i];
+        let sel = new Set();
-            /* line:
+        if (len > 0 && this.searching) {
-            {
+            const line = lines[0];
-                begin: Number,
+            let pureText = '';
-                end: Number,
+            for (const part of line.parts) {
-                first: Boolean,
+                pureText += part.text;
-                last: Boolean,
-                parts: array of {
-                    style: {bold: Boolean, italic: Boolean, center: Boolean},
-                    image: {local: Boolean, inline: Boolean, id: String, imageLine: Number, lineCount: Number, paraIndex: Number},
-                    text: String,
-                }
-            }*/
-            let sel = new Set();
-            //поиск
-            if (i == 0 && this.searching) {
-                let pureText = '';
-                for (const part of line.parts) {
-                    pureText += part.text;
-                }
-
-                pureText = pureText.toLowerCase();
-                let j = 0;
-                while (1) {// eslint-disable-line no-constant-condition
-                    j = pureText.indexOf(this.needle, j);
-                    if (j >= 0) {
-                        for (let k = 0; k < this.needle.length; k++) {
-                            sel.add(j + k);
-                        }
-                    } else
-                        break;
-                    j++;
-                }
             }
 
-            out += this.drawLine(line, i, sel, imageDrawn);
+            pureText = pureText.toLowerCase();
+            let j = 0;
+            while (1) {// eslint-disable-line no-constant-condition
+                j = pureText.indexOf(this.needle, j);
+                if (j >= 0) {
+                    for (let k = 0; k < this.needle.length; k++) {
+                        sel.add(j + k);
+                    }
+                } else
+                    break;
+                j++;
+            }
+        }
+
+        //отрисовка строк
+        if (!this.dualPageMode) {
+            for (let i = 0; i < len; i++) {
+                out += this.drawLine(lines[i], i, sel, imageDrawn);
+            }
+        } else {
+            out += `<div style="width: ${this.w}px; margin: 0 ${this.dualIndentLR}px 0 ${this.dualIndentLR}px; display: inline-block;">`;
+            const l2 = len/2;
+            for (let i = 0; i < l2; i++) {
+                out += this.drawLine(lines[i], i, sel, imageDrawn);
+            }
+            out += '</div>';
+
+            out += `<div style="width: ${this.w}px; margin: 0 ${this.dualIndentLR}px 0 ${this.dualIndentLR}px; display: inline-block;">`;
+            for (let i = l2; i < len; i++) {
+                out += this.drawLine(lines[i], i, sel, imageDrawn);
+            }
+            out += '</div>';
         }
 
         out += '</div>';

client/components/Reader/TextPage/TextPage.vue

@@ -161,16 +161,17 @@ class TextPage extends Vue {
         this.$refs.layoutEvents.style.width = this.realWidth + 'px';
         this.$refs.layoutEvents.style.height = this.realHeight + 'px';
 
-        this.w = this.realWidth - 2*this.indentLR;
+        const dual = (this.dualPageMode ? 2 : 1);
+        this.boxW = this.realWidth - 2*this.indentLR;
+        this.w = this.boxW/dual - (this.dualPageMode ? 2*this.dualIndentLR : 0);
+
         this.scrollHeight = this.realHeight - (this.showStatusBar ? this.statusBarHeight : 0);
         this.h = this.scrollHeight - 2*this.indentTB;
+
         this.lineHeight = this.fontSize + this.lineInterval;
         const pageRowsCount = 1 + Math.floor((this.h - this.lineHeight + this.lineInterval/2)/this.lineHeight);
         this.pageLineCount = (this.dualPageMode ? pageRowsCount*2 : pageRowsCount)
 
-        this.$refs.scrollingPage1.style.width = this.w + 'px';
-        this.$refs.scrollingPage2.style.width = this.w + 'px';
-
         //stuff
         this.currentAnimation = '';
         this.pageChangeDirectionDown = true;
@@ -202,6 +203,7 @@ class TextPage extends Vue {
         this.drawHelper.textColor = this.textColor;
         this.drawHelper.textShift = this.textShift;
         this.drawHelper.p = this.p;
+        this.drawHelper.boxW = this.boxW;
         this.drawHelper.w = this.w;
         this.drawHelper.h = this.h;
         this.drawHelper.indentLR = this.indentLR;
@@ -266,14 +268,14 @@ class TextPage extends Vue {
         
         page1.perspective = page2.perspective = '3072px';
 
-        page1.width = page2.width = this.w + this.indentLR + 'px';
+        page1.width = page2.width = this.boxW + this.indentLR + 'px';
         page1.height = page2.height = this.scrollHeight - (pageSpace > 0 ? pageSpace : 0) + 'px';
         page1.top = page2.top = top + 'px';
         page1.left = page2.left = this.indentLR + 'px';
 
         page1 = this.$refs.scrollingPage1.style;
         page2 = this.$refs.scrollingPage2.style;
-        page1.width = page2.width = this.w + this.indentLR + 'px';
+        page1.width = page2.width = this.boxW + this.indentLR + 'px';
         page1.height = page2.height = this.scrollHeight + this.lineHeight + 'px';
     }