deadcxap/liberama
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Доделки

Browse Source
This commit is contained in:
Book Pauk
2019-01-24 21:59:06 +07:00
parent 5031f6401b
commit 0e4ba39fbf
2 changed files with 25 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
client/components/Reader/TextPage/DrawHelper.js
View File

@@ -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>`;
}
}

43
client/components/Reader/TextPage/TextPage.vue
View File

@@ -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;