Доделки

client/components/Reader/TextPage/DrawHelper.js

@@ -21,8 +21,8 @@ export default class DrawHelper {
         
         if (w1 + w2 + w3 <= w && w3 > (10 + fh2)) {
             const barWidth = w - w1 - w2 - fh2;
-            out += this.strokeRect(x + w1, y + pad - 2, barWidth, fh - 4, this.statusBarColor);
-            out += this.fillRect(x + w1 + 2, y + pad, (barWidth - 4)*read, fh - 6, this.statusBarColor);
+            out += this.strokeRect(x + w1, y + pad, barWidth, fh - 2, this.statusBarColor);
+            out += this.fillRect(x + w1 + 2, y + pad + 2, (barWidth - 4)*read, fh - 6, this.statusBarColor);
         }
 
         if (w1 <= w)
@@ -37,10 +37,10 @@ export default class DrawHelper {
             `width: ${this.realWidth}px; height: ${statusBarHeight}px; ` + 
             `color: ${this.statusBarColor}; background-color: ${this.backgroundColor}">`;
 
-        const fontSize = statusBarHeight - 6;
+        const fontSize = statusBarHeight*0.75;
         const font = 'bold ' + this.fontBySize(fontSize);
 
-        out += this.fillRect(0, (statusBarTop ? statusBarHeight : 1), this.realWidth, 1, this.statusBarColor);
+        out += this.fillRect(0, (statusBarTop ? statusBarHeight : 0), this.realWidth, 1, this.statusBarColor);
 
         const date = new Date();
         const time = `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
@@ -55,6 +55,12 @@ export default class DrawHelper {
         return out;
     }
 
+    statusBarClickable(statusBarTop, statusBarHeight) {
+        return `<div class="layout" style="position: absolute; ` + 
+            `left: 0px; top: ${statusBarTop ? 1 : this.realHeight - statusBarHeight + 1}px; ` +
+            `width: ${this.realWidth/2}px; height: ${statusBarHeight}px; cursor: pointer"></div>`;
+    }
+
     fittingString(str, maxWidth, font) {
         let w = this.measureTextFont(str, font);
         const ellipsis = '…';
@@ -71,12 +77,13 @@ export default class DrawHelper {
         }
     }
 
-    fillTextShift(text, x, y, font, size) {
-        return this.fillText(text, x, y + size*this.fontShift, font);        
+    fillTextShift(text, x, y, font, size, css) {
+        return this.fillText(text, x, y + size*this.fontShift, font, css);        
     }
 
-    fillText(text, x, y, font) {
-        return `<div style="position: absolute; left: ${x}px; top: ${y}px; font: ${font}">${text}</div>`;
+    fillText(text, x, y, font, css) {
+        css = (css ? css : '');
+        return `<div style="position: absolute; left: ${x}px; top: ${y}px; font: ${font}; ${css}">${text}</div>`;
     }
 
     fillRect(x, y, w, h, color) {
@@ -86,6 +93,6 @@ export default class DrawHelper {
 
     strokeRect(x, y, w, h, color) {
         return `<div style="position: absolute; left: ${x}px; top: ${y}px; ` +
-            `width: ${w}px; height: ${h}px; border: 1px solid ${color}"></div>`; 
+            `width: ${w}px; height: ${h}px; box-sizing: border-box; border: 1px solid ${color}"></div>`; 
     }
 }

client/components/Reader/TextPage/TextPage.vue

@@ -1,5 +1,5 @@
 <template>
-    <div ref="main" class="main" @click.capture="onMouseClick">
+    <div ref="main" class="main">
         <div v-show="activeCanvas" class="layout">
             <div v-html="page1"></div>
         </div>
@@ -9,15 +9,12 @@
         <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"
-            oncontextmenu="return false;">
-        </canvas-->
         <div ref="layoutEvents" class="layout events" @mousedown.prevent.stop="onMouseDown" @mouseup.prevent.stop="onMouseUp"
             @wheel.prevent.stop="onMouseWheel"
             @touchstart.stop="onTouchStart" @touchend.stop="onTouchEnd" @touchcancel.prevent.stop="onTouchCancel"
             oncontextmenu="return false;">
+            <div v-show="showStatusBar" v-html="statusBarClickable" @mousedown.prevent.stop @touchstart.stop
+                @click.prevent.stop="onStatusBarClick"></div>
         </div>
         <canvas ref="offscreenCanvas" style="display: none"></canvas>
     </div>
@@ -47,6 +44,7 @@ class TextPage extends Vue {
     page1 = null;
     page2 = null;
     statusBar = null;
+    statusBarClickable = null;
 
     lastBook = null;
     bookPos = 0;
@@ -134,6 +132,8 @@ class TextPage extends Vue {
 
         this.$refs.statusBar.style.left = '0px';
         this.$refs.statusBar.style.top = (this.statusBarTop ? 1 : this.realHeight - this.statusBarHeight) + 'px';
+
+        this.statusBarClickable = this.drawHelper.statusBarClickable(this.statusBarTop, this.statusBarHeight);
     }
 
     measureText(text, style) {// eslint-disable-line no-unused-vars
@@ -169,7 +169,7 @@ class TextPage extends Vue {
         this.fontShifts = {//%
             ReaderDefault: 0,
             Arial: 5,
-            ComicSansMS: -10,
+            ComicSansMS: -12,
             OpenSans: 0,
             Roboto: 0,
             ArialNarrow: 0,
@@ -623,27 +623,8 @@ class TextPage extends Vue {
         }
     }
 
-    checkPointInStatusBar(pointX, pointY) {
-        let titleBar = {x1: 0, y1: 0, x2: this.realWidth/2, y2: this.statusBarHeight + 1};
-        if (!this.statusBarTop) {
-            titleBar.y1 += this.realHeight - this.statusBarHeight + 1;
-            titleBar.y2 += this.realHeight - this.statusBarHeight + 1;
-        }
-
-        if (pointX >= titleBar.x1 && pointX <= titleBar.x2 &&
-            pointY >= titleBar.y1 && pointY <= titleBar.y2) {
-            return true;
-        }
-        return false;
-    }
-
-    onMouseClick(event) {
-        if (this.showStatusBar && this.book) {
-            if (this.checkPointInStatusBar(event.offsetX, event.offsetY)) {
-                window.open(this.meta.url, '_blank');
-                return false;
-            }
-        }
+    onStatusBarClick() {
+        window.open(this.meta.url, '_blank');
     }
 
     handleClick(pointX, pointY) {
@@ -653,12 +634,6 @@ class TextPage extends Vue {
             100: {30: 'PgUp', 100: 'PgDown'}
         };
 
-        if (this.showStatusBar && this.book) {
-            if (this.checkPointInStatusBar(pointX, pointY)) {
-                return false;
-            }
-        }
-        
         const w = pointX/this.realWidth*100;
         const h = pointY/this.realHeight*100;