Перевел статус-бар на дивы

client/components/Reader/TextPage/DrawHelper.js

@@ -3,75 +3,85 @@ export default class DrawHelper {
         return `${size}px ${this.fontName}`;
     }
 
-    drawPercentBar(context, x, y, w, h, bookPos, textLength) {
+    drawPercentBar(x, y, w, h, font, bookPos, textLength) {
         const pad = 3;
         const fh = h - 2*pad;
         const fh2 = fh/2;
 
         const t1 = `${Math.floor((bookPos + 1)/1000)}k/${Math.floor(textLength/1000)}k`;
-        const w1 = context.measureText(t1).width + fh2;
+        const w1 = this.measureTextFont(t1, font) + fh2;
         const read = (bookPos + 1)/textLength;
         const t2 = `${(read*100).toFixed(2)}%`;
-        const w2 = context.measureText(t2).width;
+        const w2 = this.measureTextFont(t2, font);
         let w3 = w - w1 - w2;
 
+        let out = '';
         if (w1 + w2 <= w)
-            context.fillText(t1, x, y + h - 2);
+            out += this.fillText(t1, x, y, font);
         
         if (w1 + w2 + w3 <= w && w3 > (10 + fh2)) {
             const barWidth = w - w1 - w2 - fh2;
-            context.strokeRect(x + w1, y + pad + 1, barWidth, fh - 2);
+            out += this.strokeRect(x + w1, y + pad - 2, barWidth, fh - 4, this.statusBarColor);
-            context.fillRect(x + w1 + 2, y + pad + 3, (barWidth - 4)*read, fh - 6);
+            out += this.fillRect(x + w1 + 2, y + pad, (barWidth - 4)*read, fh - 6, this.statusBarColor);
         }
 
         if (w1 <= w)
-            context.fillText(t2, x + w1 + w3, y + h - 2);
+            out += this.fillText(t2, x + w1 + w3, y, font);
+
+        return out;
     }
 
-    async drawStatusBar(context, statusBarTop, statusBarHeight, statusBarColor, bookPos, textLength, title) {
+    drawStatusBar(statusBarTop, statusBarHeight, bookPos, textLength, title) {
-        const y = (statusBarTop ? 1 : this.realHeight - statusBarHeight);
 
-        context.fillStyle = this.backgroundColor;
+        let out = `<div class="layout" style="` + 
-        context.fillRect(0, y, this.realWidth, statusBarHeight);
+            `width: ${this.realWidth}px; height: ${statusBarHeight}px; ` + 
+            `color: ${this.statusBarColor}; background-color: ${this.backgroundColor}">`;
 
-        context.font = 'bold ' + this.fontBySize(statusBarHeight - 6);
+        const fontSize = statusBarHeight - 6;
-        context.fillStyle = statusBarColor;
+        const font = 'bold ' + this.fontBySize(fontSize);
-        context.strokeStyle = statusBarColor;
 
-        context.fillRect(0, (statusBarTop ? statusBarHeight : y), this.realWidth, 1);
+        out += this.fillRect(0, (statusBarTop ? statusBarHeight : 1), this.realWidth, 1, this.statusBarColor);
 
         const date = new Date();
-        const time = `  ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}  `;
+        const time = `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
-        const timeW = context.measureText(time).width;
+        const timeW = this.measureTextFont(time, font);
-        context.fillText(time, this.realWidth - timeW, y + statusBarHeight - 2);
+        out += this.fillText(time, this.realWidth - timeW - fontSize, 3, font);
 
-        title = '  ' + title;
+        out += this.fillText(this.fittingString(title, this.realWidth/2 - fontSize - 3, font), fontSize, 3, font);
-        context.fillText(this.fittingString(context, title, this.realWidth/2 - 3), 0, y + statusBarHeight - 2);
 
-        this.drawPercentBar(context, this.realWidth/2, y, this.realWidth/2 - timeW, statusBarHeight, bookPos, textLength);
+        out += this.drawPercentBar(this.realWidth/2, 3, this.realWidth/2 - timeW - 2*fontSize, statusBarHeight, font, bookPos, textLength);
+        
+        out += '</div>';
+        return out;
     }
 
-    fittingString(context, str, maxWidth) {
+    fittingString(str, maxWidth, font) {
-        let w = context.measureText(str).width;
+        let w = this.measureTextFont(str, font);
         const ellipsis = '…';
-        const ellipsisWidth = context.measureText(ellipsis).width;
+        const ellipsisWidth = this.measureTextFont(ellipsis, font);
         if (w <= maxWidth || w <= ellipsisWidth) {
             return str;
         } else {
             let len = str.length;
             while (w >= maxWidth - ellipsisWidth && len-- > 0) {
                 str = str.substring(0, len);
-                w = context.measureText(str).width;
+                w = this.measureTextFont(str, font);
             }
             return str + ellipsis;
         }
     }
 
     fillText(text, x, y, font) {
-        /*this.context1.textAlign = 'left';
+        return `<div style="position: absolute; border: 1px solid black; left: ${x}px; top: ${y}px; font: ${font}">${text}</div>`;
-        this.context2.textAlign = 'left';
+    }
-        this.context1.textBaseline = 'bottom';
+
-        this.context2.textBaseline = 'bottom';*/
+    fillRect(x, y, w, h, color) {
-        return `<div style="position: absolute; left: ${x}px; top: ${y}px; font: ${font}">${text}</div>`;
+        return `<div style="margin: 0; padding: 0; position: absolute; left: ${x}px; top: ${y}px; ` +
+            `width: ${w}px; height: ${h}px; background-color: ${color}"></div>`; 
+    }
+
+    strokeRect(x, y, w, h, color) {
+        return `<div style="margin: 0; padding: 0; position: absolute; left: ${x}px; top: ${y}px; ` +
+            `width: ${w}px; height: ${h}px; border: 1px solid ${color}"></div>`; 
     }
 }

client/components/Reader/TextPage/TextPage.vue

@@ -6,6 +6,9 @@
         <div v-show="!activeCanvas" class="layout">
             <div v-html="page2"></div>
         </div>
+        <div v-show="showStatusBar" ref="statusBar" class="layout">
+            <div v-html="statusBar"></div>
+        </div>
         <!--canvas :style="canvasStyle2" ref="canvas2" class="canvas" @mousedown.prevent.stop="onMouseDown" @mouseup.prevent.stop="onMouseUp"
             @wheel.prevent.stop="onMouseWheel"
             @touchstart.stop="onTouchStart" @touchend.stop="onTouchEnd" @touchcancel.prevent.stop="onTouchCancel"
@@ -40,8 +43,10 @@ export default @Component({
 })
 class TextPage extends Vue {
     activeCanvas = false;
+    showStatusBar = false;
     page1 = null;
     page2 = null;
+    statusBar = null;
 
     lastBook = null;
     bookPos = 0;
@@ -72,6 +77,10 @@ class TextPage extends Vue {
             this.prepareNextPage();
         }, 100);
 
+        this.debouncedDrawStatusBar = _.throttle(() => {
+            this.drawStatusBar();
+        }, 60);        
+
         this.$root.$on('resize', () => {this.$nextTick(this.onResize)});
         this.mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
     }
@@ -118,6 +127,11 @@ class TextPage extends Vue {
         this.drawHelper.backgroundColor = this.backgroundColor;
         this.drawHelper.statusBarColor = this.statusBarColor;
         this.drawHelper.fontName = this.fontName;
+        this.drawHelper.measureText = this.measureText;
+        this.drawHelper.measureTextFont = this.measureTextFont;
+
+        this.$refs.statusBar.style.left = '0px';
+        this.$refs.statusBar.style.top = (this.statusBarTop ? 1 : this.realHeight - this.statusBarHeight) + 'px';
     }
 
     measureText(text, style) {// eslint-disable-line no-unused-vars
@@ -125,6 +139,11 @@ class TextPage extends Vue {
         return this.context.measureText(text).width;
     }
 
+    measureTextFont(text, font) {// eslint-disable-line no-unused-vars
+        this.context.font = font;
+        return this.context.measureText(text).width;
+    }
+
     async loadFonts() {
         let loaded = await Promise.all(this.fontList.map(font => document.fonts.check(font)));
         if (loaded.some(r => !r)) {
@@ -153,7 +172,7 @@ class TextPage extends Vue {
         this.backgroundColor = '#478355';
         this.fontStyle = '';// 'bold','italic'
         this.fontSize = 35;// px
-        this.fontName = 'Arial';
+        this.fontName = 'ComicSansMS';
         this.lineInterval = 7;// px, межстрочный интервал
         this.textAlignJustify = true;// выравнивание по ширине
         this.p = 50;// px, отступ параграфа
@@ -201,7 +220,7 @@ class TextPage extends Vue {
                 await this.loadFonts();
 
                 this.draw();
-                //this.refreshTime();
+                this.refreshTime();
             })();
         }
     }
@@ -259,6 +278,8 @@ class TextPage extends Vue {
             this.currentTransition = '';
             this.pageChangeDirectionDown = false;//true только если PgDown
         }
+
+        this.debouncedDrawStatusBar();
     }
 
     drawPage(bookPos, nextChangeLines) {
@@ -356,23 +377,19 @@ class TextPage extends Vue {
         }
 
         out += '</div>';
-
-        //this.drawStatusBar(context, lines);
         return out;
     }
 
-    /*drawStatusBar(context, lines) {
+    drawStatusBar() {
-        if (!lines)
+        if (this.showStatusBar && this.linesDown) {
-            lines = this.linesDown;
+            const lines = this.linesDown;
-
-        if (this.showStatusBar) {
             let i = this.pageLineCount;
             if (this.keepLastToFirst)
                 i--;
             i = (i > lines.length - 1 ? lines.length - 1 : i);
 
-            this.drawHelper.drawStatusBar(context, this.statusBarTop, this.statusBarHeight, 
+            this.statusBar = this.drawHelper.drawStatusBar(this.statusBarTop, this.statusBarHeight, 
-                this.statusBarColor, lines[i].end, this.parsed.textLength, this.title);
+                lines[i].end, this.parsed.textLength, this.title);
         }
     }
 
@@ -382,12 +399,12 @@ class TextPage extends Vue {
             await sleep(60*1000);
 
             if (this.book && this.parsed.textLength) {
-                this.drawStatusBar(this.context);
+                this.debouncedDrawStatusBar();
             }
             this.timeRefreshing = false;
             this.refreshTime();
         }
-    }*/
+    }
 
     prepareNextPage() {
         // подготовка следующей страницы заранее