Перевел статус-бар на дивы
This commit is contained in:
Book Pauk
@@ -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);
|
||||
context.fillRect(x + w1 + 2, y + pad + 3, (barWidth - 4)*read, fh - 6);
|
||||
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);
|
||||
}
|
||||
|
||||
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) {
|
||||
const y = (statusBarTop ? 1 : this.realHeight - statusBarHeight);
|
||||
drawStatusBar(statusBarTop, statusBarHeight, bookPos, textLength, title) {
|
||||
|
||||
context.fillStyle = this.backgroundColor;
|
||||
context.fillRect(0, y, this.realWidth, statusBarHeight);
|
||||
let out = `<div class="layout" style="` +
|
||||
`width: ${this.realWidth}px; height: ${statusBarHeight}px; ` +
|
||||
`color: ${this.statusBarColor}; background-color: ${this.backgroundColor}">`;
|
||||
|
||||
context.font = 'bold ' + this.fontBySize(statusBarHeight - 6);
|
||||
context.fillStyle = statusBarColor;
|
||||
context.strokeStyle = statusBarColor;
|
||||
const fontSize = statusBarHeight - 6;
|
||||
const font = 'bold ' + this.fontBySize(fontSize);
|
||||
|
||||
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 timeW = context.measureText(time).width;
|
||||
context.fillText(time, this.realWidth - timeW, y + statusBarHeight - 2);
|
||||
const timeW = this.measureTextFont(time, font);
|
||||
out += this.fillText(time, this.realWidth - timeW - fontSize, 3, font);
|
||||
|
||||
title = ' ' + title;
|
||||
context.fillText(this.fittingString(context, title, this.realWidth/2 - 3), 0, y + statusBarHeight - 2);
|
||||
out += this.fillText(this.fittingString(title, this.realWidth/2 - fontSize - 3, font), fontSize, 3, font);
|
||||
|
||||
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) {
|
||||
let w = context.measureText(str).width;
|
||||
fittingString(str, maxWidth, font) {
|
||||
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';
|
||||
this.context2.textAlign = 'left';
|
||||
this.context1.textBaseline = 'bottom';
|
||||
this.context2.textBaseline = 'bottom';*/
|
||||
return `<div style="position: absolute; left: ${x}px; top: ${y}px; font: ${font}">${text}</div>`;
|
||||
return `<div style="position: absolute; border: 1px solid black; left: ${x}px; top: ${y}px; font: ${font}">${text}</div>`;
|
||||
}
|
||||
|
||||
fillRect(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; 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>`;
|
||||
}
|
||||
}
|
||||
@@ -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) {
|
||||
if (!lines)
|
||||
lines = this.linesDown;
|
||||
|
||||
if (this.showStatusBar) {
|
||||
drawStatusBar() {
|
||||
if (this.showStatusBar && this.linesDown) {
|
||||
const lines = this.linesDown;
|
||||
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.statusBarColor, lines[i].end, this.parsed.textLength, this.title);
|
||||
this.statusBar = this.drawHelper.drawStatusBar(this.statusBarTop, this.statusBarHeight,
|
||||
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() {
|
||||
// подготовка следующей страницы заранее
|
||||
|
||||
Reference in New Issue
Block a user