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
2021-02-09 15:46:57 +07:00
parent 52f9131f99
commit 65c66e0feb
5 changed files with 71 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
client/components/Reader/SettingsPage/include/ViewTab/Mode.inc
View File

@@ -90,4 +90,11 @@
</div>
</div>
<div class="item row">
<div class="label-2">Ширина тени</div>
<div class="col row">
<NumInput class="col-left" v-model="dualDivShadowWidth" :min="0" :max="100"/>
</div>
</div>
</div>

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

@@ -132,7 +132,7 @@ export default class DrawHelper {
const boxH = this.h + (isScrolling ? this.lineHeight : 0);
let out = `<div class="row no-wrap" 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; vertical-align: middle;">`;
` line-height: ${this.lineHeight}px; white-space: nowrap;">`;
let imageDrawn1 = new Set();
let imageDrawn2 = new Set();
@@ -182,7 +182,7 @@ export default class DrawHelper {
//разделитель
out += `<div style="width: ${this.dualIndentLR*2}px; top: ${-this.fontSize*this.textShift}px; position: relative">` +
`<div class="fit row justify-center items-center">` +
`<div style="height: ${Math.round(boxH*this.dualDivHeight/100)}px; width: ${this.dualDivWidth}px;` +
`<div style="height: ${Math.round(boxH*this.dualDivHeight/100)}px; width: ${this.dualDivWidth}px; box-shadow: 0 0 ${this.dualDivShadowWidth}px ${this.dualDivColor}; ` +
`background-image: url(&quot;data:image/svg+xml;utf8,<svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'>` +
//`<rect width='100%' height='100%' style='fill: none; stroke: white; stroke-width: 4; stroke-dasharray: 5 20'/>` +
`<line x1='0' y1='0' x2='0' y2='100%' stroke='${this.dualDivColor}' stroke-width='100%' stroke-dasharray='${this.dualDivStrokeFill} ${this.dualDivStrokeGap}'/>` +

54
client/components/Reader/TextPage/TextPage.css Normal file
View File

@@ -0,0 +1,54 @@
.paper1 {
background: url("images/paper1.jpg") center;
background-size: cover;
}
.paper2 {
background: url("images/paper2.jpg") center;
background-size: cover;
}
.paper3 {
background: url("images/paper3.jpg") center;
background-size: cover;
}
.paper4 {
background: url("images/paper4.jpg") center;
background-size: cover;
}
.paper5 {
background: url("images/paper5.jpg") center;
background-size: cover;
}
.paper6 {
background: url("images/paper6.jpg") center;
background-size: cover;
}
.paper7 {
background: url("images/paper7.jpg") center;
background-size: cover;
}
.paper8 {
background: url("images/paper8.jpg") center;
background-size: cover;
}
.paper9 {
background: url("images/paper9.jpg");
}
@keyframes page1-animation-thaw {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes page2-animation-thaw {
0% { opacity: 1; }
100% { opacity: 0; }
}

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

@@ -27,7 +27,7 @@
<div v-show="!clickControl && showStatusBar && statusBarClickOpen" class="layout" v-html="statusBarClickable" @mousedown.prevent.stop @touchstart.stop
@click.prevent.stop="onStatusBarClick">
</div>
<!-- невидимым делать нельзя, вовремя не подгружаютя шрифты -->
<!-- невидимым делать нельзя (display: none), вовремя не подгружаютя шрифты -->
<canvas ref="offscreenCanvas" class="layout" style="visibility: hidden"></canvas>
<div ref="measureWidth" style="position: absolute; visibility: hidden"></div>
</div>
@@ -40,6 +40,8 @@ import Component from 'vue-class-component';
import {loadCSS} from 'fg-loadcss';
import _ from 'lodash';
import './TextPage.css';
import * as utils from '../../../share/utils';
import bookManager from '../share/bookManager';
import DrawHelper from './DrawHelper';
@@ -200,6 +202,7 @@ class TextPage extends Vue {
this.drawHelper.dualDivColor = this.hex2rgba(this.textColor || '#000000', this.dualDivColorAlpha);
this.drawHelper.dualDivStrokeFill = this.dualDivStrokeFill;
this.drawHelper.dualDivStrokeGap = this.dualDivStrokeGap;
this.drawHelper.dualDivShadowWidth = this.dualDivShadowWidth;
this.drawHelper.backgroundColor = this.backgroundColor;
this.drawHelper.statusBarColor = this.statusBarColor;
@@ -1190,60 +1193,3 @@ class TextPage extends Vue {
}
</style>
<style>
.paper1 {
background: url("images/paper1.jpg") center;
background-size: cover;
}
.paper2 {
background: url("images/paper2.jpg") center;
background-size: cover;
}
.paper3 {
background: url("images/paper3.jpg") center;
background-size: cover;
}
.paper4 {
background: url("images/paper4.jpg") center;
background-size: cover;
}
.paper5 {
background: url("images/paper5.jpg") center;
background-size: cover;
}
.paper6 {
background: url("images/paper6.jpg") center;
background-size: cover;
}
.paper7 {
background: url("images/paper7.jpg") center;
background-size: cover;
}
.paper8 {
background: url("images/paper8.jpg") center;
background-size: cover;
}
.paper9 {
background: url("images/paper9.jpg");
}
@keyframes page1-animation-thaw {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes page2-animation-thaw {
0% { opacity: 1; }
100% { opacity: 0; }
}
</style>

7
client/store/modules/reader.js
View File

@@ -228,11 +228,12 @@ const settingDefaults = {
dualPageMode: false,
dualIndentLR: 10,// px, отступ слева и справа внутри страницы в двухстраничном режиме
dualDivWidth: 4,// px, ширина разделителя
dualDivHeight: 96,// процент, высота разделителя
dualDivColorAlpha: 1,// прозрачность разделителя
dualDivWidth: 2,// px, ширина разделителя
dualDivHeight: 100,// процент, высота разделителя
dualDivColorAlpha: 0.7,// прозрачность разделителя
dualDivStrokeFill: 1,// px, заполнение пунктира
dualDivStrokeGap: 1,// px, промежуток пунктира
dualDivShadowWidth: 0,// px, ширина тени
showStatusBar: true,
statusBarTop: false,// top, bottom