Параметры скроллинга в настройки

client/components/Reader/SettingsPage/SettingsPage.vue

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

client/components/Reader/TextPage/TextPage.vue

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

client/store/modules/reader.js

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