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-02-01 01:07:09 +07:00
parent 945d69ab8f
commit 43f675eb6b
3 changed files with 80 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
client/components/Reader/SettingsPage/SettingsPage.vue
View File

@@ -28,34 +28,34 @@
<div class="partHeader">Шрифт</div> <div class="partHeader">Шрифт</div>
<el-form-item label="Локальный/веб"> <el-form-item label="Локальный/веб">
<el-col :span="11"> <el-col :span="11">
<el-select v-model="fontName" placeholder="Шрифт" :disabled="webFontName != ''"> <el-select v-model="fontName" placeholder="Шрифт" :disabled="webFontName != ''">
<el-option v-for="item in fonts" <el-option v-for="item in fonts"
:key="item.name"
:label="item.label"
:value="item.name">
</el-option>
</el-select>
</el-col>
<el-col :span="1">
&nbsp;
</el-col>
<el-col :span="11">
<el-tooltip :open-delay="500" effect="light" placement="top">
<template slot="content">
Веб шрифты дают большое разнообразие,<br>
однако есть шанс, что шрифт будет загружаться<br>
очень медленно или вовсе не загрузится
</template>
<el-select v-model="webFontName">
<el-option label="Нет" value=""></el-option>
<el-option v-for="item in webFonts"
:key="item.name" :key="item.name"
:label="item.label"
:value="item.name"> :value="item.name">
</el-option> </el-option>
</el-select> </el-select>
</el-col> </el-tooltip>
<el-col :span="1"> </el-col>
&nbsp;
</el-col>
<el-col :span="11">
<el-tooltip :open-delay="500" effect="light" placement="top">
<template slot="content">
Веб шрифты дают большое разнообразие,<br>
однако есть шанс, что шрифт будет загружаться<br>
очень медленно или вовсе не загрузится
</template>
<el-select v-model="webFontName">
<el-option label="Нет" value=""></el-option>
<el-option v-for="item in webFonts"
:key="item.name"
:value="item.name">
</el-option>
</el-select>
</el-tooltip>
</el-col>
</el-form-item> </el-form-item>
<el-form-item label="Размер"> <el-form-item label="Размер">
<el-col :span="17"> <el-col :span="17">
@@ -66,14 +66,14 @@
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item label="Сдвиг"> <el-form-item label="Сдвиг">
<el-tooltip :open-delay="500" effect="light"> <el-tooltip :open-delay="500" effect="light">
<template slot="content"> <template slot="content">
Сдвиг шрифта по вертикали в процентах от размера.<br> Сдвиг шрифта по вертикали в процентах от размера.<br>
Отрицательное значение сдвигает вверх, положительное -<br> Отрицательное значение сдвигает вверх, положительное -<br>
вниз. Значение зависит от метрики шрифта. вниз. Значение зависит от метрики шрифта.
</template> </template>
<el-input-number v-model="vertShift" :min="-100" :max="100"></el-input-number> <el-input-number v-model="vertShift" :min="-100" :max="100"></el-input-number>
</el-tooltip> </el-tooltip>
</el-form-item> </el-form-item>
<el-form-item label="Стиль"> <el-form-item label="Стиль">
@@ -117,14 +117,46 @@
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item label="Сдвиг"> <el-form-item label="Сдвиг">
<el-tooltip :open-delay="500" effect="light"> <el-tooltip :open-delay="500" effect="light">
<template slot="content"> <template slot="content">
Сдвиг текста по вертикали в процентах от размера шрифта.<br> Сдвиг текста по вертикали в процентах от размера шрифта.<br>
Отрицательное значение сдвигает вверх, положительное -<br> Отрицательное значение сдвигает вверх, положительное -<br>
вниз. Менять, как правило, не требуется. вниз. Менять, как правило, не требуется.
</template> </template>
<el-input-number v-model="textVertShift" :min="-100" :max="100"></el-input-number> <el-input-number v-model="textVertShift" :min="-100" :max="100"></el-input-number>
</el-tooltip> </el-tooltip>
</el-form-item>
<el-form-item label="Скроллинг">
<el-col :span="11">
<el-tooltip :open-delay="500" effect="light">
<template slot="content">
Замедление скроллинга в миллисекундах.<br>
Определяет время, за которое текст<br>
прокручивается на одну строку.
</template>
<el-input-number v-model="scrollingDelay" :min="0" :max="10000"></el-input-number>
</el-tooltip>
</el-col>
<el-col :span="1">
&nbsp;
</el-col>
<el-col :span="11">
<el-tooltip :open-delay="500" effect="light">
<template slot="content">
Вид скроллинга: линейный,<br>
ускорение-замедление и пр.
</template>
<el-select v-model="scrollingType">
<el-option value="linear"></el-option>
<el-option value="ease"></el-option>
<el-option value="ease-in"></el-option>
<el-option value="ease-out"></el-option>
<el-option value="ease-in-out"></el-option>
</el-select>
</el-tooltip>
</el-col>
</el-form-item> </el-form-item>
<el-form-item label="Выравнивание"> <el-form-item label="Выравнивание">
<el-checkbox v-model="textAlignJustify">По ширине</el-checkbox> <el-checkbox v-model="textAlignJustify">По ширине</el-checkbox>

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

@@ -404,9 +404,9 @@ class TextPage extends Vue {
const transitionFinish = (timeout) => { const transitionFinish = (timeout) => {
return new Promise(async(resolve) => { return new Promise(async(resolve) => {
this.resolveTransitionFinish = resolve; this.resolveTransitionFinish = resolve;
let steps = timeout/100; let wait = timeout/100;
while (steps > 0 && !this.stopScrolling) { while (wait > 0 && !this.stopScrolling) {
steps--; wait--;
await sleep(100); await sleep(100);
} }
resolve(); resolve();
@@ -421,7 +421,7 @@ class TextPage extends Vue {
const page = this.$refs.scrollingPage; const page = this.$refs.scrollingPage;
let i = 0; let i = 0;
while (!this.stopScrolling) { while (!this.stopScrolling) {
page.style.transition = 'all 2s linear 0s'; page.style.transition = `${this.scrollingDelay}ms ${this.scrollingType}`;
page.style.transform = `translateY(-${this.lineHeight}px)`; page.style.transform = `translateY(-${this.lineHeight}px)`;
if (i > 0) { if (i > 0) {
@@ -431,14 +431,12 @@ class TextPage extends Vue {
this.stopScrolling = true; this.stopScrolling = true;
} }
} }
await transitionFinish(2500); await transitionFinish(this.scrollingDelay + 201);
page.style.transition = ''; page.style.transition = '';
page.style.transform = 'none'; page.style.transform = 'none';
page.offsetHeight; page.offsetHeight;
i++; i++;
} }
page.style.transition = '';
page.style.transform = 'none';
this.resolveTransitionFinish = null; this.resolveTransitionFinish = null;
this.doingScrolling = false; this.doingScrolling = false;
} }

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

@@ -148,6 +148,9 @@ const settingDefaults = {
statusBarHeight: 19,// px statusBarHeight: 19,// px
statusBarColorAlpha: 0.4, statusBarColorAlpha: 0.4,
scrollingDelay: 3000,// замедление, ms
scrollingType: 'ease-in-out', //linear, ease, ease-in, ease-out, ease-in-out
pageChangeTransition: '',// '' - нет, downShift, rightShift, thaw - протаивание, blink - мерцание pageChangeTransition: '',// '' - нет, downShift, rightShift, thaw - протаивание, blink - мерцание
pageChangeTransitionSpeed: 50, //0-100% pageChangeTransitionSpeed: 50, //0-100%